CODEWITHSUNDEEP
javascriptforms
Peter
Peter

Reputation: 13

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 submit if you click OK. If someone has a way to do that it would be appreciated if you could share it. -thanks

<form action="/index.php/dashboard/pages/page_statistics/change_collection_type/" method="post">
    <input type="hidden" value="690" name="cID">
    <select onchange="this.form.submit()" name="ctID">
    <option value="4">Blog Entry</option>
    <option value="85" selected="selected">Blog Posting</option>
    <option value="5">Full</option>
    </select>
</form>

Upvotes: 0

Views: 3153

Answers (2)

PlantTheIdea
PlantTheIdea

Reputation: 16369

Something like this should do it:

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

Then in your function:

function submitForm(form){
    if(confirm('Are you sure you want to submit this form?')){
        form.submit();
    } else {
        return false;
    }
}

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');

    function submitForm(){
        if(confirm('Are you sure you want to submit this form?')){
            form.submit();
        } else {
            return false;
        }
    }

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

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

Upvotes: 1

Greg Hornby
Greg Hornby

Reputation: 7798

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()}"

Upvotes: 2

Related Questions