Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Jul 2014
    Posts
    14
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question Select Option Select by ID and Select Disable

    I'm trying to create a form that analyses the cost of a website creation based on several factors. however I'm having issues, I've spent most of today trying to make it so when the WordPress page style is selected certain elements of the form change to a selected value and are then disabled. I've tried doing this by using a variable on the page style area and then using the .val() option but that makes the working math turn into a NaN, I've tried several other methods but none have come to fluition.
    Please help me, I want the select #CFWebcms to go to select id="WPCMS", #CFWebpages to id="WPP" and #CFWebdatabases to id="WPDB" and then disable these fields but to also update the math formula with the values of those ID and keep the formula working. I only want that to happen when the WordPress option is selected and to go back to normal when/if its not.
    My original code is available on JSFiddle, I would post it but its very long and I kinda broke my latest code to the point where I had to restore my back-up.
    Please give me any advice you can as this is really confusing me as to why it wont work.

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,980
    Thanks
    56
    Thanked 557 Times in 554 Posts
    those IDs aren't necessary - you can set the selectedIndex. If the values were unique you could use them, too, like this:
    Code:
    $("#CFWebpages").val("WP").prop("disabled",true);
    but the ones you are targeting both have a value of 0, the same as the first option. It's no biggie using the selectedIndex, just that it relies on how many options there are in the select, so if you add more at some point, it will throw the whole thing out. This should work for now, anyway...

    Code:
    $("#CFWebcms").on("change",function(){
    if($(this).val()=="0"){
    $("#CFWebpages").prop("selectedIndex", 15).prop("disabled",true); //select the 15th option, then disable the select
    $("#CFWebdatabase").prop("selectedIndex", 6).prop("disabled",true); //select the 6th option, then disable the select
    } else {
    $("#CFWebpages").prop("disabled",false); // for in case they change their mind and decide against wordpress
    $("#CFWebdatabase").prop("disabled",false); // ditto
    	}
    });
    but if you really want to use the IDs, it would look something like this...

    Code:
    $("#CFWebcms").on("change",function(){
    if($(this).val()=="0"){
    $("#CFWebpages option[id='WPP']").prop("selected", "selected");
    $("#CFWebdatabase option[id='WPDB']").prop("selected", "selected");
    $("#CFWebpages").prop("disabled",true);
    $("#CFWebdatabase").prop("disabled",true);
    } else {
    $("#CFWebpages").prop("disabled",false); // for in case they change their mind ansd decide against wordpress
    $("#CFWebdatabase").prop("disabled",false); // ditto
    	}
    });
    Last edited by xelawho; 08-04-2014 at 04:37 AM.

  • Users who have thanked xelawho for this post:

    aw555000 (08-04-2014)

  • #3
    New Coder
    Join Date
    Jul 2014
    Posts
    14
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thank you sooo much, this works perfectly and keeps the math formula. you are a legend


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •