जावास्क्रिप्ट: चयन के आधार पर फॉर्म एक्शन विशेषता मान कैसे बदलें?

Question

मैं ड्रॉपडाउन मेनू से चयनित मान के आधार पर फ़ॉर्म कार्रवाई को बदलने की कोशिश कर रहा हूं।

मूल रूप से, HTML इस तरह दिखता है:

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

यदि "लोग" चुने गए हैं, (जो कि डिफ़ॉल्ट रूप से है), तो कार्रवाई "/ खोज / उपयोगकर्ता" होनी चाहिए, और यदि सामग्री का चयन किया जाता है, तो कार्रवाई "/ खोज / सामग्री" होनी चाहिए

मैं अभी भी आसपास खोज कर रहा हूं, लेकिन यह पता नहीं लगा पाया कि यह कैसे करना है।

Answer 1

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

Comments

इस तरह से बेहतर है कि मैं क्या कोशिश कर रहा था ... धन्यवाद

— n00b0101

सही काम किया। धन्यवाद। मैंने फ़ॉर्म परिवर्तन के बजाय सबमिट पर कार्रवाई को बदलने के लिए इस कोड को अपडेट किया।

— रयान

यदि आप मोबाइल उपकरणों के लिए डिज़ाइन करते हैं, तो प्रदर्शन के मुद्दों के लिए "सबमिट पर" कार्रवाई को बदलना बेहतर होगा। नीचे मेरे जवाब की जाँच करें।

— trante

के propबजाय का उपयोग करें attr। उदाहरण =$("#search-form").prop ("action", "/search/" + action);

— gsinha

Answer 2

यदि आप केवल फॉर्म की कार्रवाई को बदलना चाहते हैं, तो मैं ऑन-इनपुट-परिवर्तन के बजाय, ऑन-फॉर्म-सबमिट को बदलना पसंद करता हूं। यह केवल एक बार फायर करता है।

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

Answer 3

इसका उपयोग करना बेहतर है

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

बजाय

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

इसलिए, हमारे पास ट्रेंट के जवाब पर आधारित है:

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

उपयोग करने से setAttributeआप संभावित रूप से बहुत समय बचा सकते हैं।

Comments

setAttributejquery का उपयोग करने पर किसी भी समय डोनेमेंट को क्यों बचाया जाएगा attr?

— enorl76

Answer 4

जवसपिल्ट में सरल और आसान

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

Answer 5

क्या आपके पास एक फॉर्म है?
यदि नहीं, तो आप इसका उपयोग कर सकते हैं:

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

निम्नलिखित जावास्क्रिप्ट के साथ:

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

Comments

this.form.submit (); इसका कोई अर्थ नहीं होगा क्योंकि वास्तव में इस प्रकार कोई रूप नहीं हैं - सबमिट करने के लिए कुछ भी नहीं

— सेट