问题描述
我有一个基本表格。我在表单之外隐藏了输入。我想使用 JavaScript 设置表单操作,以在用户按下输入/提交按钮时将隐藏参数中的值作为变量包含在表单的 GET 中。
表单的当前操作是 "https://example.com"
。我想使用 JavaScript 从隐藏输入中获取值并将它们连接到表单的操作中,以便将存储在表单外的信息与表单一起提交。
例如,表单操作所需的输出是 "https://example.com?firstParameter=parameter&secondParameter=secondParameter"
。
这是我目前所拥有的。
<form action="https://example.com" method="GET">
<input type="text"></input>
<button type="submit"></button>
</form>
<input type="hidden" id="firstParameter" value="parameter">
<input type="hidden" id="secondParameter" value="anotherParameter">
<script>
function setFormAction() {
var firstParameter= $("#firstParameter").val();
var secondParameter= $("#secondParameter").val();
var url = "https://example.com?";
if(firstParameter!== ""){
url = url + "&firstParameter=" + firstParameter;
}
if(secondParameter!== ""){
url = url + "&secondParameter=" + secondParameter;
}
// form action = url; (Need help here)
}
</script>
解决方法
一个更简单的解决方案可能是将 name
添加到隐藏的输入中,然后将它们附加到表单中,以便它们在默认过程中被提交。
HTML
<input type="hidden" id="firstParameter" name="firstParameter" value="parameter">
<input type="hidden" id="secondParameter" name="secondParameter" value="anotherParameter">
JS
$('form').submit(function(){
const $form = $(this);
$('#firstParameter,#secondParameter').each(function(){
if(this.value){
$form.append(this)
}
});
});
,
尝试以下操作:
document.querySelector('form').setAttribute('action',url);
function setFormAction() {
var firstParameter = $("#firstParameter").val();
var secondParameter = $("#secondParameter").val();
var url = "https://example.com";
if (firstParameter !== "") {
url = url + "&firstParameter=" + firstParameter;
}
if (secondParameter !== "") {
url = url + "&secondParameter=" + secondParameter;
}
document.querySelector('form').setAttribute('action',url);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="https://example.com" method="GET">
<input type="text" />
<button type="button" onclick="setFormAction()">Test</button>
</form>
<input type="hidden" id="firstParameter" value="parameter">
<input type="hidden" id="secondParameter" value="anotherParameter">
在用户输入的情况下使用 encodeURIComponent()
对其进行清理。
我认为,如果您实际上并未提交一般意义上的表单,而是使用带有事件事件的简单按钮,那么您应该避免使用表单提交。然后,您可以声明对提交执行不同操作的状态,例如:
<button id="submit-button">Submit</button>
let state = 'default'
function onFormSubmit()
{
if (state == 'default') doDefaultThings()
else doLessDefaultThings()
}
async function doDefaultThings()
{
//collect necessary data
let url = "https://example.com" //append here
let res = await fetch(url)
//do other things or redirect
}
document.getElementById('submit-button'
.addEventListener('click',onFormSubmit)