codepen에서 양식 데이터를 사용하는 방법

Question

무료 코드 캠프 용 wikipedia 뷰어에서 작업 중이며 검색 창을 작동 시키려고합니다.

이상적으로 나는 사용자 입력 제출시 사용자 입력을 원하는대로 입력 한 다음 코드에 문자열을 입력하고 싶습니다. 이 검색 창 지금까지

<form method="get"> 
     <input type="text" placeholder="Search articles" class="srchbox" name="Search" id="searchbar"> 
     <button type="submit" class="btn">Search</button> 
</form> 

내가 검색

var apiURL = "https://en.wikipedia.org/w/api.php?format=json&action=opensearch&generator=search&search=" + textInput; 

$(document).ready(function() { 
    $.ajax({ 
    url: apiURL, 
    dataType: "jsonp", 
    success: function(data) { 
     var wikiAPI = JSON.stringify(data, null, 3); 
     console.log(wikiAPI); 

     var wikiHTML = ""; 

     for (i=0; i < data[1].length; i++) 
     { 
      wikiHTML += ("<a href =\"" + data[3][i] + "\" target=\"_blank\">") 
      wikiHTML += "<div class = \"wikicontent container-fluid\" style = \"color:black;\">"; 
      wikiHTML += ("<h2>" + data[1][i] + "</h2>"); 
      wikiHTML += ("<h3>" + data[2][i] + "</h3>"); 
      wikiHTML += "</div></a>" 
     } 
     $("#articles").html(wikiHTML); 

내가 지금 어떤 도움이 것이 해내하는 방법에 대한 손실 조금 있어요에게 확인해야하는 API 설정에 대한 HTML입니다 잘해라. 고맙습니다!

Answer 1

당신은 참조 @Payton #searchbar.value

$("form").on("submit", function(e) { 
    e.preventDefault(); 
    if (this.searchbar.value.length) { 
    var url = "https://en.wikipedia.org/w/api.php?format=json" 
       + "&action=opensearch&generator=search&search=" 
       + this.searchbar.value; 
    $.ajax({url:url, /* settings */}); 
    } 
});