我在表单中有5个输入字段,我想将它们各自的参数和值(如果设置)添加到查询字符串
我想要做的是让它添加?在domain.tld结尾处的第一个参数之前,如果没有,则显示特定参数及其第一个输入的值,然后如果是其他输入,则使用值添加&和下一个参数,然后使用&和其余参数和值因为查询字符串是结构化的,只有在按元素ID在各自的输入中插入值时才添加参数及其值。
在任务中,当且仅当存在相应的输入时,才需要添加带有参数及其值的查询字符串。不知道为什么它不起作用。这可以很好地与PHP的strpos()(已经在其他地方具有类似的重定向功能并且它有效)和JavaScript中的indexOf()相当于PHP的strpos(),对吗?我尝试的内容如下。
不知怎的,我错过了继续思考** url = url + **部分就足够了。最后,我想在textarea元素中显示URL。只需将参数添加到URL并在texarea中显示结果,以便在点击时复制使用。已经有点击复制想出来了。
function parammeterize() {
var paramter0 = document.getElementById('parameter0').value;
var parameter1 = document.getElementById('parameter1').value;
var parameter2 = document.getElementById('parameter2').value;
var parameter3 = document.getElementById('parameter3').value;
var parameter4 = document.getElementById('parameter4').value;
var url = 'https://domain.tld';
if (paramter0) {
if (indexOf(url, '?') !== false) {
var symbol_insert = '&';
} else {
var symbol_insert = '?';
}
url = url + symbol_insert + 'paramter0=' + paramter0;
}
if (parameter1) {
if (indexOf(url, '?') !== false) {
var symbol_insert = '&';
} else {
var symbol_insert = '?';
}
url = url + symbol_insert + 'parameter1=' + parameter1;
}
if (parameter2) {
if (indexOf(url, '?') !== false) {
var symbol_insert = '&';
} else {
var symbol_insert = '?';
}
url = url + symbol_insert + 'parameter2=' + parameter2;
}
if (parameter3) {
if (indexOf(url, '?') !== false) {
var symbol_insert = '&';
} else {
var symbol_insert = '?';
}
url = url + symbol_insert + 'parameter3=' + parameter3;
}
if (parameter4) {
if (indexOf(url, '?') !== false) {
var symbol_insert = '&';
} else {
var symbol_insert = '?';
}
url = url + symbol_insert + 'parameter4=' + parameter4;
}
}
document.getElementById('parammed_url').innerHTML = url;
document.getElementById('add_parameters').addEventListener('click', parammeterize);
<div id="parameters" class="panel-collapse collapse">
<ul class="list-group">
<li class="list-group-item">
<label class="parameter">parameter0 0:</label> <input type="text" class="select-selected" id="parameter0" name="parameter0" maxlength="64">
</li>
<li class="list-group-item">
<label class="parameter">parameter 1:</label> <input type="text" class="select-selected" id="parameter1" name="parameter1" maxlength="64">
</li>
<li class="list-group-item">
<label class="parameter">parameter 2:</label> <input type="text" class="select-selected" id="parameter2" name="parameter2" maxlength="64">
</li>
<li class="list-group-item">
<label class="parameter">parameter 3:</label> <input type="text" class="select-selected" id="parameter3" name="parameter3" maxlength="64">
</li>
<li class="list-group-item">
<label class="parameter">parameter 4:</label> <input type="text" class="select-selected" id="parameter4" name="parameter4" maxlength="64">
</li>
</ul>
<button id="add_parameters" name="submit" class="btn btn-primary">
APPLY
</button>
</div>
也许这就是你想要的jsFiddle。
document.getElementById('add_parameters').addEventListener('click', parammeterize);
function parammeterize() {
let url = 'https://domain.tld';
let params = {};
document.querySelectorAll('#parameters input.select-selected').forEach((element) => {
if (element.value.length > 0)
params[element.id] = element.value;
});
let esc = encodeURIComponent;
let query = Object.keys(params)
.map(k => esc(k) + '=' + esc(params[k]))
.join('&');
url += '?' + query;
alert(url);
}
您在注释中指出了语法错误:indexOf未定义
如果你坚持,测试是否有if (url.indexOf('?') !== -1) {
是?
我认为您不仅要提交表格,在这种情况下您不需要任何处理,表格提交将为您完成
以下是使用URL.searchParams将参数附加到URL的方法
添加此项以获得Internet Explorer支持
<script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>
注意:我将名称更改为参数化
var url = new URL('https://domain.tld');
function parameterize() {
document.querySelectorAll(".select-selected").forEach(function(inp) {
url.searchParams.append(inp.name,inp.value); // if (inp.value) ...
})
console.log(url)
}
document.getElementById('add_parameters').addEventListener('click', parameterize);
<div id="parameters" class="panel-collapse collapse">
<ul class="list-group">
<li class="list-group-item">
<label class="parameter">parameter0 0:</label> <input type="text" class="select-selected" id="parameter0" name="parameter0" maxlength="64">
</li>
<li class="list-group-item">
<label class="parameter">parameter 1:</label> <input type="text" class="select-selected" id="parameter1" name="parameter1" maxlength="64">
</li>
<li class="list-group-item">
<label class="parameter">parameter 2:</label> <input type="text" class="select-selected" id="parameter2" name="parameter2" maxlength="64">
</li>
<li class="list-group-item">
<label class="parameter">parameter 3:</label> <input type="text" class="select-selected" id="parameter3" name="parameter3" maxlength="64">
</li>
<li class="list-group-item">
<label class="parameter">parameter 4:</label> <input type="text" class="select-selected" id="parameter4" name="parameter4" maxlength="64">
</li>
</ul>
<button type="button" id="add_parameters" class="btn btn-primary">
APPLY
</button>
</div>
jQuery注意我在这里测试值。如果没有填写任何内容,您将获得原始URL
var url = new URL('https://domain.tld');
function parameterize() {
$(".select-selected").each(function() {
if (this.value) url.searchParams.append(this.name,this.value); // only if value entered
})
console.log(url)
}
$('#add_parameters').on('click', parameterize);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="parameters" class="panel-collapse collapse">
<ul class="list-group">
<li class="list-group-item">
<label class="parameter">parameter0 0:</label> <input type="text" class="select-selected" id="parameter0" name="parameter0" maxlength="64">
</li>
<li class="list-group-item">
<label class="parameter">parameter 1:</label> <input type="text" class="select-selected" id="parameter1" name="parameter1" maxlength="64">
</li>
<li class="list-group-item">
<label class="parameter">parameter 2:</label> <input type="text" class="select-selected" id="parameter2" name="parameter2" maxlength="64">
</li>
<li class="list-group-item">
<label class="parameter">parameter 3:</label> <input type="text" class="select-selected" id="parameter3" name="parameter3" maxlength="64">
</li>
<li class="list-group-item">
<label class="parameter">parameter 4:</label> <input type="text" class="select-selected" id="parameter4" name="parameter4" maxlength="64">
</li>
</ul>
<button type="button" id="add_parameters" class="btn btn-primary">
APPLY
</button>
</div>
如果收集数组中的输入,无论您有多少参数,都可以过滤和连接它们。这样,每次添加参数时都不必编写新代码,因为查询字符串?
的开头将始终在数组连接之前和数组项之间的&
分隔符之前。我将.parameter clas移动到了输入,因为它比标签更有意义。
const create_uri = () => {
const parameters = [ ...document.querySelectorAll( '.parameter' ) ];
const root = 'https://domain.tld';
const query_string = parameters.map( input => input.value ? `${ input.id }=${ input.value }` : '' );
return `${ root }?${ encodeURIComponent( query_string.join( '&' )) }`;
};
const parammeterize = () => {
const uri = create_uri();
console.log( uri );
};
document.getElementById('add_parameters').addEventListener('click', parammeterize);
<div id="parameters" class="panel-collapse collapse">
<ul class="list-group">
<li class="list-group-item">
<label>parameter 0:</label>
<input type="text" class="select-selected parameter" id="parameter0" name="parameter0" maxlength="64">
</li>
<li class="list-group-item">
<label>parameter 1:</label>
<input type="text" class="select-selected parameter" id="parameter1" name="parameter1" maxlength="64">
</li>
<li class="list-group-item">
<label>parameter 2:</label>
<input type="text" class="select-selected parameter" id="parameter2" name="parameter2" maxlength="64">
</li>
<li class="list-group-item">
<label>parameter 3:</label>
<input type="text" class="select-selected parameter" id="parameter3" name="parameter3" maxlength="64">
</li>
<li class="list-group-item">
<label>parameter 4:</label>
<input type="text" class="select-selected parameter" id="parameter4" name="parameter4" maxlength="64">
</li>
</ul>
<button id="add_parameters" name="submit" class="btn btn-primary">
APPLY
</button>
</div>
请注意,如果您不想对输入应用特殊处理,那么您所做的一切与此完全相同(将type="submit"
添加到提交表单的按钮):
<div id="parameters" class="panel-collapse collapse">
<form action="https://domain.tld" method="get">
<ul class="list-group">
<li class="list-group-item">
<label class="parameter">parameter0 0:</label> <input type="text" class="select-selected" id="parameter0" name="parameter0" maxlength="64">
</li>
<li class="list-group-item">
<label class="parameter">parameter 1:</label> <input type="text" class="select-selected" id="parameter1" name="parameter1" maxlength="64">
</li>
<li class="list-group-item">
<label class="parameter">parameter 2:</label> <input type="text" class="select-selected" id="parameter2" name="parameter2" maxlength="64">
</li>
<li class="list-group-item">
<label class="parameter">parameter 3:</label> <input type="text" class="select-selected" id="parameter3" name="parameter3" maxlength="64">
</li>
<li class="list-group-item">
<label class="parameter">parameter 4:</label> <input type="text" class="select-selected" id="parameter4" name="parameter4" maxlength="64">
</li>
</ul>
<button id="add_parameters" name="submit" type="submit" class="btn btn-primary">
APPLY
</button>
</form>
</div>
说明:通过在method="get"
标记中使用form
,所有输入值将在提交时以格式url?{input1_name}={input1_value}&{input2_name}={input2_value}...
在URL中传递,就像您在自定义方式中所做的那样
更正了你的indexOf()
语法,否则一切都很好
function parammeterize() {
var paramter0 = document.getElementById('parameter0').value;
var parameter1 = document.getElementById('parameter1').value;
var parameter2 = document.getElementById('parameter2').value;
var parameter3 = document.getElementById('parameter3').value;
var parameter4 = document.getElementById('parameter4').value;
var url = 'https://domain.tld';
if (paramter0) {
if (url.indexOf('?') !== -1) {
var symbol_insert = '&';
} else {
var symbol_insert = '?';
}
url = url + symbol_insert + 'paramter0=' + paramter0;
}
if (parameter1) {
if (url.indexOf('?') !== -1) {
var symbol_insert = '&';
} else {
var symbol_insert = '?';
}
url = url + symbol_insert + 'parameter1=' + parameter1;
}
if (parameter2) {
if (url.indexOf('?') !== -1) {
var symbol_insert = '&';
} else {
var symbol_insert = '?';
}
url = url + symbol_insert + 'parameter2=' + parameter2;
}
if (parameter3) {
if (url.indexOf('?') !== -1) {
var symbol_insert = '&';
} else {
var symbol_insert = '?';
}
url = url + symbol_insert + 'parameter3=' + parameter3;
}
if (parameter4) {
if (url.indexOf('?') !== -1) {
var symbol_insert = '&';
} else {
var symbol_insert = '?';
}
url = url + symbol_insert + 'parameter4=' + parameter4;
}
console.log(url)
}
document.getElementById('add_parameters').addEventListener('click', parammeterize);
<!DOCTYPE html>
<html>
<body>
<div id="parameters" class="panel-collapse collapse">
<ul class="list-group">
<li class="list-group-item">
<label class="parameter">parameter0 0:</label> <input type="text" class="select-selected" id="parameter0" name="parameter0" maxlength="64">
</li>
<li class="list-group-item">
<label class="parameter">parameter 1:</label> <input type="text" class="select-selected" id="parameter1" name="parameter1" maxlength="64">
</li>
<li class="list-group-item">
<label class="parameter">parameter 2:</label> <input type="text" class="select-selected" id="parameter2" name="parameter2" maxlength="64">
</li>
<li class="list-group-item">
<label class="parameter">parameter 3:</label> <input type="text" class="select-selected" id="parameter3" name="parameter3" maxlength="64">
</li>
<li class="list-group-item">
<label class="parameter">parameter 4:</label> <input type="text" class="select-selected" id="parameter4" name="parameter4" maxlength="64">
</li>
</ul>
<button id="add_parameters" name="submit" class="btn btn-primary">
APPLY
</button>
</div>
</body>
</html>