Почему onClick рабоает перед submit?

Question

[oleg_berezovskyi]

Хром работает так как мне нужно, сначала отправляет форму а потом уходит по onClick, но с телефона форма не отправляется, сразу редирект. Как исправить?

<table border="0" width="100%" id="table1" cellspacing="1" cellpadding="2">
<br>
<tr><b>ВАШ ТЕКСТ</b><font color="red">*</font>:<br>
<textarea rows="7" name="f3" cols="30" style="width:50%;"></textarea></tr>
<tr><td colspan="2" align="center"><input type="submit" 
value="Отправить СООБЩЕНИЕ" onClick='location.href="ССЫЛКА НА СТОРОННИЙ РЕСУРС"'></td></tr>  
</table>

Comments

[Надим]

Покажите форму полностью, вместе с тегом <form></form> включительно.

[alexalexes]

А почему вы делаете это на стороне клиента:

onClick='location.href="ССЫЛКА НА СТОРОННИЙ РЕСУРС"'

А не на стороне сервера после обработки данных формы?
header('location: ССЫЛКА НА СТОРОННИЙ РЕСУРС');

[oleg_berezovskyi]

alexalexes, это ucoz

[oleg_berezovskyi]

alexalexes, я не могу менять что то на сервере, нужно сделать такую обработку на стороне клиента.

[oleg_berezovskyi]

Надим Закиров, это ucoz

[alexalexes]

Тогда вам нужно не сабмитить форму, а писать отдельно js-скрипт, чтобы сформировать объект formData и отправить его аяксом, а после уже location.href="ССЫЛКА НА СТОРОННИЙ РЕСУРС".
А так, будут конкурировать обработчики, в зависимости, как решили написать браузер, либо переход по сабмиту либо по вашему хрефу.

[oleg_berezovskyi]

alexalexes, можно ссылку на подобную инфу, как это примерно выглядит?

[Надим]

oleg_berezovskyi, я бы вам показал, но вы упорно не хотите выкладывать весь html-код формы.

[oleg_berezovskyi]

Надим Закиров, дело в том что на ucoz это все что у меня есть

<table border="0" width="100%" id="table1" cellspacing="1" cellpadding="2">
<tr><input maxlength="70" name="f1" size="30" style="width:95%;" type="hidden" value="[e-mail]" /></td></tr>
<tr><input maxlength="70" name="f2" size="30" style="width:95%;" type="hidden" value="ТЕМА" /> </td></tr>
<br>
<tr><b>СООБЩЕНИЕ</b><font color="red">*</font>:<br><textarea rows="7" name="f3" cols="30" style="width:50%;"></textarea></tr>
<tr><td colspan="2" align="center"><input type="submit" value="Отправить" onClick='location.href="Ресурс для редиректа"'></td></tr>  
</table>

[alexalexes]

Заменяете кнопку submit на обычный button, вызывающий обработчик примерно с таким кодом.
https://developer.mozilla.org/ru/docs/Web/API/Form...

[Надим]

oleg_berezovskyi, ссылку на страницу тогда дайте.

[oleg_berezovskyi]

alexalexes, можно кодом, я там вообще заблудился

[alexalexes]

Пожалуйста, но адаптируйте сами.

var formData = new FormData();
// Таким способом вы снабдите объект нужными данными
formData.append("username", "Groucho");
formData.append("accountnum", 123456); // число 123456 немедленно преобразуется в строку "123456"
// Так его отправите
var request = new XMLHttpRequest();
request.open("POST", "http://foo.com/submitform.php");
request.send(formData);
// А так средиректите
location.href="ССЫЛКА НА СТОРОННИЙ РЕСУРС";

[oleg_berezovskyi]

alexalexes, UCOZ меня покусал за этот код) Пишет, недопустимое содержимое)

[FanatPHP]

остелось теперь только узнать, при чем здесь РНР

[alexalexes]

FanatPHP, будьте благодушным. Не все могут понять охват проблемы, чтобы давать необходимый набор тегов.
oleg_berezovskyi, а как вы используете этот код?

[oleg_berezovskyi]

alexalexes, такой срабатывает на редирект

<script type="text/javascript">
$( "form" ).submit(function( event ) {
2
 window.location.href="ССылка";
3
 event.preventDefault();
4
});
</script>

Могу ли я на этапе номер 2 просто сделать, задержку, если да то как?

[alexalexes]

А на что ukoz ругается?
На создание объекта:
var formData = new FormData();
или
var request = new XMLHttpRequest();

[oleg_berezovskyi]

alexalexes, он позволяет мне только встроить в то же окно где стоит форма, но как только я открываю страницу с формой меня редиректит сразу

[alexalexes]

Есть возможность изменить тип у кнопки на такой?
<input type="button" value="Отправить" onClick=''>

[oleg_berezovskyi]

alexalexes, прописываю button и она становится неактивной

[alexalexes]

Как при disabled?

[oleg_berezovskyi]

alexalexes, да

[alexalexes]

В таком составе дает сохранить код?

$( "form" ).submit(function( event ) {
event.preventDefault();
var formData = new FormData(); 
var request = new XMLHttpRequest(); 
window.location.href="ССылка";
});

[oleg_berezovskyi]

alexalexes, Да, но в таком виде редиректит без отправки формы

[alexalexes]

А так?
Обратите внимание на request.open("тут нужно указать тот же метод отправки, что в форме", "тут тот же action что и в форме");

$( "form" ).submit(function( event ) {
event.preventDefault();
var formData = new FormData(); 
formData.append("f1",  document.querySelector("input[name='f1']").value);
formData.append("f2",  document.querySelector("input[name='f2']").value);
formData.append("f3",  document.querySelector("input[name='f3']").value);
var request = new XMLHttpRequest();
var this_form = event.target;
var form_method = this_form.getAttribute('method');
var form_action = this_form.getAttribute('action');
request.open(form_method, form_action);
request.send(formData);
window.location.href="ССылка";
});

[alexalexes]

Не буду с вас спрашивать, что вы откопали на вкладке Elements по форме.
Этот код должен достать из формы нужные свойства, выше сообщение я скорректировал с учетом этой части.

var this_form = event.target;
var form_method = this_form.getAttribute('method');
var form_action = this_form.getAttribute('action');
request.open(form_method, form_action);

[oleg_berezovskyi]

alexalexes, Вот что я имею в коде сейчас,

<script type="text/javascript">
$( "form" ).submit(function( event ) {
event.preventDefault();
var formData = new FormData(); 
formData.append("f1",  document.querySelector("input[name='f1']").value);
formData.append("f2",  document.querySelector("input[name='f2']").value);
formData.append("f3",  document.querySelector("input[name='f3']").value);
var request = new XMLHttpRequest();
var this_form = event.target;
var form_method = this_form.getAttribute('method');
var form_action = this_form.getAttribute('action');
request.open(form_method, form_action);
request.send(formData);
window.location.href="ССылка";
});</script>


<table border="0" width="100%" id="table1" cellspacing="1" cellpadding="2">
<tr><input maxlength="70" name="f1" size="30" style="width:95%;" type="hidden" value="[e-mail]" /></td></tr>
<tr><input maxlength="70" name="f2" size="30" style="width:95%;" type="hidden" value="ВАША МЫСЛЬ" /> </td></tr>
<br>
<tr><b>Ваш текст?</b><font color="red">*</font>:<br><textarea rows="7" name="f3" cols="30" style="width:50%;"></textarea></tr>
<tr><td colspan="2" align="center"><input type="submit" value="Отправить" ></td></tr>  
</table>

как определить method и action понятия не имею

[alexalexes]

method="post", а action - нет, значит тот же самый url, что у текущей страницы.
Пробуйте:

<script type="text/javascript">
$( "form" ).submit(function( event ) {
event.preventDefault();
var formData = new FormData(); 
formData.append("f1",  document.querySelector("input[name='f1']").value);
formData.append("f2",  document.querySelector("input[name='f2']").value);
formData.append("f3",  document.querySelector("input[name='f3']").value);
var request = new XMLHttpRequest();
request.open('POST', 'http://mydape.ru');
request.send(formData);
window.location.href="ССылка";
});</script>

[oleg_berezovskyi]

alexalexes, не происходит редирект

[alexalexes]

У вас же f3 - это textarea, значит так:

<script type="text/javascript">
$( "form" ).submit(function( event ) {
event.preventDefault();
var formData = new FormData(); 
formData.append("f1",  document.querySelector("input[name='f1']").value);
formData.append("f2",  document.querySelector("input[name='f2']").value);
formData.append("f3",  document.querySelector("textarea[name='f3']").value);
var request = new XMLHttpRequest();
request.open('POST', 'http://mydape.ru');
request.send(formData);
window.location.href="https://google.com"; // перенаправляем на гугль.
});</script>

[alexalexes]

Вроде работает.

[oleg_berezovskyi]

alexalexes, редирект есть, с пк форма отправляется с телефона не успевает

[alexalexes]

Зафиксировалось сообщение?

[oleg_berezovskyi]

alexalexes, С телефона не работает, только ПК

[alexalexes]

Тогда редирект выполняйте отложенно:

setTimeout(function()
{
window.location.href="https://google.com"; // перенаправляем на гугль.
}, 3000);

[oleg_berezovskyi]

alexalexes, Наконец-то УРААААААААААААААА. Спасибо большое

[alexalexes]

Корректней было бы через обработчик ответа делать:
Попробуйте использовать:

request.onload = function()
{
  window.location.href="https://google.com"; // перенаправляем на гугль.
};

Ответ я выложил. Отметьте как решение.
PS: обратите внимание, что send в самом конце вызывается.
PSS: Не злоупотребляйте лайками в комментариях.

Answer 1

[alexalexes]

<script type="text/javascript">
$( "form" ).submit(function( event ) {
event.preventDefault();
var formData = new FormData(); 
formData.append("f1",  document.querySelector("input[name='f1']").value);
formData.append("f2",  document.querySelector("input[name='f2']").value);
formData.append("f3",  document.querySelector("textarea[name='f3']").value);
var request = new XMLHttpRequest();
request.open('POST', 'http://mydape.ru');
request.onload = function()
{
  window.location.href="https://google.com"; // перенаправляем на гугль.
};
request.send(formData);
});
</script>