При AJAX-запросе не посылается кнопка 'submit'
 

У меня есть HTML-форма. На кнопку 'submit' я вешаю обработчик события для посылки это формы по AJAX:

<input type="submit" name="submit" value="submit" onclick="sendForm('myform', 'messagediv'); return false;">

Для AJAX-запроса использую FormData:

function sendForm(formId, messageDivId){
	var formUrl = $('#'+formId).attr('action');
	var formaData = new FormData($('#'+formId)[0]);
	$.ajax({
		type: 'POST',
		url: formUrl,
		data: formaData,
		processData: false,
		contentType: false,
	});
}

К сожалению, само значение кнопки 'submit' при этом по AJAX-у не посылается. Как будто она и не была нажата. Какие способы есть с помощью AJAX отправить значение именно той кнопки 'submit', на которую нажали?

Это понятно. А если у меня на странице несколько кнопок 'submit'? И каждая должна делать свой собственный Ajax-запрос. Какие-то удобные решения есть для таких случаев? Вроде того, что считывается атрибут 'name' кнопки и вставляется в функцию. Только я не знаю, как такое реализуется.

<form id="myform" action="/add.php" method="post" enctype="multipart/form-data">
<input type="hidden" name="myhidden" value="2013">


Ваше имя: <input type="text" name="myname" id="myfile">
<br>

Ваш возраст: <input type="text" name="myage" value="tryr">
<br>

<input type="submit" name="submit" value="submit" onclick="sendWholeForm('myform', 'messagediv'); return false;">

<input type="submit" name="submit_2" value="submit" onclick="sendWholeForm('myform', 'messagediv'); return false;">
</form>

Вот такая форма, ничего сложно. Это основа html-форм. В одной форме может быть две и более кнопок "submit". На сервер посылается только значение той кнопки, которую нажал пользователь, а остальные игнорируются. Мне важно, чтобы при AJAX-е посылалось значение нажатой кнопки submit, так как var formaData = new FormData($('#'+formId)[0]); не берёт из формы ни одного значения из кнопок submit. Вот я и думаю, какое решение можно придумать, чтобы всё работало просто и изящно.

sendForm(this, 'myform', 'messagediv');

function sendForm(button, formId, messageDivId)

formaData.append(button.name, button.value);

А можно ли прям взять и автоматически выцепить button из тега, на который событие ставиться?

Да, при установке обработчика через свойство onclick this будет указывать на элемент:

button.onclick = function sendForm() {
    alert(this instanceof HTMLInputElement); // alerts "true"
};

Через атрибут this тоже указывает на кнопку, чем я и воспользовался в предыдущем коде.

hrundel,

<form id="myForm">
	<input type="hidden" name="myHidden" value="myHiddenValue">
	Ваше имя: <input type="text" name="myName" value="myNameValue"><br>
	Ваш возраст: <input type="text" name="myAge" value="myAgeValue"><br>
	<input type="button" name="myButton1" value="myButton1value">
	<input type="button" name="myButton2" value="myButton2value">
	<input type="button" name="myButton3" value="myButton3value">
</form>

<script>
$('#myForm input[type=button]').click(function() {
	$.ajax({
		type: 'POST',
		url: '/add.php',
		data: $('#myForm').serialize() + '&' + this.name + '=' + this.value,
		success: function(data) {
			console.log(data);
		}
	});
});
</script>

add.php:

<?php echo implode(',', $_POST); ?>

Rise,
большое спасибо! Это то, что нужно было. В конечном варианте у меня получилось так:

$(document).ready(
	function(){
		$('#myform input[type=submit]').each(
			function() {
				$(this).click(function(){
					sendWholeForm('myform', 'messagediv', this);
					return false;
				});
			}
		);
	}

);

Интересное замечание. Действительно так и есть..

Про each().. мне казалось, что $() возвращает массив элементов, поэтому к нему и надо применять each(). Если в форме несколько кнопок submit, то по всем им, наверное, и надо пройтись.

Rise, ну ещё раз спасибо за конструктивные советы :)

скажите, а при использовании события onsubmit определить по нажатию какой из кнопок это произошло, возможно?

еще раз перечитал, нашел только способ, если обработчик вешать на click самих кнопок, но не на submit формы.

winch,

document.forms[0].onsubmit = function(event) {
  alert(event.target.tagName);//form
}

не получишь ты так кнопку...
вешай на клик кнопки... в чем проблема?

дык вот в том то и дело, что не посылаются значения кнопки на сервер (вернее на берутся функцией serialize), если обработчик навешан на submit формы. а я именно об этом спрашивал.

Немного объясню зачем мне надо вешать обработчик именно на submit.
В современной web разработке очень часто возникает необходимость отправлять формы аяксом. поэтому, чтобы не писать один тот-же код на разных страницах, я решил сделать универсальную функцию:

function FormSubmitAjax(sel1, success, sel2){  
    $(sel1).on('submit', sel2, function(ev){
      ev.preventDefault();
      var form = $(ev.target);
      $.ajax({ type: form.context.method,
        url: form.context.action,
        data: form.serialize(),
        context: { form: form},
        success: function(dat, status){
	       success.apply(this, [dat, status]);
        },
    });
  });
}

однако при практическом использовании выяснилось что <input type="submit" name="test"/> не посылается, вот ищу способ, как это исправить.

Метод serialize() не возвращает поля отправки файлов и кнопки отправки формы, но ни ко не запрещает form.serialize() + "&" + и добавить кнопку. Зачем она только нужна не понятно.

Нужна она затем, чтобы знать какую именно кнопку нажал пользователь, в тех случаях если кнопок несколько на одной форме.

Rise
ага! основная идея в том, чтобы перед отправкой найти нажатую кнопку селектором ':submit:focus'
спасибо! воспользуюсь.