Send through input value to javascript function

Question

I have a form like below:

<form onsubmit="doSomething(this.form);">
    <input type="text" name="groupName" />
    <input type="text" name="groupColour" />
</form>

Now this doesn't have a submit button, I know. Instead, when the user hits the enter key I want it to trigger a function. In this example doSomething.

Now in the function I will performing an AJAX request to insert a record to the database, however I'm not sure how to access the value that was entered in the text fields in my AJAX function doSomething.

How do I pass to my function the values of the form when submitted?

depends if you are using jquery or not, but query the textboxes you want to pull the data from, then either use pure javascript has method .value or jquery has .val() for getting the input value — Georgette Pincin
– Georgette Pincin, Commented Sep 5, 2015 at 13:32

Artur Filipiak · Accepted Answer · 2015-09-05 13:54:40Z

1

Don't use onsubmit attribute. Divide your HTML and javascript and handle form submission using jQuery.

$("form").on('keypress', function(event){
    // if the key is "enter":
    if(event.which == 13) {
        // trigger AJAX:
        $.ajax({
            url     : 'post-page.php',
            type    : 'post',
            // serialize the form (all the form fields will be posted to PHP):
            data    : $(this).serialize(),
            success : function(response){
                // handle server response...
            }
        });
    }
});

edited Sep 5, 2015 at 13:54

answered Sep 5, 2015 at 13:40

Artur Filipiak

9,1874 gold badges33 silver badges56 bronze badges

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

Comments

Community · Accepted Answer · 2017-05-23 11:58:03Z

1

Try this it works.. Do this tricky :-)

<form onsubmit="doSomething();">

    <input type="text" name="groupName" />

    <input type="text" name="groupColour" />

   <input type="submit" 
   style="position: absolute; left: -9999px; width: 1px; height: 1px;"
   tabindex="-1" />

</form>

edited May 23, 2017 at 11:58

CommunityBot

11 silver badge

answered Sep 5, 2015 at 13:32

Aravinthan K

1,9012 gold badges20 silver badges24 bronze badges

Comments

Zakaria Acharki · Accepted Answer · 2015-09-05 13:35:22Z

1

HTML & JQuery fiddle

Because you're using jquery and you want to use ajax request, you can use keypress function instead of form and submit :

HTML :

<input type="text" id="groupName" />
<input type="text" id="groupColour" />

JS :

$(document).keypress(function(e) {
    if(e.which == 13) { //When you pressed enter!
        var name = $('#groupName').val();
        var color = $('#groupColour').val();

        $.post('insert.php',{name: name, color: color});
    }
});

PHP (insert.php) :

$name = $_POST['name'];  //Get name
$color = $_POST['color'];  //Get color

//Now you can use $name & $color in insert Query here

Hope this helps.

edited Sep 5, 2015 at 13:35

answered Sep 5, 2015 at 13:29

Zakaria Acharki

67.5k15 gold badges79 silver badges106 bronze badges

Comments

kurt · Accepted Answer · 2015-09-05 13:40:58Z

1

Heres a easy way..

document.onkeypress =function (e) {
    if (e.keyCode == 13) {
       alert(document.forms['myform'].elements['myinput'].value);
    }
};

<body>
  <form name="myform">
    <input name="myinput" type="text" value="awesome">
    </form>
  </body>

answered Sep 5, 2015 at 13:40

kurt

1,1561 gold badge8 silver badges18 bronze badges

Collectives™ on Stack Overflow

Send through input value to javascript function

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related