วิธีทำให้ปุ่มเปลี่ยนเส้นทางไปยังหน้าอื่นโดยใช้ jQuery หรือ Javascript

ฉันกำลังสร้างต้นแบบและต้องการให้ปุ่มค้นหาลิงก์ไปยังหน้าผลการค้นหาตัวอย่าง

ฉันจะเปลี่ยนเส้นทางปุ่มไปยังหน้าอื่นได้อย่างไรเมื่อคลิกโดยใช้ jQuery หรือ JS ธรรมดา

ไม่มีสคริปต์:

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

ยังดีกว่าเนื่องจากคุณกำลังจะไปที่ไหนสักแห่งให้นำเสนอผู้ใช้ด้วยอินเทอร์เฟซมาตรฐานสำหรับ "ไปที่ไหนสักแห่ง":

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

แม้ว่าบริบทจะดูเหมือน "จำลองการค้นหาปกติที่ผู้ใช้ส่งแบบฟอร์ม" ซึ่งในกรณีนี้ตัวเลือกแรกคือวิธีที่จะไป

นี่คือสิ่งที่คุณหมายถึง?

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

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

ใน html ของคุณคุณสามารถเพิ่มแอตทริบิวต์ข้อมูลลงในปุ่มของคุณ:

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

จากนั้นคุณสามารถใช้ jQuery เพื่อเปลี่ยน url:

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

หวังว่านี่จะช่วยได้

ด้วย Javascript ง่ายๆ:

<input type="button" onclick="window.location = 'path-here';">

คุณสามารถใช้ได้:

  location.href = "newpage.html"

ในเหตุการณ์ onclick ของปุ่ม

ไม่จำเป็นต้องใช้จาวาสคริปต์เพียงแค่ห่อไว้ในลิงค์

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

น่าจะใช้ได้ ..

$('#buttonID').click(function(){ window.location = 'new url'});

คุณสามารถใช้ window.location

window.location="/newpage.php";

หรือคุณสามารถทำให้แบบฟอร์มที่ปุ่มค้นหามีการทำงานของหน้าที่คุณต้องการ

คุณสามารถใช้โค้ด JavaScript ง่ายๆนี้เพื่อสร้างปุ่มค้นหาเพื่อเชื่อมโยงไปยังหน้าผลการค้นหาตัวอย่าง ที่นี่ฉันได้เปลี่ยนเส้นทางไปที่"/ ค้นหา"ของหน้าแรกของฉันหากคุณต้องการค้นหาจากเครื่องมือค้นหาของ Google คุณสามารถใช้" https://www.google.co.th/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>

จากรหัส YT 2012

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

นี่เป็นวิธีที่เร็วที่สุด (อ่านง่ายและซับซ้อนน้อยที่สุด) ในการทำ Owens ใช้งานได้แต่ไม่ใช่ HTML ที่ถูกกฎหมายในทางเทคนิคคำตอบนี้ไม่ใช่ jQuery (แต่เนื่องจาก jQuery เป็นรหัสเทียมที่เตรียมไว้ล่วงหน้า - ตีความใหม่บนแพลตฟอร์มไคลเอนต์เป็น JavaScript ดั้งเดิม - มีจริงๆคือไม่มีสิ่งเช่น jQuery อยู่แล้ว)

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

และใน Rails 3 พร้อม CoffeeScript โดยใช้ JavaScript (UJS) ที่ไม่สร้างความรำคาญ:

เพิ่มในassets/javascripts/my_controller.js.coffee:

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

ซึ่งอ่านว่า: เมื่อเหตุการณ์ document.ready เริ่มทำงานให้เพิ่มonclickเหตุการณ์ลงในวัตถุ DOM ที่มี ID field_nameซึ่งเรียกใช้งานจาวาสคริปต์window.location.href='new_url';

มีคำถามมากมายเกี่ยวกับการเปลี่ยนเส้นทางฝั่งไคลเอ็นต์ที่นี่และฉันไม่สามารถพูดออกมาได้ส่วนใหญ่ ... อันนี้เป็นข้อยกเว้น

การเปลี่ยนเส้นทางไม่ควรมาจากไคลเอนต์ ... มันควรจะมาจากเซิร์ฟเวอร์ หากคุณไม่สามารถควบคุมเซิร์ฟเวอร์ได้คุณสามารถใช้ Javascript เพื่อเลือก URL อื่นที่จะไปได้ แต่…นั่นไม่ใช่การเปลี่ยนเส้นทาง การเปลี่ยนเส้นทางทำได้ด้วยรหัสสถานะ 300 รหัสที่เซิร์ฟเวอร์หรือโดยการใช้แท็ก META ใน HTML

ใช้ลิงค์และจัดรูปแบบให้เหมือนปุ่ม:

<a href="#page2" class="ui-btn ui-shadow ui-corner-all">Click this button</a>