I am creating a reacting quiz that changes based on the answer you have selected using PHP and Javascript.
This is the working example of the radio button script that changes the innerHTML based on what answer you have selected. Using PHP to write the value as 'AQN20'
$(function () {
$("input[name=AQN2]:radio").click(function () {
if ($('input[value=AQN20]:checked').val()) {
document.getElementById("MCA2").innerHTML = "this is right";
}
else {
document.getElementById("MCA2").innerHTML = "this is wrong";
}
});
});
I am trying to replicate the same behaviour for checkboxes but consider multiple answers.
So, I have a PHP array where you type your answers.
$multipleCheckboxOptions = array(
'Option A',
'Option B',
'Option C',
'Option D'
);
I then create each answer as a checkbox option and assign the arrays Key to the Value. So in the example directly below, this would be the first option in the array (outputted HTML example).
<input type="checkbox" name="AQN1" class="checkbox Q1" value="0" id="0mcq">
I then have another array where you can select what the correct answers are.
$correctAnswerNumber = array(0,2)
In this instance, answer 1 and 3 would be the correct answers.
Below is where I am currently stuck for the checkbox on behaviour using PHP,
$(function () {
$("input[name=<?php echo $uniqueIDAnswer ?>]:checkbox").click(function () {
if ($('input[value=<?php echo $correctAnswerNumber?>]:checked').val()) {
document.getElementById("CA<?php echo $mcanumber?>").innerHTML = "<?php echo $correctAnswerDescriptionAnswer ?>";
}
else {
document.getElementById("CA<?php echo $mcanumber?>").innerHTML = "<?php echo $incorrectAnswerDescriptionAnswer ?>";
}
});
});
I need the [value=] tag ($correctAnswerNumber) to output 0 && 3
'input[value=<?php echo $correctAnswerNumber?>]:checked'
I hope I have explained this clearly enough! Sorry if it is confusing.
It should be RadioButtonGroup instead of CheckBoxGroups and also create one more variable which is call as Answer and where the true answer is placed set that radio button as Answer and make a logic answer is selected it will be ur right answer
Related
I am echoing out a form (foreach) from my filemaker records which will result in the items ID, Name, a Checkbox and then an image.
In my understanding i will have to use classes or the elements will all have the same id.
My Code;
foreach($result->getRecords() as $record){
$id = $record->getField('Record_ID_PHP');
$name = $record->getField('DB_Name');
$pic = $record->getField('Photo_Path');
echo '"'.$id.'"<br>';
echo $name.'<br>';
echo '<input type="checkbox" class="check" value="Invoices/Photos/RC_Data_FMS/Invoices_db/Photos/'.$pic.'">';
echo '<div class="pics">';
echo '<img style="width:200px;" src="Invoices/Photos/RC_Data_FMS/Invoices_db/Photos/'.$pic.'"><br>';
echo '<hr>';
echo '</div>';
}
Which results in a page full of the records, a checkbox and the relating image.
I wish to only show these images when the checkbox is checked but cannot find a solution, i have tried many jquery scripts, to no avail.
The images will then populate the next page as a pdf to be printed.
I am hoping not to have to grab the checkbox's values as an array to then use the get method with 100's of if statements but cant see another way ?
The jquery ive used.
$(document).ready(function () {
$('.pics').hide();
$('.check').click(function () {
$('pics').show;
});
$('.pics').hide;
});
and
$(function() {
$(".check").click(function(e) {
e.preventDefault();
$('.pics').hide();
$('.pics').show();
});
});
Plus many similar alternatives.
Is there something obvious i am missing ?
Query to filemaker method;
I have changed the path field to a calculated value which works great, thank you, although with 1000's of records, i would need lots of php code to echo the checkbox's to the website and lots more to be able to edit them from the website.
I have done this previously with the value held within the checkbox in filemaker.
$sesame = $print->getField('Allergens::Allergens[11]'); if ($sesame == "Sesame") { $sesame = "checked" ;} else if ($sesame !== "Sesame") {$sesame = "" ;}
This displays the checkbox synced with filemaker.
if ($_POST['Sesame'] == 'Sesame'){ $a_sesame = 'Sesame';} else { $a_sesame = 'No Sesame'; }
This is sent as a variable to my script.
if($a_sesame == "Sesame"){$contains_sesame = "Yes";} else { $contains_sesame = "No";}
This grabs the new value from the form.
Which all work great, but then i am writing a script in filemaker too to enable the to and from of the different names for each checkbox state.
which is for this part 120 lines long, this is a sample which i have to repeat for each repetition of this field.
Set Variable [ $sesame; Value:GetValue ( Get ( ScriptParameter ) ; 11 ) ]
If [ $sesame = "Sesame" ]
Set Field [ Allergens::Allergens[11]; "Sesame" ] Commit Records/Requests
[ Skip data entry validation; No dialog ]
Else If [ $sesame = "No Sesame" ]
Clear [ Allergens::Allergens[11] ] [ Select ]
Commit Records/Requests
[ Skip data entry validation; No dialog ]
Refresh Window
[ Flush cached join results; Flush cached external data ]
End If
This would be far too large to write for so many records, just for these 14 fields used 120 in filemaker and 400 plus in the php.
I am not 100% sure what you are trying to do but this should work. First add an extra div that closes input and div pics like below.
foreach($result->getRecords() as $record){
$id = $record->getField('Record_ID_PHP');
$name = $record->getField('DB_Name');
$pic = $record->getField('Photo_Path');
echo <<<TEXT
'{$id}'<br>
{$name}<br>
<div>
<input type='checkbox' class='check' value='Invoices/Photos/RC_Data_FMS/Invoices_db/Photos/{$pic}'>
<div class='pics'>
<img style='width: 200px;' src='Invoices/Photos/RC_Data_FMS/Invoices_db/Photos/{$pic}'><br>
<hr>
</div>
</div>
TEXT;
}
then change your java to this
$(document).ready(function() {
$(".pics").hide();
$(".check").click(function() {
$(this).siblings().toggle();
});
});
well I hope this helps
Another alternative would be to set up a simple calculated container field in FileMaker, with a calculated value of:
If ( checkbox; imageField )
This would only pass the image when the checkbox was ticked for a record. This should be faster than handling this in JavaScript, since you'd be limiting the number of images being sent over the wire.
Note: For performance, you might try this with this calculated container field stored and unstored. I suspect stored v unstored should make little difference, in which case I'd suggest leaving this unstored to minimize disk space consumed.
You can use the toggle()function:
$(function() {
$('.pics').hide();
$(".check").is(':checked',function(e) {
e.preventDefault();
$('.pics').toggle();
});
});
<?= $form->field($model, 'status')->radioList(array('1'=>'Approved','2'=>'Digital','3'=>'CDP','4'=>'Print','5'=>'Other Process','6'=>'Packing','7'=>'Dispatch',)); ?>
I'm trying to implement status update form. I want to know how can I disable previous radio buttons.
e.g-
If current status is CDP then Status "Approved" and "Digital" should be disable.
how to write java script for this, im implementing in Yii2 Framework.
Try to listen if someone choose a radio button.
Than '.disable' on every button with '.each' until you reached the key.
edit:
i hate to write it blind but try this:
$('#radioButtons').on('change', function(){
var val = this.value;
$.each(arrayname, function( index, value ){
if(index < val){
value.disable();
}else{
value.enable();
}
});
});
if the selected value is smaller, it will be disable, otherwise it will be anabled. but if you do it this way you can´t change your choice to a button above ? is this really what you want ?
Since your option will already be set you can use Yii2 to do this. You will need to manually set the input property "item" to do this.
<?=$form->field($model, 'status')->radioList(['1' => 'Approved', '2' => 'Digital', '3' => 'CDP', '4' => 'Print', '5' => 'Other Process', '6' => 'Packing', '7' => 'Dispatch'], ['item' => function($index, $label, $name, $checked, $value) {$checked = $checked == 1 ? 'checked=""' : 'disabled=""';echo "<label><input tabindex='{$index}' type='radio' {$checked}'name='{$name}'value='{$value}'> {$label}</label>";}]);?>
The above will leave the selected one checked and disable the others using the HTML options "checked" and "disabled" respectively.
i want to display a certain number of input tags for a form; this should depend on how many items a user dynamically selects that they want.
for example, if a user says they want 3 items. i want to display 3 input bars.
i am not clear of the best way to proceed with this. for example, i am able to determine how many items they select from the select options:
$(".howmany").change(function(){
var value = $(this).val();
}
but what is the correct way to proceed thereafter; do i dynamically render the exact number of input tags selected using a for each: or pre-display (but hide) all of the input tags and only show the exact number of input tags requested.
i would appreciate an example of how its been done . at the moment i am only able to hide the entire area. eg:
var requests = $("#howmany").val();
if (reqeusts < 1){
$('#reqeusts').hide();
}
else {
$('#reqeusts').show();
}
but i obviously need to be able to show individual form tags accordingly to the number the user selected.
hi again, i want to thank everyone for their answers.
i deeply sorry, but i forgot to mention that the reason for the confusion is that the values for the imput are dynamically fed from an array function.
public function arrayValues()
{
return $selection = array(
'0' => 'none' ,' 1' => '1 item' ,' 2' => '2 item' ,' 3' =>' 3 item' );
}
i then need to render one of the below imput select tags for each number of items selected.
<?php echo '
<select id="howmany" name="items[howmany]" />';
foreach ($arrayValues as $key => $value)
{
echo '<option value="' . $key .'">' . $value . '</option>';
}
echo'</select>';
?>
$(".howmany").change(function(){
var value = $(this).val(); // get the number of inputs
value = parseInt(value); // make sure it's an integer
htmlStr = "";
for (var i = 0; i < value; i++)
{
htmlStr += "Label " + i +" <input type='text'>";
}
$('.container').empty();
$('.container').append(htmlStr);
}
You need something like this:
$('button').click(function () {
$('div').empty().append(new Array(+$('input[type=number]').val()+1)
.join("<input type='text' placeholder='Type Something'/>"));
});
I hope this gives you an idea of how to solve your problem.
DEMO
I have the following html code:
<?php foreach ($this->tags as $uri=>$tag){?>
<input type="checkbox" name="tags[]" style="display: none;" value="<?php echo $uri;?>" id="create_<?php echo $uri;?>" <?php echo isset($args['tags']) && in_array($uri, $args['tags'])?'checked="checked"':'';?> />
<span onclick="selectTag(this.id)" id="create_<?php echo $uri;?>" for="create_<?php echo $uri;?>" class="tag <?php echo isset($args['tags']) && in_array($uri, $args['tags'])?'selected':'';?>"><?php echo str_replace(' ', ' ', $tag);?></span>
<?php }?>
And here is my JS code:
function selectTag(id) {
var input = '.tags input#'+id;
var span = '.tags span#'+id;
if ($(input).is(':checked') && $(span).hasClass('selected')) {
$(span).removeClass('selected');
$(input).attr('checked', false);
}
else {
$(span).addClass('selected');
$(input).attr('checked', true);
}
}
When I click on a span box, selects the box, and when I click again on it, it unselects it. The problem is, that after the 3rd time, it just stops working.
What is wrong with my code that is not working?
JQuery now has a prop method that is a slightly better alternative to using the attr method.
Try replacing your calls with attr("checked", true); with calls to prop("checked", true);
See here for documentation on prop: http://api.jquery.com/prop/
Here for a discussion between the two: .prop() vs .attr()
Edit:
Also, as Ed Cottrell stated, you'll want to have UNIQUE id attributes for all your elements on your page.
Edit2:
I have created a fiddle that demonstrates this usage: http://jsfiddle.net/xDaevax/E39hc/
You are giving the input and the span the same id attribute. Ids must be unique per element; you cannot have an input and a span the same id. Doing it this way will cause all sorts of problems, including the behavior you are experiencing. Give one of them a slightly different id (like create_<?php echo $uri;?>_span).
Also, as #xDaevax says, you should use .prop rather than .attr -- I have had the same problem when using .attr.
a nice member here helped me out to create a form which adds steps as you go. I modified it a bit to allow you to change the answers to some of those questions by clicking a change button. Of course, I realized my limits and applied it to only the first question, and badly...
The way I was approaching this was to give each question and button it's own unique id, which I think is probably the wrong way to approach this?
This is what I want and I partially accomplished some:
Fill out a field, press NEXT
Field 1 Turns into readonly text and a ChangeButton appears
a new field appears below that you can fill out
By pressing CHANGE on field one, field2 becomes non-editable and field1 is now editable. The change button also turns to "Save". By clicking save, you make field 2 editable and field1 non-editable again.
this continues on forever :)
I tried what I found on the internet but I hope that someone who's better at this could help me out a bit if that's ok :)
Here's my Jfiddle
http://jsfiddle.net/pufamuf/TEyVL/3/
Thank you!
Example of the following here
Here's how I'd accomplish what you're trying to do...
HTML:
<div id="question1" class="question active">
<label>Q1</label>
<input type="text" />
<input type="button" value="SAVE" class="button" />
</div>
jQuery:
var qa = []; // questions array of objects { text: "question text" }
$('.button').live('click', function(e) {
var $but = $(this),
$inp = $but.prev(),
$parent = $but.parent(),
i = $parent.attr('id').match(/\d+$/)[0] - 1,
$new;
if ($but.val() == 'SAVE') {
// store value to array
qa[i] = {
text: $inp.val()
};
// append new question inputs if needed
if (!$('#question' + (i + 2)).length) {
$new = $parent.clone();
$new.attr('id', 'question' + (i + 2));
$new.find('label').html('Q' + (i + 2));
$new.find('input[type="text"]').val('');
$new.insertAfter($parent);
}
// change to inactive attributes
$inp.attr('disabled', true);
$parent.removeClass('active').addClass('answered');
$but.val('CHANGE');
} else { // CHANGE
// change to active attributes
$inp.attr('disabled', false);
$parent.removeClass('answered').addClass('active');
$but.val('SAVE');
}
});
I made the array store objects so it's easy to add other properties to each question if needed.
See demo