[英]Send contents of fields in a form whit POST method jquery
我遇到這種情況,這是到目前為止的HTML頁面:
<form id="Form" label="Dati" name="Dati" title="Dati" visible="true" method="post" action="land.htm">
<h1>DATI</h1>
<label class="label" for="campoA">
<input type="text" id="campoA" class="fieldSet" style="width: 102px"/><label> Campo A</label>
<input type="text" id="campoB" class="fieldSet" style="width: 102px"/><label> Campo B</label>
<input type="button" id="send" value="Trasmetti" class="fieldSet"/>
</form>
在按鈕上單擊,我需要將這兩個文本輸入的內容(值)發送到另一個html頁面。 我看了網上找到的許多解決方案,但是我對此很陌生,無法完成任務。 誰能在javascript / jquery中為我提供正確的分步代碼?
提前致謝
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#send").click(function(){
$.post("demo_test_post.asp",
{
campoA: $('#campoA').val(),
campoB: $('#campoB').val()
},
function(data,status){
alert("Data: " + data + "\nStatus: " + status);
});
});
});
</script>
</head>
<body>
<form id="Form" label="Dati" name="Dati" title="Dati" visible="true" method="post" action="land.htm">
<h1>DATI</h1>
<label class="label" for="campoA">
<input type="text" id="campoA" class="fieldSet" style="width: 102px"/><label> Campo A</label>
<input type="text" id="campoB" class="fieldSet" style="width: 102px"/><label> Campo B</label>
<input type="button" id="send" value="Trasmetti" class="fieldSet"/>
</form>
</body>
</html>
您需要服務器技術,這是在服務器上使用PHP的示例。
頁面land.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<form id="Form" label="Dati" name="Dati" title="Dati" visible="true" method="post" action="land.php">
<h1>DATI</h1>
<label class="label" for="campoA">
<label> <input type="text" id="campoA" name="campoA" class="fieldSet" style="width: 102px"/> Campo A</label>
<label> <input type="text" id="campoB" name="campoB" class="fieldSet" style="width: 102px"/> Campo B</label>
<input type="submit" id="send" value="Trasmetti" class="fieldSet"/>
</form>
</body>
</html>
頁面land.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div>
CampoA: <?php echo $_POST['campoA'] ?><br/>
Or <br />
<?php echo $_REQUEST['campoA'] ?><br/>
</div>
<div>
CampoB: <?php echo $_POST['campoB'] ?><br/>
Or <br />
<?php echo $_REQUEST['campoB'] ?><br/>
</div>
</body>
</html>
您可以使用JQueries AJAX,如下所示:
$("#send").click(function(e){
e.preventDefault;
var val1 = $("campoA").val();
var val2 = $("campoB").val();
$.ajax({
method: "POST",
url: "url",
data: { value1: val1, value2: val2 }
}).done(function(){
// do something
});
});
嘗試這個:
<form id="Form" label="Dati" name="Dati" title="Dati" visible="true" method="post" action="land.htm">
<h1>DATI</h1>
<label class="label" for="campoA">
<label> <input type="text" id="campoA" name="campoA" class="fieldSet" style="width: 102px"/> Campo A</label>
<label> <input type="text" id="campoB" name="campoB" class="fieldSet" style="width: 102px"/> Campo B</label>
<input type="button" id="send" value="Trasmetti" class="fieldSet"/>
</form>
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script>
$(document).ready(function() {
$('#send').click(function(evt) {
evt.preventDefault();
evt.stopPropagation();
$.ajax({
url: "./proba.html",
method: "POST",
data: $('#Form').serialize(),
success: function(html) {
console.log(html);
}
});
});
});
</script>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.