Passing the parent form on the onclick event to javascript function

Question

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>

Faisal Sayed · Accepted Answer · 2012-12-18 05:02:04Z

6

Your 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.

edited Dec 18, 2012 at 5:02

answered Dec 18, 2012 at 4:50

Faisal Sayed

7934 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Ankit Over a year ago

Better is to give your form a name and then use document.formName.ip.value

user1051505 Over a year ago

Point is there could be n number of dynamic forms like this. document.forms[0].ip.value would be like knowing which form i want to send. I want to pass the form parent to the anchor tag. How do i do it?

Sami Ullah Over a year ago

This is what I'm looking for, but the confusion is, how to get 'formID' on the 'document.js' file? please help. Thanks

Alex Nolasco · Accepted Answer · 2020-04-15 16:17:59Z

1

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>

edited Apr 15, 2020 at 16:17

answered Apr 15, 2020 at 16:04

Alex Nolasco

19.6k9 gold badges90 silver badges85 bronze badges

Comments

Ming-Tang · Accepted Answer · 2012-12-18 04:54:52Z

0

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.

answered Dec 18, 2012 at 4:54

Ming-Tang

17.7k8 gold badges40 silver badges78 bronze badges

5 Comments

user1051505 Over a year ago

Point is there could be n number of dynamic forms like this. I want to pass the form parent to the anchor tag. How do i do it?

Ming-Tang Over a year ago

If there are many dynamic forms, then you should not use id="ip" since ids must be unique

Faisal Sayed Over a year ago

@user1051505 You can use this.form in that case. See edit of my answer.

Ming-Tang Over a year ago

Generate dynamic ids can work. id="form1_ip", id="form2_ip"

user1051505 Over a year ago

@FaisalSayed : I am searching for this.form only. Where exactly do you mean to use it?

Pratik Mandrekar · Accepted Answer · 2012-12-18 05:59:53Z

0

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
});

edited Dec 18, 2012 at 5:59

answered Dec 18, 2012 at 5:48

Pratik Mandrekar

9,5764 gold badges49 silver badges67 bronze badges

Comments

AlexLit · Accepted Answer · 2015-03-28 17:41:52Z

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>

Collectives™ on Stack Overflow

Passing the parent form on the onclick event to javascript function

5 Answers 5

3 Comments

Comments

5 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

Comments

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related