SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2005
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How can I modify a drop list option with an input field in JavaScript?

    Hello,

    A user has a drop down list. If he chooses the "new" option, a new field appears and he can add the new parameter value. Once he clicks on modify I have to get this new value => and I don't know how to do it.
    If the user clicks on another option, the new value has to be taken from the option lists....
    THe inputs are always called new_<parameterName>

    Here is my code (I have put an alert where I have to add the code)
    Code:
    <html>
    <title>Parameters list</title>
    <head>
    <script language=JavaScript>
    function getSelect(s,fieldName)
    {
      selectedOptionText = s.options[s.selectedIndex].text;
      selectedOptionValue=s.options[s.selectedIndex].value;
      fieldName="new_"+fieldName;
      if (selectedOptionValue == "NEW")
      {
        document.getElementById(fieldName).style.display = 'block';
        document.forms[0].new_p1.focus();
      }
      else
      {
        document.getElementById(fieldName).style.display = 'none';
      }
    }
    
    function reDirect(parameterName)
    {
      var textField = document.getElementById(parameterName);
      if (textField.value == "NEW")
      {
        alert("Put the input value in textField");
      }
      plist=parameterName+"="+textField.value;
      url="update_"+parameterName+".jsp?"+plist;
    //  makeRequest(url);
    }
    </script>
    </head>
    <body>
    <%@page language="java" %>
    <center>
    <P>
    <form onSubmit="return false" method="post" name="params" action="">
    <table border=0>
    <tbody>
    <tr>
    <td>p1:</td>
    <td><select name="p1" onChange="getSelect(this,'p1')">
        <option value="11">11</option>
         <option value="12">12</option>
        <option value="NEW">new_table </option>
    </select></td>
    <td id="new_p1" style="display:none;">
    <input type="text" value="Enter_new_table" name="new_p1">
    </td>
    <td>
    <input type="button" onClick="reDirect('p1')" value="Modify"></td>
    <tr>
    <td>p2:</td>
    <td><select name="p2" onChange="getSelect(this,'p2')">
        <option value="p21">21</option>
         <option value="p22">22</option>
        <option value="NEW">new_table </option>
    </select></td>
    <td id="new_p2" style="display:none;">
    <input type="text" value="Enter new table name" name="new_p2">
    </td>
    <td>
    <input type="button" onClick="reDirect('p2')" value="Modify"></td>
    </tbody>
    </table>
    </form>
    </body>
    </html>
    Could you help me?
    I have tried:
    Code:
    n="new_"+parameterName; // input name is always: new_<paramName>
    n1=document.getElementById(n);
    alert(n1.value);   //==> I get undefined!!!

  2. #2
    SitePoint Addict jtrelfa's Avatar
    Join Date
    Oct 2004
    Location
    Troy, Mi
    Posts
    231
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try this where your alert is...
    Code:
    textField.options[textField.options.length] = new Option(document.forms[0]["new_" + parameterName].value,"XXX");
    You'll need to substitute whatever "value" you want in place of "XXX" - but this should point you in the right direction.

  3. #3
    SitePoint Addict Mirek Komárek's Avatar
    Join Date
    Dec 2006
    Location
    Prague
    Posts
    210
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am not sure what would you like to do. Something like this?
    Code:
    <script>
    function getId(s){return document.getElementById(s)}
    function getIn(s){return getId(s).options[getId(s).selectedIndex]}
    function getSelect(s){
    if(getIn(s).value=="NEW"){getId('new_'+s).style.display='block';}
    else{getId('new_'+s).style.display = 'none';}
    }
    function reDirect(s){
    if(getIn(s).value=="NEW"){
    alert("Put the input value in textField");
    }
    else
    alert(getIn(s).value)
    }
    function setval(s,el){
    getIn(s).value=el.value;
    getIn(s).text=el.value;
    }
    </script>
    </head>
    <body>
    <select id="p1" onChange="getSelect('p1')">
        <option value="11">11</option>
        <option value="12">12</option>
        <option value="NEW">new_table</option>
    </select>
    <p id="new_p1" style="display:none">
    <input type="text" value="Enter_new_table" onkeyup="setval('p1',this)" name="new_p1">
    </p>
    <input type="button" onclick="reDirect('p1')" value="Modify">

  4. #4
    SitePoint Enthusiast
    Join Date
    Sep 2005
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That will do!!! Thanks!


Bookmarks

Posting Permissions

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