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.

score 1 · Accepted Answer · answered Oct 10 '13 at 08:23

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>

Thanks dioslaska but I have fallen for the trap of simplifying my code which then doesn't give the full picture :P My buttons are actually custom images, so the true input is — Steve, Oct 10 '13 at 22:00
Works a treat thanks. Sorry for the delay accepting - only just got to it :P — Steve, Oct 23 '13 at 11:45

Form losing value after mobiscroll selection

1 Answers1