CODEWITHSUNDEEP
javascriptjqueryforms
PleaseHelpMe
PleaseHelpMe

Reputation: 739

How to handle several submit buttons in a form with JQuery?

I need to create 30 buttons, from 1 to 30, whereby each one calls the exact same action script (e.g. all under the same form) where the parameter that is passed to the action script is simply the number of the button pressed (1 to 30).

For example, let's say the action script is process.php, if button 3 is pressed, then I need to pull data from process.php?btn=3, and if button 27 is pressed, then I need to pull data form process.php?btn=27.

What is the easiest, most straight-forward way of doing that with JQuery?

Thanks!

Upvotes: 1

Views: 272

Answers (2)

EvilAmarant7x
EvilAmarant7x

Reputation: 2069

Something like this should do it. The beforeSend function is just to show you what is being sent to the server.

$('button').click(function (e) {
    e.preventDefault();
    var number = $('form button').index(this);
    $.ajax('process.php', {
        data: 'number='+ number,
        beforeSend: function (jqHxR, settings) {
            alert(settings.data);
            return false;
        }
    });  
});

EDIT: http://jsfiddle.net/EvilAmarant7x/NhMnP/

Upvotes: 1

karim79
karim79

Reputation: 342635

Assuming you give all of your links the class .number:

$("a.number").click(function(e) {
    e.preventDefault();
    window.location.href = 'process.php?btn=' + $(this).text();
});

<a class="number" href="#">1</a>
<a class="number" href="#">2</a>
...

This seems to be the type of thing that is best done on the server side, as in having the server render each href with the correct param values. I am assuming that is not an option in your case.

EDIT: Asynchrony, as requested:

$("a.number").click(function(e) {
    e.preventDefault();

    // fill up div with ID="results" with content from server
    $("#results").load("process.php", { btn: $(this).text() }, function() {

        // callback to do something once the content has loaded
        // (perhaps not needed)

    });
});

<div id="results"></div>
...
<a class="number" href="#">1</a>
<a class="number" href="#">2</a>
...

See $.load and $.ajax.

Upvotes: 1

Related Questions