如何在新div中显示提交表单的HTML页面

Question

我有一个提交表单，供我的客户使用跟踪代码跟踪他们的订单。我想显示从船公司网站查询的订单状态结果。

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>

我的代码是在新页面中打开它。但是，我想在同一个页面上显示它，并使用新的（或现有的但隐藏的）div。我不知道这是否可能。我查看了与此类似的所有问题，但无法找到解决方案。

如果有人能帮助我，我将不胜感激。

Answer 1

我建议您使用Ajax加载内容并在窗体中显示它。注意我注释了我使用Ajax加载动作内容的部分，因为这里没有可用的动作，但它应该非常简单。

$(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

我搜索小时后，我发现了一个类似的问题在这里：

Similar Question but opening a PHP file

和设计，是为我的解决方案。 感谢大家。这里是我的解决方案：

$('#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>