javascript - Ajax-フォーム送信直後のURLの強制更新jquery/php / mysql / html

Question

フォームを介してデータベースにデータを正しく挿入した直後に、all_contacts（ユーザーから*を選択）を強制的に表示するにはどうすればよいですか。これは、ajax nopagerefreshメソッドを介して実行する必要があります。フォーム2では、all_contacts値は（ユーザーから*を選択して）文字列qに基づくURL /php/group_list.php?q=all_contactsを使用します（それが役立つ場合）。

フォーム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>

フォーム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;
    });
    });

更新されたAjaxバージョンを修正しました

//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 · Accepted Answer

私のアドバイスは、jQuery.formプラグインを使用することです。これにより、フォームがほとんど作業とコードなしでAjaxフォームに変換されます。それはあなたのコードをとても単純にするでしょう。

jQuery Form Pluginから.jsファイルをダウンロードし、次の行をコードに追加するだけです。

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

フォーム以外のすべてを削除し（ただし、「id」引数と「action」引数をフォームに追加します）、次を追加します。

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

注：
-ui-autocomplete-loadingは、「doing-some-loading」アニメーションを表示するjQueryUIのクラスです。これはもちろんオプションです
-データを保存した結果はjsonデータを返すはずです。これは、（usersfound：[{"id"： "1"、 "name"： "john"}]）または（erroruser：{"msg"： "bla"}）の場合があります。

その他の例は、jQueryフォームプラグインページにあります。

score 0 · Accepted Answer

直接的な解決策や特定の解決策はありません。JavaScriptを使用する必要があります。

これをチェックして：

Ajax-送信後の更新方法

javascript - Ajax-フォーム送信直後のURLの強制更新jquery/php / mysql / html

2 に答える 2

Related

Reference