Jump to content

Changing drop down menu to buttons


m4ttphpnewb

Recommended Posts

Hello, I have been working on this  for a few days and I can't figure it out. I have a drop down menu and I would like to take the values that show up in it and use them as buttons rather than having the drop down. The database is timeclock, the table is punchlist and then punchitems is  a row in that table and in punchitems there are the values of in, out, lunch, break. I want to be able to make a button for in, out, lunch, break.  Any help would be greatly appreciated.

// query to populate dropdown with punchlist items  inout box//
$query = "select punchitems from ".$db_prefix."punchlist";
$punchlist_result = mysql_query($query);
  echo "              <option value =''>...</option>\n";

while ($row = mysql_fetch_array($punchlist_result)) {
    echo "              <option>".$row['punchitems']."</option>\n";
}

echo "              </select></td></tr>\n";
mysql_free_result( $punchlist_result );

Link to comment
Share on other sites

while ($row = mysql_fetch_array($punchlist_result)) {
    echo "              <button value=\"".$row['punchitems']."\">\n";
}

 

That'll make them buttons, but I'd make them submit buttons if you're wanting to do anything with them.  Remember to take out the <select> tags as well :)

Link to comment
Share on other sites

ok  I put in what was suggested and it returned only one tiny button that did not work for any of the values? here is what I have now

 

// query to populate dropdown with punchlist items  inout box//

$query = "select punchitems from ".$db_prefix."punchlist";

$punchlist_result = mysql_query($query);

echo "name='left_inout' tabindex=3>\n;

while ($row = mysql_fetch_array($punchlist_result)) {
    echo "              <button value=\"".$row['punchitems']."\">\n";
}

echo "             </td></tr>\n";
mysql_free_result( $punchlist_result );

Link to comment
Share on other sites

Looks like there's a \ missing.

 

// query to populate dropdown with punchlist items  inout box//

$query = "select punchitems from ".$db_prefix."punchlist";

$punchlist_result = mysql_query($query);

echo "name='left_inout' tabindex=3>\n"; // What's this line for anyway?

while ($row = mysql_fetch_array($punchlist_result)) {
    echo "              <button value=\"".$row['punchitems']."\">\n";
}

echo "             </td></tr>\n";
mysql_free_result( $punchlist_result );

Link to comment
Share on other sites

ok  I removed the worthless line and  now I get this:button.jpg

 

 $query = "select punchitems from ".$db_prefix."punchlist";

$punchlist_result = mysql_query($query);


while ($row = mysql_fetch_array($punchlist_result)) {
    echo "              <button value=\"".$row['punchitems']."\">\n";
}

echo "             </td></tr>\n";
mysql_free_result( $punchlist_result );

Link to comment
Share on other sites

here is what the code was as a dropdown

dropdown.jpg

 

$query = "select punchitems from ".$db_prefix."punchlist";
$punchlist_result = mysql_query($query);

echo "              <select name='left_inout' tabindex=3>\n";
echo "              <option value =''>...</option>\n";

while ($row = mysql_fetch_array($punchlist_result)) {
    echo "              <option>".$row['punchitems']."</option>\n";
}

echo "              </select></td></tr>\n";
mysql_free_result( $punchlist_result );

Link to comment
Share on other sites

Ok it was just me being stupid!  I gave you the wrong syntax for <button>  Give this a shot:

 

$query = "select punchitems from ".$db_prefix."punchlist";

$punchlist_result = mysql_query($query);


while ($row = mysql_fetch_array($punchlist_result)) {
    echo "              <button>".$row['punchitems']."</button>\n";
}

echo "             </td></tr>\n";
mysql_free_result( $punchlist_result );

Link to comment
Share on other sites

Thanks, I have the buttons now!!!!! I'm the stupid one when it comes to php,  but Im picking it up as I go along, Someone wrote a code for  our company but it was a mess and didn't work right so  I am piecing bits together.

 

I have the buttons now, but when I click them they no longer select the values did when they were selected.

 

Link to comment
Share on other sites

You should make each of them a submit button, so do this:

 

while ($row = mysql_fetch_array($punchlist_result)) {
    echo "              <input type=\"submit\" name=\"submit\" value=\"".$row['punchitems']."\" />\n";
}

 

Then at the part where you check for form submission you can do:

 

if(isset($_POST['submit'])) { // They've posted the form

switch($_POST['submit']) {

case 'break':
//They hit break
break;
case 'in':
// They hit in
break;
case 'lunch':
// They hit lunch
break;
case 'out':
// They hit out
break;
default:
// Somehow they submitted without hitting any of the above!
break;

}

}

 

If you're going to go ahead with this method remove your current submit button.

Link to comment
Share on other sites

workingbuttons.jpg

Thank you again for all of your help. The above buttons are working as submits for the right values just like the drop down was. I looked around the web and tried a few things to increase the button size, as this will be used on a touchscreen, but I couldn't get it to work.  How would I make the buttons bigger?

 

Current code:


$query = "select punchitems from ".$db_prefix."punchlist";

$punchlist_result = mysql_query($query);

//while ($row = mysql_fetch_array($punchlist_result)) {
//    echo "              <button>".$row['punchitems']."</button>\n";
//}
while ($row = mysql_fetch_array($punchlist_result)) {
    echo "              <input type=\"submit\" name=\"left_inout\"  value=\"".$row['punchitems']."\"/><br><br><br>\n";
}

echo "            </td></tr>\n";
mysql_free_result( $punchlist_result );
[/Php]

Link to comment
Share on other sites

You could apply a style to the buttons to increase their width (making them all the same width).  However the first thing I'd like to point out is the fact you changed the name of the submit button.  When they submit the form you will have to check for the value of "left_inout" to see which submit button they pressed.  So if they hit the Lunch button, left_inout would have the value of "lunch".

 

As for your question, this style should work (although I'm not sure how browsers handle sizes of buttons):

 

echo "              <input type=\"submit\" name=\"left_inout\"  value=\"".$row['punchitems']."\" style=\"width: 200px; height: 50px;\" /><br><br><br>\n";

Link to comment
Share on other sites

Thanks, I liked the size you had set so I added borders. This is good enough for now. Later maybe I will try some CSS on them to make a mouse over.

bigbuttons.jpg

  echo "              <input type=\"submit\" name=\"left_inout\"  value=\"".$row['punchitems']."\" style=\"width: 200px;  border:5px solid #cc5500; height: 50px;\" /><br><br><br>\n";

 

My left_inout  value is used the following way. I am not sure why it works but it does and each button does submit the value it is supposed to to the database. 

if ($request == 'POST') {

    // signin/signout data passed over from timeclock.php //

    $inout = $_POST['left_inout'];
    $notes = ereg_replace("[^[:alnum:] \,\.\?-]","",strtolower($_POST['left_notes']));

Link to comment
Share on other sites

onclick.jpg

Ok, I am trying to get this code so that when I select one of the buttons it selects the corresponding radio button next to it to hold the value until it is submitted by the autosubmit caused by the card swipe in the text box. I have been trying to use the java script funcion  onclick but I can't get it to work. Any ideas or suggestions for a way to have the buttons hold their value without submitting would be greatly appreciated.

  while ($row = mysql_fetch_array($punchlist_result)) {
  echo "          <input type=\"button\" name=\"left_inout\" value=\"".$row['punchitems']."\" style=\"width: 129px;  border:5px solid #cc5500; height: 50px;\"

   <input type=\"radio\" name=\"left_inout\"  value=\"".$row['punchitems']."\"> <br><br> \n";
}
echo " <br><br>\n";

Link to comment
Share on other sites

Ok I've written some code that'll actually get this working.  First off, find your <head> tags near the top of the page, and put this between the opening and closing head tags:

 

<script type="text/javascript">
function selectField(field) {

var obj = document.getElementById(field);
obj.checked=true;

}
</script>

 

Now change your current code to this:

 

  while ($row = mysql_fetch_array($punchlist_result)) {
  echo "          <input type=\"button\"  onclick=\"selectField('".$row['punchItems']."')\" value=\"".$row['punchitems']."\" style=\"width: 129px;  border:5px solid #cc5500; height: 50px;\">

   <input type=\"radio\" name=\"left_inout\"  value=\"".$row['punchitems']."\" id=\"".$row['punchitems']."\"> <br><br> \n";
}
echo " <br><br>\n";

 

Hopefully that should work.

Link to comment
Share on other sites

I entered in the code exactly as above but nothing different happened on my page. the radio buttons did not get selected on the click of a button and the values were not held,  do i need to change the  "field" values for the java script code in selectField(field) and  getElementByID(field)  ?

Link to comment
Share on other sites

ok since I was not getting anywhere with java I tried some other things and this  is what I ended up using to get it to work. When the button is clicked the corresponding radio button is selected and holds the value for the submit from the card swipe.  thank you for all of your help, with out it I would have been even more lost. hopefully others get help from our posts

 

while ($row = mysql_fetch_array($punchlist_result)) {
  echo "

    <label for=\"".$row['punchitems']."\"><input type=\"button\" value=\"".$row['punchitems']."\" style=\"width: 120px;  border:5px solid #cc5500; height: 50px;\"></label>
    <input type=\"radio\" name=\"left_inout\" value=\"".$row['punchitems']."\" id=\"".$row['punchitems']."\"> <br>
   <br><br> \n";
}
echo " <br><br>\n";

buttonlinkedradio.jpg

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.