I would like to create a form in Symfony2 which displays a set of radio buttons depending on the selected value in a combo-box belonging to the same form.
I have not been able to find a suitable solution in Symfony2 that would allow me to have this functionality.
Is there any way to use the Symfony2 framework at least for part of the implementation or should I generate the form manually?
-
@Bogdan It sounds like what you're trying to do is dynamic HTML (the radio buttons will change without a page refresh when someone selects the value from the combo-box) correct?Matt– Matt2012-07-27 12:57:51 +00:00Commented Jul 27, 2012 at 12:57
-
1@Matt Yes, you are correct. I don't expect Symfony to provide me with a specific solution but from past experiences with this framework I've learned that it can prove somewhat useful even when JavaScript is involved. A good example is the collection form type which inserts a prototype which can be used to generate as many fields of the same type as needed by means of JavaScript.Bogdan– Bogdan2012-07-27 13:05:05 +00:00Commented Jul 27, 2012 at 13:05
-
2@Yehonatan you're way off the mark there; frameworks are EXTREMELY useful, however not everyone is an immediate expert at them or can incorporate multiple facets of web development. Frameworks speed up development, help improve security and make life easier (for the most part) for the people writing the code.Matt– Matt2012-07-27 13:24:55 +00:00Commented Jul 27, 2012 at 13:24
2 Answers
What you're looking for is AJAX. This can be implemented with straight javascript or jQuery (jQuery is much cleaner and easier to use).
Here's a jQuery stub for you to get an idea of what has to happen:
<script language="javascript">
$('#mySelect').change(function() {
$.post('backgroundScript.php', {
val: $(this).val()
}, function(data) {
$('#radioDiv').html(data);
});
});
</script>
If you're not familiar with AJAX & jQuery, I'll explain what's going on. $('#mySelect') is almost the equivalent of javascript's getElementById() function. They are NOT the same functionality (jQuery uses the same notations as css to find the elements you're looking for), but this will return the element with mySelect as its id attribute.
.change() sets the onChange event handler to the function() defined within the brackets. $.post is jQuery shorthand for performing an AJAX post (as opposed to a get), that is sent to backgroundScript.php without a page load. When backgroundScript.php returns with a 200 status (i.e. "everything's OK, here's my output") it will perform the callback function function(data).
backgroundScript.php will receive val as a $_POST variable and do "something" to determine which radio buttons should be displayed, then will write output to the screen.
EDIT (more info):
backgroundScript.php should look something like this if you're determining the radio buttons based on a database. Keep in mind that this is not written with security or consideration of deprecated functions in mind (e.g. mysql_*), just functionality:
<?php
// backgroundScript.php
$masterVal = $_POST['val'];
$output = "";
$query = "SELECT bt.button_value, bt.button_label
FROM button_table as bt
WHERE bt.button_master_id = " . $masterVal;
$result = mysql_query($query);
while($row = mysql_fetch_array($result)) {
$output .= "<input type='radio' name='radioGroup' value='" .
$row['button_value'] . "' /> " . $row['button_label'];
}
echo $output;