www.webdeveloper.com
Results 1 to 5 of 5

Thread: Can not fire the submit after change event?

  1. #1
    Join Date
    Sep 2011
    Posts
    3

    Can not fire the submit after change event?

    Hi everyone,

    I am developing a website with perl cgi, HTML, JavaScript and sas SQL.

    In html page, there are few drop down list, different item of witch, will call specific cgi file to create new webpage. Those are all working very good.

    Now, I added search function, with witch the value entered to text box has to be send, when clicking submit button. The URL of cgi was on the form action.

    But something happens. It did not go to the URL of action, but go to the URL of previous one the on-change event did.

    Code example:

    <form name=change>
    <select name=sel1 on change='location=this.options[selected].index'>
    <option value=change1.cgi?....>chg1</option>
    <option value=change1.cgi?....>chg2</option>
    ......
    </select>
    </form>
    <form name= search action=search.cgi>
    <input type=text value=''>
    <input type=submit value='search'>
    </form>

    my question without search form, change forms worked fine.
    After creating search form by entering value into text box and submitting the form, it did not call search.cgi. If on change event happened before, it will go to the same URL.

    Hopefully, I have exlaned my question clearly.

    Any exper could help or have any thoughts?

    Thanks in advance!

    Helen

  2. #2
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Quote Originally Posted by Helenhe11 View Post
    But something happens. It did not go to the URL of action, but go to the URL of previous one the on-change event did.
    Impossible. Forms act always independently. My thought is that your HTML code is not well formatted. Do you have a Doctype? Which one?

    Try, when coding in HTML, to follow this simple rules:

    - always close the tags. If the Doctype is XHTML and the tag is an "empty" one, close it in XHTML style.
    - don't interleave the tags. That means avoid something like:

    <tag1>
    <tag2>
    </tag1>
    </tag2>

    - use lowercase for tags, attributes and events
    - use double quotes for attributes' values

    Validate you document at:
    http://validator.w3.org/

  3. #3
    Join Date
    Sep 2011
    Posts
    3
    Thanks Kor for your reply !

    I have checked all tags. there're no issues.

    actually, all dropdown list worked good though. only submit funciton does not work as i wanted.

    someone said, onsubmit and onchange almost always makes trouble when using both on the same page...

    is there any way to solve the issue?

    thanks in advance !
    Helen

  4. #4
    Join Date
    Apr 2010
    Location
    Cocoa Beach, FL
    Posts
    41

    Better way to reference value of the dropdown

    There is a better way to reference the selected option of the select control (drop down list). Use (this.value) instead of (this.options[selected].index). Also you should use (location.href) instead of just (location).

    Note the following code:

    <form name="change">
    <select name="sel1" onchange="location.href='http://' + this.value">
    <option value="change1.cgi?....">chg1</option>
    <option value="change1.cgi?....">chg2</option>
    </select>

    Hope this helps.

    Michael G. Workman
    michael.g.workman@gmail.com

  5. #5
    Join Date
    Sep 2011
    Posts
    3
    Thanks Michael !

    Sorry for lots of typos. I created the post on Ipad....

    Here is my code:
    <FORM method=post name=search action=../../../AM/cgi-bin/dev/get_report.cgi?type=tot>
    <TBODY>
    <TR>
    <TD>Search By :
    <SELECT onchange=SelectSubItem(); name=schby>
    <OPTION value="">Select Search Type</OPTION>
    <OPTION value=aid>ID</OPTION>
    <OPTION value=anm>Name</OPTION>
    <OPTION value=mngtype>Managerment Type</OPTION>
    <OPTION value=own>Owner</OPTION></SELECT>

    <SELECT id=ddl1 class=showD onchange="location=this.options[selectedIndex].value;" name=schm>
    <OPTION value="">Select Management Type</OPTION>
    <OPTION value=../../../AM/cgi-bin/dev/get_report.cgi?schby=mngtype&schm=dm&type=tot>DM</OPTION>
    <OPTION value=../../../AM/cgi-bin/dev/get_report.cgi?schm=m1&schby=mngtype&type=tot>M1</OPTION>
    <OPTION value=../../../AM/cgi-bin/dev/get_report.cgi?schby=mngtype&schm=ps&type=tot>PS</OPTION>
    <OPTION value=../../../AM/cgi-bin/dev/get_report.cgi?schby=mngtype&schm=sa&type=tot>SA</OPTION></SELECT>
    <SELECT id=ddl2 class=hideD onchange="location=this.options[selectedIndex].value;" name=scho>
    <OPTION selected value="">Select Owner</OPTION>
    <OPTION value=../../../AM/cgi-bin/dev/get_report.cgi?schby=own&scho=al&type=tot>AL</OPTION>
    <OPTION value=../../../AM/cgi-bin/dev/get_report.cgi?schby=own&scho=asg&type=tot>ASG</OPTION>

    <INPUT id=txt1 class=hideD maxLength=200 name=schaid>
    <INPUT id=txt2 class=hideD maxLength=200 name=schanm>
    <INPUT id=reset class=hideD value=Reset type=reset name=reset>
    <INPUT id=submit class=hideD value=Search type=submit name=submit> </TD></TR></FORM>
    <SCRIPT language=JavaScript>
    function SelectSubItem(){
    if(document.search.schby.value == 'mngtype') {
    showDD("ddl1", "showD");
    showDD("ddl2", "hideD");
    showDD("txt1","hideD");
    showDD("txt2","hideD");
    showDD("reset","hideD");
    showDD("submit","hideD");
    }

    if(document.search.schby.value == 'own'){
    showDD("ddl1", "hideD");
    showDD("ddl2", "showD");
    showDD("txt1","hideD");
    showDD("txt2","hideD");
    showDD("reset","hideD");
    showDD("submit","hideD");
    }
    if(document.search.schby.value == 'aid'){
    showDD("ddl1", "hideD");
    showDD("ddl2", "hideD");
    showDD("txt1", "showD");
    showDD("txt2", "hideD");
    showDD("reset","showD");
    showDD("submit","showD");

    }
    if(document.search.schby.value == 'anm'){
    showDD("ddl1", "hideD");
    showDD("ddl2", "hideD");
    showDD("txt1", "hideD");
    showDD("txt2", "showD");
    showDD("reset","showD");
    showDD("submit","showD");
    }
    if(document.search.schby.value == ''){

    showDD("ddl1", "hideD");
    showDD("ddl2", "hideD");
    showDD("txt1", "hideD");
    showDD("txt2", "hideD");
    showDD("reset","hideD");
    showDD("submit","hideD");
    }
    return GetSelectedItem();

    }

    function GetSelectedItem() {

    len = document.search.schby.length;
    i = 0;
    chosen = "none";

    for (i = 0; i < len; i++) {
    if (document.search.schby[i].selected) {
    chosen = document.search.schby[i].value;
    document.search.schby[i].options.selected = true;

    }
    return chosen;
    }

    </script>

    with this, I would like to create a search function:
    1. search by id or name, the textbox will be displayed. then submit to go to cgi on action url.
    2. search by management-type or owner, the dropdown list will be diaplayed, then select to go to cgi by url.

    At very beginning, if I search ID or Name, submit worked fine.
    After dropdown list was selected, onchage worked fine also. Then, if search by ID or Name again, it won't work.

    Hopefully, i explaned my question much clearly....

    Any thoughts?

    Thanks in advance !!!
    Helen

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