JQuery या सिर्फ जावास्क्रिप्ट का उपयोग करके एक बटन को दूसरे पृष्ठ पर पुनर्निर्देशित कैसे करें


101

मैं एक प्रोटोटाइप बना रहा हूं और मैं चाहता हूं कि खोज बटन एक नमूना खोज परिणाम पृष्ठ से लिंक हो।

जब मैं jQuery या सादे JS का उपयोग करके क्लिक किया जाता है, तो मैं किसी अन्य पृष्ठ पर एक बटन को पुनर्निर्देशित कैसे कर सकता हूं।


मैंने js के लिए कहा था क्योंकि मैंने कल्पना नहीं की थी कि एक सरल HTML समाधान उपलब्ध था। धन्यवाद, इससे मेरा उद्देश्य हल हो गया।
अंकुर

जवाबों:


64

स्क्रिप्ट के बिना:

<form action="where-you-want-to-go"><input type="submit"></form>

बेहतर अभी तक, चूंकि आप अभी कहीं जा रहे हैं, उपयोगकर्ता को "बस कहीं जा रहे हैं" के लिए मानक इंटरफ़ेस के साथ प्रस्तुत करें:

<a href="where-you-want-to-go">ta da</a>

हालाँकि, यह संदर्भ "एक सामान्य खोज का अनुकरण करता है, जहाँ उपयोगकर्ता एक फ़ॉर्म सबमिट करता है" लगता है, जिस स्थिति में पहला विकल्प जाने का रास्ता है।


13
किसने लिंक के बारे में सोचा होगा? haha
meouw

फॉर्म के लिए +1। चूँकि यह एक उचित खोज रूप होगा और अंततः आपको इसे उसी तरह करना चाहिए जैसे अब संभव हो।
असंतुष्टगीत

@ सुहैल - तीन बार कोड और जावास्क्रिप्ट पर निर्भरता अच्छी नहीं है।
क्वेंटिन

1
@ अजय - सबमिट बटन पर क्लिक करने पर केवल एक फॉर्म सबमिट होता है अगर सबमिट बटन उस फॉर्म से जुड़ा होता है। इसमें इनपुट डालना पारंपरिक और सबसे अच्छा समर्थित तरीका है।
क्वेंटिन

1
@ मिमी - नहीं, यह नहीं है। फॉर्म पुनः सबमिट करने की समस्या केवल तब होती है जब आप एक अनुरोध कर रहे हैं जो "सुरक्षित" नहीं है (जिस स्थिति में यह एक POST फॉर्म होना चाहिए ... लेकिन सवाल सरल नेविगेशन के बारे में पूछ रहा था, इसलिए ऐसा कोई कारण नहीं है कि यह सुरक्षित नहीं है)। ब्राउज़र केवल लोगों को उस संभावना के बारे में चेतावनी देते हैं जब अनुरोध सुरक्षित नहीं हो सकता है (इसलिए वे इस मामले में नहीं होंगे क्योंकि यह नहीं है method="POST")।
क्वेंटिन

201

क्या तुम्हारे कहने का मतलब यही था?

$('button selector').click(function(){
   window.location.href='the_link_to_go_to.html';
})

1
इस स्टैकओवरफ्लो सवाल और जवाब के अनुसार , व्यक्ति को झुकना चाहिए window.locationऔर ऐसा नहीं करना चाहिए document.locationक्योंकि यह विहित तरीका नहीं है।
जुझार सिंह

74
$('#someButton').click(function() {
    window.location.href = '/some/new/page';
    return false;
});

5
क्यों झूठे वापस करने के लिए?
फ्रांसिस्को कोराल्स मोरालेस

2
return false"एंटर या रिटर्न की" मार के बिना , बस आपको नए लिंक पर पुनर्निर्देशित करने के बजाय वर्तमान यूआरएल पर ले जाना चाहिए। विशेष रूप से उपयोगी, जब आपके पास एक पाठ इनपुट नियंत्रण होता है जिसे आप एंटर / रिटर्न कुंजी हिट करते समय एक अलग यूआरएल में पोस्ट करना चाहते हैं।
विश्वास

2
यह बहुत अच्छी व्याख्या नहीं है। वापसी मान इंगित करता है कि क्या घटना को संसाधित करना जारी रखना है। डिफ़ॉल्ट रूप से, ईवेंट जारी रहेगा, और अन्य क्रियाओं को ट्रिगर कर सकता है, जैसे कि फ़ॉर्म सबमिट करना, या लिंक पर जाना, या कुछ भी नहीं। हालांकि, आप वास्तव में यहां की घटना को "अवशोषित" करना चाहते हैं। गलत तरीके से वापस लौटने से, ईवेंट प्रसंस्करण यहां समाप्त हो जाएगा।
रेडरिनार्ड

1
धन्यवाद - वापसी झूठी ने मुझे बचाया - सोच रहा था कि url क्यों नहीं बदल रहा है - लेकिन अफसोस कि कुछ अन्य स्क्रिप्ट ने क्लिक को संसाधित करना जारी रखा होगा।
डेरिक डेनिस

22

अपने HTML में, आप अपने बटन में डेटा विशेषता जोड़ सकते हैं:

<button type="submit" class="mybtn" data-target="/search.html">Search</button>

फिर आप यूआरएल को बदलने के लिए jQuery का उपयोग कर सकते हैं:

$('.mybtn').on('click', function(event) {
    event.preventDefault(); 
    var url = $(this).data('target');
    location.replace(url);
});

उम्मीद है की यह मदद करेगा


२०२०: डेटा-लक्ष्य के बारे में थोड़ा होने के कारण मेरे लिए सर्वश्रेष्ठ उत्तर .... धन्यवाद !!!
मार्कोज़ेन



10

जावास्क्रिप्ट के लिए कोई ज़रूरत नहीं है, बस इसे एक लिंक में लपेटें

<a href="http://www.google.com"><button type="button">button</button></a>

अंकुर ने वैध एचटीएमएल 5 के लिए नहीं पूछा, उसने
ओवेन


7

आप window.location का उपयोग कर सकते हैं

window.location="/newpage.php";

या आप केवल वह प्रपत्र बना सकते हैं जो खोज बटन में आपके इच्छित पृष्ठ की एक क्रिया के लिए है।


4

नमूना खोज परिणाम पृष्ठ से लिंक करने के लिए खोज बटन बनाने के लिए आप इस सरल जावास्क्रिप्ट कोड का उपयोग कर सकते हैं। यहां मैंने अपने होम पेज के '/' खोज को रीडायरेक्ट किया है , यदि आप Google खोज इंजन से खोजना चाहते हैं, तो आप " https://www.google.com/search " का उपयोग फ़ॉर्म कार्रवाई में कर सकते हैं ।

<form action="/search"> Enter your search text: 
<input type="text" id="searchtext" name="q"> &nbsp;
<input onclick="myFunction()" type="submit" value="Search It" />
</form> 
<script> function myFunction() 
{ 
var search = document.getElementById("searchtext").value; 
window.location = '/search?q='+search; 
} 
</script>

2

YT 2012 कोड से।

<button href="https://stackoverflow.com/signin" onclick=";window.location.href=this.getAttribute('href');return false;">Sign In</button>


2

यह ऐसा करने का सबसे तेज़ (सबसे पठनीय, कम से कम जटिल) तरीका है, ओवेन्स काम करता है, लेकिन यह कानूनी रूप से HTML नहीं है, तकनीकी रूप से यह उत्तर jQuery नहीं है (लेकिन चूंकि jQuery पूर्व-तैयार छद्मकोड है - जिसे क्लाइंट प्लेटफॉर्म पर देशी जावास्क्रिप्ट के रूप में फिर से व्याख्या किया गया है - वहाँ वास्तव में है jQuery जैसी कोई चीज नहीं वैसे भी)

 <button onclick="window.location.href='http://www.google.com';">Google</button>

0

और विनीत जावास्क्रिप्ट (UJS) का उपयोग करके कॉफीस्क्रिप्ट के साथ रेल 3 में:

इसमें जोड़ें assets/javascripts/my_controller.js.coffee:

$ ->
  $('#field_name').click ->
    window.location.href = 'new_url'

जो पढ़ता है: जब document.ready घटना निकाल दी गई है, तो एक onclickईवेंट को एक DOM ऑब्जेक्ट में जोड़ें, जिसकी आईडी field_nameजावास्क्रिप्ट को निष्पादित करती हैwindow.location.href='new_url';


0

क्लाइंट साइड रिडायरेक्ट के बारे में यहाँ बहुत सारे प्रश्न हैं, और मैं उनमें से अधिकांश पर बात नहीं कर सकता ... यह एक अपवाद है।

पुनर्निर्देशन ग्राहक से नहीं माना जाता है ... यह सर्वर से आने वाला है। यदि आपके पास सर्वर पर कोई नियंत्रण नहीं है, तो आप निश्चित रूप से जावास्क्रिप्ट का उपयोग किसी अन्य URL को चुनने के लिए कर सकते हैं, लेकिन ... यह पुनर्निर्देशन नहीं है। पुनर्निर्देशन सर्वर पर 300 स्थिति कोड के साथ किया जाता है, या HTML में META टैग को पेश करके।


0

एक लिंक का उपयोग करें और इसे एक बटन की तरह स्टाइल करें:

<a href="#page2" class="ui-btn ui-shadow ui-corner-all">Click this button</a>
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.