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.

Respuestas:


277
$("#selectsearch").change(function() {
  var action = $(this).val() == "people" ? "user" : "content";
  $("#search-form").attr("action", "/search/" + action);
});

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);
}); 

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.


¿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>

-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();
}

15
this.form.submit (); no tendrá sentido ya que en realidad no hay formularios y, por lo tanto, nada que enviar
SET
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.