Форма Отправить jQuery не работает
У меня есть форма
<form action="deletprofil.php" id="form_id" method="post">
<div data-role="controlgroup" data-filter="true" data-input="#filterControlgroup-input">
<button type="submit" name="submit" value="1" class="ui-btn ui-shadow ui-corner-all ui-icon-delete ui-btn-icon-right" data-icon="delete" aria-disabled="false">Anlegen</button>
<button type="submit" name="submit" value="2" class="ui-btn ui-shadow ui-corner-all ui-icon-delete ui-btn-icon-right" data-icon="delete" aria-disabled="false">Bnlegen</button>
</div>
</form>
и что всплывающее окно из jQuery Mobile
<div class="ui-popup-container pop in ui-popup-active" id="popupDialog-popup" tabindex="0" style="max-width: 1570px; top: 2239.5px; left: 599px;">
<div data-role="popup" id="popupDialog" data-overlay-theme="b" data-theme="b" data-dismissible="false" style="max-width:400px;" class="ui-popup ui-body-b ui-overlay-shadow ui-corner-all">
<div data-role="header" data-theme="a" role="banner" class="ui-header ui-bar-a">
<h1 class="ui-title" role="heading" aria-level="1">Delete Page?</h1>
</div>
<div role="main" class="ui-content">
<h3 class="ui-title">Sicher dass Sie das Profil löschen wollen?</h3>
<p>Es kann nicht mehr rückgängig gemacht werden.</p>
<a href="#" id="NOlink" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b">Abbrechen</a>
<a href="#" id="OKlink" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b">OK</a>
</div>
</div>
</div>
с моим кодом jQuery
<script language="javascript" type="text/javascript">
$(function(){
$('#form_id').bind('submit', function(evt){
$form = this;
evt.preventDefault();
$("#popupDialog").popup('open');
$("#NOlink").bind( "click", function() {
$("#popupDialog").popup('close');
});
$("#OKlink").bind( "click", function() {
$("#popupDialog").popup('close');
$( "#form_id" ).submit();
});
});
});
</script>
Всплывающее окно появляется, но отправка формы не работает.
Есть ли у кого-нибудь идеи?
Ответы
Ответ 1
Ошибка NUMBER ONE приводит к НИЧЕМУ, когда вы submit
как ID
или NAME
в вашей форме.
Переименуйте элементы формы, иначе вы не сможете вызвать .submit()
в форме, так как метод/обработчик отправки .submit()
атрибутом name/id.
Несколько других вещей:
Как уже упоминалось, вам нужно отправить форму, используя более простое событие, чем jQuery.
НО вам также нужно отменить клики по ссылкам
Почему, кстати, у тебя две кнопки? Поскольку вы используете jQuery для отправки формы, вы никогда не узнаете, какая из двух кнопок была нажата, пока вы не установите скрытое поле при нажатии.
<form action="deletprofil.php" id="form_id" method="post">
<div data-role="controlgroup" data-filter="true" data-input="#filterControlgroup-input">
<button type="submit" value="1" class="ui-btn ui-shadow ui-corner-all ui-icon-delete ui-btn-icon-right" data-icon="delete" aria-disabled="false">Anlegen</button>
<button type="submit" value="2" class="ui-btn ui-shadow ui-corner-all ui-icon-delete ui-btn-icon-right" data-icon="delete" aria-disabled="false">Bnlegen</button>
</div>
</form>
$(function(){
$("#NOlink, #OKlink").on("click", function(e) {
e.preventDefault(); // cancel default action
$("#popupDialog").popup('close');
if (this.id=="OKlink") {
document.getElementById("form_id").submit(); // or $("#form_id")[0].submit();
}
});
$('#form_id').on('submit', function(e){
e.preventDefault();
$("#popupDialog").popup('open');
});
});
Судя по вашим комментариям, я думаю, вы действительно хотите сделать это:
<form action="deletprofil.php" id="form_id" method="post">
<input type="hidden" id="whichdelete" name="whichdelete" value="" />
<div data-role="controlgroup" data-filter="true" data-input="#filterControlgroup-input">
<button type="button" value="1" class="delete ui-btn ui-shadow ui-corner-all ui-icon-delete ui-btn-icon-right" data-icon="delete" aria-disabled="false">Anlegen</button>
<button type="button" value="2" class="delete ui-btn ui-shadow ui-corner-all ui-icon-delete ui-btn-icon-right" data-icon="delete" aria-disabled="false">Bnlegen</button>
</div>
</form>
$(function(){
$("#NOlink, #OKlink").on("click", function(e) {
e.preventDefault(); // cancel default action
$("#popupDialog").popup('close');
if (this.id=="OKlink") {
// trigger the submit event, not the event handler
document.getElementById("form_id").submit(); // or $("#form_id")[0].submit();
}
});
$(".delete").on("click", function(e) {
$("#whichdelete").val(this.value);
});
$('#form_id').on('submit', function(e){
e.preventDefault();
$("#popupDialog").popup('open');
});
});
Ответ 2
Потому что, когда вы вызываете $( "#form_id").submit();
он запускает внешний обработчик отправки, который предотвращает действие по умолчанию, вместо этого используйте
$( "#form_id" )[0].submit();
или же
$form.submit();//declare '$form as a local variable by using var $form = this;
Когда вы вызываете метод submit элемента dom программно, он не вызовет обработчики отправки, прикрепленные к элементу
Ответ 3
Согласно http://api.jquery.com/submit/
Событие отправки отправляется элементу, когда пользователь пытается отправьте форму. Его можно привязать только к элементам. Формы могут подаваться либо путем нажатия явного <input type="submit">
, <input type="image">
или <button type="submit">
, или нажав Enterкогда определенные элементы формы имеют фокус.
Итак, в основном, .submit
является функцией привязки, чтобы отправить форму, вы можете использовать простой Javascript:
document.formName.submit().
Ответ 4
если в функции отправки есть одна ошибка, функция отправки будет выполнена. в других предложениях предотвращать по умолчанию (или возвращать false) не работает, если в функции отправки есть одна ошибка.
Ответ 5
Если вы выполняете проверку формы, например
type="submit" onsubmit="return validateForm(this)"
validateForm = function(form) {
if ($('input#company').val() === "" || $('input#company').val() === "Company") {
$('input#company').val("Company").css('color','red'); finalReturn = false;
$('input#company').on('mouseover',(function() {
$('input#company').val("").css('color','black');
$('input#company').off('mouseover');
finalReturn = true;
}));
}
return finalReturn;
}
Двойная проверка, что вы возвращаете true. Это кажется простым, но я имел
var finalReturn = false;
Когда форма была правильной, она не корректировалась с помощью validateForm и поэтому не отправлялась как finalReturn по-прежнему инициализировалась как false вместо true. Кстати, выше код работает красиво с адресом, городом, штатом и т.д.
Ответ 6
Хорошо, это не относится к конкретной ситуации ОП, но для любого, как я, кто приезжает сюда, сталкиваясь с подобной проблемой, подумайте, что я должен выбросить это there--, возможно, избавит от головной боли или двух.
Если вы используете нестандартную "кнопку", чтобы убедиться, что событие submit
не вызвано:
<form>
<input type="hidden" name="hide" value="1">
<a href="#" onclick="submitWithChecked(this.form)">Hide Selected</a>
</form>
Затем, когда вы попытаетесь получить доступ к this.form
в скрипте, он появится неопределенным.
Вместо этого вы можете использовать button
с type="button"
<form>
<input type="hidden" name="hide" value="1">
<button type="button" onclick="submitWithChecked(this.form)">Hide Selected</a>
</form>
(Еще не проверял это во всех браузерах, так что, возможно, кто-то может попросить меня об этом.)
Ответ 7
Не забудьте закрыть форму с помощью </form>
. Это перестало представить() работает для меня.
Ответ 8
Поскольку на каждый элемент управления ссылается его имя в элементе формы (см. Спецификации форм), элементы управления с именем "submit" переопределяют встроенную функцию submit.
Что приводит к ошибке, упомянутой в комментариях выше:
Uncaught TypeError: свойство 'submit' объекта #<HTMLFormElement>
не является функцией
Как и в принятом ответе выше, самым простым решением было бы изменить имя этого элемента управления.
Однако другим решением может быть использование метода dispatchEvent
для элемента формы:
$("#form_id")[0].dispatchEvent(new Event('submit'));
Ответ 9
Некоторое время вам нужно отдать все элементы формы в один и тот же div.
пример:-
Если вы используете ajax, отправьте с модальным.
Так что все элементы находятся в модальном теле.
Некоторое время мы помещаем кнопку отправки в модальный нижний колонтитул.