Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Mar 2013
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Ajax - How refresh <DIV> after submit

    I'm trying to figure out how to refresh the page DIV after a successful form insert into my MySQL database. I'm using jquery along with the ajaxForm plugin (<script src="http://malsup.github.com/jquery.form.js"></script>).

    I'm unsure where I should be inserting this part of the code into my submit function and whether there any problems with it. I'm a novice so this concept is rather overwhelming. If you could please help it would be much appreciated.

    Other similar example;
    http://stackoverflow.com/questions/8...v-after-submit


    Submit Form
    Code:
     <form method="post" name="form" id="formSearch">       
            <label>First Name:</label><input id="First_Name" name="First_Name" type="text" />
            <br /> 
            <label>Last Name:</label><input id="Last_Name" name="Last_Name" type="text" />
            <br /> 
            <label>Email Address:</label><input id="Email_Address" name="Email_Address" type="text" />
            <br /> 
            <label>Telephone Number:</label><input id="Telephone_Number" name="Telephone_Number" type="text" />
            <br /> 
            <label>Postal Address:</label><input id="Postal_Address" name="Postal_Address" type="text" />
              
            <select id="Contact_Group" name="Contact_Group">
            <option value="">Select Group</option>
            <option value="Ungrouped">Ungrouped</option>
            <option value="Friends">Friends</option>
            <option value="Family">Family</option>
            <option value="Colleagues">Colleagues</option>
            </select>

    Current code as it stands now


    Code:
    //Sumbit form
    $(function() {
    $(".contact").click(function() {
    var First_Name = $("#First_Name").val();
    var Last_Name = $("#Last_Name").val();
    var Email_Address = $("#Email_Address").val();
    var Telephone_Number = $("#Telephone_Number").val();
    var Postal_Address = $("#Postal_Address").val();
    var Contact_Group = $("#Contact_Group").val();
    	
    var dataString = 'First_Name='+ First_Name + '&Last_Name=' + Last_Name + '&Email_Address=' + Email_Address + '&Telephone_Number=' + Telephone_Number + '&Postal_Address=' + Postal_Address + '&Contact_Group=' + Contact_Group;
    	
    if(First_Name=='' || Last_Name=='' || Email_Address=='' || Telephone_Number=='' || Postal_Address=='' || Contact_Group=='')
    {
    $('.success').fadeOut(200).hide();
    $('.error').fadeOut(200).show();
    }
    else
    {
    $.ajax({
    type: "POST",
    url: "php/new_contact.php",
    data: dataString,
    success: function(){
    $('.success').fadeIn(200).show();
    $('.error').fadeOut(200).hide();
    
    //Newly added
    $('#First_Name').val('');
    $('#Last_Name').val('');
    $('#Email_Address').val('');
    $('#Telephone_Number').val('');
    $('#Postal_Address').val('');
    $('#Contact_Group').val('');
    
    }
    });
    }
    return false;
    });
    });

    Code to be inserted


    Code:
    $(document).ready(function() {
    	$("#formSearch").submit(function() {
    		var options = {
    			/* target:"#divResult", */
    
    			success: function(html) {
    				$("#txtSummary").replaceWith($('#txtSummary', $(html)));
    			},
    
    			url: "http://localhost/example/comp333assn1/php/group_list.php?q=all_contacts"
    		}
    
    		$(this).ajax(options);
    		return false;
    
    	});
    });

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,570
    Thanks
    23
    Thanked 643 Times in 642 Posts
    Change your jq to look like this
    Code:
    else
    {
    	$.ajax({
    		type: "POST",
    		url: "php/new_contact.php",
    		data: dataString,
    		success: function(data){
    			$('.success').fadeIn(200).show();
    			$('.error').fadeOut(200).hide();
    document.getElementById("status").innerHTML = data;  // YOU NEED TO CREATE THIS DIV OR CALL ONE YOU HAVE ALREADY
    		}
    	});
    }
    And the last section of code in your php file "php/new_contact.php"
    should read like this:
    PHP Code:
    echo <<<EOT
    $(document).ready(function() {
        $("#formSearch").submit(function() {
            var options = {
                /* target:"#divResult", */

                success: function(html) {
                    $("#txtSummary").replaceWith($('#txtSummary', $(html)));
                },

                url: "http://localhost/example/comp333assn1/php/group_list.php?q=all_contacts"
            }

            $(this).ajax(options);
            return false;

        });
    });
    EOT; 


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •