List Info

Thread: Press Button to add value into listbox
Press Button to add value into listbox
country flaguser name
United States		 1969-12-31 18:00:00 

  


  

    




  



    

            
Hi: Can any one please tell me how to i add a listbox and an Add button. So that when user click the add button the value will be goes into the listbox

  Thanks.

  <html&gt;

<head>

&lt;script>;

</script>

<body>;

<table border='0' align='center'>


<form name='deceasedsocial' method='POST'>

<tr>

<td>;Enter Social Security Number</td><td><input type='text' name='ssn'></td></tr>

<;/table>

</form>

<;/body>

   



---------------------------------

The fish are biting.

 Get more visitors on your site using Yahoo! Search Marketing.



[Non-text portions of this message have been removed]






    
  

    
    __._,_.___
    
     
    
    
  
.


    


__,_._,___



  

  
  
   
     
    

  

    Re:  Press Button to add value into
listbox
  


  

     country flaguser name
United States		
     1969-12-31 18:00:00
  


  

    

  


  

    




  



    

            
> Hi: Can any one please tell me how to i add a listbox and an Add

> button. So that when user click the add button the value will be

> goes into the listbox



Please reorder your original HTML tags.

You can add remove button if you wish, or validate input fields using

dom-standard.

For DOM HTML documentation :

http://www.w3.org/TR/DOM-Level-2-HTML/




Code below tested well on IE6 and FF1.5

HTH.



<;html>


<head&gt;

<script type=";text/javascript";>

function addSSN(elm)

{

var frm=elm.form;

var inp=frm.elements['ssn'];

var sel=frm.elements['ssn_list[]'];

var newElm = document.createElement('option');

newElm.setAttribute('value', inp.value);

newElm.setAttribute('text', inp.value);

newElm.innerHTML = inp.value;

sel.appendChild(newElm);

}

</script>

&lt;/head>

<body>

<form name='deceasedsocial' method='POST'>

<table border='0' align='center'>


<tr>

<td&gt;Enter Social Security Number</td>

&lt;td>&lt;input type='text' name='ssn'>

<input type=";button&quot; value=&quot;Add" onclick=&quot;addSSN(this);&quot;></td>

&lt;/tr>

<tr>;

<td colspan=&quot;2">

<select name=";ssn_list[]" size=";4" multiple style=&quot;width:200px;"&gt;

</select>

</td&gt;

</tr>

<;tr>

&lt;td colspan=&quot;2"><input type=";submit&quot; value=&quot;Submit&quot;><;/td>

</tr>

</table>

&lt;/form>

</body>

<;/html>



    
  

    
    __._,_.___
    
     
    
    
  
.


    


__,_._,___



  

  
  
   
     
    

  

    Re:  Press Button to add value into
listbox
  


  

     country flaguser name
United States		
     2007-03-23 04:12:50
  


  

    

  


  

    




  



    

            
----- Original Message ----- 

From: Erik Khan 



Hi: Can any one please tell me how to i add a listbox and an Add button. So that when user click the add button the value will be goes into the listbox

Thanks.

-----------------------------

I have pasted a DOM2 example below. I couldn't find an easy way to do it in DOM(1). Perhaps someone can help??



The problem in DOM(1) is that 'name' and 'id' are not valid attributes of '<option>'. The only way I could think of doing it in DOM(1) was to assign an event (onClick) to an existing option such as 

'<option onclick=&quot;getoption(this)&quot;>Other - Enter below</option>'

and then entering the element 'option' into the environment for later refference ie - 

function getoption(option)

  {

  global option;

  return;

  }



Then the value could be updated by 

document.formname.textboxname.onChange = function()

  {

  var option.text = document.formname.textboxname.value;

  option.selected = true;

  }



Any ideas ?? I am only new to JavaScript. 



Anyway here is what I came up with. 



<html>

<head>;

<script>

function add_option()

  {

  var newtext = document.getElementById("new_option_text").value;

  if (newtext == "&quot;)

    {

    return;

    }

  var options = document.getElementById("my_options&quot;);

  for(var index=0; options.childNodes[index]; index++)

    {

    var option = options.childNodes[index];

    if (option.innerHTML == newtext)


      {

      option.selected = true;

      return;

      }

    }

  var newoption = document.createElement("option");

  newoption.innerHTML = newtext;


  newoption.selected = true;

  options.appendChild(newoption);

  }

</script>


</head&gt;



&lt;body>

<form action=&quot;" method=&quot;POST&quot;>

&lt;table border=&quot;1"&gt;

<tr>

<;td>Select item</td>

<;td>

&lt;select name=";options&quot; id="my_options&quot;>


<option>Item 1</option>

&lt;option>;Item 2</option>

&lt;option selected&gt;Item 3</option>

&lt;option>;Item 4</option>

&lt;/select&gt;

</td>

<;td>

&lt;input type=";submit&quot; name=";confirm&quot; value=&quot;Confirm&quot;>&lt;/input>;

</td>

</tr>

&lt;tr>


<td>OR New item</td>

<;td>

&lt;input type=";text" id="new_option_text"&gt;</input>

&lt;/td>


<td>

<input type=";button&quot; value=&quot;Add option&quot; onClick=&quot;add_option()";></input>


</td>;

</tr>

</table>

</form>

</body>




[Non-text portions of this message have been removed]






    
  

    
    __._,_.___
    
     
    
    
  
.


    


__,_._,___



  

  
  
   
     
    






 [1-3]











   
 





about | contact  Other archives ( Real Estate discussion Medical topics )