我想限制從表單提交的資料出現在 url 中。如果僅輸入單詞或僅選擇金額，我希望該值來自 url。我怎么能像 jquery 一樣做呢？例如，有一個像下面這樣的結構，但它不起作用。限制在 url 中使用 jquery 表單提交的資料？例如;
<form id="form1" name="form1" method="get" action="">
<input type="text" name="word" class="form-control">
<input type="number" name="total_amount" class="form-control">
<select name="amount" class="form-control">
<option value="15">
<option value="20">
<option value="25">
</select>
<button type="button" id="submit" >
<span >Filter</span>
</button>
</form>
< script>
$(document).ready(function(){
$('#submit').click(function() {
$('#form1 input[type="text"]').each(function(){
if(!$(this).val()){
$(this).prop("name","");
}else{
$(this).val("");
}
});
$('#form1 input[type="number"]').each(function(){
if(!$(this).val()){
$(this).prop("name","");
}else{
$(this).val();
}
});
$('#form1 select').each(function(){
if(!$(this).val()){
$(this).prop("name","");
}else{
$(this).val();
}
});
});
});
</ script>
uj5u.com熱心網友回復：
在上述討論結束之前，我已經開始撰寫解決方案，所以就是這樣。我正在使用您$.each()在表單元素上的設計目標。
我將展示 (1) 使用硬編碼表單欄位執行此操作的普通方法，以及 (2) 使用 jQuery 執行此操作的更通用方法。您可以使用其中任何一種，也可以將原版方式升級為通用方式。
無論您是否使用此代碼（因為對于您的 SEO 目的，恕我直言，它有點毫無意義），它會向您展示或深入了解如何使用 javascript 對表單資料應用條件，這對于其他用例非常有用，比如“驗證”。
該解決方案的所有剩余解釋都在后面的代碼注釋中。
// This is the generic jQuery approach of this SOLUTION, and by generic meaning it doesn't matter what the IDs of the
// fields are in the form, just so long as each field to be inspected needs to have an ID.
function validateSubmitJquery() {
var action = "somescript.php"; // your GET fields go after the question mark, but later
var params = []; // make this an array, we'll convert to string later
$('#form1 input, select').each(function(){
console.log( this )
if ( $(this).val().trim().length > 0) {
params.push({
key: $(this)[0].id, // [0] to get ID from DOM element itself
value: $(this).val().trim()
});
}
});
console.log(params);
// USe params array to compose the url
var url = action.toString(); // use toString to clone the action part, tho not really needed here
if (params.length > 0) {
url = "?"; // params come after the question mark
for (var i = 0; i < params.length; i ) {
if (i > 0) {
url = "&"; // each param is separated by ampersand
}
// add the param key and value to the url. Url encode the value to prevent problems
url = params[i].key "=" encodeURIComponent( params[i].value );
}
}
// Now you have an Url with conditional values based on whatever requirements.
// So you can redirect to this Url now
// location.href = url; // uncomment to do actual redirection
console.log("URL: " url);
}
// This concept is written in vanilla with each field being hard coded so it's easy to follow the design
// strategy here.
function validateSubmitConcept() {
// var vword = $("#word").val(); // jquery way, uncomment if you want jquery
var vword = document.getElementById("word").value; // vanilla way, delete this line if you want jquery
// var vnumber = $("#number").val(); // jquery way, uncomment if you want jquery
var vnumber = document.getElementById("number").value; // vanilla way, delete this line if you want jquery
// var vamount = $("#total_amount").val(); // jquery way
var vamount = document.getElementById("total_amount").value;
// Since you are using GET parameters, you can compose the URL as a string
var action = "somescript.php"; // your GET fields go after the question mark, but later
var params = []; // make this an array, we'll convert to string later
if (vword.trim().length > 0) { // use trim to rid trailing and beginning white space
params.push({
key: "word",
value: vword.trim()
});
}
if (vnumber.trim() != "") {
params.push({
key: "number",
value: vnumber
});
}
if (vamount.trim() != "") {
params.push({
key: "total_amount",
value: vamount
});
}
console.log(params);
// USe params array to compose the url
var url = action.toString(); // use toString to clone the action part, tho not really needed here
if (params.length > 0) {
url = "?"; // params come after the question mark
for (var i = 0; i < params.length; i ) {
if (i > 0) {
url = "&"; // each param is separated by ampersand
}
// add the param key and value to the url. Url encode the value to prevent problems
url = params[i].key "=" encodeURIComponent( params[i].value );
}
}
// Now you have an Url with conditional values based on whatever requirements.
// So you can redirect to this Url now
// location.href = url; // uncomment to do actual redirection
console.log("URL: " url);
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<!-- You don't need a true form in this SOLUTION, except for styling, so lose the method and action -->
<!-- form id="form1" name="form1" method="get" action="" -->
<form id="form1">
<!-- edit your form fields by replacing the `name` attribute with `id` on the elements inside the form -->
<input type="text" id="word" class="form-control">
<input type="number" id="total_amount" class="form-control">
<select id="number" class="form-control">
<!-- <option> needs closing </option> and optional text in between to show in drop down -->
<option value=""></option> <!-- Blank option for when user selects no number, you can omit this line -->
<option value="15">15</option>
<option value="20">20</option>
<option value="25">25</option>
</select>
<!-- make a button that has type button so that it doesn't submit -->
<button type="button" onclick="validateSubmitConcept()">Submit (Concept)</button>
<button type="button" onclick="validateSubmitJquery()">Submit (jQuery)</button>
</form>基本上，上面的代碼所做的是收集表單欄位的值（按 ID），對應該包含在 URL 中的內容應用條件，在這種情況下，任何非空白欄位，將這些欄位組合成有效的 URL 字串，然后重定向到具有這些值的任何地方。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/439734.html
下一篇：洗掉和附加作品，但不替換html