表单提交后打开模式，我不知道 ajax :(答案

【问题标题】：open modal after form submit, i dont know ajax :(表单提交后打开模式，我不知道 ajax :(
【发布时间】：2016-12-15 02:37:36
【问题描述】：

我正在尝试将数据从表单发送到模态以验证数据并在处理后发送，但这部分数据需要来自表单的帖子，而当它调用模态时，这部分数据不起作用，我不知道如何使用 ajax 谁能给我一个方法谢谢你

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<?php
if ($_POST) {

		$amount = $_POST['precio']*100; 
	   	echo $amount;
	    $miObj->setParameter("DS_MERCHANT_AMOUNT",$amount);

	}
?>
<form data-toggle="modal" data-target="#myModal" method="POST" action="" >

			<input name="precio" id="precio" />
			<input  class="btn btn-info" type="submit" >
</form>



<div class="container">

  	

  <div class="modal fade" id="myModal" role="dialog">

	

    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Confirma tu compra</h4>
        </div>
        <div class="modal-body">
          <div id="imagen">IMAGEN COMPRA</div>
          <img src="" alt="mando">
          <div class="details-area" id="detailsArea">
			<h1 style="color:#007acc">Opciones Seleccionadas</h1> 	
		</div>
                 <div class="form-group">
                  <label for="nombre">Nombre:</label>
                  <input type="name" class="form-control" id="nombre">
                </div>
                 <div class="form-group">
                  <label for="apellido">Apellido</label>
                  <input type="name" class="form-control" id="Apellido">
                </div>
                 <div class="form-group">
                  <label for="direccion">Dirección</label>
                  <input type="address" class="form-control" id="direccion">
                </div>
                <div class="form-group">
                  <label for="telefono">Telefono</label>
                  <input type="phone" class="form-control" id="telefono">
                </div>
                <div class="form-group">
                  <label for="email">Email address:</label>
                  <input type="email" class="form-control" id="email">
                </div>
             
          		<div align="right"> <h3>Total Compra <span id="AddToCartPriceID2">&nbsp $00.00</span></h3></div>
              
        </div>

		       

        <div class="modal-footer"> 
				
				<form name="frm" action="https://sis-t.redsys.es:25443/sis/realizarPago" method="POST" target="_blank" style="margin-top:10px">
	        		<input  name="DS_MERCHANT_AMOUNT" value="<?php echo $amount; ?>"/></br>
					<input type="hidden" name="Ds_SignatureVersion" value="<?php echo $version; ?>"/></br>
					<input type="hidden" name="Ds_MerchantParameters" value="<?php echo $params; ?>"/></br>
					<input type="hidden" name="Ds_Signature" value="<?php echo $signature; ?>"/></br>
					<button type="submit" class="btn btn-default" >Confirmar</button>
			        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
		        </form>

        </div>

     

      </div>
      
    </div>
  </div>
  
</div>

【问题讨论】：

听起来是学习 Ajax 的最佳时机！你可以利用这段时间学习如何去做，而不是等待别人为你做这一切。我个人喜欢 jquery Ajax，因为它很容易实现。阅读文档，尝试一下，当/如果遇到困难时回来。

标签： javascript php ajax twitter-bootstrap modal-dialog

【解决方案1】：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

  <form id="frm"  method="POST">
            <input name="precio" id="precio" />
            <input  class="btn btn-info" type="submit" value="Submit" name="submit">
  </form>
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Confirma tu compra</h4>
        </div>
        <div class="modal-body">
          <div id="imagen">IMAGEN COMPRA</div>
          <img src="" alt="mando">
          <div class="details-area" id="detailsArea">
            <h1 style="color:#007acc">Opciones Seleccionadas</h1>   
              </div>
                 <div class="form-group">
                  <label for="nombre">Nombre:</label>
                  <input type="name" class="form-control" id="nombre">
                </div>
                 <div class="form-group">
                  <label for="apellido">Apellido</label>
                  <input type="name" class="form-control" id="Apellido">
                </div>
                 <div class="form-group">
                  <label for="direccion">Dirección</label>
                  <input type="address" class="form-control" id="direccion">
                </div>
                <div class="form-group">
                  <label for="telefono">Telefono</label>
                  <input type="phone" class="form-control" id="telefono">
                </div>
                <div class="form-group">
                  <label for="email">Email address:</label>
                  <input type="email" class="form-control" id="email">
                </div>

                <div align="right"> <h3>Total Compra <span id="AddToCartPriceID2">&nbsp $00.00</span></h3></div>

        </div>
        <div class="modal-footer"> 
                <form name="frm" action="https://sis-t.redsys.es:25443/sis/realizarPago" method="POST" target="_blank" style="margin-top:10px">
                    <input  name="DS_MERCHANT_AMOUNT" value="<?php echo $amount; ?>"/></br>
                    <input type="hidden" name="Ds_SignatureVersion" value="<?php echo $version; ?>"/></br>
                    <input type="hidden" name="Ds_MerchantParameters" value="<?php echo $params; ?>"/></br>
                    <input type="hidden" name="Ds_Signature" value="<?php echo $signature; ?>"/></br>
                    <button type="submit" class="btn btn-default" >Confirmar</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </form>
        </div>
      </div>
    </div>
  </div>
   <script type="text/javascript">
    $("#frm").submit(function(e){
        e.preventDefault();
        $.ajax({
            type : 'POST',
            data: $("#frm").serialize(),
            url : 'url',
            success : function(data){
               $("#myModal").modal("show");

            }
        });
        return false;
    });
</script>

【讨论】：

嗨 dipali 感谢您的回答，我正在使用您给我的脚本，但现在它显示了模式但没有加载 php，我做错了什么？，谢谢
您是否设置了给定 url 的值。请分享您的php代码
嗨 dipali，感谢您的回答，我在 sme 页面中有 php，我必须把它放在另一个文件中吗？谢谢 setParameter("DS_MERCHANT_AMOUNT",$amount); } ?>
你需要将php代码放在另一个文件中，并在php文件上发送ajax请求，需要在ajax url中设置另一个文件的路径：perameter。
嗨 dipali，如果我使用新文件，使用 ajax 是没有意义的，想法是在 modal 中加载变量，谢谢

【解决方案2】：

   validated_form.html

 <html>
    <head>

    <script type="text/javascript">
    function validate()
    {
     var error="";
     var name = document.getElementById( "name_of_user" );
     if( name.value != "" )
     {
      name = name.value;
      document.getElementById( "name" ).innerHTML = name;
      return false;
     }
    }

    </script>

    </head>
    <body>

    <form method="POST" action="getdata.php" onsubmit="return validate();">
     <input type="text" name="username" id="name_of_user">
     <input type="submit" name="submit_form" value="Submit">
    </form>

// use id=name in your model form field
    <input type="text" id="name" >

    </body>
    </html>


=====================================

    getdata.php



    <?php
    if( isset( $_POST['submit_form'] ) )
    {
     validate_data($data)
     {
      $data = trim($data);
      $data = stripslashes($data);
      $data = strip_tags($data);
      $data = htmlspecialchars($data);
      $data = mysqli_real_escape_string($data);
      return $data;    
     }
    }
    ?>

【讨论】：

嗨 sunil 感谢您的回答，我会尝试使用 ajax，因为我不太清楚您的回答谢谢