Fill the form button with URL + GET parameters without submitting the form

user_12016228 0
Viewed 700

Since I'm not very familiar with JavaScript, I need a little help.

I have a simple form with 1 heading line, 1 search button, 1 description field and the submit button.

<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>

If I enter something in the heading line and click the google button, the Google page should open in a new tab and the text from the heading line should automatically be appended to the link as a search parameter.

E.g. in the heading line "animated images" is then when you click on the Google button a new tab should open with the URL "https://www.google.com/search?q=animated+Images".

If it does not appear in the headline, when you click Google, the Google page should just open in a new tab ("https://www.google.com").

The whole thing should happen without submitting the actual form.

forms html php jquery javascript
2 Answers

What you can do is call search() function when someone click on search button and you can use window.open() function to open new tab with query parameters

<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>
user_112682860

I have changed your form and also you do not need to use GET method for what you need to do. Just use the POST method for the form for increase security and these google search can be done separately. First of all you need to add jQuery for your file. Here I will use jquery-2.1.1.min.js file.

HTML code

<!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 code

$(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!");
    }
});
});

When you click the google button you will see the search function is working in a new tab and the form is not submitted. If you want to submit the form you can write a separate code to the form using jQuery and PHP.

user_130894880
Related