Ryan - Llaver Ryan - Llaver - 5 months ago 7
PHP Question

How can i make toggle-able html buttons POST to php

I am trying to make an html/php email form that includes multiple text fields, 4 toggle-able buttons, and a submit button. I have been successful in getting the buttons to change states when clicked, but I can't figure out how to check whether the button has actually been pressed in PHP.

Here is my html code of all of my buttons. They are wrapped in a form that contains the submit button and other text fields. I also tried changing the button tags to input tags.

<section>
<button class="btn service-button" name="app" value="Web App" type="button">Web App</button>
<button class="btn service-button" name="brand" value="Branding" type="button">Branding</button>
<button class="btn service-button" name="design" value="Web Design" type="button">Web Design</button>
<button class="btn service-button" name="other" value="Other" type="button">Other</button>
</section>


My php for just the buttons:

if(isset($_POST['app'])) {
$service .= $_POST['app'];
}
if(isset($_POST['brand'])) {
$service .= ", " . $_POST['brand'];
}
if(isset($_POST['design'])) {
$service .= ", " . $_POST['design'];
}
if(isset($_POST['other'])) {
$service .= ", " . $_POST['other'];
}


I tried a vardump($_POST); but they are apparently not even added to the $_POST.
Any idea what I can try to get them to actually submit data to the $_POST? I was thinking about doing something like:

if(class_exists('active-button')) {
$service .= //Set data here somehow.
}


but I'm not quite sure how I would do that since there are four different buttons and any combination of them can be selected.

Also, shouldn't affect anything I don't think, but here is my jquery for changing the buttons:

$(".btn").click(function() {
//Add/remove active-button and service-button. Replaces one with the
//other depending on the current state.
$(this).toggleClass("active-button").toggleClass("service-button");
});


The active-button and service-button classes are simply used in the css the change the style of the button to

Answer

Add hidden input and whenever you clicking on button change hidden value and submit hidden field.

HTML

<section>
<input class="selected_button" name="selected_button" value="" type="hidden">
    <button class="btn service-button" name="app" value="Web App" type="button">Web App</button>
    <button class="btn service-button" name="brand" value="Branding" type="button">Branding</button>
    <button class="btn service-button" name="design" value="Web Design" type="button">Web Design</button>
    <button class="btn service-button" name="other" value="Other" type="button">Other</button>
</section>

Jquery

//On button click
$(".btn").click(function() {
    //The string to add to the selected-button value
    var toAdd = $(this).attr("value");
    //Add/remove active-button and service-button. Replaces one with the
    //other depending on the current state.
    $(this).toggleClass("active-button").toggleClass("service-button");
    //Checks if the button has already been added in case the user deselects the button
    if($(".selected_button").val().indexOf(toAdd) >= 0) {
        //Removes the comma and text 
        $(".selected_button").val($(".selected_button").val().replace((', ' + toAdd), ''));
    //If the button is being added for the first time
    } else {
        //Adds the comma and text
        $(".selected_button").val($(".selected_button").val() + ", " + toAdd);
    }
});

PHP

<?php
$selected = $_POST['selected_button'];
if(isset($_POST['selected_button'])) {
    $service .= $selected;
}
?>

Hope it will help

or Note:

you use radio buttons by using css style you can display like button