Here is my statement:

$(document).ready(function() {
    $('#search_option').change(function() {
        alert('changed');
        if( $('#search_option').val() == "wiki" ) {
            $('#search_form').setAttribute('action', ".php");
            $('#search_bar').setAttribute('name', "search");
            alert('Got inside wiki');
        } else {
            $('#search_form').setAttribute('action', "");
            $('#search_bar').setAttribute('name', "q");
            alert('Got inside google');
        }
    });
});

Neither of the 'got inside' alerts are triggering, meaning that neither of them are running, correct? I can not seem to figure out why neither parts of the if statement are running, at least one should be

Here is my statement:

$(document).ready(function() {
    $('#search_option').change(function() {
        alert('changed');
        if( $('#search_option').val() == "wiki" ) {
            $('#search_form').setAttribute('action', "http://www.wikipedia/search-redirect.php");
            $('#search_bar').setAttribute('name', "search");
            alert('Got inside wiki');
        } else {
            $('#search_form').setAttribute('action', "http://www.google./search");
            $('#search_bar').setAttribute('name', "q");
            alert('Got inside google');
        }
    });
});

Neither of the 'got inside' alerts are triggering, meaning that neither of them are running, correct? I can not seem to figure out why neither parts of the if statement are running, at least one should be

• javascript
• jquery

Share Improve this question Follow asked Jul 19, 2012 at 6:11 Troy CosentinoTroy Cosentino 4,7881010 gold badges4040 silver badges6262 bronze badges

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 9

setAttribute is a dom element node method use .attr() thats the jQuery method

$(document).ready(function() {
    $('#search_option').change(function() {
        alert('changed');
        if( $('#search_option').val() == "wiki" ) {
            $('#search_form').attr('action', "http://www.wikipedia/search-redirect.php");
            $('#search_bar').attr('name', "search");
            alert('Got inside wiki');
        } else {
            $('#search_form').attr('action', "http://www.google./search");
            $('#search_bar').attr('name', "q");
            alert('Got inside google');
        }
    });
});

Since setAttribute is not a method of the jQuery object an error is produced and the code stops execution therefore it never reaches the alerts.

.setAttribute() isn't a valid jQuery method. Use .attr().

$(document).ready(function() {
    $('#search_option').change(function() {
        alert('changed');
        if( $('#search_option').val() == "wiki" ) {
            $('#search_form').attr('action', "http://www.wikipedia/search-redirect.php");
            $('#search_bar').attr('name', "search");
            alert('Got inside wiki');
        } else {
            $('#search_form').attr('action', "http://www.google./search");
            $('#search_bar').attr('name', "q");
            alert('Got inside google');
        }
    });
});​

try following to get alerts: In your case the javascript execution stops after getting into if or else and then throws error before it reaches the alert statement, to check in similar cases you can move alert statement line by line downwards. for a better solution check breakpoints with firebug or other devTools

$(document).ready(function() {
    $('#search_option').change(function() {
        alert('changed');
        if( $('#search_option').val() == "wiki" ) {
            alert('Got inside wiki');
            $('#search_form').setAttribute('action', "http://www.wikipedia/search-redirect.php");
            $('#search_bar').setAttribute('name', "search");

        } else {
            alert('Got inside google');
            $('#search_form').setAttribute('action', "http://www.google./search");
            $('#search_bar').setAttribute('name', "q");

        }
    });
});

change to jQuery attr() instead of setAttribute as $('#something') is a jQuery object and not DOM node, to fix the error.

final code:

$(document).ready(function() {
    $('#search_option').change(function() {
        alert('changed');
        if( $('#search_option').val() == "wiki" ) {
            alert('Got inside wiki');
            $('#search_form').attr('action', "http://www.wikipedia/search-redirect.php");
            $('#search_bar').attr('name', "search");

        } else {
            alert('Got inside google');
            $('#search_form').attr('action', "http://www.google./search");
            $('#search_bar').attr('name', "q");

        }
    });
});

Change the line here

if( $('#search_option').val() == "wiki" ) { 

to

if($(this).find('option:selected').val() == "wiki") {

try:

if($('#search_option option:selected').val()=="wiki"){