open modal after form submit, i dont know ajax :(

Question

Я пытаюсь отправить данные из формы в модальный, чтобы проверить данные и после отправки процедуры, но для этой части данных требуется сообщение из формы thr, и это один не работает, когда его называют модальный, я не знаю, как использовать 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) { 
 

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

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

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

 

 

 
<div class="container"> 
 

 
    \t 
 

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

 
\t 
 

 
    <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"> 
 
\t \t \t <h1 style="color:#007acc">Opciones Seleccionadas</h1> \t 
 
\t \t </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> 
 
       
 
      \t \t <div align="right"> <h3>Total Compra <span id="AddToCartPriceID2">&nbsp $00.00</span></h3></div> 
 
       
 
     </div> 
 

 
\t \t   
 

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

 
     </div> 
 

 
     
 

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

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

Answer 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;  
    } 
    } 
    ?>