CODEWITHSUNDEEP
javascriptasp-classic
Emma
Emma

Reputation: 562

Get value of form text field with without submitting the form

I have a form on my page and want to be able to submit the text box value (partnumber) as a query string in a hyperlink without submitting the form itself ? Is this possible ? I have done some research and have tried document.getElementById("partnumber").value but am getting the error "Object Required". Code Below.

 <form id="form3" name="form3" method="post" action="formpost?rmaid=<%=rmaid%>">
    <input name="partnumber" type="text" id="partnumber" size="10" />
<a href="suggest.asp?partnumber=<%document.getElementById("partnumber").value%>"><span class="style11">Suggest Link</span></a>
<input name="invoice" type="text" id="invoice" size="15" />
</form>

I'll set the new page to open in a pop up window and list a series of values in the database but then I need the value selected to come back into the invoice field on the original page. I believe this can be done with JavaScript but I am new to this, can anyone help ?

For those Looking to pass values back I have found this snippet that works... Put this in the child window

<script language="javascript"> 
function changeParent() { 
  window.opener.document.getElementById('Invoice').value="Value changed..";
  window.close();
} 
</script> 

<form> 
<input type=button onclick="javascript:changeParent()" value="Change opener's textbox's value.."> 
</form>

Upvotes: 1

Views: 4806

Answers (1)

KHeaney
KHeaney

Reputation: 785

For the input field you should add an OnChange to it. This event should call a function which will then set your link's value.

You can see an example of this here (it uses a button press though and not an input OnChange Event): http://www.java2s.com/Code/JavaScript/HTML/ChangeURLandtextofahyperlink.htm

Edit: Added a Stack Snippet illustrating the solution.

function SetSuggestLink() {
    var suggest = document.getElementById('partnumber').value;
    document.getElementById('innerSpan').innerHTML = 
        "Suggest Link: suggest.asp?partnumber=" + suggest;
    document.getElementById('QueryLink').href = 
        "suggest.asp?partnumber=" + suggest;
}
.style11 {
  color:black;
}

.style2 {
  text-decoration:none;
}
<form id="form3" name="form3" method="post" action="formpost?rmaid=SomeValue">
    <input name="partnumber" type="text" id="partnumber" size="10" 
           OnChange="SetSuggestLink()" /> </br>
    <a id="QueryLink" class="style2" href="#">
      <span id="innerSpan" class="style11">Suggest Link</span>
    </a></br>
    <input name="invoice" type="text" id="invoice" size="15" />
</form>

Upvotes: 3

Related Questions