I am using Laravel framework and some jquery code.
The problem is that, when i submit the data, it is successfully saved in session. when i get back to previous page, My select box shows the selected value but select-box is disabled. i am totally confused. what shall i do here?
Here is my HTML code:-
<div class="one-row">
<?php foreach ($services as $key => $allservices){
if($key <= 3){
if(!empty($data['services'])){
if(in_array($allservices['id'],$data['services'])) {
$checked = "checked";
} else {
$checked = "";
}
} else {
$checked = "";
}
?>
<div class="div_img_part-2">
<span class="img_part_class-2">
<img src="{{
asset('images/ServiceImages/'. $allservices['image'])}}"></span>
<span class="text_part_class-2">
<span class="check-box">
<input type="checkbox" name="services[]" value="
<?php echo $allservices['id']; ?>" <?= $checked; ?>><?php echo $allservices['name']; ?></span>
</span>
<select name="services[<?php echo $allservices['name'];?>]"class="selectpicker">
<option value="">Select Your Sevice</option>
<option value="Salon" <?php if(!empty($data['services'][$allservices['name']])){ if($data['services'][$allservices['name']] == "Salon") {?> selected
<?php } } ?> >Salon</option>
<option value="Mobile beautician" <?php if(!empty($data['services'][$allservices['name']])){ if($data['services'][$allservices['name']] == "Mobile beautician") {?> selected
<?php } }?> >Mobile beautician</option>
<option value="Both" <?php if(!empty($data['services'][$allservices['name']])){ if($data['services'][$allservices['name']] == "Both") {?> selected
<?php } } ?>>Both</option>
</select>
</div>
<?php } } ?>
</div>
And my Jquery Code looks:-
<script>
$(document).ready(function () {
$(".div_img_part-2 .selectpicker").attr("disabled",true);
$('.selectpicker').selectpicker('refresh');
$(".check-box input[type='checkbox']").on("change", function () {
if ($(this).prop("checked") == true) {
$(this).parents(".div_img_part-2").find(".selectpicker").removeAttr("disabled");
$('.selectpicker').selectpicker('refresh');
}else{
$(this).parents(".div_img_part-2").find(".selectpicker").attr("disabled",true);
$('.selectpicker').selectpicker('refresh');
}
});
});
</script>
Firstly Select
After Select(Edit)
Note:- when user selects the checkbox, the selectbox will be active at first time of registration. All my data are saved in session in Laravel please help me :(
You need to run this once the page is loaded:
$(".check-box input[type='checkbox']").trigger("change");
So the checkbox values will be recognised by the page.
Related
<form action="mydtr" method="post">
<select id="periodname">
<?php foreach($period as $period): ?>
<option><?= $period['period']; ?></option>
<?php endforeach; ?>
</select>
</form>
Im looking for ways to prevent selection options to reset after i select and submit. thank you in advance for the help
Not sure if this is what you asking for but here you go.
<?php $period = array("period1", "period2", "period3", "period4"); ?>
<form action="" method="post">
<select id="periodname" name="periodname">
<?php foreach($period as $period): ?>
<option><?= $period; ?></option>
<?php endforeach; ?>
</select>
<input value="submit" type="submit"></form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<?php if(isset($_POST["periodname"])): echo "Form was submitted and we set that value of the select box to selected ".$_POST["periodname"];?>
<script>
$( "#periodname option" ).each(function( index ) {
var item = $(this).val();
if(item == "<?php echo $_POST["periodname"]?>"){
$(this).prop('selected', true);
}
});
</script>
<?endif;?>
I have a dropdown list then submit form when you click select values from dropdown
using this code
onchange="this.form.submit()"
But I don't know how to put this on my dropdown check my code below,
<?php foreach($options as $key_option=>$val_option):?>
<div class="col-lg-3">
<label class="control-label">
<?php echo $required_notice.$val_option['option']?>
<?php if(!empty($options_lang[$key][$key_option]->hint)):?>
<i class="icon-question-sign hint" data-hint="
<?php echo $options_lang[$key][$key_option]->hint;?>">
</i>
<?php endif;?>
</label>
<?php
if(isset($options_lang[$key][$key_option])){
$drop_options = array_combine(explode(',',check_combine_set(isset($options_lang[$key])?$options_lang[$key][$key_option]->values:'', $val_option['values'], '')),explode(',',check_combine_set($val_option['values'], isset($options_lang[$key])?$options_lang[$key][$key_option]->values:'', '')));
} else {
$drop_options = array();
}
// If you don't want translation to website langauge uncomment this 1 line below:
// $drop_options = array_combine(explode(',', $options_lang[$key][$key_option]->values), explode(',', $options_lang[$key][$key_option]->values));
$drop_selected = set_value('option'.$val_option['id'].'_'.$key, isset($estate['option'.$val_option['id'].'_'.$key])?$estate['option'.$val_option['id'].'_'.$key]:'');
echo form_dropdown ('option'.$val_option['id'].'_'.$key, $drop_options, $drop_selected, 'class="form-control" id="inputOption_'.$key.'_'.$val_option['id'].'" placeholder="'.$val_option['option'].'" '.$required_text)
?>
</div>undefined</div>
<?php endforeach;?>
Output
Thankyou
NOTE: My dropdown is inside a foreach
You should put your onchange prop into your form_dropdown function so your select option will have the event you want, submit while option changed.
<div class="col-lg-3">
<label class="control-label">
<?php echo $required_notice.$val_option['option']?>
<?php if(!empty($options_lang[$key][$key_option]->hint)):?>
<i class="icon-question-sign hint" data-hint="
<?php echo $options_lang[$key][$key_option]->hint;?>">
</i>
<?php endif;?>
</label>
<?php
if(isset($options_lang[$key][$key_option]))
{
$drop_options = array_combine(explode(',',check_combine_set(isset($options_lang[$key])?$options_lang[$key][$key_option]->values:'', $val_option['values'], '')),explode(',',check_combine_set($val_option['values'], isset($options_lang[$key])?$options_lang[$key][$key_option]->values:'', '')));
}
else
{
$drop_options = array();
}
// If you don't want translation to website langauge uncomment this 1 line below:
// $drop_options = array_combine(explode(',', $options_lang[$key][$key_option]->values), explode(',', $options_lang[$key][$key_option]->values));
$drop_selected = set_value('option'.$val_option['id'].'_'.$key, isset($estate['option'.$val_option['id'].'_'.$key])?$estate['option'.$val_option['id'].'_'.$key]:'');
echo form_dropdown ('option'.$val_option['id'].'_'.$key, $drop_options, $drop_selected, 'onchange="this.form.submit()" class="form-control" id="inputOption_'.$key.'_'.$val_option['id'].'" placeholder="'.$val_option['option'].'" '.$required_text)
?>
</div>undefined</div>
i don't know how to explain well, but i want to display the name of the choice i made, and the names are in the database. To understand, here is my select :
<select name="options[1][]" id="perso_1" class="multiselect
required-entry product-custom-option" title=""
onchange="displayCondition()">
<option value="0" disabled>Testing</option>
<option value="1">Test1</option>
<option value="2">Test2</option>
</select>
Here is the function to display a message under the choice :
function displayCondition() {
condition = new Array("",
"<div class='bordure'><?php echo $row['perso_name']; ?></div>",
"<div class='bordure'><?php echo $row['perso_name']; ?></div>",
"<div class='bordure'></div>"
);
var getsel = document.getElementById('perso_1').value;
document.getElementById("divId").innerHTML = condition[getsel];
}
And the variables :
$getperso = "SELECT * FROM perso";
$persoresult = mysqli_query($connection, $getperso) or die("Erro!: " . mysql_error());
$row = mysqli_fetch_assoc($persoresult)
The code is working, but it only display the name of the first "perso_name" and i don't know how to change to the second one, maybe something like "perso_name(2)" or i don't know..
If you could help me, thanks a lot !
Add a while into your code without the while condition the query will only run once.Thats why it only display the name of the first person. Try do something like this
if(mysqli_num_rows(mysqli_query($getperso)) > 0)
{
$getperso = mysqli_query($getperso)or die(mysqli_error());
while($row = mysqli_fetch_assoc($getperso))
{
echo $row['perso_name'];
echo "</br>;
}
}
You can do it in by the following code :
<?php $getperso = "SELECT * FROM perso"; ?>
<select name="options[1][]" id="perso_1" class="multiselect
required-entry product-custom-option" title=""
onchange="displayCondition(this.value)">
<?php if(mysqli_num_rows(mysqli_query($getperso)) > 0)
{
$getperso = mysqli_query($getperso)or die(mysqli_error());
while($row = mysqli_fetch_assoc($getperso))
{ ?>
<option value="<?php echo $row['perso_name']; ?>"><?php echo $row['perso_name']; ?></option>
<?php }
} ?>
</select>
<script type="text/javascript">
function displayCondition(value) {
document.getElementById("divId").innerHTML = "<div class='bordure'>"+ value +"
</div>";
}
I think this might resolve your issue. All the best.
I am new in jquery. I have done half of work. But I am not find any solution.
Here you see the image There are four Checkboxes Nail, Hair, Skin-care, Massage. I want when user click on Salon, Mobile beautician and Both above Nail checkbox would be ticked and when user click on Select your service Nail checkbox would be unchecked so this applies to all. I have done that but problem is that when I do select the item second time from nails the checkbox is not checked. Its working only one time. Please help me. Here I have code:-
Html:-
<div class="one-row">
<?php foreach ($services as $key => $allservices) {
if ($key <= 3) {
if (!empty($data['services'])) {
if (in_array($allservices['id'], $data['services'])) {
$checked = "checked";
} else {
$checked = "";
}
} else {
$checked = "";
} ?>
<div class="div_img_part-2">
<span class="img_part_class-2"><img src="{{ asset('images/ServiceImages/'. $allservices['image'])}}">
</span>
<span class="text_part_class-2">
<p class="custom-checkbox firstpart">
<input class="firstdisable" type="checkbox" id="{{ $key }}" name="services[]"
value="{{ $allservices['id'] }}" <?= $checked; ?>/>
<label for="{{ $key }}">{{$allservices['name']}}</label>
/p>
</span>
</span>
<select name="service_type[<?php echo $allservices['name']; ?>]" class="selectpicker">
<option value="">Select Your Sevice</option>
<option value="Salon" <?php if (!empty($data['service_type'][$allservices['name']])) {
if ($data['service_type'][$allservices['name']] == "Salon") { ?> selected
<?php }
} ?> >Salon
</option>
<option value="Mobile beautician" <?php if (!empty($data['service_type'][$allservices['name']])) {
if ($data['service_type'][$allservices['name']] == "Mobile beautician") { ?> selected
<?php }
} ?> >Mobile beautician
</option>
<option value="Both" <?php if (!empty($data['service_type'][$allservices['name']])) {
if ($data['service_type'][$allservices['name']] == "Both") { ?> selected
<?php }
} ?>>Both
</option>
</select>
</div>
<?php }
} ?>
</div>
I am using Laravel framework
here is my jQuery code:-
$('.selectpicker').selectpicker('refresh');
$(".selectpicker").on('change', function() {
var value = $(this).parents(".div_img_part-2").find(".selectpicker").val();
alert(value);
if (value == "") {
$(this).parents(".div_img_part-2").find("input[type='checkbox']").attr('checked', false);
if ($("input:checked").length == 0) {
$('.disable').prop('disabled', false);
$('.selectpicker').selectpicker('refresh');
}
} else {
$(this).parents(".div_img_part-2").find("input[type='checkbox']").attr('checked', true);
}
});
Use closest() and prop() instead of parent() and attr().
try this :
$(".selectpicker").on('change', function () {
var value = $(this).val();
if (value == "") {
$(this).closest(".div_img_part-2").find("input[type='checkbox']").prop('checked', false);
if ($("input:checked").length == 0) {
$('.disable').prop('disabled', false);
$('.selectpicker').selectpicker('refresh');
}
} else {
$(this).closest(".div_img_part-2").find("input[type='checkbox']").prop('checked', true);
}
});
I have the following option menu in a form that will insert the fields into a table:
<option value="">select staff</option>
<?php
do {
?>
<option value="<?php echo $row_Staff['Staff_Name']."||".$row_Staff['Email']?>">
<?php echo $row_Staff['Staff_Name']?></option>
<?php
} while ($row_Staff = mysql_fetch_assoc($Staff));
$rows = mysql_num_rows($Staff);
if($rows > 0) {
mysql_data_seek($Categories, 0);
$row_Staff = mysql_fetch_assoc($Staff);
}
?>
</select>
I have 2 fields from source table in value of option from technique explained in How to post two values in an option field?: Staff_Name and Email.
I am trying to insert both fields from the form into a table using:
<input type="hidden" name="Staff_Name" class="form-control" id="Staff_Name" value=<?php
$staff =$_POST['Staff_Data'];
$staff_name = explode("||", $staff);
echo $staff_Name[0];
?> />
and
<input type="hidden" name="Email" class="form-control" id="Email" value=<?php
$staff =$_POST['Staff_Data'];
$email = explode("||", $staff);
echo $email[1];
?> />
Unfortunately, I can see the 2 fields separated by "||" in the table if I insert the option menu value but cannot seem to insert Staff_Name or Email into individual fields. On insert both fields are blank. Any help would be appreciated.
Instead of combine staffname and staffemail in the dropdown value. Please staffname in dropdown value and staffemail in the property of dropdown and onchange of the dropdown set those values in the hidden inputs so you will easily get those values on the form submission.
Please go through below code and let me know if you have any query.
//Dropdown
<select id="ddStaff">
<option value="">select staff</option>
<?php
do { ?>
<option value="<?php echo $row_Staff['Staff_Name']; ?>" staff-email = "<?php echo $row_Staff['Email'];?>">
<?php echo $row_Staff['Staff_Name']?>
</option> <?php
} while ($row_Staff = mysql_fetch_assoc($Staff));
$rows = mysql_num_rows($Staff);
if($rows > 0) {
mysql_data_seek($Categories, 0);
$row_Staff = mysql_fetch_assoc($Staff);
}
?>
</select>
//Input hidden fields to store staff name and staff email
<input type="hidden" id="txtStaffName" name="txtStaffName">
<input type="hidden" id="txtStaffEmail" name="txtStaffEmail">
//Jquery code.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#ddStaff").on('change',function(){
var staffName = $(this).val();
var staffEmail = $('option:selected', this).attr('staff-email');
$("#txtStaffName").val(staffName);
$("#txtStaffEmail").val(staffEmail);
});
});
</script>
Please check it on https://jsfiddle.net/z4a0fywp/
For testing purpose I have not made the inputs hidden in the fiddle.