Submitting the form using jquery

Question

When I click the search icon, it alerts ok , but not h .

According to my codes below, it should alert both ok & h .

<?php if(isset($_POST['search'])){ 
  echo "<script type='text/javascript'>alert('h');</script>"; 
} ?>
<form method="post">
  <div class="col_1">
    <select name="search_type" required="">
      <option value="0">Anywhere</option>
      <option value="1">Start With</option>
      <option value="2">End With</option>
    </select>
  </div>
  <div class="col_2">
    <input type="number" name="search_q" data-type="num" maxlength="10" placeholder="Digit" required="">
  </div>
  <div class="col_3">
    <input type="submit" name="search" id="input_submit" hidden />
    <button type="submit" id="button_submit"><i class="fa fa-search"></i></button>
  </div>
</form>

$('#button_submit').click(function() {
  $('#input_submit').click();
  alert("ok");
});

Answer 1

You are not sending a search value in the request.

The <input name="search" /> is hidden (so not being clicked) and even if it was visible it has no value to send in the request.

To fix this remove that input and put the name and value attributes on the <button> instead:

<?php if(isset($_POST['search']))
{ 
  echo "<script type='text/javascript'>console.log('h');</script>"; 
} ?>

<form method="post">
  <div class="col_1">
    <select name="search_type" required="">
      <option value="0">Anywhere</option>
      <option value="1">Start With</option>
      <option value="2">End With</option>
    </select>
  </div>
  <div class="col_2">
    <input type="number" name="search_q" data-type="num" maxlength="10" placeholder="Digit" required="">
  </div>
  <div class="col_3">
    <button type="submit" id="button_submit" name="search" value="foobar">
      <i class="fa fa-search"></i>
    </button>
  </div>
</form>

$('#button_submit').click(function() {
  $('#input_submit').click();
  console.log("ok");
});