मेरी वेबसाइट पर एक ड्रॉपडाउन है, जहां उपयोगकर्ता विभिन्न साइट-नामों का चयन कर सकते हैं। ड्रॉपडाउन के आगे मेरे पास सबमिट बटन है।

मैं चाहता हूं कि उपयोगकर्ता ड्रॉपडाउन से साइट-नाम का चयन करें, और जब वे सबमिट पर क्लिक करते हैं तो उन्हें ड्रॉपडाउन मान के साथ एक विशिष्ट यूआरएल पर रीडायरेक्ट किया जाना चाहिए।

<form id="form" method="get">
   <option value="1">Website Name 1</option>
   <option value="2">Website Name 2</option>
   <option value="3">Website Name 3</option>

   <button class="btn" type="submit">GO!</button>
</form>

उदाहरण मामला:

  • उपयोगकर्ता "वेबसाइट का नाम 2" चुनते हैं
  • उपयोगकर्ता क्लिक "जाओ!" बटन
  • साइट "https://example.com/site/2" लक्ष्य के साथ एक नई विंडो खोलती है
0
Fox 2 नवम्बर 2020, 14:36

2 जवाब

सबसे बढ़िया उत्तर

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

सुनिश्चित करें कि बटन प्रकार 'सबमिट' नहीं है और एक क्लिक ईवेंट को जावास्क्रिप्ट फ़ंक्शन के साथ संलग्न करें। जावास्क्रिप्ट फ़ंक्शन में ड्रॉपडाउन से चयनित मान पढ़ें और उपयोग करें

window.location.href

उस साइट पर रीडायरेक्ट करने के लिए।

function redirect() {
  var value = document.getElementById("site").value;
  window.location.href = value;
  return ;
}
<form id="form" >
<select name="site" id ="site">
   <option value="https://Google.com/1">Google</option>
   <option value="https://stackoverflow.com/2">StackOverflow</option>
</select>
   <button class="btn" type="button" onclick="redirect()">GO!</button>
</form>
1
Vimal Patel 2 नवम्बर 2020, 15:00

इस कार्यक्षमता को पूरा करने के कई तरीके हैं। मैं न्यूनतम HTML रखना और जावास्क्रिप्ट में सब कुछ संभालना पसंद करता हूं। हम अपने उदाहरण में इसे पूरा करने के लिए EventListener का उपयोग करेंगे।

अपना एचटीएमएल इसमें बदलें:

<form id="form" method="get">
  <select id="selection">
     <option value="1">Website Name 1</option>
     <option value="2">Website Name 2</option>
     <option value="3">Website Name 3</option>
  </select>
   <button class="btn" type="submit">GO!</button>
</form>

फिर आप जो चाहते हैं उसे पूरा करने के लिए आप सरल जावास्क्रिप्ट का उपयोग कर सकते हैं:

let url = "https://example.com/site/";

document.getElementById('form').addEventListener('submit', (e) => {
    e.preventDefault();
  let selection = document.getElementById('selection').value;
  console.log(url + selection);
  window.location.href = url + selection;
});

यह उत्तर मानता है कि सभी URL https://example.com/site/1 प्रारूप का पालन करते हैं। यदि नहीं, तो आप विकल्प टैग में मान को वास्तविक URL के रूप में बदल सकते हैं और URL उपसर्ग को JavaScript से हटा सकते हैं।

1
Polycode 2 नवम्बर 2020, 15:05