javascriptjqueryasp.net-mvc-4razorrenderpartial

Sending user input text box value via jquery from a partial page to Controller


My partial view has a table with multiple rows with a button in each row (unique across each). When the button is pressed a jquery modal dialog is opened and the user can enter a value in a text box. That value is what i'm not able to get into a jquery variable to send to my MVC controller. All the jquery code is executed from the partial view.

I've tried every example I've seen on the web. I have code already that works, just not through a partial view.

CSHTML:

<form>
  <div id="currentandnewtipamount">
    <div>@Html.Label("Current Tip Amount: $")
      <label for="CurrentTipAmount" ></label>
    </div>
    <br />
    @Html.Label("Tip Edit Amount")
    <input type="text" name="NewTipEditAmount" id="NewTipEditAmount" >
  </div>
</form>

JQuery:

var TipEditDialog, RRN;
    NewTipEditAmount = $("#NewTipEditAmount");

function SubmitTipEditAmount() {
        NewTipEditAmount = $("#NewTipEditAmount").val().toString();
        {
            $.ajax({
                type: "POST",
                url: "/MyTransactions/UpdateTipAMT",
                data: { 'NewTipEditAmount': NewTipEditAmount },
                success: function (bool) {
                    //alert(bool);
                }
            });
        }
    }

Below is a working example in another part of the site that does not use a partial view.

JQuery:

var Logindialog, form;
    loginusername = $("#loginusername"),
    loginpassword = $("#loginpassword"),
    loginnewpassword = $("loginnewpassword"),
    loginconfirmnewpassword = $("loginconfirmnewpassword"),
    allFields = $([]).add(loginusername).add(loginpassword);


    function LoginUser() {
        loginusername = $("#loginusername").val().toString();
        loginpassword = $("#loginpassword").val().toString();
        {
            $.ajax({
                type: "POST",
                url: "/User/Login",
                data: { 'loginusername': loginusername, 'loginpassword': loginpassword },
                success: function (response) {
                    if (response === true) {
                        $("#Logindialog-form").dialog("close");
                        RunPasswordCheck(loginusername, loginpassword);
                    }
                    else {
                        alert("Something is not correct, try again please");
                        Logindialog.dialog("close");
                    }
                }
            });
        }
    }

CSHTML:

<div id="Logindialog-form" title="Log In" class="divloginformcontent">
<form class="loginformcontent">
    <div id="usernameAndpassword" class="Usernamepassword">
        <label for="username" class="loginfieldtext">Username</label>
        <input type="text" name="loginusername" id="loginusername" class="loginfields" />
        <br /><br />
        <label for="password" class="loginfieldtext">Password</label>
        <input type="password" name="loginpassword" id="loginpassword" class="loginfields" />
        <br /><br />
    </div>

    <input type="submit" tabindex="-1" style="position: absolute; top: -1000px" id="LoginSubmit" />  @*tab index and style allows for the enter button to be used without messing up anything*@
</form>


Solution

  • Below is the code which ended up working for my situation. I seemed to need to have an 'id' for every element and reference them throughout the nesting in the jquery.

    CSHTML:

    <div id="EditTip-form" title="Edit Tip Amount" class="divloginformcontent"> 
     <form class="loginformcontent" id="form">
         <div id="currentandnewtipamount">
             @Html.Label("Current Tip Amount: $") <label for="CurrentTipAmount" ></label>
             <br />
             @Html.Label("Tip Edit Amount")
    
             <input type="text" name="NewTipEditAmount" id="NewTipEditAmount" class="forminput">
         </div>
     </form>
    </div>
    

    JQUERY:

     function SubmitTipEditAmount() {
            NewTipEditAmount = $('#EditTip-form #form #currentandnewtipamount #NewTipEditAmount').val();
            {
                $.ajax({
                    type: "POST",
                    url: "/MyTransactions/UpdateTipAMT",
                    data: { 'RRN': RRN, 'NewTipEditAmount': NewTipEditAmount },
                    success: function (bool) {
                        //alert(bool);
                    }
                });
                TipEditDialog.dialog("close");
            }
        }