0

I have a cgi script written in Python. There are two drop down menus and then a submit button. I'd like to be able to make a selection from the first menu, and based off that choice, have the second drop down menu dynamically populate new choices. The second menu should populate without having to click any button, but simply from making a selection from the first menu. The second menu should also repopulate continually every time I select a new item on the first menu - again, without clicking submit.

What's the general idea to getting this done? I already have implemented some of the code. It uses if/else statements on conditions of whether the inputs have been provided. So after the first drop down menu selection is made, the page submits, and an if/else statement directs to code that displays the same form but with the selection maintained in the drop down menu. I'm using onchange='this.form.submit() to submit the form without having to use the submit button. The current problem is that while making a selection submits the form automatically the first time, reselecting on this form does not seem to work. So, I'm not sure if onchange='this.form.submit() submits the form after the first time.

Here is a prototype. Am I going in the right direction? Or should I be using Ajax? (not familiar with this at all yet):

firstChoicesList = firstChoices()
print(""" <form method="post" action="/cgi-bin/thisScript.py">""")

# if both choices are not selected yet
if "firstChoice" not in form and "secondChoice" not in form:
    # first choice drop down menu
    print("""<p>first choice <select name="firstChoice">""")
    for f in fristChoicesList:
        print("""<option value='""" + f + """'>""" + f + """</option>""")

    # second choice drop down menu
    print("""</select></p>""")
    print("""<p>second choice <select name="secondChoice">""")
    for f in secondChoicesList: # currently contains 1 empty string 
        print("""<option value='""" + f + """'>""" + f + """</option>""")
    print("""</select></p>""")
    print("""
                        <p><input type="submit" />
                </form>
    """)
    print("Please fill in the forms.")
    sys.exit(1) # don't proceed with rest of code below these if/else statements

# if first choice has been selected but not the second
elif "firstChoice" in form and "secondChoice" not in form: 
    # <code for first drop down menu again with choice selected>
    # this function takes the first choice as an argument and returns selections for the second menu
    secondChoicesList = secondChoices(form["firstChoice"].value) 
    # <code for second drop down menu with choices populated from secondChoicesList>
    print("""
                        <p><input type="submit" />
                </form>
    """)
    print("Please fill in the forms.")
    sys.exit(1)

# if both are selected 
else:
    # <same code as above except have both drop down menus save previous selections>
    # proceed to run rest of cgi script 
imagineerThat
  • 5,293
  • 7
  • 42
  • 78

1 Answers1

0

This is an hint: you can populate the next menu with an ajax call to a server side page (that will give you back the data): this will let you:
- Avoid to send forms and pass values through pages (you will send the form only at the end)
- Let user changes his choise (if he need it), without surfing the history

I think that using ajax with jquery will be really simple to use, also if you don't know it.

Please, check short ajax jquery fiddle example to see how easy is to use jquery (here, for cross domain request, that shouln't be your case, you have to disable web security of your browser, e.g. for google chorme set google chrome to make cross domain request with ajax )

code of the fiddle:

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<body>
<select name="a" id="a" onchange="func(this.value)">
<option value="">choose</option>
<option value="https://www.google.it/search?q=ajax+and+juery&oq=ajax+and+juery&aqs=chrome.0.57j0l3.7474j0&sourceid=chrome&ie=UTF-8#sclient=psy-ab&q=ajax+jquery&oq=ajax+jquery&gs_l=serp.3..0l10.2179.3578.2.3820.7.3.1.3.3.1.206.516.0j2j1.3.0...0.0.0..1c.1.15.serp.9gdUZUmAxcI&psj=1&bav=on.2,or.r_qf.&bvm=bv.47244034,d.ZGU&fp=41333c9f97f3f20a&biw=800&bih=505">google</option>
<option value="http://it.bing.com/search?q=ajax+jquery&go=&qs=n&form=QBLH&filt=all&pq=ajax+jquery&sc=0-0&sp=-1&sk=">bing</option>
</select>
</body>
<script>
function func(ak){
$.ajax({
    url : ak,
    success : function (data,state) {
        $("body").html(data);
        alert(state);
    },
    error : function (request,state,error) {
        alert("Error. stato della chiamata: "+request+'  '+error+'   '+state);
    console.log("Error. stato della chiamata: "+request+'  '+error+'   '+state);
    }
});
}
</script>