使用 URL + GET 参数填写表单按钮而不提交表单
Posted
技术标签:
【中文标题】使用 URL + GET 参数填写表单按钮而不提交表单【英文标题】：Fill the form button with URL + GET parameters without submitting the form 【发布时间】：2021-10-17 11:08:38 【问题描述】：由于我对 javascript 不是很熟悉，所以需要一点帮助。
我有一个简单的表单，其中包含 1 个标题行、1 个搜索按钮、1 个描述字段和提交按钮。
<form action="test_form.php" method="get" id="test_form1">
Überschrift: <input name="label" id="label" type="text" /> <input name="google" type="button" value="google" /><br />
Beschreibung: <textarea id="description" name="description" rows="5" cols="33">Beschreibung eingeben</textarea><br />
</form>
<button type="submit" form="test_form1" value="Submit">Eintragen</button>
如果我在标题行输入内容并单击 google 按钮，Google 页面应在新选项卡中打开，并且标题行中的文本应自动附加到链接作为搜索参数。
例如在标题行“动画图像”中，当您点击 Google 按钮时，应该会打开一个新标签页，其中包含 URL“https://www.google.com/search?q=animated+Images”。
如果它没有出现在标题中，当您点击 Google 时，Google 页面应该会在新标签页（“https://www.google.com”）中打开。
整个事情应该在不提交实际表单的情况下发生。
【问题讨论】：
【参考方案1】：你可以做的是当有人点击搜索按钮时调用search()函数，你可以使用window.open()函数打开带有查询参数的新标签
<script>
function search()
let string = document.getElementById("label").value;
window.open("https://www.google.com/search?q="+string);
</script>
<input type=
<button onclick="search()">Search</button>
【讨论】：
你得到的是按钮的值而不是输入 我已经更新了代码。感谢您指出错误。 THX 这个解决方案对我来说很好，但我用按钮将行编辑为：<input type=button onclick="search()" value="Search"></button>【参考方案2】：
我已经更改了您的表单，而且您不需要使用 GET 方法来完成您需要做的事情。只需对表单使用 POST 方法以提高安全性，这些谷歌搜索可以单独完成。首先，您需要为您的文件添加 jQuery。这里我将使用 jquery-2.1.1.min.js 文件。
html 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="" method="POST" id="serachForm">
Überschrift: <input type="text" id="searchText">
<input type="button" value="Google" id="buttonA">
<br><br>
Beschreibung: <textarea id="description" name="description" rows="5"
cols="33">Beschreibung eingeben</textarea><br />
<br><br>
<input type="submit" value="Submit">
</form>
<script src="jquery-2.1.1.min.js"></script>
<script src="new.js"></script>
</body>
</html>
jQuery 代码
$(document).ready(function()
$("#buttonA").click(function()
let keyWord = $("#searchText").val();
if(keyWord)
window.open("https://www.google.com/search?q="+keyWord);
else
alert("Input field is empty, Please enter a keyword to search!");
);
);
当您单击 google 按钮时，您将看到搜索功能在新标签页中运行，并且表单未提交。如果要提交表单，可以使用 jQuery 和 PHP 为表单编写单独的代码。
【讨论】：
THX 寻求帮助，我稍后会测试此代码，因为 1 答案对我有用。以上是关于使用 URL + GET 参数填写表单按钮而不提交表单的主要内容，如果未能解决你的问题，请参考以下文章