I am trying to pass variables on the onclick event to a Javascript function. I am trying the following way, I can't get the input value in the Javascript function. (I am expecting an alert of 1.) Is it the right way of doing this? Please help.
<html>
<head>
<script>
function submit_value(form) {
alert(form.ip.value);
}
</script>
</head>
<table>
<tr>
<form>
<td>
<input id="ip" type="text" value="1">
</td>
<td>
<a href="javascript:;" onClick="submit_value(this)">Button</a>
</td>
</form>
</tr>
</table>
</html>
I am trying to pass variables on the onclick event to a Javascript function. I am trying the following way, I can't get the input value in the Javascript function. (I am expecting an alert of 1.) Is it the right way of doing this? Please help.
<html>
<head>
<script>
function submit_value(form) {
alert(form.ip.value);
}
</script>
</head>
<table>
<tr>
<form>
<td>
<input id="ip" type="text" value="1">
</td>
<td>
<a href="javascript:;" onClick="submit_value(this)">Button</a>
</td>
</form>
</tr>
</table>
</html>
5 Answers
Reset to default 6Your script doesn't know what form is. You need to specify document.forms[0].ip.value instead.
If there are more than one form on the document then it will be better if you store the form element in variable first. You can have an id on the form for that...
<form id="formID">
and in submit_value function you can have
var myForm = document.getElementById('formID');
alert(myForm.ip.value);
Edit:
You can use this.form for onClick of anchor tag.
We can do it without given the form an Id and without JQuery. See FormData for details.
function test(frm) {
const formData = new FormData(frm);
for (var value of formData.values()) {
console.log(value);
}
}<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="button" value="Submit" onclick="test(this.form)">
</form> Change the function to this:
function submit_value(form) {
alert(document.getElementById('ip').value);
}
When you write submit_value(this), the value of this is actually the element <a> itself, not the form.
I'll assume you can use jquery. Selectors are a lot simple with that.
Change the below form html from
<form>
<td>
<input id="ip" type="text" value="1">
</td>
<td>
<a href="javascript:;" onClick="submit_value(this)">Button</a>
</td>
</form>
to
<form>
<td>
<input id="ip" type="text" value="1">
</td>
<td>
<a href="" class="mySubmitButton">Button</a>
</td>
</form>
And then your JS will look like
$('.mySubmitButton').click(function() {
var inputBox = $(this).prev();
alert(inputBox.val());
return false; //This prevents the default function submit . Similar to event.preventDefault
});
JQuery is everywhere. You do not need JQuery. Why do people forget about DOM object model? He made everything almost in right way:
<head>
<script>
function submit_value() {
alert(document.forms[0].ip.value);
}
</script>
</head>
<table>
<tr>
<form>
<td>
<input name="ip" type="text" value="1">
</td>
<td>
<a href="javascript:;" onClick="submit_value()">Button</a>
</td>
</form>
</tr>
</table>Or you can add Form ID
<head>
<script>
function submit_value() {
alert(document.forms.formid.ip.value);
}
</script>
</head>
<table>
<tr>
<form id='formid'>
<td>
<input name="ip" type="text" value="1">
</td>
<td>
<a href="javascript:;" onClick="submit_value()">Button</a>
</td>
</form>
</tr>
</table>