www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 20

Thread: help on javascript form...

  1. #1
    Join Date
    Dec 2003
    Location
    Malaysia
    Posts
    206

    Exclamation help on javascript form...

    i want to create a form that when an option in the list box is chosen, it automatically pop out a new window which then allow me to enter certain information in the new pop up window then pass the information back to the default form?

    <form action="javascript://" onchange="mywin=window.open('HTTP://localhost/phpinfo.php', 'winname', 'width=30,height=30,scrollbars=yes,menubar=yes,location=yes,status=yes,resizable=yes,toolbars=yes'); ">

    this javascript allows a new window pop-up when the submit button is clicked...

    <select onchange="if(selectedIndex != 0) location = options[selectedIndex].value;">
    <option>&lt; select an option &gt;</option>
    <option value="http://www.google.com/">Google</option>
    <option value="http://www.yahoo.com/">Yahoo</option>
    <option value="http://www.hotbot.com/">Hotbot</option>
    </select>

    this option allows me to direct the option chosen to a new page without pressing any submit button.

    and the most important i need to pass back information entered in the new pop-up window back to the original page!!

    help ...

  2. #2
    Join Date
    Jun 2003
    Location
    Virginia
    Posts
    675
    This thread might help.

    It uses a radio item to trigger the event instead of a
    <select> option but it might provide some guidance.

    If you need a specific code example, let me know and I'll
    come up with something tomorrow unless someone else
    wants to help.

    http://forums.webdeveloper.com/showt...threadid=23437

  3. #3
    Join Date
    Dec 2002
    Location
    WI, United States
    Posts
    1,372
    It also might help you to know how to change the form values of the parent window. Here is how you would do that:

    window.opener.document.formname.fieldname.value="whatever";

    If you want to use that in a select statement, it would look something like this(in the new window):

    <select name="whatever" onchange="window.opener.document.formname.fieldname.value=this.value">
    <option value="one">one</option>
    <option value="two">two</option>
    <option value="three">three</option>
    </select>

    I hope that helps!
    if (succeed != true)
    function askAdam();

    Check out my site!

  4. #4
    Join Date
    Dec 2003
    Location
    Malaysia
    Posts
    206
    yupp, sir i need a specific coding ...

    i need to use SELECT because

    <select name="sltjobgrade">
    <option value="opt[0]">1</option>
    <option value="addnew">[ADD NEW]</option>
    <option value="refresh">[REFRESH]</option>
    </select>

    when i choose ADD NEW, a new window pop-up, and allow me to enter "2", then the pop-up window closed, pass the value back to the original page. when REFRESH option is chosen then the page will refresh! this time the <SELECT> will become

    <select name="sltjobgrade">
    <option value="opt[0]">1</option>
    <option value="opt[1]">2</option>
    <option value="addnew">[ADD NEW]</option>
    <option value="refresh">[REFRESH]</option>
    </select>

    the value "2" will be entered to the database.. i am using mysql/php for the web... but can't figure how to do the pop-up using javascripted form.

  5. #5
    Join Date
    Dec 2002
    Location
    WI, United States
    Posts
    1,372
    Well, here is an example that will allow the client window to communicate with the parent window:
    Code:
    <html>
    <head>
    	<title>Parent window</title>
    	<script type="text/javascript">
    	function open_win(){
    		win = window.open();
    		win.document.write("<html><head><title>Enter value</title></head><body>The value you enter here will go back into the parent window:<br><form><input type=\"text\" name=\"thevalue\"><input type=\"button\" value=\"Send Data\" onclick=\"window.opener.form1.changevalue.value=document.forms[0].thevalue.value; window.close();\"</form></body></html>");
    	}
    	</script>
    </head>
    
    <body>
    
    <form name="form1" action="wherever.php" method="post">
    <input type="text" name="changevalue"><br>
    <input type="button" onclick="open_win();" value="Open Window">
    </form>
    
    </body>
    </html>
    But you are talking about a lot more than this... I doubt anyone is going to make this entire script for you for free...
    if (succeed != true)
    function askAdam();

    Check out my site!

  6. #6
    Join Date
    Jun 2003
    Location
    Virginia
    Posts
    675
    OK - going to bed now. I'll get something for you tomorrow
    morning (hopefully thats OK).

    I'll make it so...

    1) A new popup is shown when the "ADD NEW" option is
    selected.
    2) The popup will show two textfields for entry.
    3) The popup will also include a CLOSE button.
    4) The results will be returned in "hidden" objects in the
    "parent" window when this, the Close button, is pressed.

    OK.....

  7. #7
    Join Date
    Jun 2003
    Location
    Virginia
    Posts
    675
    Adam is faster than me and given an example to
    communicate from the "child" back to the "parent"
    window.

    Does this meet your requirements or do you need more???

  8. #8
    Join Date
    Dec 2002
    Location
    WI, United States
    Posts
    1,372
    Originally posted by olerag
    Adam is faster than me and given an example to
    communicate from the "child" back to the "parent"
    window.
    I've been working with code long enough it's about as fast as talking now.

    Also, this is obviously not exactly what they wanted, but what they wanted I wasn't going to make for free. I'm hoping that they can look at this and figure out how to do the rest...
    if (succeed != true)
    function askAdam();

    Check out my site!

  9. #9
    Join Date
    Dec 2003
    Location
    Malaysia
    Posts
    206
    yupp i wish to know more

    i like to learn ... is my pleasure to learn from your guys ..


    thanks everyone!


    mr.olerag! i wait for you tomorrow!

  10. #10
    Join Date
    Jun 2003
    Location
    Virginia
    Posts
    675
    Here you go. I made the "parent" items that receive the
    input "text" items instead of "hiddens" so you can see the
    results. You can alter the items as you like.

    PHP Code:
    <html>
    <
    head>
    <
    script type="text/javascript">
      function 
    showResults(nameoutput1output2) {
        var 
    listObj document.myForm.selectList1;
        var 
    newWin;
        var 
    val;
        for (var 
    i=0i<listObj.lengthi++) {
          if (
    listObj.options[i].selected) {
            
    val listObj.options[i].value;
            if (
    val.toLowerCase() == "addnew") {
              
    newWin window.open('','','top=150,left=150,width=325,height=300');
              if (!
    newWin.opener) {
                
    newWin.opener self;
              }
              
    with (newWin.document) {
                
    open();
                
    write('<html>');
                
    write('<body onLoad="document.form.box1.focus()"><form name=form>' '<br>');
                
    write('<p>You may enter your ' name ' here and it will be copied into the form for you.');
                
    write('<p><center>' 'Entry 1' ':  <input type=text name=box1 size=25 onKeyUp=' output1 '=this.value>');
                
    write('<p><center>' 'Entry 2' ':  <input type=text name=box2 size=15 onKeyUp=' output2 '=this.value>');
                
    write('<p><input type=button value="Click to close when finished" onClick=window.close()>');
                
    write('</center></form></body></html>');
                
    close();
              }
            }
          }
        }
      }
    </script>

    </head>
    <body>
    <form name="myForm">
      Entry 1
      <input type="text" name="Entry1" size=25>
      <br>
      Entry 2
      <input type="text" name="Entry2" size=15>
      <p>
      Selection List
      <p>
      <select name="selectList1" size="5" onClick="showResults('Information','opener.document.myForm.Entry1.value','opener.document.myForm.Entry2.value')">
        <option value="Option1">Option #1</option>
        <option value="Option2">Option #2</option>
        <option value="AddNew">Add New Item</option>
        <option value="Refresh">Refresh</option>
      </select>
    </form>
    </body>
    </html> 

  11. #11
    Join Date
    Dec 2003
    Location
    Malaysia
    Posts
    206
    thanks!

    it works now!!!!

  12. #12
    Join Date
    Dec 2003
    Location
    Malaysia
    Posts
    206
    olegra! got problem!

    i didn't set the size for the select. so once i choose ADD NEW, the window pop up i fill in the form, close the window. The select option will remain at the add new option. if i want to choose other option e.g. refresh! the window pop up again!
    because of the OnClick command!..
    i try to set <selected = "selected" on other options but it doesn't work also....

    ....

  13. #13
    Join Date
    Jun 2003
    Location
    Virginia
    Posts
    675
    Well, I tested this with NN7 and IE6 and the pop-up only
    appears if I select the "Add New" option and doesn't appear
    if I then select another option.

    However, you can place the focus to another object
    before you begin the initial iteration, such as..
    PHP Code:
    document.myform.Entry1.focus(); 

  14. #14
    Join Date
    Dec 2003
    Location
    Malaysia
    Posts
    206
    emm other options won't bring me the pop-up window ..

    emm first i set the SELECT with no size ( the one you show me is Size=5)

    so when i run the script everything is great! a LIST BOX appear, i press the arrow button to choose ADD NEW in the list box.. the window pop up then i can enter what ever i want!.. then i click the CLOSE WINDOW BUTTON and back to parent window ..

    problem occurs when i get back to parent window
    at the parent window... at the listbox, i want to choose another option , but the ADD NEW somehow become the default option for the LIstBox..i can't press the arrow button to go for other option. because once i press the button the add new window pop up again..

  15. #15
    Join Date
    Jun 2003
    Location
    Virginia
    Posts
    675
    I've run this in IE6 and NN7 and do not get the affect that
    you are. And it doesn't matter if the selection size
    parameter is set at 1 or 5. The popup only appears when
    the "Add New" is actually selected.

    What browser are you running??
    Last edited by olerag; 12-24-2003 at 08:07 AM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles