Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 12
  1. #1
    Senior Member rosland's Avatar
    Join Date
    Jul 2003
    Location
    Norway
    Posts
    1,944
    Member #
    2096
    I have a page where I want to populate a secondary select box based on what you select in the first select box.
    Select box1 contains a list of different courses students can take.
    When you select a course, select box2 is populated with different start dates for the selected course.

    I can't have a pure javascript solution for this, as the dates dynamically change, and are extracted from a database at run-time.

    --------

    So to my problem.
    I've made a dummy page with two select boxes, and a script that queries a dummy table and presents the result as described above.
    I have an "onchange" event in the first select box, that submits the form when you select anything (see code below).
    This test page works just fine.

    I have basically just cut and pasted the code from the dummy page to the real page which contains more elements and styling. (I have changed the form name as described below, so that is not the culprit.)
    However, when I transfer the code to the production page, the onchange event stops working, and it refuses to submit the page.
    The primary "submit button" at the end of the form works, but the onchange-submit doesn't.

    (The recieving/processing page registers all the POST variables into SESSION variables but won't process the page until it recieves the value of the real submit button. As long as that is missing, it just relocates the user to the forms page again, but with the previously posted data intact. Those values are used to repopulate the form.)

    Are there any alternative ways to make the page automatically submit when a selection is made in the first select box, or can anyone immediately see why the onchange event fails as it stands now?

    Code:
     <select onchange="this.document.pamelding.submit()" name="kurs"style="width:250px; font-size: 16px; 
                                background-color:#FFFFCC" >
                                  <option value="<?php echo $kurs ?>" <?php if(@$redK) echo $redK; ?>><?php echo $knavn ?></option>
                                  <option value="1" style="background-color:#12AE06">Nybegynnerkurs</option>
                                  <option value="2" style="background-color:#B8FF29">VK 1</option>
    .....and so on.
    The "pamelding" in [minicode]this.document.pamelding.submit()[/minicode] is the name of the form.
    S. Rosland

  2.  

  3. #2
    Senior Member
    Join Date
    May 2003
    Location
    UK
    Posts
    2,354
    Member #
    1326
    This may just be another way to skin a cat, but on a live website I own I have the folllowing code:

    HTML Code:
    <select name="m" id="m" onchange="submitForm(document.forms[0]);">
    	<option value="1" >Newest</option>
    	<option value="2" >Oldest</option>
    	<option value="3" >Random</option>
    </select>
    And the function submitForm is simple.

    Code:
    submitForm = function(form)
    {
    	form.submit();
    }
    The JS function is located in a external js file but I doubt that matters.

    You could amend the above, just remember you will need to give the function the right parameter (my example assumes that I want to suubmit the first form on that page).

    Edit: If you use Firefox/other-browser-with-a-decent-error-console check theres no errors generated when you invoke the onchange event.

    Also, try removing the this. part, just start it from document.

  4. #3
    Senior Member rosland's Avatar
    Join Date
    Jul 2003
    Location
    Norway
    Posts
    1,944
    Member #
    2096
    Unfortunately that didn't help.

    It's exactly like before.
    If I take your supplied code and paste it into the dummy page, the dummy page works fine.
    When I do exactly the same with the production page, it stops working.
    :-\
    S. Rosland

  5. #4
    Senior Member
    Join Date
    May 2003
    Location
    UK
    Posts
    2,354
    Member #
    1326
    Check that your form tag looks normal (id/name, action, method, enctype).

    Also perhaps try and submit the form via other ways, such as add an onclick event to a link which is outside of the form.

    Also, you do have a closing </select> tag?

  6. #5
    Senior Member rosland's Avatar
    Join Date
    Jul 2003
    Location
    Norway
    Posts
    1,944
    Member #
    2096
    Code:
    <select name="kurs" id="kurs" style="width:250px; font-size: 16px; background-color:#FFFFCC" 
                                onchange="this.document.pamelding.submit()">
                                  <option value="<?php echo $kurs ?>" <?php if(@$redK) echo $redK; ?><?php echo $knavn ?></option>
                                  <option value="1" style="background-color:#12AE06">Nybegynnerkurs</option>
                                  <option value="2" style="background-color:#B8FF29">VK 1</option>
                                  <option value="3" style="background-color:#B8FF29">VK 2</option>
                                  <option value="4" style="background-color:#B8FF29">VK 3</option>
                                  <option value="5" style="background-color:#B8FF29">VK 4</option>
                                  <option value="6" style="background-color:#B8FF29">VK 5</option>
                                  <option value="7" style="background-color:#B8FF29">VK 6</option>
                                  <option value="8" style="background-color:#B8FF29">Canine Biopati</option>
                                  <option value="9" style="background-color:#B8FF29">Termografikurs</option>
                                  <option value="10" style="background-color:#B8FF29">Urtekurs</option>
                                </select>
    The above is the code cut and pasted.
    If I make a dummy form on another page, cut and paste the code above (obviously alter the forms id to match the onchange event), it works flawlessy.

    In its original document, which BTW only contains this form, it doesn't.

    The original form contains some PHP as well, but that doesn't affect the onchange. At least it doesn't when I add similar code to the dummy form.
    S. Rosland

  7. #6
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    this.document probably won't work, since in some DOM implementations the property on the element that points to its document is something like contentDocument. Instead you can rely on the global [minicode]document[/minicode]. Additionally, accessing a form directly as a property of the document object is a very deprecated way of doing things that probably won't work unless you're in quirks mode.

    Instead, for onchange, try this:

    Code:
    onchange="document.getElementById('pamelding').submit()"
    And make sure to check that the form has an id of `pamelding', not just a name.

  8. #7
    Senior Member rosland's Avatar
    Join Date
    Jul 2003
    Location
    Norway
    Posts
    1,944
    Member #
    2096
    Sorry it took so long to respond to this.

    I've tried the getElementById method already (and I do of course have the ID set), but unfortunately it doesn't work either. :-(
    S. Rosland

  9. #8
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    Hm. Any chance we could see the page? If not, try doing it manually in the Firebug console and see if it works. If not, let us know the error it gives.

  10. #9
    Senior Member
    Join Date
    Apr 2005
    Location
    Hatfield, England
    Posts
    855
    Member #
    9790
    Fire up the javascript error console and load thepage. I sense that an error is occuring on page load and as a result this isn't working.

  11. #10
    Senior Member rosland's Avatar
    Join Date
    Jul 2003
    Location
    Norway
    Posts
    1,944
    Member #
    2096
    Finally figured it out! :rambo:

    Running the Firebug console, it returned the following error "submit() is not a function", which initially didn't make any sense.

    However, after googling a bit, I discovered the error. The actual submit button of the form itself had both name and id set to "submit". That confused the script.
    When I changed the name & id of the submit button itself, everything worked fine.

    S. Rosland


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

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

Search tags for this page

onchange quits working javascript
,
select onchange fail
,

web design submit

Click on a term to search for related topics.
All times are GMT -6. The time now is 05:17 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com