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 to the CF scene
    Join Date
    Jul 2005
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Add Option to Select Box


    How would I be able to add an option within a child window and have it update the appropriate selct box without having to refresh the parent page?

    I'm not a java expert so something like this?

    document.forms['testform'].testselect.options = new Option('new text','new value');

    Please explain.

    Thanks in advance!!

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,524
    Thanks
    3
    Thanked 508 Times in 495 Posts
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    
    <head>
      <title></title>
    <script language="JavaScript" type="text/javascript">
    <!--
    
    
    function OptionAdd(id){
     if (!vic){ return }
     obj=document.getElementById(id);
     if (obj.value.replace(/\s/g,'')!=''){
      vic.AddOption(obj.value)
      vic.focus();
     }
    }
    //-->
    </script>
    <script language="JavaScript" type="text/javascript">
    <!--
    // Script produced with PopUpGenerator
    // by Vic Phillips http://www.vicsjavascripts.org.uk
    
    // Insert this script between the <header> tags
    
    var vic=null;
    
    function pugNewWindow(pugname,puglink){
     pugCloseWin();
    
     if (pugname==vic){
      vic=window.open(puglink,'vic','width=300,height=200,left=50,top=50,location=yes,menubar=yes,resizable=yes,status=yes,scrollbars=yes,toolbar=yes');
     }
    }
    
    function pugCloseWin(){
    // Recommended - include onunload="pugCloseWin();" in the <body> tag.
     if (vic&&!vic.closed){ vic.close(); }
    }
    
    
    //-->
    </script>
    
    
    
    
    </head>
    
    <body onunload="pugCloseWin();">
    <input type="button" value="Open PopUp" onclick="pugNewWindow(vic,'po1.htm');"
    <br>
    <input id="ip" type="text" size=10 >
    <input type="button" name="" value="ADD" onclick="OptionAdd('ip');" >
    
    </body>
    
    </html>
    po1.htm
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    
    <head>
      <title></title>
    <script language="JavaScript" type="text/javascript">
    <!--
    
    function AddOption(txt){
     sel=document.getElementById('fred');
     sel.options[sel.options.length]=new Option(txt,txt,true,true);
     sel.selectedIndex=0;
    }
    
    //-->
    </script>
    </head>
    
    <body>
    <select id="fred" >
    <option >Tom</option>
    <option >Dick</option>
    </select>
    
    </body>
    
    </html>

  • #3
    New Coder
    Join Date
    Jul 2005
    Posts
    67
    Thanks
    0
    Thanked 0 Times in 0 Posts
    The code for inserting a new option in a main document select list must be part of the main document, but is called from the pop-up window:

    Main document:

    Code:
    <HTML>
    <Head>
    <Script Language=JavaScript>
    
    	var tmpWin = "";
    	
    	function popWin(){
    
    		tmpWin = window.open('pop1.html',"");
    	}
    
    	function insertOpt(nData){
    
    		nOption = document.createElement('option'); 
    		isData = document.createTextNode(nData); 
    		nOption.setAttribute('value',nData); 
    		nOption.appendChild(isData); 
    		isList = document.forms.formcost.service;
    		isList.appendChild(nOption); 
    	}
    
    	function dispVal(isVal){
    
    		alert(isVal);
    	}
    
    </Script>
    </Head>
    <Body>
    <Form name='formcost'>
    <Select name='service' onchange="dispVal(this.value)">
    <option value='0' selected> Make a selection </option>
    <option value='1' > Text 1 </option>
    <option value='2' > Text 2 </option>
    </Select>
    </Form>
    <input type=button value="Open Window" onclick="popWin()"><br><br>
    </Body>
    </HTML>
    pop1.html:

    Code:
    <HTML>
    <Head>
    <Script Language=JavaScript>
    
    	function newOpt(){
    
    		opener.insertOpt("Apple");
    		opener.insertOpt("Pear");
    		self.close();
    	}
    
    </Script>
    </Head>
    <Body>
    <input type=button value="Add Options" onclick="newOpt()"><br><br>
    </Body>
    </HTML>


  •  

    Posting Permissions

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