Pow4Pow5
Pow4Pow5

Reputation: 501

ASP.NET MVC Button.Click Not working with javascript

I have a form that requires user input with two buttons: one button to submit the form values and the other button is to load a partial view. I'm not sure if my approach here is correct though. The submit button works perfectly fine however clicking the button with GenerateBtn id does not fire the DisplayProposal() function that loads the partial view. Any idea to solve or a better approach??

@using (Html.BeginForm())
{
@Html.AntiForgeryToken()

<div class="form-horizontal">
    <h4>Proposal</h4>
    <hr />
    @Html.ValidationSummary("", new { @class = "text-danger" })
    @Html.HiddenFor(model => model.id)

    <div class="form-group">
        @Html.LabelFor(model => model.item, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.item, new { htmlAttributes = new { @class = "form-control" } })
        </div>
    </div>

    <h2>Generated Questions</h2>
    <div id="ProposalTable"></div>

    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input type="submit" value="Save" class="btn btn-default" />
        </div>
    </div>
</div>

<div class="form-group">
    <div class="col-md-offset-2 col-md-10">
        <input type="button" value="Generate" class="btn btn-default" id="GenerateBtn" />
    </div>
</div>
}

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")

<script>
    document.getElementById("GenerateBtn").onclick = function () { DisplayProposal() };
    function DisplayProposal() {
        //Loads Partial View to <div>ProposalTable</div>
        $('ProposalTable').load('@Url.Action("LoadStuff", "Proposals")');
    }

</script>

}

Upvotes: 0

Views: 4237

Answers (1)

MikeS
MikeS

Reputation: 1764

Any reason you aren't using jquery:

$(document).ready(function(){
  $("#GenerateBtn").click(function(){
       DisplayProposal();
   });
});

Upvotes: 1

Related Questions