How to get value of input form using jquery while I am geting Null?

Question

I have tried all the tricks but none worked for me,I am trying to get form value using jquery and trying to use it in ajax get request but its not working it showing null.Its been more than 18 hours .I shall be very thankful to you guys.

$(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 file:

<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

Can you plz use this code:

$(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!" );
        }
    });
});


   });