使用 URL + GET 参数填写表单按钮而不提交表单答案

【问题标题】：Fill the form button with URL + GET parameters without submitting the form使用 URL + GET 参数填写表单按钮而不提交表单
【发布时间】：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”）中打开。

整个事情应该在不提交实际表单的情况下发生。

【问题讨论】：

标签： javascript php html jquery forms

【解决方案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 答案对我有用。