Get input value inside a form depending on which button is clicked

Question

I've got the following form:

<div>
  <form name="ajaxformname" id="ajaxform" action="/request" method="POST">
    AJAX:
    <input id="btn1" name="feeling" type="submit" value="Fine">
    <input id="btn2" name="feeling" type="submit" value="Neutral">
    <input id="btn3" name="feeling" type="submit" value="Bad">
  </form>
</div>

which should be posted to a server via ajax.

Here is the associated javascript:

$('#ajaxform').submit(function (event) {
    event.preventDefault();
        var form = $(this); 
        var action = form.attr("action"), 
            method = form.attr("method"),
            data = form.attr("value");

    $.ajax({
        url: "/request",
        type: method,
        data: data
    });

Now - depending on which of the three buttons has been clicked - I want their values to be posted to the server. But form.attr("value") just gives me the value of the form but not of the input field.

Any suggestions? A solution would be to create the different forms but that doesn't seems to be DRY ...

`event.target` should give you the element clicked, then just check it's `value` property `event.target.value` — GillesC, Jun 22 '15 at 13:52
possible duplicate of [jQuery: how to get which button was clicked upon form submission?](http://stackoverflow.com/questions/5721724/jquery-how-to-get-which-button-was-clicked-upon-form-submission) — JBux, Jun 22 '15 at 13:53
You are submitting the form by `submit` button as well as ajax? — Varun, Jun 22 '15 at 13:54
You shouldn't use submit buttons for that because anyway you aren't submitting the FORM. IMHO, this would be more relevant: http://jsfiddle.net/v390bers/ or if you want to use button control http://jsfiddle.net/v390bers/1/ — A. Wolff, Jun 22 '15 at 14:04

Sebastián Rojas · Accepted Answer · 2015-06-22T15:10:41.007

First thing, if you wanna use the action attribute of the form, you should reference it in the url param of ajax request:

url: form.attr('action'),

Now, for the button clicked, you should use this (it's a workaround because submit buttons are not incluided in the form serialization, if not, I would use it instead):

$(function () {

    //When any of the buttons is clicked, we store in the form data the clicked button value
    $('#ajaxform').on('click', 'input[type=submit][name=feeling]', function(e) {

        $(this.form).data('clicked', this.value);
    });

    $('#ajaxform').submit(function (event) {

        event.preventDefault();

        var form = $(this);

        $.ajax({
            url: form.attr('action'),
            type: form.attr("method"),
            data: { clickedButton : form.data('clicked') } //Retrieve the button clicked value from the form data
        });
    });
});

Here the working example: https://jsfiddle.net/68qLxLgm/1/

sorry for asking - could you explain the "$(this.form)" to me? what is .form doing exactly? — Bergrebell, Jun 23 '15 at 17:00

score 0 · Answer 2 · answered Jun 22 '15 at 13:55

0

Hi kindly use the following to get the id of the button that has been clicked

$("input").click(function(e){
    var idClicked = e.target.id;
});

answered Jun 22 '15 at 13:55

Robin

471
6
18

Get input value inside a form depending on which button is clicked

2 Answers2