First of all I want to thanks all of you guys for helping every day , answering questions. You have save me a lot of time and I have learn a lot.
I have let's say this buttons on a form.
<button type="button" value="Adventurous" name="adv" id="adv">Adventurous</button>
<button type="button" value="Discovery" name="disc" id="disc">Discovery</button>
<button type="button" calue="Easy-going" name="easy" id="easy">Easy-going</button>
When the user clicks on a button to specify how he feels in our example I have the follow code on jquery to change the state of the button as checked and change the class (to be shown with different colors etc)
$(".tailor_field .tailor_mood_btn button").click(function() {
var checked = $(this).attr('checked');
$the_image = $(this).find("img");
if(checked){
$(this).removeClass("mood_on");
$(this).attr('checked', false);
$the_image.attr("src", templateDir+"/images/btn_on.png");
}
else{
$(this).addClass("mood_on");
$(this).attr('checked', true);
$the_image.attr("src", templateDir+"/images/btn_off.png");
}
});
So when the user press submit I want to check on server side (php) which buttons the user clicked ?
Second I would like to insert the buttons dynamically. Ie to have a string on my DB, explode it to an array and loop each element to create the buttons etc. How I will know what to check if I don't know how many buttons will be and their names from the beginning ? Maybe with sessions (I would like to avoid it if there is another solution)?
Thanks a lot!
I would do it this way:
var checkedButtons = $(".tailor_field .tailor_mood_btn button[checked=true]");
$("form").submit(function() {
var data = [];
checkedButtons.each(function(index, element) {
var name = element.attr('name');
var value = element.val();
data[name] = value;
});
$.post('file.php', data);
});
The data variable is an array with keys as the names of clicked buttons, an values of values of those buttons. Later an ajax request is made to the file that needs this data (file.php) where the data array is available in the superglobal $_POST (ex. $_POST['adv'] = "Adventurous")
I think the best answer is to just use a list of checkboxes. It is what they were made for.
If you want to use the special buttons though, here is one way using the hidden filed as the input, rather than the actual button. I don't know if the element "button" has a checked attibute.
I just used a simple little javascript to change the values of the input, you can adapt your current function. Just notice that I gave the clickable buttons a new id, appending "_button" to the name from your database.
<?php
$string = "Adventerous,Discovery,Easy-Going"; /* this is from your database */
$delimiter = ",";
$button_values = explode($delimiter, $string);
?>
<html>
<body>
<script type="text/javascript" >
function checkbutton(id) {
var val = document.getElementById(id).value;
if (val == 0)
val = 1;
else
val = 0;
document.getElementById(id).value = val;
alert("Clicked: " + id);
}
</script>
<form action="form-catch.php" method="post">
<?php
foreach($button_values as $value) {
echo '<button type="button"
onClick="checkbutton(\''.$value.'\')">'.$value .'</button>
<input type="hidden" name="'.$value.'" id="'. $value .'" value="0" ><br>';
}
?>
<input type="submit" value="submit">
</form>
</body></html>
Then on the server, the form will send the button names from the string and the 0 or 1 if that button was checked.
<?php
/* quick form checker to show what was clicked in the other form */
foreach($_POST as $key => $val)
echo "<br> $key : $val";
?>
Even if you do not use the exact code, I hope the concept will get you in the right direction.
1) Send the data as a form input.
2) Loop through whatever was sent over and check for set values.