[RESOLVED]jquery page refresh from select + ignore validation

Select 1 has shoe sizes.  A query determines if a particular client has a known shoe size.

If yes, Select 1 is set to the shoe size, while Select 2 is populated with manufacturers and Select 3 is populated with models.

If the query result says there is no known shoe size, Select 1 shows "–Size–" with a value="chose"

What needs to happen is if the user changes Select 1 to anything other than –Size– is  that the page needs to refresh, i.e. the table gets updated with the know selected shoe size.

And Select 2 and Select 3 are now also populated.

The complications for me are:

There are two forms on the page, in my IsPost I check the form action and if it is "Refresh", I then request the size and write to db.

Select 2 and Select 3 have validation.

How can I get the page to submit, via jquery with action="Refresh"

and, can I disable validation in this case, but not when the other form submits.

Select 1:

<select class="form-control" data-val="true" name="size" id="size">
        <option value="chose">--Size--</option>
            @foreach (var ss in shoesizes)
                { 
                <option value="@ss.sSize"  selected="@(ss.sSize == shoesizeold)" >@ss.sSize</option>
                }  
        </select>

Select 2 (and 3 is very similar):

<div class="form-group">
    <label for="fshoe" class="col-xs-4 col-sm-3 col-md-3 col-lg-3 control-label @if (!ModelState.IsValidField("fshoe")) {<text>error-label</text>}" >Fronts: </label>
    <div class="col-xs-10 col-sm-9 col-md-9 col-lg-9">
        <select class="form-control" data-val="true" data-val-required="Rate is required." name="fshoe" id="fshoe" data-validation-engine="validate[required]" >
        <option>--Select--</option>
            @foreach (var sh in shoessizefrontsinventory)
                { 
                <option value="@sh.isId">@sh.Shoe</option>
                }  
        </select><span data-valmsg-for="fshoe" data-valmsg-replace="true"></span>

Here is the jQuery code:

    var showbuttontorefresh;
    $(document).ready(function () {
        showbuttontorefresh = 0;
        if ($('#size').val() == "") {
            showbuttontorefresh = 1;
        }
        console.log(showbuttontorefresh);
    });

    $('#size').change(function () {
        if (showbuttontorefresh == 1) {
            if ($(this).val() != '') {
                $("form input:radio").removeAttr("required");
                $("#refreshformbutton").css('visibility', 'visible');
                $('[name=action]').val("Refresh");


                //$("form").submit(); ??

                console.log(showbuttontorefresh);
            }
        }
    });

Hi wavemaster,

wavemaster

How can I get the page to submit, via jquery with action="Refresh"

Firstly, we could submit a form via formObject.submit() method (same as clicking the Submit button).

$( "#form1" ).submit();

Secondly, if you’d like to implement cascading dropdown lists via jQuery, you could use the following jQuery plugin for cascading dropdown lists.

Hope it will be helpful to you.

Best Regards,

sw-ing

Leave a Reply