javascript - ボタンonclick関数でAJAX関数が呼び出されない

Question

2 つの入力フィールドと 1 つのボタンを備えた単純なフォームがあります。ボタンをクリックすると、2 つの入力フィールドの値が AJAX 関数に送信され、サーブレットで処理されます。何らかの理由で、サーブレットに到達していません。誰でも理由がわかりますか？別のフォームでほぼ同じ方法を使用していますが、これが機能しない理由がわかりません。

HTMLフォームコードは次のとおりです。

     <div id="addCourses" class="hidden" align="center" >
        <form id="addCourse" name="addCourse">
        <input type="text" id="courseID" name="courseID" value="courseID" size="40" /><br />
        <textarea rows="5" cols="33" id="courseDesc" name="courseDesc">Description</textarea><br />
        <input type="button" value="Add Course" onclick="addCourse(this.courseID.value, this.courseDesc.value);"/>
        </form>
    </div>    

スクリプト関数は次のとおりです。

<script type ="text/javascript">
function addCourse(id, descr)
{
   var fluffy;
   fluffy=new XMLHttpRequest();
   fluffy.onreadystatechange=function()
   {
      if (fluffy.readyState==4 && fluffy.status==200)
      {   
      //do something here
      }  
   };

  fluffy.open("GET","ajaxServlet?courseID="+id+"&courseDescription="+descr,true);
  fluffy.send();
}
</script>

Answer 1

thisフォームではなくボタンだからです

それで

this.courseID.value
this.courseDesc.value

エラーを返します。

あなたは使用する必要があります

this.form.courseID.value
this.form.courseDesc.value

2番目の問題は、名前が衝突していることです。フォームと関数の名前はaddCourseです。それは問題につながります。それらの1つを別の名前に変更します。

実行例

Answer 2

thisのようにを使用するonclick="addCourse(this.courseID.value, this.courseDesc.value);"と、要素を参照していると思います。そのinputため、値が正しく渡されていません。

Answer 3

イベントハンドラーをJavaScriptでバインドすると、問題を完全に回避できます。

HTML：

<input type="text" id="courseID" name="courseID" value="courseID" size="40" /><br />
<textarea rows="5" cols="33" id="courseDesc" name="courseDesc">Description</textarea><br />
<input type="button" id="addCourse" value="Add Course"/>

JS：

document.getElementById('addCourse').onclick = function () {
    var fluffy = new XMLHttpRequest();
    var id = document.getElementById('courseID').value;
    var descr = document.getElementById('courseDesc').value;

    fluffy.onreadystatechange=function() {
        if (fluffy.readyState==4 && fluffy.status==200) {   
            //do something here
        }  
    };

    fluffy.open("GET","ajaxServlet?courseID="+id+"&courseDescription="+descr,true);
    fluffy.send();
};

epascarelloが指摘したように、同じIDを持つ2つの要素を持つことは許可されておらず、予期しないjavascriptの動作を引き起こすため、フォームのIDを変更する必要があります。

Answer 4

ふわふわを試してみてください。if ready 状態式の後。