How to make a form thats takes the info and knows where to redirect for web

Question

First of all, lemme take a moment to apologize how dumb i asked my question but that was the only way i could ask it.

So i've seen before in some websites they have some kinda fill in the blank lines where you write what you want and it will redirect you to another page. e.g

What you are looking for? Iam looking for ______________

than after you typed what you wanted it will redirect you to the desired page. but in my case i just want them few options to pick for blank space than redirect them to somewhere else in my wordpress website

Iam trying to make something like that but iam still a newbie.

Thanks for all your help

You might want to look into combining the following: [events listening](https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onclick), [if statements](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else), and [javascript page redirection](https://stackoverflow.com/questions/4744751/how-do-i-redirect-with-javascript) — Kristianne Nerona, Jan 26 '21 at 19:39
Please include some code of what you already might have tried ! — turbopasi, Jan 26 '21 at 19:41
TBH i didnt write anything yet, cuz i dont know how to. Its more like a blank space with a drop down menu with 3 choices — JoeHandele, Jan 26 '21 at 19:43
https://www.youtube.com/watch?v=UrgqZscnjtk, something like this maybe but better xD — JoeHandele, Jan 26 '21 at 20:03

tharunoptimus · Accepted Answer · 2021-01-26T21:18:10.457

1

Lets assume that this is a sample page of yours which has the select option with the id "dropdown"

HTML

<html>
<body>
    <p>What you are looking for? Iam looking for 
        <select id = "dropdown" >
            <option value="zero" selected>Select Option</option>
            <option value = "one">Duckduckgo</option>
            <option value = "two">Qwant</option>
            <option value = "three">Jamun Search</option>
        </select>
    </p>
</body>

//Javascript
function showDrop(){
    var paragraphTag = document.getElementById('list');
    paragraphTag.style.display = "none";
    var selected = document.getElementById('dropdown');
    selected.style.display = "block";
}
function redirectFunction(){
    var selected = document.getElementById('dropdown');
    var selectValue = selected.options[selected.selectedIndex].value; 
    if(selectValue == "one"){
        window.location.href = "http://www.duckduckgo.com";
    }
    else if(selectValue == "two"){
        window.location.href = "http://www.qwant.com";
    }
    else if(selectValue == "three"){
        window.location.href = "http://www.jamunsearch.rf.gd";
    }
    else {
        alert("Please Select An Option To Proceed!")    
    }
}

/* CSS */
.dropdown {
    display: none;
}

<!--HTML-->
<html>
    <body>
        <p>What you are looking for? Iam looking for</p> <p id="list" onclick="showDrop()">__________</p>
            <select id = "dropdown" class="dropdown" onchange="redirectFunction()">
                <option value = "zero" selected>Select Option</option>
                <option value = "one">Duckduckgo</option>
                <option value = "two">Qwant</option>
                <option value = "three">Jamun Search</option>
            </select>
        </p>
    </body>
</html>

When the user clicks the '_____' it will be hidden and the select drop box will be visible to be selected.

The redirectFunction() will be executed when the user selects one of the options and the drop down button will be deleted(display:hidden). The script takes the value of the selected option i.e., zero,one,two or three. And then it checks with the values in the code. window.location.href("http://www.example.com") will redicted the user to Example.com You can change that url to your wordpress urls. If the user doesn't select and clicks the button, the page will alert the user to select one option.

If you wanted to check the condition with the select name refer this post Get the Select Option Value

edited Jan 26 '21 at 21:18

answered Jan 26 '21 at 20:05

tharunoptimus

46
6

If you want to redirect the user without **clicking the button**, delete the – tharunoptimus Jan 26 '21 at 20:10
Nice thats almost what i wanted, thank you. Now what if i want to remove the dropdown box but when its selected it shows the option and also remove the button so it will redirect automatically after they picked what they wanted. – JoeHandele Jan 26 '21 at 20:12
To remove or hide the element you can use this code: `var element = document.getElementById('elementName'); elementName.style.display = "none"; ` – tharunoptimus Jan 26 '21 at 20:27
I'll change my answer according to your needs just a min – tharunoptimus Jan 26 '21 at 20:28
Sorry to bother you again, ik its so annoying but iam totally new to web dev and iam trying to learn more js. – JoeHandele Jan 26 '21 at 20:41
where should i add the new line of code that you gave me for dropbox ? – JoeHandele Jan 26 '21 at 20:41
I changed everything and edited the answer with the source code you wanted from the the second comment of this post – tharunoptimus Jan 26 '21 at 20:42
You cant use it. When the user selects the option, it will hide and redirects the user to the link – tharunoptimus Jan 26 '21 at 20:43
Don't worry, learning programming takes time. It's common for everyone. – tharunoptimus Jan 26 '21 at 20:43
THANK YOU SM, you've helped me alot, but i actually meant was is there anyway to hide the drop box and turn it into blank space like these ( ______ ) and when users click on the blank space, it shows the options ? – JoeHandele Jan 26 '21 at 20:47
Gimme some 5 mins, I'll re-edit the code. – tharunoptimus Jan 26 '21 at 20:51
LOL It took 20 minutes. I was trying to figure out why it didn't work only to find I used a wrong id name while declaring it in JS LOL – tharunoptimus Jan 26 '21 at 21:13
The CSS will handle the hiding job for the select dropbox – tharunoptimus Jan 26 '21 at 21:14
Dude, its 02:45 am in my local time. I got to go to bed. I'll see your comments by tomorrow morning. After 5 hours. Good Night. I'm from GMT+5:30 – tharunoptimus Jan 26 '21 at 21:16
Hey, ive tried your code but it wont redirect to the desired link – JoeHandele Jan 27 '21 at 22:06
and also thanks for ur huge help <3 and staying up late for me. – JoeHandele Jan 27 '21 at 22:11
So i also checked another code but this time in editor not in the actual website, looks like problem is coming from my website, idk why when i use the code it wont redirect anywhere – JoeHandele Jan 27 '21 at 22:44
Or maybe the resultant website is using a bot to secure its webpages. LIke in a hosting provider named INFINITY FREE, the page doesn't load if it is called from outside the browser. And the AJAX requests won't work. So, I guess maybe its your hosting provider's settings that these won't redirect. The redirect JS code is `window.location.href="http://example.com";` Open a tab in your browser, go to the console and type the above code and run it. It must redirect it to the example.com. So, its not the code which is not working. And every time I post the code, I'll check it on my localhost. – tharunoptimus Jan 28 '21 at 14:57
And when you run the snippet, If you select Jamun Search, the page won't even load inside the snippet. I host the Jamun Search Engine on https://app.infinityfree.net (InfinityFree) and that hosting provider blocks me from using many requests like AJAX, API hosting, and it won't even load a manifest file in the html header. So, I guess the problem is with your hosting provider. If you're going to host only wordpress, infinityfree is a good choice. And its free with limited access and premium starts at $3.5/month. You might want to give it a try. NOT AN ADVERTISEMENT FOR INFINITY FREE – tharunoptimus Jan 28 '21 at 15:02

How to make a form thats takes the info and knows where to redirect for web

1 Answers1