没有刷新的Ajax表单提交“不起作用”

Question

我正在尝试在同一页面中提交表单而不刷新页面。

我的表格：

<?php
if(isset($_POST['transfer'])){

  $amount =  $_POST['amount'] ? $_POST['amount']  : '';
  $from_c = $_POST['from_c'] ? $_POST['from_c'] :'';
  $to_c  = $_POST['to_c'] ? $_POST['to_c'] : '';

}
?>

<form  class="form-inline" method="post" action="convert.php" onsubmit = 'return false;' id = "frmData">
  <div class="md-form form-group col-sm-3">
    <div class="input-group col-sm-12">
      <input type="number" value="1" min="0" step="0.01" data-number-to-fixed="2" data-number-stepfactor="100" class="form-control" name="amount">

      <span class="input-group-addon" id="natCurrency" style="margin-top: 10%;margin-left: -5;margin-right: 15%;"></span>
    </div>
  </div>
  <div class="">
    <label for="from_c">from currency</label>
    <select  id="natSelect" onchange="let csymbol = $(this).find(':selected').data('symbol');$('#natCurrency').text(csymbol) " name="from_c" class="mdb-select colorful-select dropdown-primary" style="width:200px;" placeholder="select currency" >
      <?php  foreach ($black_a as $name => $black_p) {

        ?>
        <option value="<?php echo $black_p['name'];?>" data-symbol="<?php echo $black_p['symbol_native']; ?>"><?php echo $black_p['name'];?></option>
      <?php } ?>
    </select>
  </div>
  <div class="">
    <label for="to_c">to currency</label>
    <select class="mdb-select colorful-select dropdown-primary" name="to_c"  style="width:200px;" >
      <?php  foreach ($black_a as $name => $black_p) {

        ?>
        <option value="<?php echo $black_p['name'];?>"><?php echo $black_p['name'];?></option>
      <?php } ?>
    </select>
  </div>
  <input  name="transfer" value="convert"  class="btn btn-elegant" style="margin-top:3%;" id = "ha" /> 

</form>

提交表单时我有这个 PHP 代码：

  <?php
    if(isset($from_c) &&$from_c ==$to_c && isset($to_c) && $to_c == $from_c){

      echo   "
        <div id='less' class='well'>
          <div  dir='RTL'>
          <ul class='text-right'>
            <li><strong>resultل</li>

          </ul>
        <div class='col-md-4'>
          <div class='msg msg-success msg-success-text'> <span class='glyphicon glyphicon glyphicon-ok'></span> Error !</div>
        </div>
      ";
    }
  ?>

我尝试使用AJAX，点击提交后页面依然刷新：

$('#ha').on('click', function (e) {

  e.preventDefault(); //prevent to reload the page

  $.ajax({
    type: 'POST', //hide url
    url: 'convert.php', //your form validation url
    data: $('#frmData').serialize(), //USE THE ID WE SET IN THE FORM
    success: function (response) {
      $(".mydiv").append(response); 
    }
  });

});

.mydiv:

<div  class='mydiv'>
  <div  dir='RTL'>
    <ul class='text-right'>
      <li><strong>result</li>

    </ul>
  <div class='col-md-4'>
    <div class='msg msg-success msg-success-text'> <span class='glyphicon glyphicon glyphicon-ok'></span> $amount</div>
  </div>

我也尝试使用iframe，但点击提交按钮时没有任何反应。

我怎样才能使它工作并在我的第二个 PHP 代码的 if 语句中显示我的消息？

Answer 1

如果这是您的提交按钮，这将起作用

 <input type="submit" name="transfer" value="convert" class="btn btn-elegant" style="margin-top:3%;" />

改成

  <input  name="transfer" value="convert"  class="btn btn-elegant" style="margin-top:3%;" id = "ha" /> //ADD AN ID TO SPECIFY THE ON CLICK TRIGGER

然后是你的表单

   <form  class="form-inline" method="post" action="convert.php" >

改成

   <form  class="form-inline" method="post" action="convert.php" onsubmit = 'return false;' id = "frmData"> // ADD AN ID TO YOUR FORM 

然后对你的脚本进行微调

$('#ha').on('click', function (e) {

      e.preventDefault(); //prevent to reload the page

      $.ajax({
        type: 'POST', //hide url
        url: 'convert.php', //your form validation url
        data: $('#frmData').serialize(), //USE THE ID WE SET IN THE FORM
        success: function (response) {
          $(".yourDiv").append(response); 
        }
      });

    });

Answer 2

要实现这一点，您必须先更改代码，然后像这样更改表单部分

<form  class="form-inline" method="post" action="convert.php" onsubmit = 'return false;' id = "frmData">

像这样更改您的提交按钮

 <input  name="transfer" value="convert"  class="btn btn-elegant" style="margin-top:3%;" id = "ha" />

然后在你的 ajax 函数中添加 e.preventDefault(); 在第一行。