コンソールのログオン時にテキストボックスのイベントが表示される

Question

これはおそらく重複する質問です。私はテキストボックスの値を使用して、私のconsole.logに表示しようとしています。それは1秒間表示され、消えます。

がここにここに私のJavaScriptの将来の状況については

$(function(){ 


$("#submit").on("click", function(){ 

    var t = document.getElementById("search").value; 
    console.log(t); 


    }); 
}); 

である私のHTMLフォーム

<form> 
    <input type ="text" id="search" name="search" placeholder="Search..." size="45" required> 
    <input type ="submit" value="GO" id="submit"> 
</form> 

ですが、私はWikipediaのAPIにプラグインするために、その情報を使用しようとしています。あなたのコンソールでの一瞬のためにそれを見て、それが消えています

 var wikipediaURL = "https://en.wikipedia.org//w/api.php?action=opensearch&search="+ t +"&format=json&callback=?"; 

    $.ajax({ 
     url: wikipediaURL, 
     type:'GET', 
     contentType: "application/json; charset=utf-8", 
     async: false, 
     dataType: "json", 
     success: function(data, status, jqXR){ 
      console.log(data); 
     }, 
    }) 
    .done(function() { 
     console.log("success"); 
    }) 
    .fail(function() { 
     console.log("fail"); 
    }) 
    .always(function() { 
     console.log("complete"); 
    }); 

Answer 1

理由は、あなたがフォーム内のボタンを提出使用し、いつでもあなたが送信ボタンをクリックし、それはデフォルトでフォームを送信し、ターゲットがある場合は、ページが更新されますされていますフォーム提出を停止しない限り、同じページ

フォーム提出を避けるため、これを試してください。

$(function(){ 


$("#submit").on("click", function(){ 

    var t = document.getElementById("search").value; 
    console.log(t); 
    e.preventDefault(); // this will also do the trick and avoid form submission. 
    return false; // return statement is included just as safety measure as this will make sure form is not submitted. 

    }); 
});