AJAX投稿onclick

Question

私はなぜ私が私のAjaxコードで投稿するときに結果を得るのか理解しようとしています。

私のフォームの大部分のものでは、onchange="mySubmit(this.form)"またはonclick="mySubmit(this.form)"を使用してフォームを送信してください。これは入力要素に対して機能し、すべての適切なdivと要素をdivに返します。返されたすべてのデータを表示します。

しかし、私はまた、onclick="mySubmit(this.form)"を持っていますが、それは動作しませんformの下で私の<li>に、それはいくつかの理由で、芋はかなり奇妙である、私のデータを表示するdivの内側に私のページ全体を表示します私は何とか私の<li>で別の方法でクリックして投稿することはできますか？

HTMLコード：

 <input type="text" name="inputDate" spellcheck="false" class="datepicker metricDateTextbox capitalFirst" 
      onchange="mySubmit(this.form)" value="@inputDate" autocomplete="off" placeholder="@placeholderStartDate.ToString("MMM d, yyyy")" readonly="readonly" /> 

     <input type="text" name="endDate" spellcheck="false" class="datepicker metricDateTextbox capitalFirst" 
      onchange="mySubmit(this.form)" value="@endDate" autocomplete="off" placeholder="@noEndDate.ToString("MMM d, yyyy")" readonly="readonly" /> 

     <select name="NormOrAvg" class="dwmViewSelect" onchange="mySubmit(this.form)"> 
      <option selected=@(Request.Form["NormOrAvg"] == "1") value="1">Rep Per Set</option> 
      <option selected=@(Request.Form["NormOrAvg"] == "2") value="2">Average Rep Per Set</option> 
     </select> 
    </div> 
    <div class="holdLiftMenu"> 
     <ul class="holdLiftMenuUL"> 
      <li class="holdLiftMenuLI"> 
       <a class="holdLiftMenuA total current">Total 
        <input type="hidden" name="hid4" id="hid4" value="4" /> 
       </a> 
      </li> 
      <li class="holdLiftMenuLI"> 
       <a onclick="mySubmit(this.form)" class="holdLiftMenuA squat">Squat 
        <input type="hidden" name="hid1" id="hid1" value="" /> 
       </a> 
      </li> 
      <li class="holdLiftMenuLI"> 
       <a onclick="mySubmit(this.form)" class="holdLiftMenuA benchpress">Benchpress 
        <input type="hidden" name="hid2" id="hid2" value="" /> 
       </a> 
      </li> 
      <li class="holdLiftMenuLI"> 
       <a onclick="mySubmit(this.form)" class="holdLiftMenuA deadlift">Deadlift 
        <input type="hidden" name="hid3" id="hid3" value="" /> 
       </a> 
      </li> 
     </ul> 
    </div> 
</form> 

JS Ajaxコード：

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 
     } 
    }); 
} 

Answer 1

liに、この最後のは、それが自己とこの最後の持っていない要素を参照するためですform属性は未定義となります。

onchange/onclick="mySubmit(this);により、すべてのonchange/onclick="mySubmit(this.form)を交換しても、あなたのmySubmit機能を変更：サンプルスニペット上記

function mySubmit(theForm) { 
    theForm = $(theForm).closest("form"); 
    $.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 
     } 
    }); 
} 

：

function mySubmit(theForm) { 
 
     console.log($(theForm).closest("form").attr("action")); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form method="post" action="~/AJAXcalls/repinintAJAX.cshtml" name="form"> 
 

 
    <div class="holdLiftMenu"> 
 
     <ul class="holdLiftMenuUL"> 
 
      <li class="holdLiftMenuLI"> 
 
       <a class="holdLiftMenuA total current">Total 
 
        <input type="hidden" name="hid4" id="hid4" value="4" /> 
 
       </a> 
 
      </li> 
 
      <li class="holdLiftMenuLI"> 
 
       <a onclick="mySubmit(this)" class="holdLiftMenuA squat">Squat 
 
        <input type="hidden" name="hid1" id="hid1" value="" /> 
 
       </a> 
 
      </li> 
 
      <li class="holdLiftMenuLI"> 
 
       <a onclick="mySubmit(this)" class="holdLiftMenuA benchpress">Benchpress 
 
        <input type="hidden" name="hid2" id="hid2" value="" /> 
 
       </a> 
 
      </li> 
 
      <li class="holdLiftMenuLI"> 
 
       <a onclick="mySubmit(this)" class="holdLiftMenuA deadlift">Deadlift 
 
        <input type="hidden" name="hid3" id="hid3" value="" /> 
 
       </a> 
 
      </li> 
 
     </ul> 
 
    </div> 
 
</form>