Comment afficher une page HTML d'un formulaire de soumission dans un nouveau div

Question

J'ai un formulaire de soumission pour mes clients afin de suivre leurs commandes avec un code de suivi. Je veux montrer le résultat du statut de la commande qui est en train de vérifier sur le site Web de la compagnie maritime.

input[type=text], 
 
select, 
 
textarea { 
 
    width: 100%; 
 
    padding: 12px; 
 
    border: 1px solid #ccc; 
 
    border-radius: 4px; 
 
    margin-top: 0px; 
 
    margin-bottom: 5px; 
 
    resize: vertical; 
 
    font-family: "Comic Sans MS", cursive, sans-serif; 
 
    font-size: 14px; 
 
    font-weight: bold; 
 
} 
 

 
input[type=submit] { 
 
    background-color: #000; 
 
    color: white; 
 
    padding: 10px 20px; 
 
    border: none; 
 
    border-radius: 20px; 
 
    font-weight: bold; 
 
    cursor: pointer; 
 
} 
 

 
input[type=submit]:hover { 
 
    color: #FFF; 
 
    background-color: #dd0017; 
 
} 
 

 
input[type=submit]:active { 
 
    box-shadow: inset 0px 0px 10px #000; 
 
    color: #FFF; 
 
    background-color: #dd0017; 
 
} 
 

 
.container { 
 
    border-radius: 5px; 
 
    background-color: rgba(241, 98, 114, 0.25); 
 
    padding: 0px; 
 
    margin-bottom: 20px; 
 
}

<div class="container"> 
 
    <div align="left" style="background-color:rgba(241, 98, 114, 0.25);padding:15px 0px 15px 5px;border-radius: 5px; border:1px solid #ff60cd;"><img align="left" alt="Sürat Kargo Takip" src="image\PNGLER\surat-kargo-takip-icon-200x40.png" style="float:none;" /></div> 
 

 
    <form action="http://www.suratkargo.com.tr/kargoweb/bireysel.aspx" align="left" onsubmit="window.open('','top','resizable=1, scrollbars=1,width=790,left=25,top=25')" target="top">&nbsp; 
 
    <h2><label for="takipnoalani">Takip NO :</label></h2> 
 
    <input id="takipnoalani" name="no" placeholder="Kargo Takip Numaranızı Yazınız..." type="text" /> 
 
    <input name="action" style="font-size:16px;float:right;" type="submit" value="Getir" />&nbsp;</form> 
 
</div> 
 

 
<div id="show_result" style="border:2px solid red;"> 
 
    I want to show the result of query here<br/>But I couldn't :(<br/> And it would be better if this red bordered div is not shown until the customer click the "Getir" button. 
 
</div>

Mon code est l'ouverture dans une nouvelle page. Cependant, je veux montrer sur la même page exactement sous cette forme avec un nouveau div (ou existant mais caché). Je ne sais pas si c'est possible ou non. J'ai regardé toutes les questions similaires, mais je n'ai pas trouvé de solution.

Je serais très reconnaissant si quelqu'un pouvait m'aider.

Answer 1

Je vous recommande d'utiliser Ajax pour charger le contenu et le montrer sous forme. Note J'ai commenté la partie que j'utilise Ajax pour charger le contenu de l'action car l'action n'est pas disponible ici mais elle devrait être assez simple.

$(document).ready(function() { 
 
    var result = "Result from your action."; 
 
    
 
    $('#form1').on('submit', function(e){ 
 
    e.preventDefault(); 
 
     
 
    $('#show_result').html("Result will show up here").slideDown('slow'); 
 
     
 
    /* 
 
    var $form = $(this); 
 
    $.post($form.attr('action'), $form.serialize(), function(data){ 
 
     $('#show_result').html("Result will show up here").slideDown('slow'); 
 
    });*/ 
 
     
 
    return false; 
 
    }); 
 
});

input[type=text], 
 
select, 
 
textarea { 
 
    width: 100%; 
 
    padding: 12px; 
 
    border: 1px solid #ccc; 
 
    border-radius: 4px; 
 
    margin-top: 0px; 
 
    margin-bottom: 5px; 
 
    resize: vertical; 
 
    font-family: "Comic Sans MS", cursive, sans-serif; 
 
    font-size: 14px; 
 
    font-weight: bold; 
 
} 
 

 
input[type=submit] { 
 
    background-color: #000; 
 
    color: white; 
 
    padding: 10px 20px; 
 
    border: none; 
 
    border-radius: 20px; 
 
    font-weight: bold; 
 
    cursor: pointer; 
 
} 
 

 
input[type=submit]:hover { 
 
    color: #FFF; 
 
    background-color: #dd0017; 
 
} 
 

 
input[type=submit]:active { 
 
    box-shadow: inset 0px 0px 10px #000; 
 
    color: #FFF; 
 
    background-color: #dd0017; 
 
} 
 

 
.container { 
 
    border-radius: 5px; 
 
    background-color: rgba(241, 98, 114, 0.25); 
 
    padding: 0px; 
 
    margin-bottom: 20px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div align="left" style="background-color:rgba(241, 98, 114, 0.25);padding:15px 0px 15px 5px;border-radius: 5px; border:1px solid #ff60cd;"><img align="left" alt="Sürat Kargo Takip" src="image\PNGLER\surat-kargo-takip-icon-200x40.png" style="float:none;" /></div> 
 

 
    <form action="http://www.suratkargo.com.tr/kargoweb/bireysel.aspx" align="left" onsubmit="window.open('','top','resizable=1, scrollbars=1,width=790,left=25,top=25')" target="top" id="form1">&nbsp; 
 
    <h2><label for="takipnoalani">Takip NO :</label></h2> 
 
    <input id="takipnoalani" name="no" placeholder="Kargo Takip Numaranızı Yazınız..." type="text" /> 
 
    <input name="action" style="font-size:16px;float:right;" type="submit" value="Getir" />&nbsp;</form> 
 
</div> 
 

 
<div id="show_result" style="display:none;border:2px solid red;"> 
 
    
 
</div>

Answer 2

Après avoir cherché pendant des heures, j'ai trouvé une question similaire ici:

Similar Question but opening a PHP file

et la conception pour ma solution. Merci à tous. Voici ma solution:

$('#kargotakip').submit(function() { // catch the form's submit event 
 
    $.ajax({ // create an AJAX call... 
 
     data: $(this).serialize(), // get the form data 
 
     type: $(this).attr('method'), // GET or POST 
 
     url: $(this).attr('action'), // the file to call 
 
     success: function(response) { // on success.. 
 
      $('#sonucgoster').html(response); // update the DIV 
 
     } 
 
    }); 
 
    return false; // cancel original event to prevent form submitting 
 
});

input[type=text], select, textarea { 
 
    width: 100%; 
 
    padding: 12px; 
 
    border: 1px solid #ccc; 
 
    border-radius: 4px; 
 
    margin-top: 0px; 
 
    margin-bottom: 5px; 
 
    resize: vertical; 
 
    font-family:"Comic Sans MS", cursive,sans-serif; 
 
    font-size: 14px; 
 
    font-weight: bold; 
 
} 
 

 
input[type=submit] { 
 
    background-color: #000; 
 
    color: white; 
 
    padding: 10px 20px; 
 
    border: none; 
 
    border-radius: 20px; 
 
    font-weight: bold; 
 
    cursor: pointer; 
 
} 
 

 
input[type=submit]:hover { 
 
    color: #FFF; 
 
\t background-color: #dd0017; 
 
} 
 

 
input[type=submit]:active { 
 
    box-shadow: inset 0px 0px 10px #000; 
 
\t color: #FFF; 
 
\t background-color:#dd0017; 
 
} 
 

 
.container { 
 
    border-radius: 5px; 
 
    background-color: rgba(241, 98, 114, 0.25); 
 
    padding: 0px; 
 
    margin-bottom: 20px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
<div align="left" style="background-color:rgba(241, 98, 114, 0.25);padding:15px 0px 15px 5px;border-radius: 5px; border:1px solid #ff60cd;"><img align="left" alt="Sürat Kargo Takip" src="image\PNGLER\surat-kargo-takip-icon-200x40.png" style="float:none;" /></div> 
 

 
<form id="kargotakip" method="GET" action="http://www.suratkargo.com.tr/kargoweb/bireysel.aspx" align="left" >&nbsp; 
 
\t <h2><label for="takipnoalani">Takip NO :</label></h2> 
 
\t <input type="text" id="takipnoalani" name="no" placeholder="Kargo Takip Numaranızı Yazınız..." /> 
 
\t <input type="submit" name="action" value="Getir" style="font-size:16px;float:right;" />&nbsp; 
 
</form> 
 

 
</div> 
 
<div id="sonucgoster" style="background-color:rgba(241, 98, 114, 0.25);border-radius: 5px; border:1px solid #ff60cd;"></div>