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

If I type test text into input form then click "enter" button from keyboard, the search result will working correctly.
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";

I've put php in this case, if I have to show my response page later, Sorry if it wrong. — user9111600
– user9111600, Commented Apr 11, 2018 at 21:13

dukedevil294 · Accepted Answer · 2018-04-11 21:04:21Z

2

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" />

edited Apr 11, 2018 at 21:04

answered Apr 11, 2018 at 21:00

dukedevil294

1,30517 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user9111600 Over a year ago

Thank you for your answer but it is not working for me. :)

thebtm · Accepted Answer · 2018-04-11 21:35:08Z

0

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>

edited Apr 11, 2018 at 21:35

answered Apr 11, 2018 at 21:16

thebtm

2159 silver badges14 bronze badges

2 Comments

user9111600 Over a year ago

I am a newbie for JavaScript / jQuery, Could you please share url link to me for studying this case? :)

thebtm Over a year ago

the information i posted can be easily found across the stackoverflow.com and for the jquery, the api is at api.jquery.com, api.jquery.com/jquery.post. w3schools.com has tutorials on js and jQuery. having access to client side scripting with server side scripting (php) will improve your process significantly.

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related