How can I dynamically change a link based upon an input field in a form. For example, if I input 1.00 into the input field, I want to change the link to this:
donate.php?amount=1.00
Where the amount changes to the amount specified in the input field.
I'm guessing its JavaScript which isn't my strongest point but any help would be awesome. :)
Thanks
markup:
<input type="text" id="amount" onkeyup="changeLink(this);" />
<a href="donate.php?amount=0.0" id="donateLink"> donate now! </a>
Javascript:
function changeLink(inputElement)
{
$('#donateLink').attr("href","donate.php?amount="+inputElement.value);
//console.log($('#donateLink').attr("href"));
}
This can be done with html forms:
<form action="donate.php" method="GET" id="donateform">
<input type="text" name="amount" />
<input type="submit" value="Donate" />
</form>
You could also have input entered via a drop down list so they don't enter invalid values. Or you could validate the input with javascript. To use a link to submit the form, you can use javascript:
<a href="javascript:document.forms['donateform'].submit();">Donate</a>
You don't need to do anything, just use a form. By using the GET method with a form and naming your input field 'amount', that will already be added to the URL at the time of form submission. Go ahead and try submitting a form when you enter 1.00 into the box. When the page loads, your URL will be donate.php?amount=1.00 like expected. The URL does not need to be changed whatsoever.
If you're using POST, I would merely suggest not doing this. It serves no purpose in that case.
