15.12.2013, 09:56
|
Кандидат Javascript-наук
|
|
Регистрация: 01.08.2009
Сообщений: 102
|
|
При 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', на которую нажали?
|
|
15.12.2013, 10:38
|
Кандидат Javascript-наук
|
|
Регистрация: 01.08.2009
Сообщений: 102
|
|
Это понятно. А если у меня на странице несколько кнопок 'submit'? И каждая должна делать свой собственный Ajax-запрос. Какие-то удобные решения есть для таких случаев? Вроде того, что считывается атрибут 'name' кнопки и вставляется в функцию. Только я не знаю, как такое реализуется.
|
|
15.12.2013, 14:04
|
Кандидат Javascript-наук
|
|
Регистрация: 01.08.2009
Сообщений: 102
|
|
<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. Вот я и думаю, какое решение можно придумать, чтобы всё работало просто и изящно.
|
|
15.12.2013, 14:41
|
|
Профессор
|
|
Регистрация: 11.09.2010
Сообщений: 8,804
|
|
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);
__________________
В личку только с интересными предложениями
|
|
15.12.2013, 17:15
|
Кандидат Javascript-наук
|
|
Регистрация: 01.08.2009
Сообщений: 102
|
|
Сообщение от danik.js
|
function sendForm(button, formId, messageDivId)
|
А можно ли прям взять и автоматически выцепить button из тега, на который событие ставиться?
|
|
15.12.2013, 17:55
|
|
Профессор
|
|
Регистрация: 11.09.2010
Сообщений: 8,804
|
|
Сообщение от hrundel
|
А можно ли прям взять и автоматически выцепить button из тега, на который событие ставиться?
|
Да, при установке обработчика через свойство onclick this будет указывать на элемент:
button.onclick = function sendForm() {
alert(this instanceof HTMLInputElement); // alerts "true"
};
Через атрибут this тоже указывает на кнопку, чем я и воспользовался в предыдущем коде.
__________________
В личку только с интересными предложениями
|
|
16.12.2013, 07:18
|
Профессор
|
|
Регистрация: 07.11.2013
Сообщений: 458
|
|
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); ?>
|
|
16.12.2013, 20:22
|
Кандидат Javascript-наук
|
|
Регистрация: 01.08.2009
Сообщений: 102
|
|
Rise,
большое спасибо! Это то, что нужно было. В конечном варианте у меня получилось так:
$(document).ready(
function(){
$('#myform input[type=submit]').each(
function() {
$(this).click(function(){
sendWholeForm('myform', 'messagediv', this);
return false;
});
}
);
}
);
|
|
17.12.2013, 18:30
|
Кандидат Javascript-наук
|
|
Регистрация: 01.08.2009
Сообщений: 102
|
|
Сообщение от Rise
|
А зачем type=submit, теперь кликни в поле для ввода и нажми Enter и твоя форма отправилась без данных о кнопке , а точнее с данными первой попавшейся кнопки...
И зачем each()...он здесь не нужен...
|
Интересное замечание. Действительно так и есть..
Про each().. мне казалось, что $() возвращает массив элементов, поэтому к нему и надо применять each(). Если в форме несколько кнопок submit, то по всем им, наверное, и надо пройтись.
|
|
17.12.2013, 19:11
|
Кандидат Javascript-наук
|
|
Регистрация: 01.08.2009
Сообщений: 102
|
|
Rise, ну ещё раз спасибо за конструктивные советы
|
|
|
|