Hiding/Disabling the submit button for an Ajax form until a selection is made from dropdown list

Question

I want to hide (or disable) the submit button for an Ajax form, until a selection has been made from a DropDownList (@Html.DropDownList)

the form looks like this:

@using (Ajax.BeginForm("RoleAddToUser", "Roles", new AjaxOptions { InsertionMode = InsertionMode.Replace, UpdateTargetId = "middle_column", HttpMethod = "POST" }, new { id = "RoleAddToUserForm" }))
{
@Html.AntiForgeryToken()
@Html.ValidationSummary(true)
<p>
    User : @Html.DropDownList("UserName", (IEnumerable<SelectListItem>)ViewBag.Users, "Select ...")
    Role : @Html.DropDownList("RoleName", (IEnumerable<SelectListItem>)ViewBag.Roles, "Select ...")
</p>
<input type="button" name="SubmitBtn1" value="Send" onclick="$('#RoleAddToUserForm').submit(); " />
}

I assume that there is a way to detect that a value other than "select..." (the default one) has been chosen, and then to enable/show the submit button, using Javascript.

I also understand that this is probably trivial for most Js fans, but i dont normally work with cshtml or javascript, and this is very frustrating lol

If it helps, the file in question is cshtml from an mvc program.

are you using any other javascript libraries that support binding? ie. Angular? — Johan, Aug 27 '15 at 13:10
The `"select.."` option has a `null` value so you can just use `if ($('#UserName).val()) {...}` but this is a poor UI design. You should be using client side validation to prevent the form submitting and display the appropriate error messages — , Aug 27 '15 at 13:12
@WillGrey then you can use angulars binding to enable/disable the button — Johan, Aug 27 '15 at 14:00

Farhan · Answer 1 · 2015-08-27T13:32:57.823

1

use change event to detect value

$("select").on("change",function(){
if($(this).val()){
$("input[name='SubmitBtn1']").prop("disabled",false);
}
esle{
$("input[name='SubmitBtn1']").prop("disabled",true);
}
});

edited Aug 27 '15 at 13:32

answered Aug 27 '15 at 13:12

Farhan

1,453
2
15
20

The option will never have a value of `'Select ...'` so this will always fail. – Aug 27 '15 at 13:13
i am assuming from question description "I assume that there is a way to detect that a value other than "select..." " – Farhan Aug 27 '15 at 13:18
Yes but OP want the button disabled if the 'Select ...' option is selected (and you have also indicated that in your code so this wont work (hint: the `.val()` is `null`, not `'Select ...'`) – Aug 27 '15 at 13:21
https://jsfiddle.net/farhanbaloch/bba6f9kz/ its working, i might missing something from requirement. if yes then please guide me – Farhan Aug 27 '15 at 13:23
That's because you have hard coded the value in the fiddle. The `DropDownList()` method OP is using creates the first option as `` (not `value="select..."`) – Aug 27 '15 at 13:25
would != null have the same effect? – Will Grey Aug 27 '15 at 13:25
1

That will work, but easier to just use `if ($('#UserName).val())` as I noted in my comments to the question. – Aug 27 '15 at 13:30
so, in this instance, does the $("select") refer to the name of the dropdownlist? – Will Grey Aug 27 '15 at 13:34
not name but all selects on page, you can place id or class here too instead of select – Farhan Aug 27 '15 at 13:35
You will need to use the `id` attributes to identify each select and test both because `$('select').val()` will only ever get the value of the first one (but please don't do this) – Aug 27 '15 at 13:38
@stephen if we are using change event with $(this) then isn't point to drop down with value changed? – Farhan Aug 27 '15 at 13:45
You are right about needing to check both of the selects in the form before activating the button. And ive seen suggestions on other pages about checking if the form is valid before submitting, but isnt that just the same thing? or is there a function for that which i dont know about? – Will Grey Aug 27 '15 at 13:45
@WillGrey If you include `@Html.ValidationMesageFor()` for each of your properties and those 2 properties are decorated with the `[Required]` attribute and client side validation is enabled. then if the user clicks the submit button, the form will not be submitted and error messages will be displayed if either of the `"select..."` options are selected, giving immediate feedback to the user. – Aug 27 '15 at 13:52
@stephen you are possible talking about http://stackoverflow.com/questions/6048710/can-i-apply-the-required-attribute-to-select-fields-in-html5. But I think [required] will not work with select. I think this should be like this, on change event of "select" check both selects if there ae not null. – Farhan Aug 27 '15 at 13:54
@Farhan, Of course the `[Required]` attribute works with select. Because the `"select..."` option has a `null` value, it will be invalid so a validation error is generated by `jquery.validate.js`. From the link in your last comment, I assume your confusing the HTML `required` attribute with MVC validation – Aug 27 '15 at 13:59
@StephenMuecke thanks for the info. I am not aware with asp.net so no idea what would be the output. This is all from my side. I must insist you to add new answer. – Farhan Aug 27 '15 at 14:02
@Farhan, Your answer is now fine and resolves OP's question (its just that IMHO, OP is going about it the right way) – Aug 27 '15 at 14:05

score 1 · Answer 2 · answered Aug 27 '15 at 13:15

1

Add disabled="disabled" attribute to the button. So that it will be disabled. When you want to enable it, use jQuery to enable $('#id').removeAttr('disabled')

answered Aug 27 '15 at 13:15

Akshay

530
7
20

Chris Hill · Answer 3 · 2015-08-27T14:19:37.327

I'm sure there are more graceful ways to go about this, but this seems to work:

I added id="SubmitBtn1" style="display:none" to the button then used

<script type="text/javascript">
//On change
$('#UserName').change(
function checkValue() {

    //Check if the dropdownlist's value is equal to the default
    if ($('#UserName').val() == "") {

        //if it is, hide it/keep hidden            
        hide_item('SubmitBtn1');

        return
    }

    //otherwise show it
    show_item('SubmitBtn1');

});


function show_item(id) {
    var el = document.getElementById(id);

    el.style.display = 'inline-block';

};

function hide_item(id) {
    var el = document.getElementById(id);

    el.style.display = 'none';

};

</script>

Feedback?

Hiding/Disabling the submit button for an Ajax form until a selection is made from dropdown list

3 Answers3