<?= $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.
Related
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
I am sending some data to the database through a post request, and I have a checkbox in my app that I need to handle with a state
I am using this library which is confusing me a bit.
Here I have my checkbox in the render method
<Checkbox value="Active" ref="Active" defaultChecked={true} onCheck={this._isChecked} />
and the function to handle it
_isChecked = () => {
console.log('Checked: ');
}
I need it to be checked = true by default.
Now, here I have the function I am using in order to send the data to the post request
_addDealer = () => {
CreateDealersActions.createDealer({
DealerName : this.refs.DealerName.getValue(),
CardId : this.refs.CardId.getValue(),
NickName : this.refs.NickName.getValue(),
Picture : 'http://lorempixel.com/150/150/',
Active : // HERE I NEED TO SET THE VALUE OF THE CHECKBOX
LegalId : this.refs.LegalId.getValue(),
TypeId : this.refs.TypeId.getValue(),
});
}
Look at the Active : // HERE I NEED TO SET THE VALUE OF THE CHECKBOX part in that function, there is where I need to put the value of the check box.
So, what should I know in order to send the proper data in the key Active, as I am using this library, do I need to put state? Or is there any other way?
I am going to answer this question because probably some of you doesn't know the library I am using which is a pain in the ass and the docs are horrible.
You don't need to set an initial state because the checkbox component brings one attached already. So, in order for you to get the value of the checkbox, you don't need to set a function. With this I did is enough:
<Checkbox value="Active" ref="Active" defaultChecked={true} />
_addDealer = () => {
CreateDealersActions.createDealer({
DealerName : this.refs.DealerName.getValue(),
CardId : this.refs.CardId.getValue(),
NickName : this.refs.NickName.getValue(),
Picture : 'http://lorempixel.com/150/150/',
Active : this.refs.Active.state.switched,
LegalId : this.refs.LegalId.getValue(),
TypeId : this.refs.TypeId.getValue(),
});
}
so: this.refs.Active.state.switched is enough to get the proper value of the checkbox.
I have a custom delete button, all i want is some sort of confirmation before delete action takes place..
I have tried multiple ways of doing so with no success so far.
here is my code, I am using CArrayDataProvider thus had to create a template for delete button.
array(
'class' => 'CButtonColumn',
'template' => '{delete}{reset}',
'deleteConfirmation'=>"js:'Are You Sure?'",
'afterDelete'=>'function(link,success,data){ if(success) alert("Delete completed successfully"); }',
'buttons' => array(
'delete' => array(
'label'=> 'Remove this device',
'imageUrl'=> Yii::app()->request->baseUrl.'/img/delete.png',
'url' => 'Yii::app()->controller->createUrl("controller/action", array("trace_id"=>$data["trace_id"], "mac"=>$data["mac"]))',
'click'=><<<EOD
function(){
confirm('Are you sure?')
}EOD
),
'status' => array(
'label'=>"<i class='fa fa-eye-slash'></i>", // text label of the button
'url'=>function ($data)
{
return $this->createUrl("counters/changeStatus",array('id'=>$data->counter_id, "status"=>$data->status ? 0 : 1 ));
}, // a PHP expression for generating the URL of the button
'imageUrl'=>false, // image URL of the button. If not set or fa lse, a text link is used
'options'=>array(
'class'=>'btn roundPoint4 btn-xs green btn-warning statusBtn',
'title'=>"Activate/Deactivate",
), // HTML options for the button tag
'click'=>'function(e){
e.preventDefault();
//open confirmation box write ur code here
}', // a JS function to be invoked when the button is clicked
'visible'=>function ()
{
return true;
}, // a PHP expression for determining whether the button is visible
),
NOW I SHOW YOU WHAT I DO IN MY CODE FOR THE THING YOU WANT TO DO
'status' => array(
'label'=>"<i class='fa fa-eye-slash'></i>", // text label of the button
'url'=>function ($data)
{
return $this->createUrl("counters/changeStatus",array('id'=>$data->counter_id, "status"=>$data->status ? 0 : 1 ));
}, // a PHP expression for generating the URL of the button
'imageUrl'=>false, // image URL of the button. If not set or fa lse, a text link is used
'options'=>array(
'class'=>'btn roundPoint4 btn-xs green btn-warning statusBtn',
'title'=>"Activate/Deactivate",
), // HTML options for the button tag
'click'=>'function(e){
e.preventDefault();
$(this).parents("table").find("tr.workingRowClass").removeClass("workingRowClass");
$("#secretForm").html("");
var parts = getMyIdNew($(this).attr("href"), "/status/", "/id/") ;
setAction($("#secretForm"), "POST", parts[2], 1)
moslakeFormInput( $("#secretForm") , "Counters[id]", "hidden", parts[1] , "id");
moslakeFormInput( $("#secretForm") , "Counters[status]", "hidden", parts[0], "status");
moslakeFormInput( $("#secretForm") , "operation", "hidden", "statusChange", "operation");
$("#promptAlert").find(".modal-body").html("<p>Are you sure you want to change status of the this Item ?</p>");
$("#promptAlert").modal("show"); $(this).parents("table").find("tr").removeClass("deleteMode");
$(this).parents("tr").addClass("workingRowClass");
}', // a JS function to be invoked when the button is clicked
'visible'=>function ()
{
return true;
}, // a PHP expression for determining whether the button is visible
),
I have copy paste code. so it will be extra. When some one clicks on "Status" button. It will open bootstrap modal. and ask for a confirmation. While executing this i have created a form with action and some fields. and in that modal i have proceed button. on proceed button click the form will be submitted. and on close the form will be made empty. the form will be display none form. and will have all the fields hidden.. I know it is more complex then urs... but I do it with post... BUT YOU CAN ASSIGN YOUR HREF TO POST BUTTON LINK IN THIS FUNCTION AND ON CLICK ON THAT IT WILL BE REDIRECTED
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 am very new to javascript . I was working in a application where i need to use the slick grid with the filter . i was following this link
http://mleibman.github.com/SlickGrid/examples/example-header-row.html .
in my app , i dont want filter to be in all fields , only for certain field i need .
could anyone help me on this.
this.grid.onHeaderRowCellRendered.subscribe(function(e, args) {
$(args.node).empty();
if(args.column.id == 'name' || args.column.id == 'contract'){
var s = $("<input type='text'>");
s.data('columndata', args.column.id)
.val(columnFilters[args.column.id])
.appendTo(args.node);
console.log(s);
};
});
will appear only for columns with id 'name' and 'contract'