SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Zealot
    Join Date
    Jun 2004
    Location
    Kansas City, MO
    Posts
    143
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Add option to select form field

    I'm working on a form to interact with a databse. This is a PHP script, however I'm fairly positive the technique will be implemented using JS. Hopefully I can make this technique work in several places, but I will give you the current scenario.

    I have a form where the user will input data about a sporting event (Date, Time, Location, Opponent, etc). I have an opponets table and the form is pulling the select field options from that table. Every once in a while an opponent will not be listed in the table. So I have another form (add_opponent.php) too add opponents to the proper table. I even have added an option that will popup a new window with the form necessary using onSelect().

    Here's what I want to do....after the add_opponent form has been submitted (via the popup) I need to close it and refresh the add_event form.

    Taking it a step further would be to set the newly added opponent as selected when the page is refreshed. I can grab the inserted field ID in the add_opponent script.

    Thanks for any input on this!!

  2. #2
    SitePoint Enthusiast
    Join Date
    Aug 2004
    Location
    Netherlands
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can refer to the page which opened the popup as: opener.document;

    In the Popup (so after the POST action), use the following JavaScript function:
    Code:
    function refresh_opener(){
    
     // make a reference to the select box
     theSelectBox = opener.document.getElementById['select_box'];
     newOption = opener.document.createElement("OPTION");
     newOption.value = "your_assigned_db_id";
     newOption.innerHTML = "your_assigned_db_text";
     theSelectBox.appendChild(newOption);
    
     // to select it also
     var i = theSelectBox.options.length;
     theSelectBox.options.selectedIndex = i-1;
    
    }

    Not 100% sure about the selectedIndex, if that doesn't work, try it without the -1.

  3. #3
    SitePoint Zealot
    Join Date
    Jun 2004
    Location
    Kansas City, MO
    Posts
    143
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Atrix
    You can refer to the page which opened the popup as: opener.document....
    Altrix, thank you for your help!!

    There was a slight error I had to work around, but here's the code I finished up with:
    PHP Code:
    echo "<script type=\"text/javascript\">
    function refresh_opener(){

     // make a reference to the select box
     theSelectBox = opener.document.getElementById('opponent-selectbox');
     newOption = opener.document.createElement(\"OPTION\");
     newOption.value = \"
    $insert_id\";
     newOption.innerHTML = \"
    $opponent\";
     theSelectBox.appendChild(newOption);

     // to select it also
     var i = theSelectBox.options.length;
     theSelectBox.options.selectedIndex = i-1;

    }
    </script>"
    ;
        
    echo 
    '<body onLoad="refresh_opener(); javascript:window.close();">';
    die(); 

  4. #4
    SitePoint Zealot
    Join Date
    Jun 2004
    Location
    Kansas City, MO
    Posts
    143
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Now, the million dollar question.....why doesn't my new window load in IE
    Code:
    <option onclick="window.open('add_opponent.php','newopponent','noresizable,noscrollbars,width=275,height=100');" value="0">Add an opponent</option>
    Works just fine in Firefox, but IE won't load it, and I'm sure I've disabled popup blockers

  5. #5
    SitePoint Wizard silver trophy
    Join Date
    May 2003
    Posts
    1,843
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ::: certified wild guess :::

  6. #6
    SitePoint Zealot
    Join Date
    Jun 2004
    Location
    Kansas City, MO
    Posts
    143
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    adios, thanks for that info. However, I only want the window to appear when one value is clicked. Not on all of them. Can you provide a bit of clarifcation on how I need to do it for this case?

  7. #7
    SitePoint Wizard silver trophy
    Join Date
    May 2003
    Posts
    1,843
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Chris...any chance you could briefly sketch the details of this enterprise one more time? Just browsed this thread and felt like I was reviewing several different situations.
    ::: certified wild guess :::

  8. #8
    SitePoint Zealot
    Join Date
    Jun 2004
    Location
    Kansas City, MO
    Posts
    143
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by adios
    Hi Chris...any chance you could briefly sketch the details of this enterprise one more time? Just browsed this thread and felt like I was reviewing several different situations.

    Sure here's my html code...
    Code:
    <select id="opponent-selectbox" name="opponentID">
    	<option value="0"></option>
    	<option value="1">Air Force</option>
    	<option value="2">Akron</option>
    	<option value="3">Alabama</option>
    	<option value="4">Alabama A&amp;M</option>
    	<option value="5">Alabama St</option>
    	<option value="6">Albany</option>
    	......
    	<option value="325">Xavier</option>
    	<option value="326">Yale</option>
    	<option value="327">Youngstown St</option>
    	<option onclick="window.open('add_opponent.php',
    				 'addopponent',
    				 'noresizable,noscrollbars,width=275,height=100');"
    	   value="-1">Add an opponent...</option>
    </select>
    As you can see I only want the popup to come up when the last item is selected.

  9. #9
    SitePoint Wizard silver trophy
    Join Date
    May 2003
    Posts
    1,843
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just a suggestion: you might want to submit the data from the main page, so that the update really reflects what happened at the server. The way to do this is: put a hidden field in the main form, populate it when the pop-up is closed, and automatically submit that form from the pop-up, using this:
    Code:
    <script type="text/javascript">
    
    onunload = function()
    {
    	if (opener && !opener.closed)
    	{
    		var fromform = document.getElementsByTagname('form')[0];
    		var fromfield = fromform.elements['new_opp'];
    		var toform = opener.document.getElementsByTagname('form')[0];
    		var tofield = toform.elements['new_opp'];
    		if (!/^\s*$/.test(fromfield.value))
    		{
    			tofield.value = fromfield.value;
    			toform.submit();
    		}
    	}
    }
    
    </script>
    .........
    .........
    <form onsubmit="return false;">
    <input type="text" name="new_opp" value="" />
    <input type="button" value="done" onclick="self.close()" />
    </form>
    ...and put this:
    Code:
    <input type="hidden" name="new_opp" value="" />
    ...in that main window. In your PHP (form action), check that hidden field; if it's populated, add the opponent to the dB, and serve the updated form. Just a suggestion.

    Here's that other matter:
    Code:
    <script type="text/javascript">
    
    function popit()
    {
    	var w = 275;
    	var h = 100;
    	var l = (screen.availWidth - w) * .5;
    	var t = (screen.availHeight - h) * .5;
    	var sFeatures = 'width='+w+',height='+h+',left='+l+',top='+t;
    	sFeatures += ',status=0'; //one feature off, all features off
    	addopponentwin = open('add_opponent.php', 'addopponentwin', sFeatures);
    	if (addopponentwin && !addopponentwin.closed)
    		addopponentwin.focus();
    }
    
    </script>
    </head>
    <body>
    <form>
    <select id="opponent-selectbox" name="opponentID" onchange="if(this.value==-1)popit()">
    <option value="0"></option>
    ..............
    ..............
    <option value="327">Youngstown St</option>
    <option value=""></option>
    <option value="-1">Add an opponent...</option>
    </select>
    </form>
    ::: certified wild guess :::

  10. #10
    SitePoint Zealot
    Join Date
    Jun 2004
    Location
    Kansas City, MO
    Posts
    143
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    adios, thanks for that code!! I'm not able to implement it yet, but I'm sure it will work fine.

    I'm a bit confused about this part.....

    Quote Originally Posted by adios
    Just a suggestion: you might want to submit the data from the main page, so that the update really reflects what happened at the server. The way to do this is: put a hidden field in the main form, populate it when the pop-up is closed, and automatically submit that form from the pop-up, using this
    Why would I want to submit the new opponent with the main event form? This would require two SQL INSERT statements and I don't see how it would be more effective or logical...

  11. #11
    SitePoint Wizard silver trophy
    Join Date
    May 2003
    Posts
    1,843
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The script above (in your earlier post) doesn't 'refresh' the drop-down - I was taking that word literally - it just adds a new option to the list. Presumably the new opponent will have been uploaded and added to the dB, but there's no connection between the two processes. Just suggesting you might want to actually update the page from the server, not just from a pop-up window.
    ::: certified wild guess :::


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
  •