JavaScript: comment changer la valeur d'attribut d'action de formulaire en fonction de la sélection?


151

J'essaie de changer l'action du formulaire en fonction de la valeur sélectionnée dans un menu déroulant.

En gros, le HTML ressemble à ceci:

<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 "personnes" est sélectionné (ce qui est le cas par défaut), l'action doit être "/ search / user", et si le contenu est sélectionné, l'action doit être "/ search / content"

Je cherche toujours autour de moi, mais je n'ai pas été en mesure de savoir comment faire.

Réponses:


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

C'est bien mieux que ce que j'essayais ... Merci
n00b0101

1
A fonctionné parfaitement. Merci. J'ai mis à jour ce code pour modifier l'action lors de la soumission au lieu de la modification du formulaire.
Ryan

1
Si vous concevez pour des appareils mobiles, il serait préférable de modifier l'action «à la soumission» pour les problèmes de performances. Vérifiez ma réponse ci-dessous.
trante

Utilisez à la propplace de attr. Exemple =$("#search-form").prop ("action", "/search/" + action);
gsinha le

25

Si vous souhaitez uniquement modifier l'action du formulaire, je préfère modifier l'action lors de la soumission du formulaire plutôt que lors de la modification de l'entrée. Il ne se déclenche qu'une seule fois.

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

0

Il vaut mieux utiliser

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

plutôt que

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

Donc, sur la base de la réponse de trante, nous avons:

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

L'utilisation setAttributepeut vous faire gagner beaucoup de temps potentiellement.


pourquoi DOMElement gagnerait-il du setAttributetemps en utilisant jquery attr?
enorl76

0

Simple et facile dans 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

Faut-il avoir un formulaire?
Sinon, vous pouvez utiliser ceci:

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

avec le JavaScript suivant:

function callJavaScriptServlet() {
    this.form.action = "MyServlet";
    this.form.submit();
}

15
this.form.submit (); n'aura aucun sens car il n'y a en fait aucune forme et ainsi - rien à soumettre
SET
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.