I am trying to add a search feature based on a text input and a drop-down.
So I am trying to make it work with the following form fields:
If first option is selected in the drop-down the form should be submitted to https://url1/?={text_1}, if second option is selected it should be submitted to https://url2/?={text_1}.
I have written so far:
<form>
<input type="text" id="text_1" name="text_1" value="test" data-alias="" class="form-control">
<select id="selectlist_1" name="selectlist_1" data-alias="" class="form-control">
<option value="option_1" >Option_1</option>
<option value="option_2" >Option_2</option>
</select>
<button type="submit" id="button_1" name="button_1" class="btn btn-primary" >Submit</button>
</form>
Otherwise, there is also this example: https://hii.com/careers/
I give you an example:
<script>
function go(v){
if (v.url.value===1){
v.action="http://www.google.com"
}else {
v.action="http://www.apple.com"
}
}
</script>
<form onsubmit="go(this)">
<input type="text" name="text_1" value="txt">
<select name="url">
<option value="1">Google</option>
<option value="2">Apple</option>
</select>
<input type="submit" value="submit">
</form>
Augment a simple form with the controls you want, with a script that sets up a behaviour where the form's action attribute value changes with the selection in the drop-down control:
<form>
<input name="foobar" />
<select name="fruit">
<option value="apples">Apples</option>
<option value="oranges">Oranges</option>
</select>
<script>
(script => {
const fruit_control = script.closest("form").elements.fruit;
fruit_control.addEventListener("change", ev => {
ev.target.form.action = ({
"apples": "https://url_1",
"oranges": "https://url_2"
})[ev.target.value];
});
})(document.currentScript);
</script>
</form>
The value of the text input control will be sent with the query string, i.e. as ?foobar=... at the end of the URL, as the form is submitted, to the URL that's correspondent with the option selected in the drop-down.
Whether you have a submit button at the end of the form, or not, makes no difference to the behaviour of the form because a form may be submitted even without a submit button.
I found a working solution after doing some searches.
Here is solution in case anyone need it.
jQuery('#search_page_form').submit(function() {
// get all the inputs into an array.
var stext = jQuery('#search_page_form #looking-for').val();
var cars = jQuery('#search_page_form #cars').val();
var url = '';
if(cars == 'nns'){
var url = 'https://careers.huntingtoningalls.com/search/?searchby=location&createNewAlert=false&q='+stext;
}else if(cars == 'mt'){
var url = 'https://tsd-careers.hii.com/en-US/search?keywords='+stext;
}else if(cars == 'is'){
var url = 'https://careers.huntingtoningalls.com/search/?searchby=location&createNewAlert=false&q='+stext+'&locationsearch=Pascagoula%2C+MS&geolocation=';
}else if(cars == 'ch'){
var url = 'https://careers.huntingtoningalls.com/search/?searchby=location&createNewAlert=false&q='+stext+'&locationsearch=Newport+News%2C+VA&geolocation=';
}
if(url != ''){
window.open(url, '_blank');
}else{
alert('Please select Division');
}
return false;
}); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="search_page_form" onsubmit="return false;">
<div class="form-group">
<label for="looking-for">What are you looking for ?</label>
<input type="text" id="looking-for" name="looking-for" class="form-control" placeholder="Enter keywords....">
</div>
<div class="form-group">
<select id="cars" name="cars" class="form-control nice-select">
<option selected="" value="">Division</option>
<option value="nns">NEWPORT NEWS SHIPBUILDING</option>
<option value="mt">MISSION TECHNOLOGIES</option>
<option value="is">INGALLS SHIPBUILDING</option>
<option value="ch">CORPORATE HEADQUARTERS</option>
</select>
</div>
<div class="form-group">
<input type="submit" value="SEARCH" class="btn white-btn search_btn">
</div>
</form>