JavaScript: ¿cómo cambiar el valor del atributo de acción de formulario según la selección?

151

Estoy tratando de cambiar la acción del formulario en función del valor seleccionado en un menú desplegable.

Básicamente, el HTML se ve así:

<form class="search-form" id="search-form" method="post" accept-charset="UTF-8" action="/search/user">
<select id="selectsearch" class="form-select" name="selectsearch">
<option value="people">Search people</option>
<option value="node">Search content</option>
</select>

<label>Enter your keywords: </label>
 <input type="text" class="form-text" value="" size="40" id="edit-keys" name="keys" maxlength="255" />

<input type="submit" class="form-submit" value="Search" id="edit-submit" name="search"/>
</form>

Si se selecciona "personas" (que es la opción predeterminada), la acción debería ser "/ search / user", y si se selecciona el contenido, la acción debería ser "/ search / content"

Todavía estoy buscando, pero no he podido averiguar cómo hacerlo.

n00b0101
fuente

Respuestas:

277
$("#selectsearch").change(function() {
  var action = $(this).val() == "people" ? "user" : "content";
  $("#search-form").attr("action", "/search/" + action);
});
cletus
fuente
Eso es mucho mejor de lo que estaba intentando ... Gracias
n00b0101
1
Funcionó perfecto. Gracias. Actualicé este código para cambiar la acción al enviar en lugar de cambiar el formulario.
Ryan
1
Si diseña para dispositivos móviles, sería mejor cambiar la acción "al enviar" por problemas de rendimiento. Mira mi respuesta a continuación.
trante
Usar en proplugar de attr. Ejemplo =$("#search-form").prop ("action", "/search/" + action);
gsinha
25

Si solo desea cambiar la acción del formulario, prefiero cambiar la acción en el formulario de envío, en lugar de en la entrada de cambio. Se dispara solo una vez.

$('#search-form').submit(function(){
  var formAction = $("#selectsearch").val() == "people" ? "user" : "content";
  $("#search-form").attr("action", "/search/" + formAction);
}); 
trante
fuente
0

Es mejor usar

$('#search-form').setAttribute('action', '/controllerName/actionName');

más bien que

$('#search-form').attr('action', '/controllerName/actionName');

Entonces, según la respuesta de trante tenemos:

$('#search-form').submit(function() {
    var formAction = $("#selectsearch").val() == "people" ? "user" : "content";
    $("#search-form").setAttribute("action", "/search/" + formAction);
}); 

El uso setAttributepuede ahorrarle mucho tiempo potencialmente.

scode102
fuente
¿Por qué DOMElement setAttributeahorraría más tiempo usando jquery attr?
enorl76
0

Simple y fácil en javascipt

<script>

  document.getElementById("selectsearch").addEventListener("change", function(){

  var get_form =   document.getElementById("search-form") // get form 
  get_form.action =  '/search/' +  this.value; // assign value 

});

</script>
Ankush Kumar
fuente
-16

¿Se requiere que tenga un formulario?
Si no, entonces podría usar esto:

<div>
    <input type="hidden" value="ServletParameter" />
    <input type="button" id="callJavaScriptServlet" onclick="callJavaScriptServlet()" />
</div>

con el siguiente JavaScript:

function callJavaScriptServlet() {
    this.form.action = "MyServlet";
    this.form.submit();
}
Dago Jobs
fuente
15
this.form.submit (); no tendrá sentido ya que en realidad no hay formularios y, por lo tanto, nada que enviar
SET