Отвязка формы отправить в iframe с помощью jQuery

Question

У меня есть страница PHP с несколькими формами, некоторые из которых отправляются в iframe (отдельный iframe для каждой формы), чтобы разрешить загрузку файлов в стиле ajax. Я не хочу, чтобы пользователь нажимал кнопку «Отправить» после выбора каждого файла, поэтому я отправляю форму, используя функцию .submit() jQuery внутри события .change() в элементе ввода файла.

Отдельная загрузка файлов работает нормально.

Однако после отправки всех отдельных файлов пользователь должен щелкнуть по последней кнопке, подтверждающей, что он просмотрел данные формы, как показано. Эта последняя кнопка является просто независимой кнопкой. Это не кнопка отправки, и она не связана с какой-либо формой. Когда страница изначально загружается, эта кнопка работает нормально.

Однако, как только функция .submit() вызывается для загрузки файла, кажется, что последняя кнопка привязана к действию другой формы.

Грубо говоря, структура страницы выглядит следующим образом:

<form id="finalForm" target="finalTarget" action="uploadFile.php?action=final" method="post" enctype="multipart/form-data">
   <div id="finalSelect">
   <input type="file" name="finalDraft" id="finalDraft" value="file" />
   <input type="submit" value="Submit" id="finalSubmitButton" />
</form>
<iframe id="finalTarget" name="finalTarget" src="#" style="width:0px; height:0px; border: 0px"></iframe> 

<form id="signForm" target="signTarget" action="uploadFile.php?action=sign" method="post" enctype="multipart/form-data">
   <div id="signSelect">
   <input type="file" name="signPage" id="signPage" value="file" />
   <input type="submit" value="Submit" id="signSubmitButton" />
</form>
<iframe id="signTarget" name="signTarget" src="#" style="width:0px; height:0px; border: 0px"></iframe> 

<button type="button" id="mainSubmitButton">Submit</button>

jQuery выглядит следующим образом:

$("#mainSubmitButton").click(function(){
     document.location.href='pageName.php';
});

$("#finalDraft").change(function(){
     $("#finalForm").submit();
}

после окончательной отправки черновика, когда я нажимаю на mainSubmitButton, он загружается uploadFile.php.

Кто-нибудь знает, почему это происходит, и что я могу сделать, чтобы исправить проблему?

Заранее спасибо за помощь. Kate

Answer 1

причина этого, я думаю, в том, что элемент button , который вы использовали, действует как кнопка отправки, а не так, как вы предполагали, чтобы она действовала - как обычная кнопка. Просто переключите его на

  <input type="button"> 

и все должно быть готово.

проверить http://reference.sitepoint.com/html/button для получения дополнительной информации

Ссылка Реализация .

Answer 2

Верните «false» из нажатия кнопки, чтобы отменить любое поведение по умолчанию.

$("#mainSubmitButton").click(function(){
     document.location.href='pageName.php';
     return false;
});