XMLHttpRequestメソッドでフォーム要素が機能しない

Question

クリックしてXMLHttpRequestを作成し、ページに情報を書き込むフォームを作成しようとしています。

ここにHTMLコードがあります。

<form> 
<input id="myStock" type="text"/> 
<input id="iSubmit" type="submit" value="Show Me Data"/> 
<input type="reset" value="Reset Me" /> 
</form> 
<div id="demo"></div> 

ここでJSコードです：

var isubmit = document.getElementsByTagName("form") 
[0].querySelector('input[type="submit"]'); 
isubmit.addEventListener("click", myFunction); 
function myFunction() { 
//some code here 
} 
var mystock = document.getElementsByTagName("form") 
[0].querySelector('input[type="text"]').value.trim(); 
var urlext = mystock; 
urlext += 
"&reportType=is&period=12&dataType=A&order=asc&columnYear=5&number=3"; 
    var url = "https://financials.morningstar.com/ajax/ReportProcess4CSV.html? 
    t="; 
alert(url + urlext); 
xhttp.open("GET", url + urlext, true); 
xhttp.send(); 
} 

問題は、私はHTMLページに<form>タグを削除し、JSコードにgetElementsByTagName("form")[0]を削除していたときに、あるが、それが正常に働いています。

ただし、フォーム要素がそのままの状態では、情報は返されません。

助けてください。

Answer 1

あなたの問題は、@CBroeが指摘したように入力の問題です。 e.preventDefault();の使用を防ぐことができます。

または使用することができますが、この操作を行います。

$('#iSubmit1').on('click', function(){ 
 
var value = $("#myStock").val(); 
 
$("#demo").append('<p>'+value+'</p>'); 
 
}); 
 
\t \t 
 
    
 

 
$('#reset1').on('click', function(){ 
 
$("p").remove(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form> 
 
<input id="myStock" type="text"/> 
 
<button id = "iSubmit1" type="button">Show Me Data!</button> 
 
<button id = "reset1" type="button">Reset Me!</button> 
 
</form> 
 
<div id="demo"></div>

Answer 2

あなたは私が作ったこのJSfiddleを見てみることができます。それがあなたを助けるかどうかはわかりません。

 $.POST(url+urltext, function(data) { 
$('#demo').html(data); 
});