how to make $(ajax).post work before the submit button click. RSS

• • Reply
  

  Chakradhar M...

  Member

  41 Points

  47 Posts

  how to make $(ajax).post work before the submit button click.

  Apr 03, 2012 03:20 PM|LINK

  Hi, 

  i have this .cshtml code.

  <div data-role="fieldcontain">
          @using (Ajax.BeginForm("SaveAccessCode", "GetQuestion", new { QuestionNo = Model.QuestionNo, PreviousQuestionNo = Model.PreviousQuestion }, new AjaxOptions { }, new { id = "myform_" + @Model.QuestionNo }))
          {
              @Html.AntiForgeryToken()
              <fieldset data-role="controlgroup" id="@(Model.QuestionNo)_fld">
                  <label for="select-choice-1" class="select">@Model.QuestionText
                  </label>
                  <br />
                  <input type="text" id="@(Model.QuestionNo)_txtfd" name="selectedObjects" />
              </fieldset>
              <div data-role="none" style="float: right">
                  <input type="submit" id="@(Model.QuestionNo)_textident" data-inline="true"  value="@Model.SubmitButtonText" onclick="return TestAccessCode(this);" />
              </div>
          }
      </div>

  In Submit Click I am calling this Js Function.

  function TestAccessCode(button) {
              var splitstr = button.id.split('_');
              var is_valid = true;
              var form = $('#myform_' + splitstr[0]);
              var anstxtbox = $('#' + splitstr[0] + '_txtfd');
              var accesscodevalue = $(anstxtbox).val();
              var questionid = splitstr[0];
              var is_used = 0;
              var errormessage = "";
              if (!accesscodevalue) {
                  is_valid = false;
                  alert('Please enter accesscode');
              }
              else {
                  var urlemp = '@Url.Action("GetAccessCode")';
                  $.ajax({
                      type: "POST",
                      url: urlemp,
                      data: { accesscode: accesscodevalue, questionid: questionid },
                      success: function (returndata) {
                          if (returndata.ok) {
                              $.each(returndata.data, function (index, itemData) {
                                  if (index == "0") {
                                      is_used = itemData;
                                  }
                                  else if (index == "1") {
                                      errormessage = itemData;
                                  }
                              });
                              if (is_used == 1) {
                                  is_valid = false;
                                  alert('Please enter accesscode');
                                  return false;
                              }
                          } 
                      }
                  }
                 );
              }
              alert(is_used);
              alert(errormessage);
              return is_valid;
          }

  and in ajax post i am calling my controller function as

  [HttpPost]
          public JsonResult GetAccessCode(string accesscode, int questionid)
          {
              try
              {
                  string[] lstate =  new string[2];
                      string[0]="1";
                       string[2]="Your access code is wrong";
                  return Json(new { ok = true, data = lstate, message = "ok" });
              }
              catch (Exception ex)
              {
                  return Json(new { ok = false, message = ex.Message });
              }
          }

  Now my problem is if I get the string[0] ==1 I should stop the submit click. I am getting the valid data in $ajax post call.

  but first its calling the out side script of the $ajax post then calling the inside code of the $ajax post. How can i avoid this ?

  Thanks in advance.
  
  
  
  

  jquery mvc

  • Edited by chakradhar masineni on Apr 03, 2012 03:21 PM
• • Reply
  

  CodeHobo

  All-Star

  18669 Points

  2648 Posts

  Re: how to make $(ajax).post work before the submit button click.

  Apr 03, 2012 03:24 PM|LINK

  The problem you are running into is caused by the fact that ajax method is asynchronous by default. Meaning that the ajax method will fire, but the code will not stop and wait. It will keep processing until the end of the function. 

  The quick way to fix this is to tell jquery to use synchronous requests instead by including the option async:false

  $.ajax({
                      type: "POST",
                      async : false,
                      url: urlemp,
                      data: { accesscode: accesscodevalue, questionid: questionid },
                      success: function (returndata) {
                          if (returndata.ok) {
                              $.each(returndata.data, function (index, itemData) {
                                  if (index == "0") {
                                      is_used = itemData;
                                  }
                                  else if (index == "1") {
                                      errormessage = itemData;
                                  }
                              });
                              if (is_used == 1) {
                                  is_valid = false;
                                  alert('Please enter accesscode');
                                  return false;
                              }
                          }
                      }
                  }
                 );

  
   

  Hattan Shobokshi
  Blog | Twitter : @Hattan
  
  • Marked as answer by chakradhar masineni on Apr 04, 2012 09:22 AM
• • Reply
  

  bruce (sqlwo...

  All-Star

  37616 Points

  5574 Posts

  Re: how to make $(ajax).post work before the submit button click.

  Apr 03, 2012 03:26 PM|LINK

  well you cancel the submit always. then do a ajax form post when the ajax call returns ok. but this is rather a poor design. why not have the original form post validate, instead of 2 posts of the same data?

  bruce (sqlwork.com)