如何在新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>