Я просмотрел все подобные сообщения, но ничего не помогает. Это то, что у меня есть
<section> <form id="contact-form" action="" method="post"> <fieldset> <input id="name" name="name" placeholder="Name" type="text" /> <input id="email" name="email" placeholder="Email" type="text" /> <textarea id="comments" name="comments" placeholder="Message"></textarea> <div class="12u"> <a href="#" id="form-button-submit " class="button" onClick="sendForm()">Send Message</a> <a href="#" id="form-button-clear" class="button" onClick="document.getElementById('contact-form').reset()">Clear Form</a> </div> <ul id="response"></ul> </fieldset> </form> </section> function sendForm() { var name = $('input#name').val(); var email = $('input#email').val(); var comments = $('textarea#comments').val(); var formData = 'name=' + name + '&email=' + email + '&comments=' + comments; $.ajax({ type: 'post', url: 'js/sendEmail.php', data: formData, success: function(results) { $('ul#response').html(results); } }); // end ajax }
То, что я не могу сделать, – это предотвратить обновление страницы при #form-button-submit . Я попытался return false; Я попробовал preventDefault() и каждую комбинацию, включая return false; внутри onClick . Я также попытался использовать input type="button" и type="submit" вместо этого и тот же результат. Я не могу решить это, и он горит. Если вообще возможно, я предпочел бы использовать гиперссылку из-за некоторых дизайнерских вещей. Я был бы очень признателен за вашу помощь в этом.
Измените функцию следующим образом:
function sendForm(e){ e.preventDefault(); }
И, как говорится в комментариях, передайте событие:
onclick = sendForm(event);
Обновление 2:
$('#form-button-submit').on('click', function(e){ e.preventDefault(); var name = $('input#name').val(), email = $('input#email').val(), comments = $('textarea#comments').val(), formData = 'name=' + name + '&email=' + email + '&comments=' + comments; $.ajax({ type: 'post', url: 'js/sendEmail.php', data: formData, success: function(results) { $('ul#response').html(results); } }); });
Вы пробовали использовать
function sendForm(event){ event.preventDefault(); }
function sendForm(){ // all your code return false; }
Я также немного занялся поиском решения этой проблемы, и пока лучший рабочий метод, который я нашел,
Попробуйте использовать XHR для отправки запроса на любой URL, а не $ .ajax () … Я знаю, это звучит немного странно, но попробуйте!
Пример-
<form method="POST" enctype="multipart/form-data" id="test-form">
var testForm = document.getElementById('test-form'); testForm.onsubmit = function(event) { event.preventDefault(); var request = new XMLHttpRequest(); // POST to any url request.open('POST', some_url, false); var formData = new FormData(document.getElementById('test-form')); request.send(formData);
Это приведет к успешному отправке ваших данных … без перезагрузки страницы.
Простой и полный рабочий код
<script> $(document).ready(function() { $("#contact-form").submit(function() { $("#loading").show().fadeIn('slow'); $("#response").hide().fadeOut('slow'); var frm = $('#contact-form'); $.ajax({ type: frm.attr('method'), url: 'url.php', data: frm.serialize(), success: function (data) { $('#response').html(data); $("#loading").hide().fadeOut('slow'); $("#response").slideDown(); }, error: function(jqXHR, textStatus, errorThrown){ console.log(" The following error occured: "+ textStatus, errorThrown ); } }); return false; }); }); </script>
#loading может быть изображением или чем-то, что будет показано при обработке формы, чтобы использовать код, просто создайте форму с ID contact-form
Другой способ избежать отправки формы – это разместить кнопку вне формы. У меня был существующий код, который работал и создал новую страницу на основе рабочего кода и написал html следующим образом:
<form id="getPatientsForm"> Enter URL for patient server <br/><br/> <input name="forwardToUrl" type="hidden" value="/WEB-INF/jsp/patient/patientList.jsp" /> <input name="patientRootUrl" size="100"></input> <br/><br/> <button onclick="javascript:postGetPatientsForm();">Connect to Server</button> </form>
Эта форма вызывает нежелательную переадресацию, описанную выше. Изменение html на то, что показано ниже, устраняет проблему.
<form id="getPatientsForm"> Enter URL for patient server <br/><br/> <input name="forwardToUrl" type="hidden" value="/WEB-INF/jsp/patient/patientList.jsp" /> <input name="patientRootUrl" size="100"></input> <br/><br/> </form> <button onclick="javascript:postGetPatientsForm();">Connect to Server</button>
Я ожидаю, что кто-нибудь поймет мою идею очень хорошо, поскольку это очень простая идея.
дайте свою необходимую форму самому id или вы можете получить ее любым другим способом, который вы предпочитаете.
в форме введите «отправить» вызов метода onclick из вашего файла javascript.
в этом методе сделайте переменную ссылкой на свой id от addEventListener и сделайте метод preventDefault на «submit» не на «click».
Чтобы прояснить это, см. Это:
// element refers to the form DOM after you got it in a variable called element for example: element.addEventListener('submit', (e) => { e.preventDefault(); // rest of your code goes here });
Краткая идея состоит в том, чтобы разобраться с формой путем отправки события после обращения к кнопке отправки нажатием события.
Независимо от ваших потребностей внутри этого метода, он будет работать без обновления 🙂
Просто убедитесь, что имеете дело с ajax правильно, и вы закончите.
Конечно, он будет работать только с формами.