Develop Reference

Using jQuery to check a box generated from php

I am attempting to 'check' the the 'AC:Front' box from a button click on the below website. I tried changing the checkbox to 'checked' and I also tried changing the encompassing to class="checked".
The goal is to eventually collect the inputted VIN, run it through a decoder and use the data to fill the page.
Here is the website
HTML
<div class="stm-single-feature">
<div class="heading-font">Comfort</div>
<div class="feature-single">
<label>
<input type="checkbox" value="A/C: Front" name="stm_car_features_labels[]"/>
<span>A/C: Front</span>
</label>
</div>
CSS
div.checker span.checked {
background-position: -16px 0; }
PHP
<?php
if ($items) {
if (!empty($id)) {
$features_car = get_post_meta($id, 'additional_features', true);
$features_car = explode(',', $features_car);
} else {
$features_car = array();
}
foreach ($items as $item) { ?>
<?php if(isset($item['tab_title_single'])): ?>
<div class="stm-single-feature">
<div class="heading-font"><?php echo $item['tab_title_single']; ?></div>
<?php $features = explode(',', $item['tab_title_labels']); ?>
<?php if (!empty($features)): ?>
<?php foreach ($features as $feature): ?>
<?php
$checked = '';
if (in_array($feature, $features_car)) {
$checked = 'checked';
};
?>
<div class="feature-single">
<label>
<input type="checkbox" value="<?php echo esc_attr($feature); ?>"
name="stm_car_features_labels[]" <?php echo $checked; ?>/>
<span><?php echo esc_attr($feature); ?></span>
</label>
</div>
<?php endforeach; ?>
<?php endif; ?>
</div>
<?php endif; ?>
<?php }
}?>
JavaScript
<script type="text/javascript">
jQuery(function($) {
$("#generateVin").on("click", function() {
var $checkbox = $("input[type=checkbox]").eq(1);
$checkbox.prop("checked", true);
$checkbox.parent().addClass("checked");
});
});
</script>

Issue in download div as a PDF using javascript?

I am trying to download specific div as a PDF but it is not showing complete part of the div.it is only showing first two columns and not showing complete height and width of the div. How can i export complete div with HTML output of the div?. it will be better if page is directly mail to receiver in PDF format.
my div is look like this
[1]: [https://i.stack.imgur.com/9t012.png][1]
after export it in pdf it looking like this
[2]: [https://i.stack.imgur.com/eReu9.png][1]
my code is,
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.debug.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
<script type="text/javascript" src="jspdf.min.js"></script>
<script type="text/javascript">
function genPDF()
{
html2canvas(document.body,{
onrendered:function(canvas){
var img=canvas.toDataURL("image/png");
var doc = new jsPDF();
doc.addImage(img,'JPEG',20,20);
doc.save('test.pdf');
}
});
}
</script>
<?php if ($this->helper('wishlist')->isAllow()) : ?>
<div class="my-wishlist">
<div class="page-title title-buttons">
<?php if ($this->helper('wishlist')->isRssAllow() && $this->hasWishlistItems()): ?>
<?php echo $this->__('RSS Feed') ?>
<?php endif; ?>
<h1><?php echo $this->getTitle(); ?></h1>
</div>
<?php echo $this->getMessagesBlock()->toHtml() ?>
<form id="wishlist-view-form" action="<?php echo $this->getUrl('*/*/update', array('wishlist_id' => $this->getWishlistInstance()->getId())) ?>" method="post">
<?php echo $this->getChildHtml('top'); ?>
<div class="fieldset">
<?php if ($this->hasWishlistItems()): ?>
<?php echo $this->getBlockHtml('formkey');?>
<?php $this->getChild('items')->setItems($this->getWishlistItems()); ?>
<?php echo $this->getChildHtml('items');?>
<script type="text/javascript">decorateTable('wishlist-table')</script>
<?php else: ?>
<p class="wishlist-empty"><?php echo $this->__('You have no items in your quote.') ?></p>
<?php endif ?>
<div class="buttons-set buttons-set2">
<?php echo $this->getChildHtml('control_buttons');?>
</div>
</div>
</form>
<form id="wishlist-allcart-form" action="<?php echo $this->getUrl('*/*/allcart') ?>" method="post">
<?php echo $this->getBlockHtml('formkey') ?>
<div class="no-display">
<input type="hidden" name="wishlist_id" id="wishlist_id" value="<?php echo $this->getWishlistInstance()->getId() ?>" />
<input type="hidden" name="qty" id="qty" value="" />
</div>
</form>
<script type="text/javascript">
//<![CDATA[
var wishlistForm = new Validation($('wishlist-view-form'));
var wishlistAllCartForm = new Validation($('wishlist-allcart-form'));
function calculateQty() {
var itemQtys = new Array();
$$('#wishlist-view-form .qty').each(
function (input, index) {
var idxStr = input.name;
var idx = idxStr.replace( /[^\d.]/g, '' );
itemQtys[idx] = input.value;
}
);
$$('#qty')[0].value = JSON.stringify(itemQtys);
}
function addAllWItemsToCart() {
calculateQty();
wishlistAllCartForm.form.submit();
}
//]]>
</script>
</div>
Download PDF
<?php echo $this->getChildHtml('bottom'); ?>
<div class="buttons-set">
<p class="back-link"><small>« </small><?php echo $this->__('Back') ?></p>
</div>
<?php endif ?>
Thanks in advance
This is exact div which i am trying to export
<div class="my-wishlist">
<div class="page-title title-buttons">
<?php if ($this->helper('wishlist')->isRssAllow() && $this->hasWishlistItems()): ?>
<?php echo $this->__('RSS Feed') ?>
<?php endif; ?>
<h1><?php echo $this->getTitle(); ?></h1>
</div>
<?php echo $this->getMessagesBlock()->toHtml() ?>
<form id="wishlist-view-form" action="<?php echo $this->getUrl('*/*/update', array('wishlist_id' => $this->getWishlistInstance()->getId())) ?>" method="post">
<?php echo $this->getChildHtml('top'); ?>
<div class="fieldset">
<?php if ($this->hasWishlistItems()): ?>
<?php echo $this->getBlockHtml('formkey');?>
<?php $this->getChild('items')->setItems($this->getWishlistItems()); ?>
<?php echo $this->getChildHtml('items');?>
<script type="text/javascript">decorateTable('wishlist-table')</script>
<?php else: ?>
<p class="wishlist-empty"><?php echo $this->__('You have no items in your quote.') ?></p>
<?php endif ?>
<div class="buttons-set buttons-set2">
<?php echo $this->getChildHtml('control_buttons');?>
</div>
</div>
</form>
<form id="wishlist-allcart-form" action="<?php echo $this->getUrl('*/*/allcart') ?>" method="post">
<?php echo $this->getBlockHtml('formkey') ?>
<div class="no-display">
<input type="hidden" name="wishlist_id" id="wishlist_id" value="<?php echo $this->getWishlistInstance()->getId() ?>" />
<input type="hidden" name="qty" id="qty" value="" />
</div>
</form>
<script type="text/javascript">
//<![CDATA[
var wishlistForm = new Validation($('wishlist-view-form'));
var wishlistAllCartForm = new Validation($('wishlist-allcart-form'));
function calculateQty() {
var itemQtys = new Array();
$$('#wishlist-view-form .qty').each(
function (input, index) {
var idxStr = input.name;
var idx = idxStr.replace( /[^\d.]/g, '' );
itemQtys[idx] = input.value;
}
);
$$('#qty')[0].value = JSON.stringify(itemQtys);
}
function addAllWItemsToCart() {
calculateQty();
wishlistAllCartForm.form.submit();
}
//]]>
</script>
</div>

How to differentiate each submit button in a foreach loop

My code:
<?php
require_once 'core/init.php';
if($result = $db->query ("SELECT * from countries")) {
if($count = $result->num_rows) {
$rows = $result->fetch_all(MYSQLI_ASSOC);
}
}
?>
<div class="region">
<h1>Europe</h1>
<ul class="country" style ="list-style-type:none">
<?php foreach ($rows as $key => $row) { ?>
<li>
<a href=""=<?php echo $row['country_id']; ?>">
<a href=""=<?php echo $row['region_id']; ?>">
<?php echo $row['country_name']; ?></a> <br>
<?php
if (isset($_FILES['country_img']) === true) {
if (empty($_FILES['country_img']['name']) === true) {
echo 'please choose a file!';
print_r ($_POST);
} else {
$allowed = array('jpg', 'jpeg', 'gif', 'png');
$file_name = $_FILES['country_img']['name'];
$file_extn = end(explode('.', $file_name));
$file_temp = $_FILES['country_img']['tmp_name'];
if (in_array($file_extn, $allowed) ===true) {
if ($_POST['id'] = $_POST['id']) {
addcountryimage($row['country_id'], $file_temp, $file_extn);
}
header ('Location: tes2.php');
break;
}else {
echo 'Incorrect file type. Allowed: ';
echo implode (', ', $allowed);
}
}
}
if (empty($row['country_img'] === false)) {
echo '<img src="', $row['country_img'], '" alt="', $row['country_name'], '\'s Image">';
}
?>
<p> <?php echo $row['country_bio']; ?></p>
<?php
global $session_user_id;
if (is_admin($session_user_id) === true) { ?>
<form action="" method="POST" name="" enctype="multipart/form-data">
<input type="hidden" name="id" id="hidden_id">
<input type="file" name="country_img"> <input type="submit" onclick="document.getElementById('hidden_id').value=$row['country_id']" />
</form>
<?php } ?>
<p> Tour to <?php echo $row['country_name']; ?></p>
</li>
<?php } ?>
</ul>
<h3> More European Country </h3>
</div>
Everything above works, except the fact that it can't differentiate between each submit button. For example, when I update the image on the 5th forms it will always update the 1st form. How can I do this?

The origin of your issue is using multiple id attributes with the same value in your JavaScript events, this is regarded wrong, every element id must be unique, beside this, onclick event with submit typed inputs of form is not working properly.
Add an incremental counter to your loop and then use to distinguish each form hidden element id.
<?php $i = 0;?>
<?php foreach ($rows as $key => $row) { ?>
....
<input type="hidden" name="id" id="hidden_id_<?php echo $i;?>">
....
<input type="submit" onclick="document.getElementById('hidden_id_<?php echo $i;?>').value=$row['country_id']" />
<?php
$i++;
} ?>
Another note, I think that onclick event does not works fine with submit type inputs, so I suggest to replace it with onsubmit event in the form itself as:
<form action="" method="POST" name="" enctype="multipart/form-data" onsubmit="document.getElementById('hidden_id_<?php echo $i;?>').value=$row['country_id']">

Using jQuery to navigate between divs

I currently have a div which when clicked posts data to another page and reloads the div. I would like to add a back button (#backref) to the new div to take me back to the previous div. I have found several posts on this whereby you add display:none; to the div you want to browse to, but obviously this is my initial div so I cannot use that css. Any suggestions on how to get round this would be appreciated!
Code I am using to achieve this:
$(document).ready(function () {
$('.clickthrough2').click(function () {
// get car id
carId = $(this).attr('id'); // get the car id to access each class element under the car div container
$.post('referrer-ajax2.php', {
clickthrough: $('#car-'+carId+' .clickthrough').val(),
ref_date_from2: $('#car-'+carId+' .ref_date_from2').val(),
ref_date_to2: $('#car-'+carId+' .ref_date_to2').val()
},
function (data) {
$('#car1').html(data);
});
});
});
index.php:
<div id="car1" class="declined3 statdivhalf2">
<h4>Select Car</h4>
<div class="statgrid">
<?php
$result=$ mysqli->query($sql);
if($result->num_rows === 0) { echo 'No Cars in selected time period.'; }
else { while ($row = $result->fetch_array()) {
?>
<div id="car-<?php echo $row['car_id'];?>">
<input type="hidden" class="ref_date_from2" value="<?php echo $date_from; ?>" />
<input type="hidden" class="ref_date_to2" value="<?php echo $date_to; ?>" />
<input type="hidden" class="clickthrough" value="<?php echo $row['car_name'] ?>" />
<a><div id="<?php echo $row['car_id'];?>" class="clickthrough2 col-5-6"><?php echo $row['car_name'] ?></div></a>
</div>
<div class="col-1-6">
<?php echo $row[ 'quantity']; ?>
</div>
<?php } } ?>
</div>
</div>
referrer-ajax2.php:
<div id="car1" class="declined4 statdivhalf2">
<h4>Car Details</h4>
<div class="statgrid">
<?php
$result=$ mysqli->query($sql);
if($result->num_rows === 0) { echo 'No Cars in selected time period.'; }
else { while ($row = $result->fetch_array()) {
?>
<div id="clickthrough2" class="col-5-6"><?php echo $row['car_details'] ?></div>
<div class="col-1-6"><?php echo $row[ 'quantity']; ?></div>
<?php } } ?>
<a><div id="backref">< Back</div></a>
</div>
</div>
EDIT: I have tried the below be it did not work:
$('#backref').click(function () {
$('.declined4').hide();
$('.declined3').show();
});

Instead of reloading the div with the new content you could create a new div each time hiding the old one. You would then cycle through them by indexing each div with either an id or (probably better) a "data-" attribute.

Object doesn't support property or method 'remove'

I know there is some issue with get document.getElementById and IE, but not sure why IE is having a problem with .remove and all other browsers are not. Any help here would be appreciated. I am getting the error
SCRIPT438: Object doesn't support property or method 'remove'
from the error console. The Javascript works in all other browsers.
Here is the code:
<script type="text/javascript"><!--
function removeModule() {
<?php $tab = 1; ?>
var module_row = <?php echo $module_row; ?>;
if(!confirm('Are you sure?'))
{
return false;
}
var x = 1;
while (x < module_row)
{
if (document.getElementById('tab-' + x).checked)
{
document.getElementById('tab-' + x).remove();
document.getElementById('module-' + x).remove();
document.getElementById('tab-module-' + x).remove();
}
x++;
<?php $tab++; ?>
}
$('#form').submit();
}
//--></script>
This is from an opencart module, it is the tpl file. I've included part of the file here as well so hopefully someone can spot whatever the error is.
<?php echo $header; ?>
<div id="content">
<div class="breadcrumb">
<?php foreach ($breadcrumbs as $breadcrumb) { ?>
<?php echo $breadcrumb['separator']; ?><?php echo $breadcrumb['text']; ?>
<?php } ?>
</div>
<?php if ($error_warning) { ?>
<div class="warning"><?php echo $error_warning; ?></div>
<?php } ?>
<div class="box">
<div class="heading">
<h1><img src="view/image/module.png" alt="" /> <?php echo $heading_title; ?></h1>
<div class="buttons">
<a onclick="$('#form').submit();" class="button"><?php echo $button_save; ?></a>
<a onclick="removeModule();" class="button"><?php echo $button_delete ?></a>
<a onclick="location = '<?php echo $cancel; ?>';" class="button"><?php echo $button_cancel; ?></a></div>
</div>
<div class="content">
<form action="<?php echo $action; ?>" method="post" enctype="multipart/form-data" id="form">
<div class="vtabsQS">
<?php $module_row = 1; ?>
<?php foreach ($modules as $module)
{ ?>
<div style="margin-left: -7px; float:left;">
<input type="checkbox" style="float: left; margin-top: 8px;" id="tab-<?php echo $module_row; ?>" onClick="" value="#tab-<?php echo $module_row; ?>" />
<a href="#tab-module-<?php echo $module_row; ?>" id="module-<?php echo $module_row; ?>">
<?php foreach ($languages as $language)
{ ?>
<label class="inputLrgTab"><?php if (!empty($module['language_id'][$language['language_id']])) { echo $module['language_id'][$language['language_id']];} ?></label>
<?php } ?>
</a><br />
</div>
<?php $module_row++; ?>
<?php } ?>
<span id="module-add" style="clear: both; margin-left: -7px;"><?php echo $button_add_module; ?> <img src="view/image/add.png" alt="" onclick="addModule();" /></span>
</div>
<?php $module_row = 1; ?>
<?php foreach ($modules as $module) { ?>
<div id="tab-module-<?php echo $module_row; ?>" class="vtabs-content" style="margin-left:230px;">
<table class="form">
<tr>
<td><?php echo $entry_title; ?></td>
<td class="left">
<?php foreach ($languages as $language) { ?>
<img src="view/image/flags/<?php echo $language['image']; ?>" alt="<?php echo $language['name']; ?>" />
<input class="inputLrg" type="text" name="<?php echo $classname; ?>_module[<?php echo $module_row; ?>][language_id][<?php echo $language['language_id']; ?>]" value="<?php if (!empty($module['language_id'][$language['language_id']])) { echo $module['language_id'][$language['language_id']];} ?>">
<br />
<?php } ?>
<span class="error"><?php echo $error_title; ?></span>
</td>
</tr>
<tr>
<td><?php echo $entry_limit; ?></td>

You should get the parent of the element you are trying to remove and use the remove child method to find and remove the element
element.parentNode.removeChild(element);
this works in all browsers including IE.

remove() as a method on HTMLElements unfortunately is not supported by Internet Explorer.
You could use the workaround in this SO answer for a vanilla javascript solution.
However as you already seem to use jQuery, instead replace
document.getElementById('tab-' + x).remove();
with
$('#tab-' + x).remove();

You should use this
element.parentElement.removeChild(element);
Supported by all browser and also have some benefits over just a hack to
remove child element.
Here is another workaround for keep using .remove() function
Element.prototype.remove = function() {
this.parentElement.removeChild(this);
}
NodeList.prototype.remove = HTMLCollection.prototype.remove = function() {
for(var i = this.length - 1; i >= 0; i--) {
if(this[i] && this[i].parentElement) {
this[i].parentElement.removeChild(this[i]);
}
}
}
And then you can remove elements like this
document.getElementById("my-element").remove();
or
document.getElementsByClassName("my-elements").remove();
Here is Stack Overflow link for further info also source of this answer.

It appears that IE10 also throws this error..
Here one way I tried using the objects outerHTML property:
if(typeof document.getElementById('id').remove=='function'){
//If support is found
document.getElementById('id').remove()
}
else{
//If not
document.getElementById('id').outerHTML='';
}

You can polyfill the remove() method:
(function (arr) {
arr.forEach(function (item) {
if (item.hasOwnProperty('remove')) {
return;
}
Object.defineProperty(item, 'remove', {
configurable: true,
enumerable: true,
writable: true,
value: function remove() {
this.parentNode.removeChild(this);
}
});
});
})([Element.prototype, CharacterData.prototype, DocumentType.prototype]);