Остановите перезагрузку при публикации формы с JQuery

Question

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

Спасибо

Answer 1

Этого можно добиться с помощью функции jQuery.ajax () .

jQuery('#firstForm').live('submit',function(event) {
    $.ajax({
        url: 'GetUserInfo.php', // script to return user info in json format
        type: 'POST',
        dataType: 'json',
        data: $('#firstForm').serialize(),
        success: function( data ) {
            for(var id in data) {
                jQuery('secondForm#' + id).val(data[id]); // loop json data to populate each field of second form
            }
        }
    });
    return false;
});

GetUserInfo.php

• Получить имя пользователя из $_POST переменная
• Получение информации о пользователе из базы данных.
• Создайте массив информации о пользователе так, чтобы index каждого value представлял id второго поля формы.

Например:

$userInfo = array( 'FirstName' => 'abc', 'LastName' => 'xyz', 'DOB' => '01/01/2000');

Здесь FirstName, LastName и DOB - идентификаторы элементов формы во второй форме

• выводит ваши данные в формате json:

echo json_encode( $userInfo );

Answer 2

<script type="text/javascript">
$(document).ready(function()
{   
     $("#selectUserForm").validate(
     {
         debug: false,
         submitHandler: function(form) 
         {
              $.post('process.php', $("#selectUserForm").serialize(), function(data) 
             {
                  $('textarea#c_email_to').html(data);
             });
         }
     });
</script>

Answer 3

Вам не нужен jQuery для этого.Вы можете дать javascript:void(0);, чтобы просто остановить обработку формы, такой как

<form action="javascript:void(0)" >

Но, если вы хотите jQuery Solution

$("form").on("submit", function(e) {
// ^ Select the form with tag, or #idname or .classname
   // do stuff
   return false; //stop the submition or in your case, stop the reload

   /*
   return false also is equivalent to
        e.preventDefault(); 
        e.stopPropagation();
   So, you can scale your concept too :)
   */
});

Однако, то, что вы пытаетесь сделать это, вероятно, свключает в себя скрытый элемент в другой форме.Итак, я приведу небольшую логическую часть того, как все это работает.

Пример HTML:

<form name="form1" id="form1">
    <select id="formselect1">
       ....
    </select>
</form>
<!-- And Form 2 -->

<form name="form2" id="form2">
    <input type="hidden" id="inputfromform1" name="inputfromform1" />
</form>

Пример JS:

$("#form1").submit(function() {
    var tempval = $("#formselect1").val(); //get the value of form 1
    $("#inputfromform1").val(tempval); // and place in the element of form 2
    return false; //Here stop it
});

Answer 4

JQuery отвечает (как тот, который опубликовал NAVEED)

ИЛИ

Просто поместите цель в форму с _blank или с именованным скрытым iframe.

Answer 5

Вы можете использовать:

$('#form_id').submit(function(){ 
  //some code
  return false;
});

Answer 6

вы можете предотвратить поведение по умолчанию (отправить) формы, подобной этой:

$('#form_1').submit(function(){
   $(this).preventDefault();
   var selected_user = $('#user_select').val()
   // do whatever you want
})