When Html Select Form Changes, Pop Up Alert Then Send Form

I'm using onchange='this.form.submit()' on a select in a form, it works as expected, but I would like an alert to pop up when you change the select drop down and then have the form

Solution 1:

Use the confirm function. Works just like an alert, but returns true if user presses okay, false if they press cancel.

test = confirm("Continue?");

if (test) {
    this.form.submit()
}

so for you, you'd put it on your onchange as

onchange="if(confirm('Continue?')){this.form.submit()}"

Solution 2:

Something like this should do it:

...
<select onchange="submitForm(this.form);" name="ctID">
...

Then in your function:

functionsubmitForm(form){
    if(confirm('Are you sure you want to submit this form?')){
        form.submit();
    } else {
        returnfalse;
    }
}

This is a super basic example, but should convey the concept of what to do.

As a side note, you really should externalize this call, separating the HTML from your Javascript. This will allow each to be more maintainable, as well as potentially reusable. An example would be something like:

...
<select id="submitFormSelect" name="ctID">
...

Then in your external JS:

window.onload = function(){
    var form = document.getElementById('submitFormSelect');

    functionsubmitForm(){
        if(confirm('Are you sure you want to submit this form?')){
            form.submit();
        } else {
            returnfalse;
        }
    }

    if(form.addEventListener) {
        form.addEventListener('change',submitForm,false);
    } elseif(form.attachEvent) {
        form.attachEvent('onchange',submitForm); 
    }
}

Again a very basic implementation, but should convey the overall concept.