change the button text without page refreshing in mVC4

Question

I am doing my application in MVC. In my view i have one textbox named as EmailId, and one Submit button. If i enter the Email id and submit the button,the Label of the button want to change as Verify and the text box should be cleared without refreshing the page.

My view page is

    <div class="sign" id="email">
        @using (Html.BeginForm("Randa", "BU", FormMethod.Post))
        {
            <div class="sign1">

                <div class="sign2" style="height:267px;width:562px;margin-left:214px" id="cdiv">
                                     @Html.TextBox("EmailId","", new {@placeholder ="Enter the Email id",id="txtemail "})<br /><br />

                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="submit" name="submit" value="Sign Up" id="btn" onclick="addbutton()" class="addbutton"/>


                </div>
            </div>

        }
    </div>
    <div class="drnd" id="rnd" style="display:none">
        @using (Html.BeginForm("Ra_verify", "BU", FormMethod.Post))
        {
            <div class="sign1">

                <div class="sign2" style="height:267px;width:562px;margin-left:214px" id="cdiv">
                    @Html.TextBox("Getran", "", new { @placeholder = "Enter the Randam", id = "txtrnd" })<br /><br />

                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="submit" name="submit" value="Verify" id="btnrnd" class="addbutton" />


                </div>
            </div>

        }
    </div>
    }
<script type="text/javascript">
        var btxt = "Verified";
        document.getElementById("#btn").innerHTML = btxt;
    </script>
    <script type="text/javascript">
        function addbutton()
        {

             ($("#email").hide())

                $("#rnd").show();


        }
    </script>

My controller code is

 public ActionResult Randa()
        {
            return View();
        }
        [HttpPost]

        // send the randam No to the Entered mail id . Store the mail id and randam no into tbl_bussiness table;
        public ActionResult Randa(string EmailId, string submit) 
        {
            string userId = System.Configuration.ConfigurationManager.AppSettings["UserTypeId"];
            int typeid = Convert.ToInt32(userId);
            if (ModelState.IsValid)
            {
                   if (submit != null && EmailId != null)
                    {
                        EmailManager.SendConfirmationEmail(EmailId);
                        tbl_BusinessUser b = new tbl_BusinessUser();
                        b.EmailId = EmailId;
                        b.RandomNumber = (int)Session["rnd"];
                        b.UserTypeId = typeid;
                        b.CreateDTTM = System.DateTime.Now;
                        db.tbl_BusinessUser.Add(b);
                        db.SaveChanges();


                        ViewBag.message = "Please check ur Mail for randam no.Enter random in textbox ";
                    }
                    else
                    {
                        ModelState.AddModelError("", "Error");

                }
            }


                return View();

            }
        public ActionResult Ra_verify()
        {
            return View();
        }
        [HttpPost]
        // check the random no with table random no ,if match redirect to registration create page
        public ActionResult Ra_verify(int EmailId, string submit)
        {
            if (submit != null)
            {
               // int c = Convert.ToInt32(EmailId);
                tbl_BusinessUser b = new tbl_BusinessUser();
                var tbra = db.tbl_BusinessUser.Where(x => x.RandomNumber == EmailId).FirstOrDefault();
                //var tbram = Convert.ToInt32(tbra);


                    return RedirectToAction("Create", "BU");

            }
            return View();
        }

Can anyone please help me? Thanks in Advance.

Then you need to submit the value using ajax. – Oct 14 '15 at 12:21 — , Oct 14 '15 at 12:21

score 3 · Answer 1 · answered Oct 14 '15 at 13:27

We have to use Ajax whenever we want to update the value in the webpage without refreshing.

We have to do following things to make your page work.

Remove BeginForm block from your view because when we use BeginForm, it will send request to controller and refreshes the page.
Use Ajax to pass information to controller and update the page without refreshing it.

As you have two POST actions in controller, so keep both divs "rnd" and "email"

Here is sample script block with Ajax option to update the page as you requested,

  $('#btn').click(function () {

  var urlinfo = '/Home/Randa';
  var textboxValue = $('#txtemail').val();

  $.ajax({
    type: "POST",
    data: { value: textboxValue },
    url: urlinfo,
    success: function (result) {          
      $('#email').hide();
      $('#rnd').show();
    },
    error: function () {
      alert("failed");
    }
  });
});

score 0 · Accepted Answer · edited May 23 '17 at 11:54

0

First of all you need to use Ajax.BeginForm

Using Ajax.BeginForm with ASP.NET MVC 3 Razor

And on success function you can write the below code for clear text EmailId, and one Submit button.

$("#EmailId").val("");
$("#btn").val("Verify");

and you don't need two forms, if you are going to do the above.

edited May 23 '17 at 11:54

Community

1
1

answered Oct 14 '15 at 12:44

Kishore Sahasranaman

4,013
3
24
50

In one button click i need to send the email and at the same time i need to show the second("#rnd") div and also get the value from the second div text box. Is it possible. – Subash Oct 15 '15 at 07:29
Sending Email is done at Server side, so while `form submit` to the `action` `Randa`. add you code to send the mail. and on success event use this code `$("#rnd").show();` `$("#Getran").val();` – Kishore Sahasranaman Oct 15 '15 at 08:00

change the button text without page refreshing in mVC4

2 Answers2