2017-02-20 2 views
0

Ich versuche herauszufinden, warum das nicht funktioniert, ich möchte nicht einen Absenden Button klicken, es funktioniert, wenn ich einen habe, stattdessen verwende ich onchange="this.form.submit()" und das Beiträge die Form wie es normalerweise, nicht AJAX Hintergrund Stil, ich habe nicht den Ajax Teil, ich habe es gefunden und es funktioniert für meine Situation, aber soweit ich weiß, $('#ajaxform').submit(function(), submit ist submit? Warum ist onchange="this.form.submit()" und <input type="submit" /> nicht die gleiche Art von submit? Was vermisse ich?Submit AJAX Post onchange

<form method="post" action="~/getAJAX.cshtml" id="ajaxform" name="form"> 
     @* -------- Div to hold form elements -------- *@ 
     <div class="reportDateDiv"> 

      @* -------- Text --------- *@ 
      <a class="blackColor fSize18 RPtxt">Reporting Period</a> 

      @* -------- Start day box -------- *@ 
      <input type="text" name="inputDate" spellcheck="false" class="datepickerS metricDateTextbox capitalFirst" 
        onchange="this.form.submit()" value="@inputDate" autocomplete="off" placeholder="@placeholderStartDate.ToString("MMM d, yyyy")" readonly="readonly" /> 

      @* -------- Text --------- *@ 
      <a class="blackColor fSize16 RPtxt RPtxtTo">to</a> 

      @* -------- End day box --------- *@ 
      <input type="text" name="endDate" spellcheck="false" class="datepickerE metricDateTextbox capitalFirst" 
        onchange="this.form.submit()" value="@endDate" autocomplete="off" placeholder="@noEndDate.ToString("MMM d, yyyy")" readonly="readonly" /> 

     </div> 
    </form> 

    <script type="text/javascript"> 
     $('#ajaxform').submit(function() { // catch the form's submit event 
      $.ajax({ // create an AJAX call... 
       data: $(this).serialize(), // get the form data 
       type: $(this).attr('method'), // GET or POST 
       url: $(this).attr('action'), // the file to call 
       success: function (response) { // on success.. 
        $('#here').html(response); // update the DIV 
       } 
      }); 
      return false; // cancel original event to prevent form submitting 
     }); 
    </script> 
+0

Können Sie Ihren erklärender Text bearbeiten, so können wir einen Sinn geben? Was willst du? Und was bekommst du stattdessen? –

+0

Wenn ich 'onchange =" this.form.submit() "' aus meinen Eingabefeldern entferne und stattdessen eine Übergabeschaltfläche in meine Form einfüge, funktioniert alles wie es soll, es bekommt was ich will im Hintergrund und zeigt es wie AJAX würde jedoch mit der onchange-send-thing, tut es nicht den AJAX-Teil, es postet einfach das Formular, als ob es keinen AJAX gab, es lädt die Seite neu. @ChrisG –

+0

Ich kann das bestätigen; scheinbar ruft 'submit()' auf dem Formular den "onsubmit" -Handler auf. Die Lösung besteht darin, den Ajax-Aufruf in eine Funktion zu verpacken und ihn in den 'onchange'-Handlern aufzurufen. https://developer.mozilla.org/en/docs/Web/API/HTMLFormElement/submit –

Antwort

2

verwenden in Ihrem Formular:

<input ... onchange="mySubmit(this.form)" ... > 

Ändern Sie das Skript dazu:

function mySubmit(theForm) { 
    $.ajax({ // create an AJAX call... 
     data: $(theForm).serialize(), // get the form data 
     type: $(theForm).attr('method'), // GET or POST 
     url: $(theForm).attr('action'), // the file to call 
     success: function (response) { // on success.. 
      $('#here').html(response); // update the DIV 
     } 
    }); 
} 
+0

Absolut genial! Danke für Ihre Hilfe! –

+0

Du hast meinen Tag gemacht! Vielen Dank! –

+0

Brilliant! jQuery, JS und all das hat sich geändert und es ist schwer mitzuhalten, also danke für deine Zeit und Lösung! –