i have a dynamic form that show data from database and a javascript code to show and hide some fields but the javascript code works only the first result
here is php code
<?php
$arr = select::mobiles($id);
foreach ($arr as $aa) { ?>
<div class="col-sm-10">
<div class="col-sm-2 bring_right">
<input type="hidden" name="p_name2[<?php $counter; ?>]"
value="<?php echo $aa['name']; ?>"><?php echo $aa['name'] ?>
</div>
<div class="col-sm-4 bring_right">
<input type="radio" id="general_radio" name="">
<label for="">general</label>
<input type="radio" onclick="showMe('variant', this)" id="variant_radio" name="">
<label for="">variant</label>
</div>
<div class="col-sm-6 bring_right" id="variant" style="display: none">
<?php
$branches = select::mobile_branches();
// print_r($branches);
foreach ($branches as $b) {
?>
<div class="col-sm-4 bring_right"><label for=""><?php echo $b['name'] ?></label></div>
<div class="col-sm-8">
<select class="form-control input-sm"
name="p_value[<?php echo $aa['name']; ?>][<?php $counter; ?>]">
<?php
$pid = select::property($aa['name']);
$arr2 = select::properties($pid);
foreach ($arr2 as $aa2) { ?>
<option value="<?php echo $aa2['name'] ?>" style="direction:ltr">
<?php echo $aa2['name'] ?></option>
<?php }
$counter++; ?>
</select>
</div>
<?php } ?>
</div>
<div class="col-sm-3 bring_right" id="general">
<select multiple class="form-control input-sm"
name="p_value[<?php echo $aa['name']; ?>][
<?php $counter; ?>]">
<?php
$pid = select::property($aa['name']);
$arr2 = select::properties($pid);
foreach ($arr2 as $aa2) { ?>
<option value="
<?php echo $aa2['name'] ?>">
<?php echo $aa2['name'] ?></option>
<?php }
$counter++; ?>
</select>
</div>
</div>
<?php } ?>
and the javascript code is
<script type="text/javascript">
function showMe(it, box) {
var vis = (box.checked) ? "block" : "none";
document.getElementById(it).style.display = vis;
$('#general').hide();
}
</script>
any help please??
Hey I think I got your problem. In your code see this part
foreach ($arr as $aa) { ?>
......
<div class="col-sm-6 bring_right" id="variant" style="display: none">
Here you are having same id for multiple div just try following changes and you'll be able to do that
foreach ($arr as $key => $aa) { ?>
......
<input type="radio" onclick="showMe('variant<?php echo $key; ?>', this)" id="variant_radio" name="">
........
<div class="col-sm-6 bring_right" id="variant<?php echo $key; ?>" style="display: none">
Let me know if I am not getting your point or if it is not working.
Related
In the file filter.tpl in madule filters.
When select checkbox for filter, example: color=blue and size=3inch with filter_id=365,367, show all product with filter_id=356 or filter_id=367, show all product with filter_id in (365,367).
Now I want to select checkbox blue and size 3 (multi select), show only product with color=blue and size=3 and not show product with color blue or size 3.
If need to other data, say.
Help me for understand javascript code. Description for each line.
opencart 2.3.0.2
<div class="panel panel-default">
<div class="panel-heading"><?php echo $heading_title; ?></div>
<div class="list-group">
<?php foreach ($filter_groups as $filter_group) { ?>
<a class="list-group-item"><?php echo $filter_group['name']; ?></a>
<div class="list-group-item">
<div id="filter-group<?php echo $filter_group['filter_group_id']; ?>">
<?php foreach ($filter_group['filter'] as $filter) { ?>
<div class="checkbox">
<label>
<?php if (in_array($filter['filter_id'], $filter_category)) { ?>
<input type="checkbox" name="filter[]" value="<?php echo $filter['filter_id']; ?>" checked="checked" />
<?php echo $filter['name']; ?>
<?php } else { ?>
<input type="checkbox" name="filter[]" value="<?php echo $filter['filter_id']; ?>" />
<?php echo $filter['name']; ?>
<?php } ?>
</label>
</div>
<?php } ?>
</div>
</div>
<?php } ?>
</div>
<div class="panel-footer text-right">
<button type="button" id="button-filter" class="btn btn-primary"><?php echo $button_filter; ?></button>
</div>
</div>
<script type="text/javascript"><!--
$('#button-filter').on('click', function() {
filter = [];
$('input[name^=\'filter\']:checked').each(function(element) {
filter.push(this.value);
});
location = '<?php echo $action; ?>&filter=' + filter.join(',');
});
//--></script>
I have this code for Jquery i just started working with Jquery but i have a bit of knowledge with Javascript.
<script>
$(document).ready(function(){
$("#d_or_t").val('navbar');//<?php echo "cms18"; ?>
// if ('<?php $key ?>'== '<?php ?>') {};
});
$('#selector').on('change',function(){
//alert($(this).find("option:selected").html()) ;
var data = document.getElementById('url_option');
var current = $(this).find("option:selected").html();
alert(current);
//alert(current);
//(data.dataset.domains);
});
</script>
And my HTML select box is this one i have three of them and i want that when i change the URL select box the other 2 select box change to an data
<form action="php-json.php" id="form" method="post">
<select name="selector" id="selector" class="form-control">
<!-- opzoeken wat de colon : betekend daar -->
<?php foreach ($aUrls as $key => $value)
: ?>
<option id="url_option" data-domains="<?php echo $aDomains[$key]; ?>" data-template="<?php echo $aTemplates[$key]; ?>" value="<?php echo $value; ?>">
<?php echo $value;?>
</option>
<?php endforeach; ?>
</select>
</div>
<div class="col-xs-12 col-md-3 col-lg-3">
<select name="d_or_t" id="d_or_t" class="form-control">
<?php foreach ($aDomains as $key => $value) : ?>
<option value="<?php echo $value; ?>"><?php echo $value; ?></option><?php endforeach; ?>
</select>
</div>
<div class="col-xs-12 col-md-3 col-lg-3">
<select name="t_or_t" id="d_or_t" class="form-control">
<?php foreach ($aTemplates as $key => $value) : ?>
<option value="<?php echo $value; ?>"><?php echo $value;?></option><?php endforeach; ?>
</select>
</div>
<div class="col-xs-12 col-md-3 col-lg-3">
<button type="submit" class="btn btn-default" value="veranderen">Veranderen</button>
</div>
</div>
</form>
I am using one page checkout in my site.I used fadein and fadeout js when click on continue button. It is working fine in system and tab. But in mobile, when i click on continue button to go for next tab then it is not working seems that js is not calling at that time. I checked using alert() but no use.
I don't know whats the reason for this, Please see the code and tell me why it is not working in mobile:
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#first').click(function() {
jQuery(".row1").addClass("fade-in");
jQuery(".row1").removeClass("fade-out");
jQuery(".row2").addClass("fade-out");
jQuery(".row2").removeClass("fade-in");
jQuery(".row3").addClass("fade-in");
jQuery(".row3").removeClass("fade-out");
});
});
</script>
onepage.phtml
<script type="text/javascript" src="<?php echo $this->getSkinUrl('lotusbreath/onestepcheckout/mage/opcheckout.js') ?>"></script>
<script type="text/javascript" src="<?php echo $this->getSkinUrl('lotusbreath/onestepcheckout/opcheckout_override_mage.js') ?>"></script>
<?php //echo $this->getChildHtml("login");
$isAllowComment = Mage::getStoreConfig('lotusbreath_onestepcheckout/general/allowcomment');
?>
<script id="loader-template" type="text/x-handlebars-template">
<div class="osc-loader" id="osc-loader">
<div class="osc-loader-background"></div>
<div class="loading-mask" data-role="loader">
<div class="loader">
<img alt="{{imgAlt}}" src="{{icon}}">
<p>{{loaderText}}</p>
</div>
</div>
</div>
</script>
<script>
var loaderJson = {
imgAlt: '<?php echo $this->__("Please wait...");?>',
icon: '<?php echo $this->getSkinUrl('lotusbreath/onestepcheckout/images/ajax-loader_3.gif');?>',
loaderText: '<?php echo $this->__("Please wait...");?>'
};
</script>
<div class="lt-checkoutpage layout-2col " id="checkoutSteps">
<?php echo $this->getChildHtml("loginform");?>
<form id="checkout_form" name="checkout_form">
<div class="grid">
<?php if ($pageTitle = Mage::getStoreConfig('lotusbreath_onestepcheckout/content/pagetitle')):?>
<h2 class="page-title"><?php echo $pageTitle;?></h2>
<?php endif;?>
<?php if ($pageDescription = Mage::getStoreConfig('lotusbreath_onestepcheckout/content/pagedescription')):?>
<p class="page-description"><?php echo $pageDescription;?></p>
<?php endif;?>
<?php if (!Mage::helper('customer')->isLoggedIn()) : ?>
<p><?php echo $this->__("Already registered? Please");?>
<a class="login_link" href="javascript:void(0);" id="loginFrmDlgO"> <?php echo $this->__("log in");?> </a></p>
<?php endif; ?>
<?php if (Mage::getStoreConfig('lotusbreath_onestepcheckout/content/display_bottom_static_block')): ?>
<?php echo $this->getLayout()->createBlock('cms/block')->setBlockId('onestepcheckout_top_block')->toHtml(); ?>
<?php endif;?>
<div class="row no-padding padding-mobile">
<div class="four columns">
<h3 class="ptitle">
<?php if ($billingHeader = Mage::getStoreConfig('lotusbreath_onestepcheckout/content/billing_header')):?>
<?php echo $billingHeader;?>
<?php else:?>
1. <?php echo $this->__("Billing Information"); ?>
<?php endif;?>
</h3>
<?php echo $this->getChildHtml('billing'); ?>
<div id="shipping-area" style="display: none;">
<h3 class="ptitle">
<?php if ($shippingHeader = Mage::getStoreConfig('lotusbreath_onestepcheckout/content/shipping_address_header')):?>
<?php echo $shippingHeader;?>
<?php else:?>
<?php echo $this->__("Shipping Information");?>
<?php endif;?>
</h3>
<?php
echo $this->getChildHtml('shipping'); ?>
</div>
</div>
<div class="eight columns">
<div class="row">
<?php if(!$this->getQuote()->isVirtual()):?>
<div class="five columns">
<h3 class="ptitle">
<?php if ($shippingMethodHeader = Mage::getStoreConfig('lotusbreath_onestepcheckout/content/shipping_method_header')):?>
<?php echo $shippingMethodHeader;?>
<?php else:?>
2. <?php echo $this->__("Shipping Method"); ?>
<?php endif;?>
</h3>
<div id="shipping_partial">
<?php echo $this->getChildHtml('shipping_method'); ?>
</div>
</div>
<?php endif;?>
<div class="seven columns">
<h3 class="ptitle">
<?php if ($paymentMethodHeader = Mage::getStoreConfig('lotusbreath_onestepcheckout/content/payment_method_header')):?>
<?php echo $paymentMethodHeader;?>
<?php else:?>
3. <?php echo $this->__("Payment Method");?>
<?php endif;?>
</h3>
<div id="payment_partial">
<?php echo $this->getChildHtml('payment'); ?>
</div>
</div>
</div>
<div class="col-3">
<?php if( Mage::getStoreConfig('lotusbreath_onestepcheckout/general/allowshowgiftmessage') ):?>
<?php if (!$this->getQuote()->isVirtual()): ?>
<?php echo $this->helper('giftmessage/message')->getInline('onepage_checkout', $this->getQuote(), $this->getDontDisplayContainer()) ?>
<?php endif; ?>
<?php endif;?>
<?php if( Mage::getStoreConfig('lotusbreath_onestepcheckout/general/allowshowcoupon') ):?>
<div id="coupon_patial">
<h3 class="ptitle"><?php echo $this->__("Discount Codes");?></h3>
<?php echo $this->getChildHtml('coupon'); ?>
</div>
<?php endif;?>
<?php if( Mage::getStoreConfig('lotusbreath_onestepcheckout/general/allowcomment') ):?>
<div id="comment-patial">
<h3 class="ptitle"><?php echo $this->__("Comment");?></h3>
<ul class="form-list">
<li class="fields">
<div class="input-box">
<textarea name="order_comment" placeholder="<?php echo $this->__("Type comment here");?>" class="input-text"></textarea>
</div>
</li>
</ul>
</div>
<?php endif;?>
<h3 class="ptitle">
<?php if ($reviewOrderHeader = Mage::getStoreConfig('lotusbreath_onestepcheckout/content/review_header')):?>
<?php echo $reviewOrderHeader;?>
<?php else:?>
4. <?php echo $this->__("Review Order"); ?>
<?php endif;?>
</h3>
<div id="review_partial">
<?php echo $this->getData("reviewHtml"); ?>
<?php echo $this->getChildHtml('review'); ?>
</div>
</div>
</div>
</div>
<div class="clearfix"></div>
<?php if (Mage::getStoreConfig('lotusbreath_onestepcheckout/content/display_bottom_static_block')): ?>
<?php echo $this->getLayout()->createBlock('cms/block')->setBlockId('onestepcheckout_bottom_block')->toHtml(); ?>
<?php endif;?>
</div>
</form>
</div>
billing.phtml
<?php
$relatedLocationFields = Mage::getStoreConfig("lotusbreath_onestepcheckout/general/location_fields");
if ($relatedLocationFields){
$relatedLocationFields = explode(',',$relatedLocationFields);
}else{
$relatedLocationFields = array('postcode', 'country_id', 'region_id','city');
}
$isAllowGuest = Mage::helper('checkout')->isAllowedGuestCheckout(Mage::getSingleton('checkout/session')->getQuote());
$isCheckEmailExists = false;
if (!$isAllowGuest && !Mage::getSingleton('customer/session')->isLoggedIn())
$isCheckEmailExists = true;
?>
<div style="color:red;" id="billing-error" class="error"></div>
<fieldset>
<ul class="form-list">
<?php if ($this->customerHasAddresses()): ?>
<li class="already-add">
<p><?php echo $this->__('Select a billing address from your address book or enter a new address.') ?></p>
<div class="input-box field">
<?php echo $this->getAddressesHtmlSelect('billing') ?>
</div>
</li>
<?php endif; ?>
<li id="billing-new-address-form"<?php if ($this->customerHasAddresses()): ?> style="display:none;"<?php endif; ?>>
<fieldset>
<input type="hidden" name="billing[address_id]" value="<?php echo $this->getAddress()->getId() ?>"
id="billing:address_id"/>
<ul>
<li class="fields"><?php echo $this->getLayout()->createBlock('customer/widget_name')->setObject($this->getAddress()->getFirstname() ? $this->getAddress() : $this->getQuote()->getCustomer())->setForceUseCustomerRequiredAttributes(!$this->isCustomerLoggedIn())->setFieldIdFormat('billing:%s')->setFieldNameFormat('billing[%s]')->toHtml() ?></li>
<?php $_streetValidationClass = $this->helper('lotusbreath_onestepcheckout')->getAttributeValidationClass('street'); ?>
<li class="fields">
</label>
<div class="input-box field input-box-wide">
<select id="billing:company" name="billing[company]" class="input-text required-entry" >
<option value="">Select Address Type</option>
<option value="Home Address">Home Address</option>
<option value="Office Address">Office Address</option>
</select>
</div>
<div class="input-box field input-box-wide">
<input placeholder="Address Line 1" type="text" title="<?php echo $this->__('Address Line 1') ?>"
name="billing[street][]" id="billing:street1"
value="<?php echo $this->escapeHtml($this->getAddress()->getStreet(1)) ?>"
class="input-text <?php echo $_streetValidationClass ?>"/>
</div>
<?php $_streetValidationClass = trim(str_replace('required-entry', '', $_streetValidationClass)); ?>
<?php for ($_i = 2, $_n = $this->helper('customer/address')->getStreetLines(); $_i <= $_n; $_i++): ?>
<div class="input-box field input-box-wide">
<input placeholder="Address Line 2" type="text" title="<?php echo $this->__('Street Address %s', $_i) ?>"
name="billing[street][]" id="billing:street<?php echo $_i ?>"
value="<?php echo $this->escapeHtml($this->getAddress()->getStreet($_i)) ?>"
class="input-text <?php echo $_streetValidationClass ?>"/>
</div>
<?php endfor; ?>
</li>
<?php
$isShowVATNumber = Mage::getStoreConfig('lotusbreath_onestepcheckout/billingaddress/allowshowvatnumberfield');
if ($isShowVATNumber && $this->helper('lotusbreath_onestepcheckout')->isVatAttributeVisible()) :
//if ($isShowVATNumber):
?>
<li class="fields">
<div class="field">
<label for="billing:vat_id" class="required">
<em>*</em>
<?php echo $this->__('VAT Number') ?></label>
<div class="input-box">
<input type="text" id="billing:vat_id" name="billing[vat_id]"
value="<?php echo $this->escapeHtml($this->getAddress()->getVatId()) ?>"
title="<?php echo $this->__('VAT Number') ?>"
class="input-text <?php echo $this->helper('lotusbreath_onestepcheckout')->getAttributeValidationClass('vat_id') ?>"/>
</div>
</div>
</li>
<?php endif; ?>
<li class="fields">
<div class="field">
<?php
$changeLocationClass = '';
if (in_array('city', $relatedLocationFields))
$changeLocationClass = 'change_location_field';
?>
<div class="input-box">
<input placeholder="City" type="text" title="<?php echo $this->__('City') ?>" name="billing[city]"
value="<?php echo $this->escapeHtml($this->getAddress()->getCity()) ?>"
class="<?php echo $changeLocationClass;?> input-text <?php echo $this->helper('lotusbreath_onestepcheckout')->getAttributeValidationClass('city') ?>"
id="billing:city"/>
</div>
</div>
<div class="field region ">
<div class="input-box">
<?php
$changeLocationClass = '';
if (in_array('region_id', $relatedLocationFields))
$changeLocationClass = 'change_location_field';
?>
<select id="billing:region_id" name="billing[region_id]"
title="<?php echo $this->__('State/Province') ?>" class="validate-select"
class="<?php echo $changeLocationClass;?>"
style="display:none;"
<?php if (Mage::getStoreConfig('general/region/display_all') == false):?>disabled="disabled"<?php endif; ?>
>
<option
value=""><?php echo $this->__('Please select region, state or province') ?></option>
</select>
<script type="text/javascript">
//<![CDATA[
$('billing:region_id').setAttribute('defaultValue', "<?php echo $this->getAddress()->getRegionId() ?>");
//]]>
</script>
<input type="text" id="billing:region" name="billing[region]"
value="<?php echo $this->escapeHtml($this->getAddress()->getRegion()) ?>"
title="<?php echo $this->__('State/Province') ?>"
class=" <?php echo $changeLocationClass;?> input-text <?php echo $this->helper('lotusbreath_onestepcheckout')->getAttributeValidationClass('region') ?>"
style="display:none;"
<?php if (Mage::getStoreConfig('general/region/display_all') == false):?>disabled="disabled"<?php endif; ?>
/>
</div>
</div>
</li>
<li class="fields">
<div class="field">
<div class="input-box">
<?php
$changeLocationClass = '';
if (in_array('postcode', $relatedLocationFields))
$changeLocationClass = 'change_location_field';
?>
<input placeholder="Zip code" type="text" title="<?php echo $this->__('Zip code') ?>"
name="billing[postcode]" id="billing:postcode"
value="<?php echo $this->escapeHtml($this->getAddress()->getPostcode()) ?>"
class="<?php echo $changeLocationClass; ?> input-text validate-zip-international <?php echo $this->helper('lotusbreath_onestepcheckout')->getAttributeValidationClass('postcode') ?>"/>
</div>
</div>
<div class="field">
<div class="input-box">
<?php echo $this->getCountryHtmlSelect('billing') ?>
</div>
<?php
$changeLocationClass = '';
if (in_array('country_id', $relatedLocationFields)):
$changeLocationClass = 'change_location_field';
?>
<script>
var billingCountry = document.getElementById("billing:country_id");
billingCountry.setAttribute('class', billingCountry.getAttribute('class') + ' <?php echo $changeLocationClass;?>');
</script>
<?php endif;?>
<?php
$changeLocationClass = '';
if (in_array('region_id', $relatedLocationFields)):
$changeLocationClass = 'update-location-region-class';
?>
<script>
var billingCountry = document.getElementById("billing:country_id");
billingCountry.setAttribute('class', billingCountry.getAttribute('class') + ' <?php echo $changeLocationClass;?>');
</script>
<?php endif;?>
</div>
</li>
<li class="fields">
<div class="field">
<div class="input-box">
<input placeholder="Phone No" type="text" name="billing[telephone]"
value="<?php echo $this->escapeHtml($this->getAddress()->getTelephone()) ?>"
title="<?php echo $this->__('Phone No') ?>"
class="input-text <?php echo $this->helper('lotusbreath_onestepcheckout')->getAttributeValidationClass('telephone') ?>"
id="billing:telephone"/>
</div>
</div>
<?php if (Mage::getStoreConfig('lotusbreath_onestepcheckout/billingaddress/allowshowfaxfield')): ?>
<div class="field">
<label for="billing:fax"><?php echo $this->__('Fax') ?></label>
<div class="input-box">
<input type="text" name="billing[fax]"
value="<?php echo $this->escapeHtml($this->getAddress()->getFax()) ?>"
title="<?php echo $this->__('Fax') ?>"
class="input-text <?php echo $this->helper('lotusbreath_onestepcheckout')->getAttributeValidationClass('fax') ?>"
id="billing:fax"/>
</div>
</div>
<?php endif; ?>
</li>
<?php if (!$this->isCustomerLoggedIn()): ?>
<?php $_dob = $this->getLayout()->createBlock('customer/widget_dob') ?>
<?php $_gender = $this->getLayout()->createBlock('customer/widget_gender') ?>
<?php if ($_dob->isEnabled() || $_gender->isEnabled()): ?>
<li class="fields">
<?php if ($_dob->isEnabled()): ?>
<div class="field">
<?php echo $_dob->setDate($this->getQuote()->getCustomerDob())->setFieldIdFormat('billing:%s')->setFieldNameFormat('billing[%s]')->toHtml() ?>
</div>
<?php endif; ?>
<?php if ($_gender->isEnabled()): ?>
<div class="field">
<?php echo $_gender->setGender($this->getQuote()->getCustomerGender())->setFieldIdFormat('billing:%s')->setFieldNameFormat('billing[%s]')->toHtml() ?>
</div>
<?php endif ?>
</li>
<?php endif ?>
<?php $_taxvat = $this->getLayout()->createBlock('customer/widget_taxvat') ?>
<?php if ($_taxvat->isEnabled()): ?>
<li>
<?php echo $_taxvat->setTaxvat($this->getQuote()->getCustomerTaxvat())->setFieldIdFormat('billing:%s')->setFieldNameFormat('billing[%s]')->toHtml() ?>
</li>
<?php endif ?>
<?php if ($isAllowGuest):?>
<!--<li class="fields">
<input type="checkbox" name="billing[create_new_account]"
value=1/> <?php echo $this->__("Register new account"); ?>?
</li>-->
<?php else: ?>
<p><strong><?php echo $this->__("Register new account - Enter your password:"); ?></strong></p>
<?php endif; ?>
<?php $passwordLiId = $isAllowGuest ? 'register-customer-password' : ''; ?>
<li class="fields" id="<?php echo $passwordLiId;?>">
<div class="field">
<label for="billing:customer_password"
class="required"><em>*</em><?php echo $this->__('Password') ?></label>
<div class="input-box">
<input type="password" name="billing[customer_password]"
id="billing:customer_password" title="<?php echo $this->__('Password') ?>"
class="input-text required-entry validate-password"/>
</div>
</div>
<div class="field">
<label for="billing:confirm_password"
class="required"><em>*</em><?php echo $this->__('Confirm Password') ?></label>
<div class="input-box">
<input type="password" name="billing[confirm_password]"
title="<?php echo $this->__('Confirm Password') ?>"
id="billing:confirm_password"
class="input-text required-entry validate-cpassword"/>
</div>
</div>
</li>
<?php endif; ?>
<?php if ($this->isCustomerLoggedIn() && $this->customerHasAddresses()): ?>
<li class="control">
<input type="checkbox" name="billing[save_in_address_book]" value="1"
title="<?php echo $this->__('Save in address book') ?>"
id="billing:save_in_address_book"
onchange="if(window.shipping) shipping.setSameAsBilling(false);"<?php if ($this->getAddress()->getSaveInAddressBook()): ?> checked="checked"<?php endif; ?>
class="checkbox"/><label class="same-add"
for="billing:save_in_address_book"><?php echo $this->__('WANT SAME ADD, FOR MY BILLING') ?></label>
</li>
<?php else: ?>
<li class="no-display"><input type="hidden" name="billing[save_in_address_book]" value="1"/>
</li>
<?php endif; ?>
<?php echo $this->getChildHtml('form.additional.info'); ?>
</ul>
</fieldset>
</li>
</ul>
<?php if (!$this->canShip() || $alwaysusesameasbilling == true): ?>
<input type="hidden" name="billing[use_for_shipping]" value="1"/>
<?php endif; ?>
<input type="button" name="button" value="Continue" class="con button gap" id="first">
</fieldset>
I am trying to get the id of a selection of a select box, however was unable'm confused, can someone help me?
Code of Selectbox:
Edited SelectBox Code :
<li class="fields">
<div>
<div class="field">
<div class="form-group">
<label class="required" for="type_id"><?php echo $this->__('Occasion') ?><em>*</em></label>
<div class="input-box">
<select id="type_id" name="type_id" title="<?php echo $this->__('Occasion') ?>" class="validate-select form-control" onChange="criaDados(), showId(<?php $this->getId() ?>)" <?php if (!is_null ($_e->getId())) { echo "style='display: none;'"; } ?> >
<option value=""><?php echo $this->__('Please select occasion') ?></option>
<?php foreach($_e->getTypes() as $k=>$v):?>
<option value="<?php echo $k ?>" <?php if($_e->getTypeId() == $k) echo 'selected'?>><?php echo $this->htmlEscape($v) ?></option>
<?php endforeach; ?>
</select>
<input type="text" value="<?php echo $_e->getTypes()[$_e->getTypeId()] ?>" class="form-control" disabled <?php if (is_null ($_e->getId())) { echo "style='display: none;'"; } ?> />
</div>
</div>
</div>
<div class="field">
<div class="form-group">
<label class="required" for="date"><?php echo $this->__('Date') ?><em>*</em></label>
<div class="input-box">
<div class="input-range input-date">
<?php echo $this->getDateInput($_e->getDate()) ?>
</div>
</div>
</div>
</div>
</div>
</li>
Edited Javascript
function showId(id)
{
var id_val = $("#" + id).val();
alert(id_val);
}
if you want to get the id of the selected item then add an onchange event in select
like onchange="showid(this)"
then javascript
function showid(ids) {
console.log(ids[ids.selectedIndex].value); // get value
console.log(ids[ids.selectedIndex].id); // get id
}
if you want jquery solution then do something like below
$('#type_id').change(function(){
alert($(this).find('option:selected').attr('id'));
});
You can replace content in function parameter with this.id like below
<div class="field">
<div class="form-group">
<label class="required" for="type_id"><?php echo $this->__('Occasion') ?><em>*</em></label>
<div class="input-box">
<select id="type_id" name="type_id" title="<?php echo $this->__('Occasion') ?>" class="validate-select form-control" onChange="criaDados(), showId('this.id') { echo "style='display: none;'"; } ?> >
<option value=""><?php echo $this->__('Please select occasion') ?></option>
<?php foreach($_e->getTypes() as $k=>$v):?>
<option value="<?php echo $k ?>" <?php if($_e->getTypeId() == $k) echo 'selected'?>><?php echo $this->htmlEscape($v) ?></option>
<?php endforeach; ?>
</select>
<input type="text" value="<?php echo $_e->getTypes()[$_e->getTypeId()] ?>" class="form-control" disabled <?php if (is_null ($_e->getId())) { echo "style='display: none;'"; } ?> />
</div>
</div>
</div>
Then you can use it
function showId(id)
{
var id_val = $("#" + id).val();
alert(id_val);
}
not sure what you mean by 'get' but I'm guessing JavaScript
document.getElementById('type-id');
showId(document.getElementById('type-id'));
I see you use Bootstrap, so jQuery is not far away.
How about this:
function showId(id){
var v = $("#" + id).val();
alert(v);
}
or something like this:
$( "#"+id+" option:selected" ).text();
Second one gets the selected text, the other one the selected value of the selected option.
It may seems that this question is repeated but my question is little different and i did'nt find its answer in other questions so i am starting it as a new thread.
I have a form where there is a link on clicking which will add the html content on the div inside the form.user can add multiple times. but when i submit the form. The field added for the first time using javascript is submitted through the form but if i add multiple times then the data of second and after form is not posted through form.
I have posted my code below can anyone help me to find and solve the issue.
<form action="<?php echo $this->getUrl('children/index/addChild') ?>" method="post" id="form-validate" autocomplete="off">
<div class="fieldset">
<?php //echo $this->getBlockHtml('formkey')?>
<h2 class="legend"><?php echo $this->__('Child Name') ?></h2>
<?php if(sizeof($model)==0): ?>
Add Child
<div id="child" style="display:none;">
<li>
<div class="field">
<label for="firstname" class="required"><em>*</em><?php echo $this->__('First Name') ?></label>
<div class="input-box">
<input type="text" name="firstname" id="firstname" value="<?php ?>" title="<?php echo $this->__('First Name') ?>" class="input-text required-entry" />
</div>
</div>
<div class="field">
<label for="lastname" class="required"><em>*</em><?php echo $this->__('Last Name') ?></label>
<div class="input-box">
<input type="text" name="lastname" id="lastname" value="<?php ?>" title="<?php echo $this->__('Last Name') ?>" class="input-text required-entry" />
</div>
</div>
</li>
<li>
<div class="field">
<label for="schoolname" class="required"><em>*</em><?php echo $this->__('School Name') ?></label>
<div class="input-box">
<select id='schoolname' name='schoolname'>
<option value="0">Select School</option>
<?php foreach ($schools as $key => $school): ?>
<option value="<?php echo $school['school_id']; ?>"><?php echo $school['school_name'] ?></option>
<?php endforeach;?>
</select>
</div>
</div>
<div class="field">
<label for="year" class="required"><em>*</em><?php echo $this->__('Year') ?></label>
<div class="input-box">
<input type="text" name="year" id="year" value="<?php ?>" title="<?php echo $this->__('Year') ?>" class="input-text required-entry" />
</div>
</div>
<div class="field">
<label for="class"><?php echo $this->__('Class(if applicable)') ?></label>
<div class="input-box">
<input type="text" name="class" id="class" value="<?php ?>" title="<?php echo $this->__('Class') ?>" class="input-text" />
</div>
</div>
</li>
<button type="submit" title="<?php echo $this->__('Save') ?>" class="button"><span><span><?php echo $this->__('Save') ?></span></span></button>
</div>
<?php else: ?>
<?php $i=1;
foreach ($model as $key => $value): ?>
<div id="child">
<?php
$arr = array();
$id= $value['child_id'];
?>
<!-- <button type="button" id="removechild">Remove Child</button> -->
Remove Child
<li>
<input type="hidden" value="<?php echo $id; ?>" name="childid<?php echo $i ?>" />
<div class="field">
<label for="firstname<?php echo $i ?>" class="required"><em>*</em><?php echo $this->__('First Name') ?></label>
<div class="input-box">
<input type="text" name="firstname<?php echo $i ?>" id="firstname<?php echo $i ?>" value="<?php echo $value["firstname"]; ?>" title="<?php echo $this->__("First Name") ?>" class="input-text required-entry" />
</div>
</div>
<div class="field">
<label for="lastname<?php echo $i ?>" class="required"><em>*</em><?php echo $this->__('Last Name') ?></label>
<div class="input-box">
<input type="text" name="lastname<?php echo $i ?>" id="lastname<?php echo $i ?>" value="<?php echo $value['lastname']; ?>" title="<?php echo $this->__('Last Name') ?>" class="input-text required-entry" />
</div>
</div>
</li>
<li>
<div class="field">
<label for="schoolname<?php echo $i ?>" class="required"><em>*</em><?php echo $this->__('School Name') ?></label>
<div class="input-box">
<select id='schoolname<?php echo $i ?>' name='schoolname<?php echo $i ?>' value='<?php echo $value['school_id'] ?>' >
<option value="0">Select School</option>
<?php foreach ($schools as $key => $school): ?>
<option value="<?php echo $school['school_id']; ?>" <?php if($school['school_id']==$value['school_id']){echo "selected" ;} ?> ><?php echo $school['school_name'] ?></option>
<?php endforeach;?>
</select>
</div>
</div>
<div class="field">
<label for="year<?php echo $i ?>" class="required"><em>*</em><?php echo $this->__('Year') ?></label>
<div class="input-box">
<input type="text" name="year<?php echo $i ?>" id="year<?php echo $i ?>" value="<?php echo $value['age']; ?>" title="<?php echo $this->__('Year') ?>" class="input-text required-entry" />
</div>
</div>
<div class="field">
<label for="class<?php echo $i ?>"><?php echo $this->__('Class(if applicable)') ?></label>
<div class="input-box">
<input type="text" name="class<?php echo $i ?>" id="class<?php echo $i ?>" value="<?php echo $value['class']; ?>" title="<?php echo $this->__('Class') ?>" class="input-text" />
</div>
</div>
</li>
</div>
<?php $i++; ?>
<?php endforeach; ?>
<input type="hidden" value="<?php echo $i; ?>" name="count" />
<div id="addition"></div>
Add Another Child
<input type="hidden" id="test" value="0" name="test"/>
<button type="submit" title="<?php echo $this->__('Save') ?>" class="button"><span><span><?php echo $this->__('Save') ?></span></span></button>
<?php endif; ?>
</form>
and the script is
function duplicate(){
var id=document.getElementById('test').value;
var div = document.createElement('div');
div.className = "row"+id;
div.innerHTML = '<label for="firstname" class="required"><em>*</em><?php echo $this->__("First Name") ?></label><div class="input-box"><input type="text" name="firstname'+id+'" id="firstname'+id+'" title="<?php echo $this->__("First Name") ?>" class="input-text required-entry" /></div><label for="lastname" class="required"><em>*</em><?php echo $this->__("Last Name") ?></label><div class="input-box"><input type="text" name="lastname'+id+'" id="lastname'+id+'" title="<?php echo $this->__("Last Name") ?>" class="input-text required-entry" /></div><label for="schoolname" class="required"><em>*</em><?php echo $this->__("School Name") ?></label><div class="input-box"><select id="schoolname'+id+'" name="schoolname'+id+'"><option value="0">Select School</option><?php foreach ($schools as $key => $school): ?><option value="<?php echo $school["school_id"]; ?>" <?php if($school["school_id"]==$value["school_id"]){echo "selected" ;} ?> ><?php echo $school["school_name"] ?></option><?php endforeach;?></select></div><label for="year" class="required"><em>*</em><?php echo $this->__("Year") ?></label><div class="input-box"><input type="text" name="year'+id+'" id="year'+id+'" title="<?php echo $this->__("Year") ?>" class="input-text required-entry" /></div><label for="class"><?php echo $this->__("Class(if applicable)") ?></label><div class="input-box"><input type="text" name="class'+id+'" id="class'+id+'" title="<?php echo $this->__("Class") ?>" class="input-text" /></div>';
document.getElementById('addition').appendChild(div);
document.getElementById('test').value= ++id;
}
Do not bother about the jumbled code, I just want to add the html in javascript to div named "addition".
Let me explain my scenario more clearly.There is a link to "Add another Child" when i click this link there appear the html block which is inside javascript to the div "addition".I also can add multiple child. but while submitting only one child is submitted.
Can anyone help please.Any suggestions are appreciated.
Refer this jsfiddle. It has submit handler which serializes your data and sends it to the server.
$('#form-validate').on('submit', function (e) {
//prevent the default submithandling
e.preventDefault();
alert($(this).serialize())
//send the data of 'this' (the matched form) to yourURL
$.post('yourSubmitUrl.php', $(this).serialize());
});