Form losing value after mobiscroll selection

Question

I have a form with two instances of mobiscroll one of which pops depending on the button clicked.

$(function(){
    $('#clocklater').mobiscroll().time({
        theme: 'default',
        display: 'modal',
        mode: 'scroller',
        setText: "Save",
        cancelText: "Cancel",
        headerText: "Available after",
        timeFormat: 'HHii',
        timeWheels: 'HHii',
        stepMinute:10
    });    
    $('#later').click(function(){
        $('#clocklater').mobiscroll('show'); 
        $('[name=available]').val(2);
        return false;
    });
});

$(function(){
    $('#clockyes').mobiscroll().time({
        theme: 'default',
        display: 'modal',
        mode: 'scroller',
        setText: "Save",
        cancelText: "Cancel",
        headerText: "ETA station",
        timeFormat: 'ii',
        timeWheels: 'ii',
        stepMinute:5
});    

    $('#yes').click(function(){
        $('#clockyes').mobiscroll('show'); 
        $('input[name=available]').val(1);
        return true;
    });
});

my HTML is <form name="response" action="" method="post" > <input name="clocklater" id="clocklater" class="i-txt" type='hidden' onChange="document.response.submit();"/> <input name="clockyes" id="clockyes" class="i-txt" type='hidden' onChange="document.response.submit();"/> <div class='yes button'><input id='yes' name='available' type='button' alt="YES" value="yes" /></div> <div class='no button'><input id='no' name='available' type='button' alt="NO" value="no" /></div> <div class='later button'><input id='later' name='available' type='button' alt="later" value="later" /></div> </form>

(aarrgghh can't get that to format nicely)

When I submit the form without calling mobiscroll it all works fine, however when I call mobiscroll after clicking the yes or later buttons the value of the available input isn't passed. Console is not generating any errors.

As you can see I have tried forcing the value depending on the click, that doesn't work either. If I put an alert in before the return the value is there - this is also indicates the js isn't breaking.

Any thoughts on why the value of available isn't there?

FWIW I am processing the form using PHP.

[UPDATE] I just dumped the POST array and the available key isn't even in it.

Answer 1

Button values are only submitted if the form is submitted by clicking the respective button. In your case the form is submitted in the onChange event of the "clocklater" or "clockyes" inputs.

You can submit it via a hidden field, or instead of submitting in the change event, you can use button type="submit" and trigger a button click in the mobiscroll's onSelect.

E.g. (for the "clocklater"):

$(function(){
    $('#clocklater').mobiscroll().time({
        theme: 'default',
        display: 'modal',
        mode: 'scroller',
        setText: "Save",
        cancelText: "Cancel",
        headerText: "Available after",
        timeFormat: 'HHii',
        timeWheels: 'HHii',
        stepMinute:10,
        onSelect: function () {
            submit = true;
            $('[name=available]').val(2);
            $('#later').click();
        }
    });

    var submit;

    $('#later').click(function(){
        if (!submit) {
            $('#clocklater').mobiscroll('show');
            return false;
        }
        submit = false;
    });
});

HTML changes:

<input name="clocklater" id="clocklater" class="i-txt" type='hidden' />

<div class='later button'>
    <input id='later' name='available' type='submit' alt="later" value="later" />
</div>