We Keep Coding

Modify view if one dropdown is selected, other dropdowns to be disabled

I have a form where i am assigning some equipments to an user. I want to assign only one equipment to one user because i have a start date and end date. I want if i select some display from dropdown, the phone and laptop to freeze and to be selected default none. I also want if i select phone for ex, display and laptop to freeze.I found somewhere that it can be made with javascript, but i don't know how. If you can guide me or give me a proper example i would appreciate.I am new to js.
Here is my form :
<?php
use yii\helpers\Html;
use yii\widgets\ActiveForm;
use yii\helpers\ArrayHelper;
use app\models\User;
use kartik\date\DatePicker;
/* #var $this yii\web\View */
/* #var $model app\models\UserEquipmentMapping */
/* #var $form yii\widgets\ActiveForm */
#print_r($userquery);die;
?>
<div class="user-equipment-mapping-form">
<?php $form = ActiveForm::begin(); ?>
<?= $form->field($model, 'user_id')
->dropDownList(ArrayHelper::map($usermodel, 'id', 'username'))?>
<?= $form->field($model, 'laptop_id')
->dropDownList(ArrayHelper::map($laptopmodel, 'id', 'laptop_series'))?>
<?= $form->field($model, 'phone_id')
->dropDownList(ArrayHelper::map($phonemodel, 'id', 'phone_series'))?>
<?= $form->field($model, 'display_id')
->dropDownList(ArrayHelper::map($displaymodel, 'id', 'display_series'))?>
<?=$form->field($model, 'start_date')->widget(DatePicker::classname(), [
'language' => 'en',
'value' => date('yyyy/mm/dd', strtotime('+7 days')),
'readonly' => true,
#'disabled' => true,
#'size' => 'lg',
#'type' => DatePicker::TYPE_COMPONENT_APPEND,
'options' => ['placeholder' => 'Selectati data'],
'pluginOptions' => [
#'orientation' => 'top right',
'format' => 'yyyy/mm/dd',
'todayHighlight' => true,
'todayBtn' => true,
'autoclose'=>true,
]
]);?>
<?=$form->field($model, 'stop_date')->widget(DatePicker::classname(), [
'language' => 'en',
'value' => date('yyyy/mm/dd', strtotime('+7 days')),
'readonly' => true,
#'disabled' => true,
#'size' => 'lg',
#'type' => DatePicker::TYPE_COMPONENT_APPEND,
'options' => ['placeholder' => 'Selectati data'],
'pluginOptions' => [
#'orientation' => 'top right',
'format' => 'yyyy/mm/dd',
'todayHighlight' => true,
'todayBtn' => true,
'autoclose'=>true,
]
]);?>
<div class="form-group">
<?= Html::submitButton('Save', ['class' => 'btn btn-success']) ?>
</div>
<?php ActiveForm::end(); ?>
</div>
Thank you for any suggestions
UPDATE : But still not working, i have tried for the first 2 dropdowns at least to test.
<?php
use yii\helpers\Html;
use yii\widgets\ActiveForm;
use yii\helpers\ArrayHelper;
use app\models\User;
use kartik\date\DatePicker;
/* #var $this yii\web\View */
/* #var $model app\models\UserEquipmentMapping */
/* #var $form yii\widgets\ActiveForm */
#print_r($userquery);die;
?>
<div class="user-equipment-mapping-form">
<script>
$(document).ready(function(){
if($("#dropDown1").val())
$("#dropDown2").attr("disabled", "disabled");
else
$("#dropDown2").removeAttr("disabled");
if($("#dropDown2").val())
$("#dropDown1").attr("disabled", "disabled");
else
$("#dropDown1").removeAttr("disabled");
$($("#dropDown1").on("change", function(){
if($(this).val())
$("#dropDown2").attr("disabled", "disabled");
else
$("#dropDown2").removeAttr("disabled");
});
$($("#dropDown2").on("change", function(){
if($(this).val())
$("#dropDown1").attr("disabled", "disabled");
else
$("#dropDown1").removeAttr("disabled");
});
});
</script>
<?php $form = ActiveForm::begin(); ?>
<?php
$userData=ArrayHelper::map($usermodel,'id','username');
echo $form->field($model, 'user_id')->dropDownList($userData, ['prompt'=>'Select...'], array("id" => 'dropDown1'));
?>
<?php
$laptopData=ArrayHelper::map($laptopmodel,'id','laptop_series');
echo $form->field($model, 'laptop_id')->dropDownList($laptopData, ['prompt'=>'Select...'], array("id" => 'dropDown2'));
?>
<?php
$phoneData=ArrayHelper::map($phonemodel,'id','phone_series');
echo $form->field($model, 'phone_id')->dropDownList(
$phoneData,
['prompt'=>'Select...']);
?>
<?php
$displayData=ArrayHelper::map($displaymodel,'id','display_series');
echo $form->field($model, 'display_id')->dropDownList(
$displayData,
['prompt'=>'Select...']);
?>
<?=$form->field($model, 'start_date')->widget(DatePicker::classname(), [
'language' => 'en',
'value' => date('yyyy/mm/dd', strtotime('+7 days')),
'readonly' => true,
#'disabled' => true,
#'size' => 'lg',
#'type' => DatePicker::TYPE_COMPONENT_APPEND,
'options' => ['placeholder' => 'Selectati data'],
'pluginOptions' => [
#'orientation' => 'top right',
'format' => 'yyyy/mm/dd',
'todayHighlight' => true,
'todayBtn' => true,
'autoclose'=>true,
]
]);?>
<?=$form->field($model, 'stop_date')->widget(DatePicker::classname(), [
'language' => 'en',
'value' => date('yyyy/mm/dd', strtotime('+7 days')),
'readonly' => true,
#'disabled' => true,
#'size' => 'lg',
#'type' => DatePicker::TYPE_COMPONENT_APPEND,
'options' => ['placeholder' => 'Selectati data'],
'pluginOptions' => [
#'orientation' => 'top right',
'format' => 'yyyy/mm/dd',
'todayHighlight' => true,
'todayBtn' => true,
'autoclose'=>true,
]
]);?>
<div class="form-group">
<?= Html::submitButton('Save', ['class' => 'btn btn-success']) ?>
</div>
<?php ActiveForm::end(); ?>
</div>

Your dropdowns - add onchange function and class equipment
<?= $form->field($model, 'laptop_id')->dropDownList(ArrayHelper::map($laptopmodel, 'id', 'laptop_series'), ['prompt'=>'Select...', 'onchange' => 'setEquipment(this)', 'class' => 'equipment'])?>
<?= $form->field($model, 'phone_id')->dropDownList(ArrayHelper::map($phonemodel, 'id', 'phone_series'), ['prompt'=>'Select...', 'onchange' => 'setEquipment(this)', 'class' => 'equipment'])?>
<?= $form->field($model, 'display_id')->dropDownList(ArrayHelper::map($displaymodel, 'id', 'display_series'), ['prompt'=>'Select...', 'onchange' => 'setEquipment(this)', 'class' => 'equipment'])?>
js
function setEquipment(el){
var equipment_elements = $('.equipment');
if($(el).val() != "") {
$.each(equipment_elements, function (key, value) { //disable all elements
$(this).attr('disabled', true);
});
$(el).attr('disabled', false); //enable current element
}else{
$.each(equipment_elements, function (key, value) { //enable all elements
$(this).attr('disabled', false);
});
}
}

HTML data for Jquery not working

This is the array from where its called.
I have an function, what i want to do is to display a text after you change the select.
$vak=array(
"algemeen"=>array(
'title' => 'Algemeen',
'maxWoordPerDag' => 100,
),
"technischict"=>array(
'title' => 'Technisch/ICT',
'maxWoordPerDag' => 10,
),
"juridisch"=>array(
'title' => 'Juridisch',
'maxWoordPerDag' => 10,
),
"marketing"=>array(
'title' => 'Marketing',
'maxWoordPerDag' => 10,
),
"websiteshop"=>array(
'title' => 'Website/shop',
'maxWoordPerDag' => 10,
),
"medisch"=>array(
'title' => 'Medisch',
'maxWoordPerDag' => 10,
),
"financieel"=>array(
'title' => 'Financieel',
'maxWoordPerDag' => 10,
),
"beëdigd"=>array(
'title' => 'Beëdigd',
'maxWoordPerDag' => 10,
)
);
This is the select box
<label>Vakgebied</label>
<p id="maxwoorden"></p>
<select id="vakgebied"
class="form-control"
name="vakgebied">
<?php foreach($vak as $key => $value): ?>
<option data-max="<?php echo $value['maxWoordPerDag'];?>" value="<?php echo $key?>">
<?php echo $value['title'] ?></option>
<?php endforeach; ?>
</select>
And this is my Jquery code to do so
<script type="text/javascript">
$(document).ready(function()
{
$("#vakgebied").on('change', function()
{
var current = $(this).find("option:selected").html();
alert(current);
var maxdata = $(this).find('option.selected').attr('data-max');
alert(maxdata);
});
});
When i alert maxdata i get undefined as output.
Does someone knows why i get undefined as output and how can i fix this.

You have .selected, not :selected on the second one:
var maxdata = $(this).find('option:selected').attr('data-max');

How to submit multipart form in Yii2?

I have a problem with my form because it cant serialize the image file. So how can I submit a form that contains an image file input in Yii2 using ajax?
(Below you can see the active form and the js code.)
<div class="cars-form">
<?php $form = ActiveForm::begin(['options'=>['id'=>$model->formName(),'enableAjaxValidation'=>true,'enctype'=>'multipart/form-data']]); ?>
<?= $form->field($model, 'name')->textInput(['maxlength' => true]) ?>
<?=$form->field($model, 'colour')->widget(ColorInput::classname(), ['options' => ['placeholder' => 'Select Color...'],]); ?>
<?=$form->field($model, 'imageFile')->widget(FileInput::classname(), [
'options' => ['accept' => 'image/*'],'pluginOptions' => [
'previewFileType' => 'image',
'showUpload' => false],]);?>
<?= $form->field($model, 'price')->textInput() ?>
<div class="form-group">
<?= Html::submitButton($model->isNewRecord ? 'Create' : 'Update', ['class' => $model->isNewRecord ? 'btn btn-success' : 'btn btn-primary']) ?>
</div>
<?php ActiveForm::end(); ?>
</div>
<?php
$script = <<< JS
$('form#{$model->formName()}').on('beforeSubmit',function(e)
{var \$form =$(this);
$.post(
\$form.attr("action"),
\$form.serializefiles()
)
.done(function(result)
{
if (result == 1)
{
$(\$form).trigger("reset");
$.pjax.reload({container:'#cars'});
}
else
{
$("#message").html(result);
}
}).fail(function(data)
{console.log("server error: " + data);});
return false;
});
JS;
$this->registerJs($script);?>
(Controller)
public function actionCreate()
{
$model = new Cars();
if ($model->load(Yii::$app->request->post())) {
$imageName= $model->name;
$model->imageFile= UploadedFile::getInstance($model,'imageFile');
$model->imageFile->saveAs('carsimages/'.$imageName.'.'.$model->imageFile->extension);
$model->image='carsImages/'.$imageName.'.'.$model->imageFile->extension;
if($model->save())
//{
//return $this->redirect(['view', 'id' => $model->id]);
//}
{
echo 1;
}
else
{
echo 0;
}
}
else {
return $this->renderAjax('create', [
'model' => $model,
]);
}}

How to combine the functionality of a list with a textbox

Right now I have a form that I created in cakephp and it works fine but the problem I am running into is that we run queries off of the type in the database and there have been some user errors with spelling so I would like to have a list with the most common types that you can select from but if it is not in the list you can still type in something different.
I found this jquery autocomplete combobox that works great but I am not able to enter something that is not in the list. http://jqueryui.com/autocomplete/#combobox
I don't know if you need to see my form or not but I will post it anyway
<?php
echo $this->Form->create( 'Credential', array( 'class' => 'popup_form' ) );
echo $this->Form->hidden( 'account_id', array( 'value' => $account_id ) );
echo $this->Form->hidden( 'user_id', array( 'value' => $currentUser['User']['id'] ) );
echo $this->Form->hidden( 'created', array( 'value' => date("Y-m-d H:i:s") ) );
echo $this->Form->hidden( 'modified', array( 'value' => date("Y-m-d H:i:s") ) );
echo '<br/><br/>';
echo $this->Form->input( 'type', array( 'div' => false, 'label' => false, 'placeholder' => 'Account Type' ) );
echo '<br/><br/>';
echo $this->Form->input( 'url', array( 'div' => false, 'label' => false, 'placeholder' => 'URL' ) );
echo '<br/><br/>';
echo $this->Form->input( 'username', array( 'div' => false, 'label' => false, 'placeholder' => 'Username' ) );
echo '<br/><br/>';
echo $this->Form->input( 'password', array( 'div' => false, 'label' => false, 'placeholder' => 'Password' ) );
echo '<br/><br/>';
echo $this->Js->submit( 'Create Credential', array( 'div' => false, 'class' => 'button white medium', 'before' => 'return submitForm();', 'success' => "$('#qtip-add_account_credential').hide();", 'complete' => 'loadTasks();' ) );
echo '<br/><br/>';
echo $this->Form->end();
?>
<script type="text/javascript">
function submitForm(){
var x = document.getElementById("CredentialType").value;
if (x == null || x == "") {
alert("Account Type must be filled out");
return false;
}
else {
return true;
}
}
</script>
I am a backend developer and would love any help I could get on the front end. Thanks.

What you are searching for is a datalist (new in HTML5):
http://www.w3schools.com/tags/tag_datalist.asp
It provides an form input with a predefined list of options, which appears as soon as the user's input matches one of the entries.
BUT: it seems not to be supported in Safari
In your case it would look like that:
<input name="type" list="AccountTypes" placeholder="Account Type">
<datalist id="AccountTypes">
<option value="admin">
<option value="user">
<option value="something else">
</datalist>

How to change img srs attr on hover in WordPress with jQuery

I have following code.
This code is from my theme-options.php file.
and I am still working on it and I develop this all.
function social_icons() {
$icons = array (
'facebook'=>__('Facebook','responsivetheme'),
'google'=>__('Google','responsivetheme'),
'instagram'=>__('Instagram','responsivetheme'),
'linkedin'=>__('Linkedin','responsivetheme'),
'pinterest'=>__('Pinterest','responsivetheme'),
'rss'=>__('RSS','responsivetheme'),
'stumbleupon'=>__('Stumbleupon','responsivetheme'),
'twitter'=>__('Twitter','responsivetheme'),
'vimeo'=>__('Vimeo',''),
'youtube'=>__('Youtube','responsivetheme')
);
$iconsHover = array (
'facebook-h'=>__('Facebook','responsivetheme'),
'google-blank-h'=>__('Google','responsivetheme'),
'instagram-blank-h'=>__('Instagram','responsivetheme'),
'linkedin-blank-h'=>__('Linkedin','responsivetheme'),
'pinterest-h'=>__('Pinterest','responsivetheme'),
'rss-h'=>__('RSS','responsivetheme'),
'stumbleupon-blank-h'=>__('Stumbleupon','responsivetheme'),
'twitter-h'=>__('Twitter','responsivetheme'),
'vimeo-blank-h'=>__('Vimeo',''),
'youtube-h'=>__('Youtube','responsivetheme')
);
?>
<?php
$theme_options = get_option('new_theme_options',false);
$theme_values = unserialize($theme_options);
$icons_options = get_option('social_settings_responsivetheme_options');
$icons_values = unserialize($icons_options);
?>
<?php
foreach( $icons as $key => $value ) :
if (!empty ($theme_values[$key])) :
?>
<img class="" src="<?php echo template_dir('/icons/'.esc_attr( $key ).'.png');?>" alt="<?php echo esc_html( $value )?>" width="<?php echo $icons_values['width'];?>" height="<?php echo $icons_values['height'];?>" />
<?php endif;//END !empty ($theme_values) ?>
<?php foreach ($iconsHover as $key2 => $value2 ): ?>
<script type="text/javascript">
$(document).ready(function(){
var templateDirectory = "<?php echo get_template_directory_uri(); ?>";
$('.social_icons .<?php echo esc_html($value2); ?> img').hover(
function (){
$(this).attr('src', templateDirectory + '/icons/<?php echo esc_attr($key2); ?>.png');
},
function () {
$(this).attr('src', templateDirectory + '/icons/<?php echo esc_attr($key); ?>.png');
});
});//END document
</script>
<?php endforeach;//END foreach $iconsHover?>
<?php endforeach;//END foreach ?>
<?php
}//END social_icons()?>
The problem is when I hover on icons the hover img works but when on mouse out the normal img should still remains, it doesn't.
It replaces all imgs to 'youtube-h' .
How to do that?

Sorry my comment wasn't clear enough.
By putting them in nested loops, you're outputting every possible combination ('facebook', 'facebook-h'), ('facebook', 'google-blank-h'), ('facebook', 'instagram-blank-h')... ('youtube', 'vimeo-blank-h'), ('youtube', 'youtube-h').
What I meant by putting them all in one array was something like this:
$icons = array (
array(
'off' => 'facebook',
'hover' => 'facebook-h',
'label' =>__('Facebook','responsivetheme')
),
array(
'off' => 'google',
'hover' => 'google-blank-h',
'label' =>__('Google','responsivetheme')
),
array(
'off' => 'instagram',
'hover' => 'instagram-blank-h',
'label' =>__('Instagram','responsivetheme')
),
array(
'off' => 'linkedin',
'hover' => 'linkedin-blank-h',
'label' =>__('Linkedin','responsivetheme')
),
array(
'off' => 'pinterest',
'hover' => 'pinterest-h',
'label' =>__('Pinterest','responsivetheme')
),
array(
'off' => 'rss',
'hover' => 'rss-h',
'label' =>__('RSS','responsivetheme')
),
array(
'off' => 'stumbleupon',
'hover' => 'stumbleupon-blank-h',
'label' =>__('Stumbleupon','responsivetheme')
),
array(
'off' => 'twitter',
'hover' => 'twitter-h',
'label' =>__('Twitter','responsivetheme')
),
array(
'off' => 'vimeo',
'hover' => 'vimeo-blank-h',
'label' =>__('Vimeo','responsivetheme')
),
array(
'off' => 'youtube',
'hover' => 'youtube-h',
'label' =>__('Youtube','responsivetheme')
)
);
Then you only need one loop, something like this:
foreach ($icons as $icon) {
}
and you can use $icon['off'], $icon['hover'], and $icon['label'] as appropriate inside that.