Estoy tratando de agregar una función de búsqueda basada en una entrada de texto y un menú desplegable.
Así que estoy tratando de hacer que funcione con los siguientes campos de formulario:
Si se selecciona la primera opción en el menú desplegable, el formulario debe enviarse a https://url1/?={text_1} , si se selecciona la segunda opción, debe enviarse a https://url2/?={text_1} .
He escrito hasta ahora:
<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>De lo contrario, también está este ejemplo: https://hii.com/careers/
Te doy un ejemplo:
<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>Aumente un formulario simple con los controles que desee, con una secuencia de comandos que configure un comportamiento en el que el valor del atributo de action del formulario cambie con la selección en el control desplegable:
<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> El valor del control de entrada de texto se enviará con la cadena de consulta, es decir, como ?foobar=... al final de la URL, a medida que se envía el formulario, a la URL correspondiente a la opción seleccionada en el menú desplegable .
Si tiene un botón de envío al final del formulario o no, no hace ninguna diferencia en el comportamiento del formulario porque un formulario puede enviarse incluso sin un botón de envío.
Encontré una solución funcional después de hacer algunas búsquedas.
Aquí está la solución en caso de que alguien lo necesite.
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>