Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   При AJAX-запросе не посылается кнопка 'submit' (https://javascript.ru/forum/events/43637-pri-ajax-zaprose-ne-posylaetsya-knopka-%27submit%27.html)

hrundel 15.12.2013 07:56

При 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', на которую нажали?

Rise 15.12.2013 08:20

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

hrundel 15.12.2013 08:38

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

Rise 15.12.2013 09:00

html код форм покажите

hrundel 15.12.2013 12:04

<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. Вот я и думаю, какое решение можно придумать, чтобы всё работало просто и изящно.

danik.js 15.12.2013 12:41

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

Цитата:

Сообщение от hrundel
function sendForm(formId, messageDivId){

function sendForm(button, formId, messageDivId)
Цитата:

Сообщение от Rise
formaData.append("name", "value");

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

hrundel 15.12.2013 15:15

Цитата:

Сообщение от danik.js (Сообщение 286719)
function sendForm(button, formId, messageDivId)

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

danik.js 15.12.2013 15:55

Цитата:

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

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

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


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

Rise 16.12.2013 05:18

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); ?>

hrundel 16.12.2013 18:22

Rise,
большое спасибо! Это то, что нужно было. В конечном варианте у меня получилось так:
$(document).ready(
	function(){
		$('#myform input[type=submit]').each(
			function() {
				$(this).click(function(){
					sendWholeForm('myform', 'messagediv', this);
					return false;
				});
			}
		);
	}

);


Часовой пояс GMT +3, время: 02:59.