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 10 of 10
  1. #1
    New Coder
    Join Date
    Aug 2009
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Changing Hidden Field Value based on selected option.

    Hi,

    Is there anyone who could help me figure out how to Change a Hidden Fields Name based on selected option. The hidden fields name is sent off and I need to change the name depending on what option they select.
    For if they select MyList the hidden field name needs to be SelectLists[40] or if they select testlist the hidden field name needs to be SelectLists[41].

    This is probably way, way off but I've done this and it doesn't work.

    Any help would be greatly appreciated, thanks.


    <script language="JavaScript">
    function changelist() {
    //here we assign the value of the hidden input to x
    x=eval(document.getElementByName("SelectLists[40]");

    if(document.getElementById("SelectLists[40]").selected=true
    x=SelectLists[40]

    else(document.getElementById("SelectLists[41]").selected=true
    x=SelectLists[41]

    else(document.getElementById("SelectLists[42]").selected=true
    x=SelectLists[42]

    //now we assign the new value to the input
    document.getElementById("theHiddenInput").name=x;

    //and now we test
    alert(document.getElementById("theHiddenInput").name)


    }
    </script>





    <input type="hidden" id="theHiddenInput" name="SelectLists[40]" value="Yes">
    <select class="inpBox" style="width: 287px" name='mailinglist' id="lists" onchange="changelist()">
    <option value="SelectLists[40]" name="SelectLists[40]" id="SelectLists[40]">MyList</option>
    <option value="SelectLists[41]" name="SelectLists[41]" id="SelectLists[41]">testlist</option>
    <option value="SelectLists[42]" name="SelectLists[42]" id="SelectLists[42]">testlist2</option>

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,253
    Thanks
    203
    Thanked 2,557 Times in 2,535 Posts
    Please help us to help you by following the posting guidelines and wrapping your code in [code] tags. It ought to be obvious why. This means use the octothorpe or # button on the toolbar which will insert opening [ code ] and closing [ /code ] tags - omit the spaces. You can edit your previous post.

    You cannot give the same name SelectLists[40] to two different form elements.

    You seem to be confused as to whether you want to change the name of the hidden field, or its value as per thread title.

    In any case, might I ask what is the purpose of changing the name of the hidden field? Note that although you can change the name, you cannnot change the id.
    Last edited by Philip M; 08-25-2009 at 09:23 AM.

  • #3
    New Coder
    Join Date
    Aug 2009
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I'm very confused, i need to change the inputs name, sorry not its value.
    The reason i need to do this is because we are using pg newsletter which adds the entered email address to a newsletter mailing list. We have several different mailing lists and this program only lets you add an email address to one or all lists, the name of the hidden field seems to determine which list the email address is added too. So i have added a drop list to select the different mailing lists. But i then need the hidden inputs name to change depending on what list they have selected so they are added to the right list. :\

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,206
    Thanks
    80
    Thanked 4,566 Times in 4,530 Posts
    Well, for starters, you can't give a name or id to an <option>.

    So let's fix the <select> and also make it easy:
    Code:
    <input type="hidden" id="theHiddenInput" name="SelectLists[40]" value="Yes">
    <select class="inpBox" style="width: 287px" name="mailinglist" 
       onchange="document.getElementById('theHiddenInput').name='SelectLists[' + this.options[this.selectedIndex].value + ']';">
    <option value="40">MyList</option>
    <option value="41">testlist</option>
    <option value="42">testlist2</option> 
    </select>
    Since this page can't possibly function if JavaScript is disabled, I see no reason not to just use JS in the onchange like that.

  • #5
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,253
    Thanks
    203
    Thanked 2,557 Times in 2,535 Posts
    You seem to have ignored my remarks re wrapping your code in [ code] tags. Do you not see the smiley faces?

    Here you are:-


    Code:
    <script type = "text/javascript">
    function changelist() {
    var x = document.getElementById("lists").value;
    document.getElementById("theHiddenInput").name = x;
    alert(document.getElementById("theHiddenInput").name);  // for testing
    }
    </script>
    
    <input type="hidden" id="theHiddenInput" name="SelectLists[40]" value="Yes">
    <select class="inpBox" style="width: 287px" name='mailinglist' id="lists" onchange="changelist()">
    <option value="SelectLists[40]" > MyList </option>
    <option value="SelectLists[41]" > testlist </option>
    <option value="SelectLists[42]" > testlist2 </option>
    </select>
    Last edited by Philip M; 08-25-2009 at 12:00 PM. Reason: Noticed you had no </select> tag

  • #6
    New Coder
    Join Date
    Aug 2009
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hey, Thanks a lot Philip M and also Old Pedant. Your script works great Philip, I really appreciate you experienced guys helping beginners like me out.
    Thanks, Again.

  • #7
    New Coder
    Join Date
    Aug 2009
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hey,

    I was wondering if its possible to make it so when the first option of the drop down list is select, (i.e. nothing is selected) that the page won't submit until an item from the list is selected. So if option value equals "select" i don't want the page to send.
    I've tried this several ways with little success.


    <script type = "text/javascript">
    function changelist() {
    var x = document.getElementById("lists").value;

    if (x == "select") {
    alert("Please Select a Mailing List");
    document.frmSS.focus();
    return false;
    }
    else

    (document.getElementById("theHiddenInput").name = x;

    return true
    }
    </script>



    <input type="hidden" id="theHiddenInput" name="SelectLists[40]" value="Yes">
    <select class="inpBox" style="width: 200px" name='mailinglist' id="lists" onchange="changelist()">
    <option value="select" > ----------------- </option>
    <option value="SelectLists[40]" > MyList </option>
    <option value="SelectLists[41]" > testlist </option>
    <option value="SelectLists[42]" > testlist2 </option>
    </select>

    Any Clues would be appropriated, thanks.

  • #8
    New Coder
    Join Date
    Aug 2009
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ahhhhh, I meant any clues would be appreciated, thanks.

  • #9
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,253
    Thanks
    203
    Thanked 2,557 Times in 2,535 Posts
    Here you are:-

    Code:
    <script type = "text/javascript">
    function changelist() {
    var x = document.getElementById("lists").value;
    if (x == "") {
    alert("Please Select a Mailing List");
    document.forms[0].mailinglist.focus();
    return false;
    }
    else {
    document.getElementById("theHiddenInput").name = x;
    alert(document.getElementById("theHiddenInput").name);  // for testing
    return true;
    }
    }
    </script>
    
    <input type="hidden" id="theHiddenInput" name="SelectLists[40]" value="Yes">
    <select class="inpBox" style="width: 287px" name='mailinglist' id="lists" onchange="changelist()">
    <option value = "" selected>Select an option</option>
    <option value="SelectLists[40]" > MyList </option>
    <option value="SelectLists[41]" > testlist </option>
    <option value="SelectLists[42]" > testlist2 </option>
    </select>
    One more time, please use the [ code ] tags when posting in this forum.
    If you want help, you must conform with the rules.
    Last edited by Philip M; 08-26-2009 at 09:25 AM.

  • #10
    New Coder
    Join Date
    Aug 2009
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hey Philip thanks again, I'll definitely make sure to put my code in the [] brackets from now on, sorry about that.


  •  

    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
    •