Как получить значение формы ввода, используя jquery, пока я получаю Null?

Question

Я испробовал все приемы, но ни один из них не сработал, я пытаюсь получить значение формы, используя jquery, и пытаюсь использовать его в запросе get ajax, но он не работает, показывая ноль. Это было более 18 часов.очень благодарны вам, ребята.

$(document).ready(function(){
    var text;
    $("#button").click(function () {
    window.value=$("#q").val();
    alert(window.value);


   });   
$.ajax({

    url: "/search",
    data:  {q:$("#q").val()},
    type: "GET", 
    dataType : "json",
    success: function(result) { 
    var event_data = '';
    for (var i = 0; i < result.length; i++) {
                event_data += '<tr>';
                event_data += '<td>' + '<img src=' +result[i]['video']['thumbnail_src']+ '></img>' +'</td>';
                event_data += '<td>' +result[i]['video']['title']+'</td>';
                event_data += '<td>' +result[i]['video']['duration']+ '</td>';
                event_data += '<td>' + '<a href' +result[i]['video']['url']+ '>'+ "Download" +'</a>' +'</td>';
                event_data += '</tr>';
     }  $("#list_table_json").append(event_data);
    },
    error: function(jqxhr, status, exception) {
             alert('Exception:', exception);
         },
    always: function( xhr, status ) {
      alert( "The request is complete!" );
        }
    });
});

HTML-файл:

<form class="down-form" id="form1" name='form1'  method=" " action=" ">
                <input type="text" id="q"  name="q" placeholder="Search or Paste Link Here... " required class="form-control form-control-lg"/>
                <button type="submit" id="button" class="btn btn-success mt-3">Search</button>
            </form>

Answer 1

Можете ли вы использовать этот код:

$(document).ready(function(){
    var text;
    $("#button").on('click',function (e) {
    e.preventDefault();
   var q=$("#q").val();
    $.ajax({

    url: "/search",
    data:  {q:q},
    type: "GET", 
    dataType : "json",
    success: function(result) { 
    var event_data = '';
    for (var i = 0; i < result.length; i++) {
                event_data += '<tr>';
                event_data += '<td>' + '<img src=' +result[i]['video']['thumbnail_src']+ '></img>' +'</td>';
                event_data += '<td>' +result[i]['video']['title']+'</td>';
                event_data += '<td>' +result[i]['video']['duration']+ '</td>';
                event_data += '<td>' + '<a href' +result[i]['video']['url']+ '>'+ "Download" +'</a>' +'</td>';
                event_data += '</tr>';
     }  $("#list_table_json").append(event_data);
    },
    error: function(jqxhr, status, exception) {
             alert('Exception:', exception);
         },
    always: function( xhr, status ) {
      alert( "The request is complete!" );
        }
    });
});


   });