(PHP) How can I make input hidden data to get value from input box

Question

Hi I try to research my problem via Stack about 3 hours but I still not found. So I decide to create the topic to ask about my problem.

I am creating search engine and the below are the result:

1. If I type test text into input form then click "enter" button from keyboard, the search result will working correctly.
2. If I type test text into input form then click "Search" button from webpage, the search result is not working.

My problem is result No 2.

This is my code:

 <form action="search_content.php" method="POST" >  
    <div class="input-group mainsearch-home">           
         <input type="text" class="input-group-field" name="homesearchfield" id="homesearchfield2" placeholder="What are you looking for?" autocomplete="off">
         <div class="input-group-button">
              <button type="button" class="button button--search" >search</button>              
              <input type="hidden" name="homesearchfield" value="search">
         </div>
    </div>
 </form>

What I do wrong? I thought that my problem is happens from input type hidden data . So I would like to know how to get value from input text box and send value to my target page.

I have added some php code from my "response" page on below.

 $viewstate = isset( $_POST["homesearchfield"] ) ? $_POST["homesearchfield"] : "" ;
 $sql="SELECT *  FROM `article` WHERE topic_article LIKE '%$viewstate%' order by id_article DESC";

Answer 1

Currently your form doesn't know that the button is meant to submit the form, which can be fixed by changing the type on the button:

<button type="submit" class="button button--search" >search</button>

You could also use:

<input type="submit" class="button button--search" value="search" />

Answer 2

An option for controlling the data is using JavaScript / jQuery to control the action of the form. This way also allows you to view the data being posted before its actually sent and you can even comment out the post and just work on getting the form with the right data you are looking to get back.

also for serialize to work, you need to have a name for each item you want to pass back data.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script lang="JavaScript">
$(function(){
    $("#button").click(fuction()
    {
        var formData = $("#form").serialize();
        alert(formData);
        /*
        $.post({"search_content.php",
                formData,
                function(returndata)
                {
                    //do something

                    //this will load the return data into the div tag on the fly
                    $("#divReturn").html(returndata); 
                },
                "text"
          });
          //*/
    });

});
</script>
<form id="form" onsubmit="return false;" >  
    <div class="input-group mainsearch-home input-group--search inputs--raspberry">         
         <input type="text" class="input-group-field" name="homesearchfield" id="homesearchfield2" placeholder="What are you looking for?" autocomplete="off">
         <div class="input-group-button">
              <button type="button" class="button button--search" id="button" name="button" value="search" >search</button>              
         </div>
    </div>
</form>
<div id="divReturn">
</div>