Ein Formularwert mit jQuery überschreiben

Question

Derzeit habe ich dieses Formular und was ich tun möchte, wenn Nummer 5 angeklickt/ausgewählt wird, wie kann ich laden eine andere URL und ignorieren was passiert im Formular.

Form:

<div id="reservation-widget-wrap"> 
    <div id="reservation-widget-header">Check Building Availability</div> 
    <div id="reservation-widget-content"> 
    <form action='https://www.thebookingbutton.com.au/properties' method='get'> 
    <label for='channel_code' class="caption">Select property </label> 
    <select id='channel_code' name='id'> 
    <option value='1'>One</option>    
    <option value='2'>Two</option> 
    <option value='3'>Three</option> 
    <option value='4'>Four</option> 
    <option value='5'>Five</option> 
    </select> 

Answer 1

$(document).ready(function(){ 

    $('#channel_code').change(function(){ 

     if($('#channel_code').val() == '5'){ 

      window.location.href = 'Your URL'; 

     } 

    }); 

}); 

Answer 2

einen Moment Zeit nehmen und lesen:

Decoupling Your HTML, CSS, and JavaScript - Philip Walton (Engineer @ Google)

aber sagen, dass ich schreiben würde, es mag:

Aktualisiert Html

<select id='channel_code' name='id' class="js-url-redirect"> 
    <option value='1'>One</option>    
    <option value='2'>Two</option> 
    <option value='3'>Three</option> 
    <option value='4' data-url-redirect="http://bing.com">Four</option> 
    <option value='5' data-url-redirect="http://google.com">Five</option> 
</select> 

jQuery (JavaScript)

$(document).ready(function() { 
    $('.js-url-redirect').on('change', function() { 
    var url = $(this).find(":selected").data("url-redirect"); 
    if (url && url.length > 0) { 
     window.location.href = url; 
    } 
    }); 
}); 

Nizza entkoppelt, wiederverwendbare Komponente.