CODEWITHSUNDEEP
javascripthtmldom-events
user1051505
user1051505

Reputation: 962

Passing the parent form on the onclick event to javascript function

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>

Upvotes: 7

Views: 33240

Answers (5)

Alex Nolasco
Alex Nolasco

Reputation: 19466

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>

Upvotes: 1

AlexLit
AlexLit

Reputation: 9

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>

Upvotes: 0

Pratik Mandrekar
Pratik Mandrekar

Reputation: 9568

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

Upvotes: 0

Faisal Sayed
Faisal Sayed

Reputation: 793

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.

Upvotes: 6

Ming-Tang
Ming-Tang

Reputation: 17651

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.

Upvotes: 0

Related Questions