JavaScript: Wie kann der Wert des Formularaktionsattributs basierend auf der Auswahl geändert werden?

151

Ich versuche, die Formularaktion basierend auf dem ausgewählten Wert aus einem Dropdown-Menü zu ändern.

Grundsätzlich sieht der HTML-Code folgendermaßen aus:

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

Wenn "Personen" ausgewählt ist (was standardmäßig der Fall ist), sollte die Aktion "/ search / user" sein, und wenn Inhalt ausgewählt ist, sollte die Aktion "/ search / content" sein.

Ich suche immer noch herum, konnte aber nicht herausfinden, wie das geht.

n00b0101
quelle

Antworten:

277
$("#selectsearch").change(function() {
  var action = $(this).val() == "people" ? "user" : "content";
  $("#search-form").attr("action", "/search/" + action);
});
Cletus
quelle
Das ist viel besser als das, was ich versucht habe ... Danke
n00b0101
1
Hat perfekt funktioniert. Vielen Dank. Ich habe diesen Code aktualisiert, um die Aktion beim Senden anstelle der Formularänderung zu ändern.
Ryan
1
Wenn Sie für mobile Geräte entwerfen, ist es besser, die Aktion "beim Senden" für Leistungsprobleme zu ändern. Überprüfen Sie meine Antwort unten.
Trante
Verwenden Sie propanstelle von attr. Beispiel =$("#search-form").prop ("action", "/search/" + action);
gsinha
25

Wenn Sie nur die Aktion des Formulars ändern möchten, ziehe ich es vor, die Aktion beim Senden des Formulars zu ändern, anstatt sie bei der Eingabe zu ändern. Es wird nur einmal ausgelöst.

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

Es ist besser zu benutzen

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

eher, als

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

Basierend auf Trantes Antwort haben wir also:

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

Durch setAttributedie Verwendung können Sie möglicherweise viel Zeit sparen.

scode102
quelle
Warum sollte DOMElement setAttributebei der Verwendung von jquery Zeit sparen attr?
Enorl76
0

Einfach und leicht in 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
quelle
-16

Ist erforderlich, dass Sie ein Formular haben?
Wenn nicht, können Sie Folgendes verwenden:

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

mit folgendem JavaScript:

function callJavaScriptServlet() {
    this.form.action = "MyServlet";
    this.form.submit();
}
Dago Jobs
quelle
15
this.form.submit (); wird keinen Sinn haben, da es eigentlich keine Formulare gibt und somit - nichts einzureichen
SET