Как обрабатывать несколько кнопок отправки в форме с JQuery?

Question

Мне нужно создать 30 кнопок от 1 до 30, при этом каждая из них вызывает один и тот же сценарий действия (например, все в одной форме), где параметр, который передается в сценарий действия, представляет собой просто число нажатой кнопки. (От 1 до 30).

Например, скажем, сценарий действия - process.php, если нажата кнопка 3, мне нужно извлечь данные из process.php? Btn = 3, а если нажата кнопка 27, мне нужно извлечь данные form process.php? btn = 27.

Какой самый простой и простой способ сделать это с помощью JQuery?

Спасибо!

Answer 1

Что-то вроде этого должно сделать это.Функция beforeSend просто показывает, что отправляется на сервер.

$('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;
        }
    });  
});

РЕДАКТИРОВАТЬ: http://jsfiddle.net/EvilAmarant7x/NhMnP/

Answer 2

Если вы дадите всем своим ссылкам класс .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>
...

Это, кажется, тот тип вещей, который лучше всего делать на стороне сервера, например, когда сервер рендерит каждый href с правильными значениями параметров. Я предполагаю , что не вариант в вашем случае.

РЕДАКТИРОВАТЬ: Асинхронность, как запрошено:

$("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>
...

См. $.load и $.ajax.