CODEWITHSUNDEEP
phpjqueryhtmlforms
Raymond van Os
Raymond van Os

Reputation: 191

Stop reloading on post a form with JQuery

I have the following problem. I got two forms on my web page. On the first form can I select a users whit a select box. When I have selected the users in the form, I will send it to the another form on the same web page. How can I be sure that the first page does not reload when i post the form? It is not intended that when I enter some data and a user wants to add the data that I entered are gone by reloading the page by post. I know this can be done with jquery, but I have no idea how this goes.

Thanks

Upvotes: 1

Views: 551

Answers (6)

Raymond van Os
Raymond van Os

Reputation: 191

<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>

Upvotes: 0

Starx
Starx

Reputation: 78991

You dont need jQuery for this. You can give javascript:void(0); to simply stop the proceeding of a form like

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

But, in case you want 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 :)
   */
});

However, what you are trying this with probably involves a hidden element in another form. So, I will give a small logical part of how the whole thing works.

Example 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>

Example 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
});

Upvotes: 0

Naveed
Naveed

Reputation: 42093

You can achieve this by using jQuery.ajax() function.

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

  • Get user's name from $_POST variable
  • Get User information from database.
  • Create an array of user info such that index of each value should represent id of a second form field.

For Example: 

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

Here FirstName, LastName and DOB are the IDs of form elements in second form

  • echo you data into json format:

echo json_encode( $userInfo );

Upvotes: 1

Steen
Steen

Reputation: 2877

The jQuery answers (like the one posted by NAVEED)

OR

Just put a target on the form with either _blank or a named hidden iframe.

Upvotes: 0

hodl
hodl

Reputation: 1420

You can use:

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

Upvotes: 0

Hoff
Hoff

Reputation: 39846

you can prevent the default (submit) behaviour of a form like this:

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

Upvotes: 0

Related Questions