JSでフォームを送信するときにPOSTの再問い合わせを使用してください

Question

段落を表示するために 'user_input'を印刷するにはここで何が欠けていますか？

はmyform.submitが必要ですか？実際に私は変数にアクセスして警告することができます。

<script language="JavaScript"> 
    function getData(input) { 
     var input = document.getElementById("user_input").value; 
     // alert(input) 
     document.myform.submit() 
     $('.display').text("The URL is : " + input) 
     } 
    </script> 

    <script 
    src="https://code.jquery.com/jquery-3.2.1.slim.js" 
    integrity="sha256-tA8y0XqiwnpwmOIl3SGAcFl2RvxHjA8qp0+1uCGmRmg=" 
    crossorigin="anonymous"></script> 

<form id="myform"> 
<label><b>Enter a URL</b></label> 
<input type="text" name="message" id="user_input"> 
<input type="submit" id="submit" onclick="getData()"><br/> 
<p id="display"><span></span></p> 
</form> 

Answer 1

java-script/jQueryを相互に混在させないでください。

あなたはjQueryのライブラリを使用しているので、その後、以下のようなより良い方法でそれを行う： -

の作業例： -

$(document).ready(function(){ // when document is rendered completely 
 
    $('#submit').click(function(e){ // on click of submit button 
 
    e.preventDefault(); // prevent the form submit 
 
    var input =$("#user_input").val(); // get input value 
 
    $('#display').text("The URL is : " + input); // add it as a text to paragraph 
 
    }); 
 
});

<script src="https://code.jquery.com/jquery-3.2.1.slim.js" integrity="sha256-tA8y0XqiwnpwmOIl3SGAcFl2RvxHjA8qp0+1uCGmRmg=" crossorigin="anonymous"></script> 
 

 
<form id="myform"> 
 
    <label><b>Enter a URL</b></label> 
 
    <input type="text" name="message" id="user_input"> 
 
    <input type="submit" id="submit"><br/><!-- no need of onclick--> 
 
    <p id="display"><span></span></p> 
 
</form>

Answer 2

あなたは応答が実際に何をしなければなりませんフォーム要素にメソッド属性を追加するだけです。<form method="POST">

Working DEMO