Question

I’m working with MVC 3, javascript and jQuery.

I’ve got a hidden button which click() function needs to be called from javascript.
This works great on every browser except IE9.

$('#fakeSubmitBt').click(function () {
    $('#fileUplSubmitBt').click();
});

Here, fileUplSubmitBt is the hidden button and fakeSubmitBt is the visible button which I need to click instead.
I noticed that if a call three times

$('#fileUplSubmitBt').click();

then the form is submitted, but in the backend the elements of the form are not recognized.

UPDATE:
thanks to the hints given by Ricardo and Jay, I tried to use trigger(‘click’) but also this path failed.

In the following I post the code that is shaming me (it’s MVC3 using Razor):

    <script type="text/javascript">

function s2cPanelReady() {
    $('#fakeBrowseBt').click(function () {
        $('#fileUplRadio').prop("checked", true);
        $('#gravatarRadio').prop('checked', false);
        $('#realFileUpload').click();
    });
    $('#fakeSubmitBt').click(function () {
        if ($('#gravatarRadio').prop("checked")) {
            $('#grvatarSubmitBt').click();
        } else if ($('#fileUplRadio').prop("checked")) {
            $('#fileUplSubmitBt').trigger('click');
        }
    });
}
    </script>
    <div class="inputForm">

<div class="inputField">
    <div class="userPicLargeFrame">
        <img src="/Images/Get?id=@Model.ID&size=40" class="userPicLarge" />
    </div>
</div>
@using (Html.BeginForm("ChangePicture", "User"))
{  
    <div class="inputField">
        <input type="radio" id="gravatarRadio"  />
        <span class="inputLabel">Gravatar:</span>
        @Html.EditorFor(model => model.Preferences.GravatarEmail)
        @Html.ValidationMessageFor(model => model.Preferences.GravatarEmail)
    </div>

    <input id="grvatarSubmitBt" type="submit" value="Save Pic" style="display:none;" />
}

@using (Html.BeginForm("UploadPicture", "User", FormMethod.Post, new { encType = "multipart/form-data", name = "uplPicForm" }))
{             
    <div class="inputField">
        <input type="radio" id="fileUplRadio" />
        <span class="inputLabel">Save your own pic:</span>
        <span class="inputLabel">
            <span style="display:inline-block; position:relative;">
                <input type="file" id="realFileUpload" name="fileUpload" style="position:relative; opacity:0; -moz-opacity:0 ;" />
                <span style="display:inline-block; position:absolute; top:0px; left:0px;">
                    <input id="fakePathBox" type="text" value="" readonly />
                    <input id="fakeBrowseBt" type="button" value="..."/>
                </span>
            </span>
        </span>

        <input id="fileUplSubmitBt" type="submit" name="submit" value="Upload" style="display:none;" />
    </div>
     }
    <div class="inputField">
        <span class="inputLabel">
            <input id="fakeSubmitBt" type="button" value="Submit" class="s2cButton" />
        </span>
    </div>
</div>

UPDATE N.2: I tried to remove all javascript stuff, and simply put the file upload HTML tag with a simple submit button: nor in this case on IE9 I’m able to submit the form!!

Sometimes it runs, sometimes it is not fired at the first click, but only at the second click (and in this case the submitted form hasn’t got the selected file, so server-side this results in an error…), sometimes it simply doesn’t fire the submit button, no matters how many click I do.

This issue starts to make me crazy….

Any other hint?

Thank you very much!

Best

cghersi

Answer 1

I’ve had a similar problem and ended up just transforming the button into an anchor (<a>) and invoked the jquery-ui function $.button()

NOTE: the jquery ui is required http://jqueryui.com/

That way the link still looked like a button and the $.click() event worked.

html

<div class="input">
    <a href="#" id="emulate-button">Submit</a>
</div>

jquery

$("#emulate-button").button();

//Set event when clicked
$("#emulate-button").click(function () {
    //.... your logic here
});