Javascript 阻止页面刷新和提交表单数据_Javascript_Php_Jquery_Forms_Jquery Ui

Javascript 阻止页面刷新和提交表单数据

javascript php jquery forms jquery-ui

Javascript 阻止页面刷新和提交表单数据,javascript,php,jquery,forms,jquery-ui,Javascript,Php,Jquery,Forms,Jquery Ui,因此，我尝试提交表单数据，但不希望页面更改/刷新。同时，我希望jquery对话框在完成后弹出这是我的原创作品： <script> $( function() { $('#dialog-message').dialog({ autoOpen: false, title: 'Basic Dialog' }); $( "#subbutton" ).click(function( event ) { event.preve

因此，我尝试提交表单数据，但不希望页面更改/刷新。同时，我希望jquery对话框在完成后弹出

这是我的原创作品：

 <script>
  $( function() {
    $('#dialog-message').dialog({
      autoOpen: false,
      title: 'Basic Dialog'
    });



 $( "#subbutton" ).click(function( event ) {
       event.preventDefault();

       $.post("formaction.php",function(){
         $('#dialog-message').dialog('open');
         return false;
     });
 });
  });
  </script>

添加表单以获取更多详细信息

<div id="lostForm">
      <form name="lostForm" method="post" action="formaction.php" enctype="multipart/form-data">
        <h1> Owner Information</h1>
        <label for="fname">First Name</label>
        <input type="text" id="fname" name="firstname"  placeholder="First name" required>
        <br>  <br>
        <label for="lname">Last Name</label>
        <input type="text" id="lname" name="lastname"  placeholder="Last name" required>
        <br>  <br>
        <label for="mnumber">Mobile</label>
        <input id="mnumber" name="mobilenumber"  placeholder=" (###)###-####" required>
        <br>  <br>
        <label for="email">Email</label>
        <input type="text" id="email" name="email"  placeholder="email@example.com" required>
        <br>
        <br>
        <hr>
        <h1> Pet Information </h1>

        <br>
        <label for="pname">Pet Name</label>
        <input type="text" id="pname" name="petname" placeholder="Pet Name" required>
        <br> <br>
        <label for="petgen">Pet Gender</label>
        <select name="petgen" id="petgen" required>
          <option value="male"> Male </option>
          <option value="female"> Female </option>
        </select>
        <br> <br>
        <label for="pname">Pet Age</label>
        <input type="text" id="page" name="petage" placeholder="How old is your pet?" required>
        <br> <br>
        <label for="primary">Primary Color</label>
        <select name="color1" id="primary" required>
          <option value="black"> Black </option>
          <option value="brindle"> Brindle </option>
          <option value="cream"> Cream </option>
          <option value="red"> Red </option>
          <option value="white"> White </option>
          <option selected="selected" value="none"> --none-- </option>
        </select>
        <br> <br>
        <label for="secondary">Second Color</label>
        <select name="color2" id="secondary" required>
          <option value="black"> Black </option>
          <option value="brindle"> Brindle </option>
          <option value="cream"> Cream </option>
          <option value="red"> Red </option>
          <option value="white"> White </option>
          <option selected="selected" value="none"> --none-- </option>
        </select>
        <br> <br>
        <label for="markings">Markings</label>
        <input type="text" id="markings" name="marking" placeholder="Indetifiable Markings" optional>

        <br><br>

        <label for="fileToUpload">Upload Image:</label>
        <br>

        <input id="fileToUpload" type="file" name="fileToUpload">
        <br>
        <br>
        <hr>
        <h1> Location Lost </h1>
        <div id="locationField">
          <input id="autocomplete" placeholder="Enter your address"
          onFocus="geolocate()" type="text"></input>
        </div>

        <table id="address">
          <tr>
            <td class="label">Street address</td>
            <td class="slimField"><input class="field" id="street_number"
              disabled="true" name="streetAdd"></input></td>
              <td class="wideField" colspan="2"><input class="field" id="route"
                disabled="true"></input></td>
              </tr>
              <tr>
                <td class="label">City</td>
                <td class="wideField" colspan="3"><input class="field" id="locality"
                  disabled="true" name="city"></input></td>
                </tr>
                <tr>
                  <td class="label">State</td>
                  <td class="slimField"><input class="field"
                    id="administrative_area_level_1" disabled="true" name="state"></input></td>
                    <td class="label">Zip code</td>
                    <td class="wideField"><input class="field" id="postal_code"
                      disabled="true" name="zip"></input></td>
                    </tr>
                    <tr>
                      <td class="label">Country</td>
                      <td class="wideField" colspan="3"><input class="field"
                        id="country" disabled="true"></input></td>
                      </tr>
                    </table>


                    <button type="submit" value="Submit" name="submitbtn" id="subbutton">Submit </button>

                  </form>


所有者信息
名字



姓



可移动的



电子邮件





宠物信息


昵称



宠物性别
男性
女性



宠物年龄



原色
黑色
斑纹
奶油
红色
白色
--没有--



第二种颜色
黑色
斑纹
奶油
红色
白色
--没有--



标记



上载图像：







位置丢失
街道地址
城市
陈述
邮政编码
国家
提交

您的ajax

$.post（）函数缺少要插入的数据
最简单的添加方法是序列化表单：
...
event.preventDefault();

$.post("formaction.php", $('form').serialize(), function(){
     $('#dialog-message').dialog('open');
});

现在，表单
元素中的所有字段都将添加到帖子中。如果您有多个表单，可以使用表单的id获取正确的表单：
$.post("formaction.php", $('#your_form').serialize(), function(){
     $('#dialog-message').dialog('open');
});

ajax$.post（）
函数缺少要插入的数据
最简单的添加方法是序列化表单：
...
event.preventDefault();

$.post("formaction.php", $('form').serialize(), function(){
     $('#dialog-message').dialog('open');
});

现在，表单
元素中的所有字段都将添加到帖子中。如果您有多个表单，可以使用表单的id获取正确的表单：
$.post("formaction.php", $('#your_form').serialize(), function(){
     $('#dialog-message').dialog('open');
});

为此，请使用ajax
$.ajax({
          type: "POST",
          url:"<?php yourpage.php;?> ",
          data:your data,
          success: function(html){
           //show your message
          }
    });

$.ajax({
类型：“POST”，
url:“”，
数据：你的数据，
成功：函数（html）{
//显示您的消息
}
});
为此使用ajax
$.ajax({
          type: "POST",
          url:"<?php yourpage.php;?> ",
          data:your data,
          success: function(html){
           //show your message
          }
    });

$.ajax({
类型：“POST”，
url:“”，
数据：你的数据，
成功：函数（html）{
//显示您的消息
}
});
您需要使用：success回调函数
$.post( "test.php", { name: "John", time: "2pm" })
  .done(function( data ) {
    alert( "Data Loaded: " + data );
  });

您需要使用：success回调函数
$.post( "test.php", { name: "John", time: "2pm" })
  .done(function( data ) {
    alert( "Data Loaded: " + data );
  });

有一个简单的解决方案来停止重定向。
更改按钮的类型（#子按钮）添加属性type=“button”
有一个简单的解决方案来停止重定向。
更改按钮的类型（#子按钮）添加属性type=“button”
您要求的是两件不同的事情：“提交表单”，但“不刷新页面”。为此，必须使用AJAX，否则在不刷新页面的情况下无法发送表单数据。现在更新原始帖子你要求的是两件不同的事情：“提交表单”，但“不要刷新页面”。为此，必须使用AJAX，否则在不刷新页面的情况下无法发送表单数据。现在更新原始帖子OP已经在使用ajax，$.post（）
是$.ajax（）
的一种速记方法。因此，对于成功部分，我希望弹出一个jquery对话框，但执行成功：函数（数据）{$（'#对话框消息'）。对话框（'open'）；}不起作用。我必须缺少一些东西，可能函数没有通过成功：函数（数据）{/*…*/}
。尝试在success
之后添加一个附加属性，如下所示：error:function（）{console.log（'error'）；}
。如果它通过了错误，您可能想要调试您的php文件。问题在于，使用preventDefault（）时，数据实际上并没有生成它。一位朋友这样说：“因此，使用prevent default，它基本上会使您无法重定向。如果没有它，您的页面将在AJAX调用执行之前提交，因为它是异步的。您需要做的是提交DB调用并实现轮询操作，在每个间隔查询DB。一旦它看到那里的记录。重定向“但我不确定如何进行轮询OP已经在使用ajax，$.post（）
是$.ajax（）
的一种速记方法。因此，对于成功部分，我希望弹出一个jquery对话框，但正在成功：函数（数据）{$（'#对话框消息'）。对话框（'open'）；}不起作用。我一定缺少一些东西。可能函数没有通过suces:function（data）{/*…*/}
。请尝试在success
之后添加一个附加属性，如下所示：error:function（）{console.log（'error'）；}
。如果它通过了错误，您可能需要调试您的php文件。据我所知，php文件很好。问题是，使用preventDefault（）时，数据实际上无法生成。这是一位朋友所说的：“因此使用prevent default，它基本上会生成，因此您无法重定向。如果没有它，您的页面将在AJAX调用执行之前提交，因为它是异步的。您需要做的是提交DB调用并实现轮询操作，在每个间隔查询DB。一旦它看到那里的记录。重定向“但我不确定如何做轮询我将尝试一下（：我尝试了这个，但它仍然在做s