获取表格输入值到 jQuery AJAX 调用 URL 变量
[英]Get Form Input value to jQuery AJAX call URL variable
问题描述
Trying to get the HTML Input Form value to a jQuery AJAX call's URL as amt in url: "http://localhost:8080/orderNo?amount=" + amt, . 我可以通过调用 getAmtValue() 获取输入值以登录到控制台，但似乎无法在外部获取 amt 值。 请问我在这里做错了什么？ 范围问题？
<body>
<form class="form-inline" onsubmit = " return getAmtValue()">
Find orders by amount :<br>
<div class="form-group">
<input type="text" class="form-control inputArea" id="getAmt" placeholder="Enter Amount">
</div>
<button type="submit" class="btn btn-default submit">Submit</button>
</form>
</body>
<script>
$(document).ready(function() {
var amt = "";
$.ajax({
type: "GET",
url: "http://localhost:8080/orderNo?amount=" + amt ,
xhrFields: {
withCredentials: true
},
dataType : "json",
success : function(data) {
let text = "";
for (let x in data) {
$('.order_amt').append("<br>" + data[x].amt + "<br>");
$('.order_number').append("<br>" + data[x].order_no + "<br>");
$('.order_date').append("<br>" + data[x].date + "<br>"):
}
}
});//End AJAX
});//End $(document).ready(function())
function getAmtValue(){
amt = document.getElementById("getamt").value;
console.log("Value from input : " + amt);
return false;
};
</script>
更新：
Per McB & Nawed Khan，现在工作如下。
$(document).ready(function() {
let amt = "";
});//End $(document).ready(function())
function getAmtValue(){
amt = document.getElementById("getamt").value;
console.log("Value from input : " + amt);
$.ajax({
type: "GET",
url: "http://localhost:8080/orderNo?amount=" + amt ,
xhrFields: {
withCredentials: true
},
dataType : "json",
success : function(data) {
let text = "";
for (let x in data) {
$('.order_amt').append("<br>" + data[x].amt + "<br>");
$('.order_number').append("<br>" + data[x].order_no + "<br>");
$('.order_date').append("<br>" + data[x].date + "<br>"):
}
}
});//End AJAX
return false;
};
1 个解决方案
解决方案1
1 已采纳 2019-10-28 19:50:58
在表单提交时调用的 function 中移动 ajax 调用。 所以整个 javascript 将如下所示：
<script>
function getAmtValue(){
var amt = document.getElementById("getAmt").value;
console.log("Value from input : " + amt);
$.ajax({
type: "GET",
url: "http://localhost:8080/orderNo?amount=" + amt ,
xhrFields: {
withCredentials: true
},
dataType : "json",
success : function(data) {
let text = "";
for (let x in data) {
$('.order_amt').append("<br>" + data[x].amt + "<br>");
$('.order_number').append("<br>" + data[x].order_no + "<br>");
$('.order_date').append("<br>" + data[x].date + "<br>"):
}
}
});//End AJAX
return false;
};
</script>
从表单获取输入并将其用于url以进行ajax调用
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.