CODEWITHSUNDEEP
javascripthtmlcss
Anish Ivaturi
Anish Ivaturi

Reputation: 11

Is there any way I can use multiple inputs in a form?

I was having trouble doing my project. In my project, I'm making a google advanced search in HTML, and I needed 4 fields. The 4 fields is user input in which specifies what boundaries they want in their searches. When the user clicks google search, it does an action in javascript which is result(). Result takes those inputs from the textboxes and stores it variables and calls an alert. My question is how can I take the string I formed in javascript and use it as the form response for the google search.

function result() {
    var atw = document.getElementById("aTW").value;
    var ewp = document.getElementById("eWP").value;
    var tw = document.getElementById("tW").value;
    var ntw = document.getElementById("nTW").value;
    var string = atw + " " + tw + " " + "\"" + ewp + "\"" + " " + "-" + ntw;
    alert(string);

}
      
<h3>Advanced Search</h3>
<form action="https://www.google.com/search">
   <p>     
      <label>All these words</label>
      <input type = "text"
         id = "aTW"
         value = ""/>
   </p>
   <p>
      <label>this exact word or phrase:</label>
      <input type = "text"
         id = "eWP"
         value = "" />
   </p>
   <p>
      <label>any of these words:</label>
      <input type = "text"
         id = "tW"
         value = "" />
   </p>
   <p>
      <label>none of these words:</label>
      <input type = "text"
         id = "nTW"
         value = "" />
   </p>
   <input type="text" name ="q" id = "inputs" placeholder="Search">     
   <input onclick = "result()" type="submit" value="Google Search">
</form>

Upvotes: 1

Views: 112

Answers (3)

iAmOren
iAmOren

Reputation: 2804

Try this:

function result() {
  // all these words
  var atw = document.getElementById("aTW").value;
  // this exact phrase
  var ewp = document.getElementById("eWP").value;
  // any of these words
  var tw = document.getElementById("tW").value;
  // none of these words
  var ntw = document.getElementById("nTW").value;
  var string="https://www.google.com/search?";
  string+="as_q="+atw.split(" ").join("+");
  string+="&";
  string+="as_epq="+ewp.split(" ").join("+");
  string+="&";
  string+="as_oq="+tw.split(" ").join("+");
  string+="&";
  string+="as_eq="+ntw.split(" ").join("+");
  alert(string);
  window.open(string, '_blank');
}

Got the keys from an advanced search I've tried on google - has some more that I've not included, string will be the URL to post in the address bar, or use window.open as above.

Upvotes: 1

dale landry
dale landry

Reputation: 8610

how can I take the string I formed in javascript and use it as the form response for the google search.

Form your google search query as your string then send the query to a google search page...

function  googleSearch(query){
  url = 'http://www.google.com/search?q=' + query;
  window.open(url, '_blank');
}

Call your function for the google search in your result() function...

function result() {
  var atw = document.getElementById("aTW").value;
  var ewp = document.getElementById("eWP").value;
  var tw = document.getElementById("tW").value;
  var ntw = document.getElementById("nTW").value;
  var string = atw + " " + tw + " " + "\"" + ewp + "\"" + " " + "-" + ntw;
  alert(string);
  googleSearch(string);
}

https://jsfiddle.net/ov04hr12/

Upvotes: 1

DCR
DCR

Reputation: 15665

use the split method on the string

function result(){
event.preventDefault();
                var atw = document.getElementById("aTW").value;
                var ewp = document.getElementById("eWP").value;
                var tw = document.getElementById("tW").value;
                var ntw = document.getElementById("nTW").value;
                var string = atw +" "+ tw +" "+ "\""+ewp+"\""+" "+ "-"+ntw;
                alert(string);
                
                var myArray= string.split(" ");
                console.log(myArray);

            }
<h3>Advanced Search</h3>
            <form action="https://www.google.com/search"> 
                <p>     
                    <label>All these words</label>
                    <input type = "text"
                           id = "aTW"
                           value = ""/>
                  </p>
                  <p>
                    <label>this exact word or phrase:</label>
                    <input type = "text"
                           id = "eWP"
                           value = "" />
                  </p>
                  <p>
                    <label>any of these words:</label>
                    <input type = "text"
                           id = "tW"
                           value = "" />
                  </p>
                  <p>
                    <label>none of these words:</label>
                    <input type = "text"
                           id = "nTW"
                           value = "" />
                  </p>
                <input type="text" name ="q" id = "inputs" placeholder="Search">     
                <input onclick = "result()" type="submit" value="Google Search">
            </form>

Upvotes: 1

Related Questions