Ajax - forced url update immediately after a form submission jquery/php/mysql/html

Question

How can I force all_contacts (select * from users) to display immediately after correctly inserting data into my database via a form. It must be done via ajax no page refresh method. In form 2 the all_contacts value does (select * from users) and uses a url /php/group_list.php?q=all_contacts based on the string q, if that helps.

form 1

   <form method="post" name="form">       
    <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>
    </li></ul>
    <div >
    <input type="submit" value="Submit" class="contact"/>
    <span class="error" style="display:none"> Please Enter Valid Data</span>
    <span class="success" style="display:none"> Registration Successfully</span>
    </div></form>

Form 2

<form>
<select name="users" id="users" onChange="showContact(this.value)">
<option value="">Select Group</option>
<option value="all_contacts">All Contacts</option>
<option value="friends">Friends</option>
<option value="family">Family</option>
<option value="colleagues">Colleagues</option>
<option value="ungrouped">Ungrouped</option>
</select>
</form>

js

//Displays the user contact summmary
    function showContact(str)
    {
    if (str=="")
      {
      document.getElementById("txtSummary").innerHTML="";
      return;
      }
    if (window.XMLHttpRequest)
      {// code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp=new XMLHttpRequest();
      }
    else
      {// code for IE6, IE5
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
    xmlhttp.onreadystatechange=function()
      {
      if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
        document.getElementById("txtSummary").innerHTML=xmlhttp.responseText;
        }
      }
    xmlhttp.open("GET","php/group_list.php?q="+str,true);
    xmlhttp.send();
    }

    //Displays the detailed user contact description 
    function showContactDetail(str)
    {
    if (str=="")
      {
      document.getElementById("txtSummaryDetails").innerHTML="";
      return;
      }
    if (window.XMLHttpRequest)
      {// code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp=new XMLHttpRequest();
      }
    else
      {// code for IE6, IE5
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
    xmlhttp.onreadystatechange=function()
      {
      if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
        document.getElementById("txtSummaryDetails").innerHTML=xmlhttp.responseText;
        }
      }
    xmlhttp.open("GET","php/contact_details.php?q="+str,true);
    xmlhttp.send();
    }

    // Checkbox select and delete with loop
    jQuery(function($) {
        $("form input[id='check_all']").click(function() { // triggred check

            var inputs = $("form input[type='checkbox']"); // get the checkbox

            for(var i = 0; i < inputs.length; i++) { // count input tag in the form 
                var type = inputs[i].getAttribute("type"); //  get the type attribute
                    if(type == "checkbox") {
                        if(this.checked) {
                            inputs[i].checked = true; // checked
                        } else {
                            inputs[i].checked = false; // unchecked

                         }
                    } 
            }
        });

        $("form input[id='submit']").click(function() {  // triggred submit

            var count_checked = $("[name='data[]']:checked").length; // count the checked
            if(count_checked == 0) {
                alert("Please select a product(s) to delete.");
                return false;
            } 
            if(count_checked == 1) {
                return confirm("Are you sure you want to delete these product?");   
            } else {
                return confirm("Are you sure you want to delete these products?");  
              }     
        });
    }); // jquery end

    //Submit 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;
    });
    });

Corrected Updated Ajax version

//Displays the user contact summmary
function showContact(str)
{
if (str=="")
  {
  document.getElementById("txtSummary").innerHTML="";
  return;
  }
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("txtSummary").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","php/group_list.php?q="+str,true);
xmlhttp.send();
}

//Displays the detailed user contact description 
function showContactDetail(str)
{
if (str=="")
  {
  document.getElementById("txtSummaryDetails").innerHTML="";
  return;
  }
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("txtSummaryDetails").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","php/contact_details.php?q="+str,true);
xmlhttp.send();
}

// Checkbox select and delete with loop
jQuery(function($) {
    $("form input[id='check_all']").click(function() { // triggred check

        var inputs = $("form input[type='checkbox']"); // get the checkbox

        for(var i = 0; i < inputs.length; i++) { // count input tag in the form 
            var type = inputs[i].getAttribute("type"); //  get the type attribute
                if(type == "checkbox") {
                    if(this.checked) {
                        inputs[i].checked = true; // checked
                    } else {
                        inputs[i].checked = false; // unchecked

                     }
                } 
        }
    });

    $("form input[id='submit']").click(function() {  // triggred submit

        var count_checked = $("[name='data[]']:checked").length; // count the checked
        if(count_checked == 0) {
            alert("Please select a product(s) to delete.");
            return false;
        } 
        if(count_checked == 1) {
            return confirm("Are you sure you want to delete these product?");   
        } else {
            return confirm("Are you sure you want to delete these products?");  
          }     
    });
}); // jquery end

//Submit 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(){

$(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;

    });
});

$('.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;
});
});

score 0 · Answer 1 · edited May 23 '17 at 12:04

0

There is no direct solution or specific solution. It's just need you to use JavaScript.

check this:

Ajax - How refresh after submit

edited May 23 '17 at 12:04

Community

1
1

answered Mar 13 '13 at 21:44

ebram khalil

8,252
7
42
60

Thanks for your reply. I'm not sure where i should be inserting that code as part of the Submit form function. – Anth Mar 14 '13 at 07:16

score 0 · Accepted Answer · answered Mar 18 '13 at 13:55

My advise would be to use the jQuery.form plugin, which turns your form into a Ajax form with very little work and code. It would make your code so much simpeler.

Download the .js file from jQuery Form Plugin, and just add this line to your code:

<script src="jquery.form.3.10.js"></script>

Remove everything except your form (but add an 'id' and an 'action' argument to it), and then add:

<script type="text/javascript">
    $(document).ready(function() {
        $('#yourform').ajaxForm({
                beforeSubmit: checkForm, 
                type: 'post', 
            dataType:  'json', 
                cache: false,
                beforeSend: function() {
                    $("#formstatus").addClass( "ui-autocomplete-loading" );
                },
                success: function(data, status, xhr, myForm) {
                    if ( data.usersfound !== undefined ) {
                        $('#output').html( 'ok' );
                        // ### todo: do something with data
                    }
                    if ( data.erroruser !== undefined ) {
                        $('#output').html( 'error: ' + data.erroruser.msg );
                        // ### your code returned an error
                    }
                },
                error: function(xhr ,status ,error ) {
                    $('#output').html( xhr.responseText ); 
                    // ### status != 200
                    },
                complete: function() {
                    $("#formstatus").removeClass("ui-autocomplete-loading");
                }


        }); 
    });
    function checkForm() {
        // ### todo: check the input of the form; return(false) if something is wrong, else return(true)
    }
</script>

Notes:
- ui-autocomplete-loading is a class from jQuery UI which shows a 'doing-some-loading' animation. This is off course optional
- the result of saving your data should return json data. This could be (usersfound:[{"id":"1", "name":"john"}]) or (erroruser:{"msg":"bla"})

More examples can be found on the jQuery Form Plugin page!

Ajax - forced url update immediately after a form submission jquery/php/mysql/html

2 Answers2

Linked