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);
}
});
Related
i have a simple form where when a user selects a selectbox another selectbox will show values based on it, its a simple PHP page, so I just did it with the two selectbpxes in a simple page and its working fine as you can see here:
enter link description here
now I implemented it in my actual form in the website which is live here:
enter link description here
however this is giving me blank values, the codes are like below:
$(document).ready(function() {
$("#type").change(function() {
var val = $(this).val();
if (val == "2") {
$("#size").html("<?php
$ret = mysqli_query($con, "select * from modelssubcat where cat_id='2'");
while ($row = mysqli_fetch_array($ret)) {
?
> < option value = '<?php echo $row["subcat_name"];?>' > <?php echo $row["subcat_name"];?> < /option><?php }?>");
} else if (val == "3") {
$("#size").html("<?php
$ret = mysqli_query($con, "select * from modelssubcat where cat_id='3'");
while ($row = mysqli_fetch_array($ret)) {
?
> < option value = '<?php echo $row["subcat_name"];?>' > <?php echo $row["subcat_name"];?> < /option><?php }?>");
} else if (val == "4") {
$("#size").html("<?php
$ret = mysqli_query($con, "select * from modelssubcat where cat_id='4'");
while ($row = mysqli_fetch_array($ret)) {
?
> < option value = '<?php echo $row["subcat_name"];?>' > <?php echo $row["subcat_name"];?> < /option><?php }?>");
} else if (val == "5") {
$("#size").html("<?php
$ret = mysqli_query($con, "select * from modelssubcat where cat_id='5'");
while ($row = mysqli_fetch_array($ret)) {
?
> < option value = '<?php echo $row["subcat_name"];?>' > <?php echo $row["subcat_name"];?> < /option><?php }?>");
}
});
});
<?php
session_start();
include("inc/connection.php");
?>
<!DOCTYPE html>
<html lang="en" class="loading">
...........
<form method="post" enctype="multipart/form-data">
<div class="card-body">
<div class="card-block">
<div class="col-md-6">
<div class="form-group">
<label for="image">Category Name</label>
<select id="type" class="form-control" name="cat_id">
<option>--Select Category--</option>
<?php
$ret=mysqli_query($con,"select * from modelscat");
while ($row=mysqli_fetch_array($ret)) {
?>
<option value="<?php echo $row['cat_id'];?>">
<?php echo $row['cat_name'];?>
</option>
<?php }?>
</select>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="image">SubCategory Name</label>
<select id="size" class="form-control" name="subcat_id">
<option>--Select Subcategory--</option>
</select>
</div>
</div>
.................
can anyone please tell me what is wrong in here, thanks in advance
I have a checkbox group where I need to disable the required validation check on page load.
I have tried like below, but the "required" check still appears.
Below is the div that appears from the browser console as is:
<div class="key-class-div">Key :
<select class="targetSelect" name="Keys[]" id="key_H3UKE01hlI" rel="H3UKE01hlI" onchange="return getPreferenceValues(this, 'H3UKE01hlI');">
<option value="">Choose one</option>
<option value="25/checkbox//" alt="25">Gender</option>
<option value="26/checkbox//" alt="26" selected="">Marital Status</option>
<option value="27/radio//" alt="27">Education Status</option>
<option value="28/checkbox//" alt="28">Employment Status</option>
<option value="29/checkbox//" alt="29">Professional Status</option>
<option value="30/checkbox//" alt="30">Interests</option>
<option value="31/checkbox//" alt="31">Age</option>
<option value="40/date/range/" alt="40">DOB</option>
<option value="52/text//" alt="52">Home City/Town</option>
<option value="53/text//" alt="53">Year of Birth</option>
</select>
<span style="color:red;" class="key-error-class" id="key_error_H3UKE01hlI"></span>
<span id="valueResponse_H3UKE01hlI" class="valueResponse-class">
Value :
<label id=""><input class="targetSetting" type="checkbox" name="Values[26][]" checked="" id="value_H3UKE01hlI" value="211">Single</label>
<label id=""><input class="targetSetting" type="checkbox" name="Values[26][]" id="value_H3UKE01hlI" value="212">Married</label>
<label id=""><input class="targetSetting" type="checkbox" name="Values[26][]" id="value_H3UKE01hlI" value="0">Any</label>
<span style="color:red;" class="value-error-class" id="value_error_H3UKE01hlI">Required</span>
</span>
HTML : (Have mentioned "problem here below")
<input type="submit" name="submit" id="SaveSettings" value="<?php echo $this->translate('Update'); ?>" class="update bdr_rds2" onclick="if($('input[name=target_criteria]:checked').val() == 'optedin_users')
{
return optinUpdateUsersFun()
}
else if($('input[name=target_criteria]:checked').val() == 'registered_users')
{
return registeredUsersUpdateFun()
}
else if($('input[name=target_criteria]:checked').val() == 'preference_based_users')
{
return validateForm() //Problem here
}
else{
return false;
}
">
JS function which gets called on click of button.
This is where validation is checked as "Required"
(have pasted entire function- so its big)
validateForm = function()
{
console.log('not---');
var validation = true;
var Keys = $('select[name="Keys[]"]');
jQuery.each(Keys,function( key, object )
{
var preferenceData = $("#"+object.id).find('option:selected').attr("value");
var keyId = $("#"+object.id).attr("rel");
$("#key_error_"+keyId).html("");
$("#value_error_"+keyId).html("");
$("#startValue_error_"+keyId).html("");
$("#endValue_error_"+keyId).html("");
var res = preferenceData.split("/");
var preferenceId = res[0];
var dataType = res[1];
var EqualRange = res[2];
var SingleMultiple = res[3];
var value = $(this).val();
if (value.length ==0)
{
$("#key_error_"+keyId).html("Required");
validation = false;
}
var arrayDataTypesOne = [ "number", "date", "time", "text", "dropdown" ];
var arrayDataTypestwo = [ "checkbox", "radio" ];
if (jQuery.inArray(dataType, arrayDataTypesOne) > -1)
{
if (EqualRange == 'equal' || EqualRange == '')
{
if (SingleMultiple == "single")
{
preferenceValue = jQuery("#value_"+keyId).val();
if (preferenceValue.length == 0)
{
$("#value_error_"+keyId).html("Required");
validation = false;
}
}else if (SingleMultiple == "multiple")
{
preferenceValue = jQuery("#value_"+keyId).val();
if (preferenceValue.length == 0)
{
$("#value_error_"+keyId).html("Required");
validation = false;
}
}
}else if (EqualRange == 'range')
{
StartValue = jQuery("#startValue_"+keyId).val();
EndValue = jQuery("#endValue_"+keyId).val();
if (StartValue.length == 0)
{
$("#startValue_error_"+keyId).html("Required");
validation = false;
}
if (EndValue.length == 0)
{
$("#endValue_error_"+keyId).html("Required");
validation = false;
}
}
}else if (jQuery.inArray(dataType, arrayDataTypestwo) > -1)
{
Values = $('input[name="Values['+preferenceId+'][]"]');
if(!Values.is(':checked'))
{
$("#value_error_"+keyId).html("Required");
validation = false;
}
}
//alert(dataType+'/'+SingleMultiple);
});
// alert(validation);return false;
if (validation == false )
{
return false;
}else{
return true;
}
}
PHP phtml Code for the same (part of the code- for comparison with browser console)
<div class="key-class-div">Key :
<select class="targetSelect" name="Keys[]" id="key_<?php echo $randomString; ?>" class="key-class" rel="<?php echo $randomString; ?>" onchange="return getPreferenceValues(this, '<?php echo $randomString; ?>');">
<option value="">Choose one</option>
<?php foreach ($AdminpreferncesData as $value) { ?>
<option value="<?php echo $value['id'] . '/' . $value['FieldType'] . '/' . $value['EqualRange'] . '/' . $value['SingleMultiple']; ?>" alt="<?php echo $value['id']; ?>" <?php if ($value['id'] == $Fields['PreferenceFieldID']) { ?> selected <?php } ?> ><?php echo $value['FieldName']; ?></option>
<?php } ?>
</select>
<span style="color:red;" class="key-error-class" id="key_error_<?php echo $randomString; ?>" ></span>
<span id="valueResponse_<?php echo $randomString; ?>" class="valueResponse-class">
<?php
$Options = explode(',', $Fields['options']);
$OptionIds = explode(',', $Fields['optionIds']);
$expOptions = array_combine($OptionIds, $Options);
$divid = $randomString;
?>
<?php if ($Fields['FieldType'] == "text") { ?>
Value :<label id="">
<input class="targetSetting" type="text" name="Values[<?php echo $Fields['PreferenceFieldID']; ?>][]" id="value_<?php echo $divid; ?>" value="<?php echo $Fields['KeyValue']; ?>">
<span style="color:red;" class="value-error-class" id="value_error_<?php echo $divid; ?>" ></span>
</label>
...
This is how i am trying to disable the 'required' attribute on page load using jQuery.
$(document).ready(function() {
//Tried using this
$('.targetSetting').removeAttr('required'); //not working
$('.valueResponse-class').prop('disabled',true); //not working
});
I want to disable required attribute for all checkboxes/radiobuttons on click of Update button (update button code's HTML have posted above)
Im still a newbie learning things day by day. I have posted my question at the OpenCart forum website looking for help and now here in StackOverflow. I need your help guys.
Hi there, Im a newbie getting used to Opencart environment. I need help with product bands as I have attached in picture below.
I need the coming_soon option to overwrite the out_of_stock option settings. Its not working correctly as Im confused with the logic that has been made. Out_of_stock option works when there is only "0" quantity products. When we have a new product that is Coming_soon we would make that product quantity "0" as well but something is wrong here and the Coming_soon is not overwriting the Out_of_stock setting. I need some help here.
catalog/controller/product/category.php
/*OOS Band start*/
$optionsQty = 0;
$oosQty = 0;
foreach ($this->model_catalog_product->getProductOptions($result['product_id']) as $option) {
if ($option['type'] == 'select' || $option['type'] == 'radio' || $option['type'] == 'checkbox' || $option['type'] == 'image') {
foreach ($option['option_value'] as $option_value) {
$optionsQty++;
if ($option_value['quantity'] <=0) $oosQty++;
}
}
}
if ($optionsQty == $oosQty && $optionsQty > 0 ) {
$band_oos = true;
}
else $band_oos = false; /*OOS Band end*/
catalog/view/product/category.tpl
<div class="for_infine">
<?php if ($product['band_oos']) { ?>
<span class="band-oos"> </span>
<?php } ?>
<?php if ($product['band_free_shipping'] == 'Yes') { ?>
<span class="band-free-shipping"> </span>
<?php } ?>
<?php if ($product['band_new'] == 'Yes') { ?>
<span class="band-new"> </span>
<?php } ?>
<?php if ($product['band_coming_soon'] == 'Yes') { ?>
<span class="band-coming-soon"> </span>
<?php } ?>
<br />
catalog/controller/product/product.php
$this->data['options'] = array();
$optionsQty = 0;
$oosQty = 0;
foreach ($this->model_catalog_product->getProductOptions($this->request->get['product_id']) as $option) {
if ($option['type'] == 'select' || $option['type'] == 'radio' || $option['type'] == 'checkbox' || $option['type'] == 'image') {
$option_value_data = array();
foreach ($option['option_value'] as $option_value) {
$optionsQty++;
if ($option_value['quantity'] <=0) $oosQty++;
if ((float)$product_info['special']) {
$price_original = $product_info['special'];
}else {
$price_original = $product_info['price'];
}
catalog/view/product/product.tpl
<div class="left">
<div class="heading" style="line-height: 27px; font-size: 25px;"><?php echo $heading_title; ?></div>
<?php if ($thumb) { ?>
<div class="image">
<?php if ($band_oos ) { ?>
<div class="oos_tab_large top-right-cnr"></div>
<?php } ?>
<?php if ($band_free_shipping == 'Yes') { ?>
<div class="free_shipping_tab_large top-right-cnr"></div>
<?php } ?>
<?php if ($band_new == 'Yes') { ?>
<div class="new_tab_large top-right-cnr"></div>
<?php } ?>
<?php if ($band_coming_soon == 'Yes') { ?>
<div class="coming_soon_tab_large top-right-cnr"></div>
<?php } ?>
Opencart out of stock warning can be disabled in settings:
Settings -> Your Store -> Edit -> Options -> Show Out Of Stock Warning
If you need both Stock Warning and Bands to work together you need to rethink new products adding with 0 quantity.
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.
I would like to hide/show || disable/enable an input field based on the selected country in magento checkout page. I tried this code separated from magento and it's working perfectly but when I applied it in my magento, it's not working. I just edited the billing.phtml from IWD checkout extension and nothing from magento core.
here is the javascript:
$(function() {
var $cid = $(document.getElementById("billing:country_id")), // Country ID in magento
$custom = $(document.getElementById("billing:custom")); //my custom input field
$cid.change(function() {
if ($cid.val() == 'US') {
$custom.removeAttr('disabled');
alert('working1');
} else {
$custom.attr('disabled', 'disabled').val('');
alert('working2');
}
}).trigger('change');
});
Here's the sample billing form template from IWD / Magento:
<li class="fields">
<label for="billing:country_id" class="required"><em>*</em><?php echo $this->__('Country') ?></label>
<div class="input-box">
<?php echo $this->getCountryHtmlSelect('billing') ?>
</div>
</li>
<li class="fields">
<label for="billing:custom" class="required"><em>*</em><?php echo $this->__('Custom Field') ?></label>
<div class="input-box">
<input type="text" name="custom[custom]" value="<?php echo $this->htmlEscape($this->getQuote()->getCustom()) ?>" title="<?php echo $this->__('Custom Field') ?>" class="input-text custom_id" id="billing:custom" />
</div>
</li>
Country Select getCountryHtmlSelect function is a built-in mage function:
public function getCountryHtmlSelect($type)
{
$countryId = $this->getAddress()->getCountryId();
if (is_null($countryId)) {
$countryId = Mage::helper('core')->getDefaultCountry();
}
$select = $this->getLayout()->createBlock('core/html_select')
->setName($type.'[country_id]')
->setId($type.':country_id')
->setTitle(Mage::helper('checkout')->__('Country'))
->setClass('validate-select')
->setValue($countryId)
->setOptions($this->getCountryOptions());
if ($type === 'shipping') {
$select->setExtraParams('onchange="if(window.shipping)shipping.setSameAsBilling(false);"');
}
return $select->getHtml();
}
<input id="billing:country_id"></input>
<input id="billing:custom" disabled="disabled;"></input>
code
$(function() {
var $cid = $(document.getElementById("billing:country_id"));
$custom = $(document.getElementById("billing:custom"));
$cid.change(function() {
if ($cid.val() == 'US') {
$custom.prop('disabled', false);
console.log('working1');
} else {
$custom.prop('disabled', true).val("");
console.log('working2');
}
}).trigger('change');
});
http://codepen.io/anon/pen/dMqYgK?editors=1011