WooCommerce input field - increment/ decrement field button - javascript

I'm trying to add an 'increment/decrement button' to a quantity field in woocommerce on my site - http://tbdemo.tk/aquapark/tickets/
My code in /woocommerce/templates/global/quantity-input.php is :
echo "<script>
var i = 0;
function buttonClick() {
document.getElementById('inc').value = ++i;
</script>";
if ( ! defined( 'ABSPATH' ) ) {
exit; // Exit if accessed directly
}
?>
<div class="quantity">
<form>
<input type="number" id="inc" onfocus="if(this.value == '0') { this.value = ''; }" step="<?php echo esc_attr( $step ); ?>" min="<?php echo esc_attr( $min_value ); ?>" max="<?php echo esc_attr( $max_value ); ?>" name="<?php echo esc_attr( $input_name ); ?>" value="<?php echo esc_attr( $input_value ); ?>" title="<?php echo esc_attr_x( 'Qty', 'Product quantity input tooltip', 'woocommerce' ) ?>" class="input-text qty text" size="4" />
<input type="button" onclick="buttonClick()" value="Increment Value" />
</form>
</div>
But it doesn't work.
How can I increment value only on OnFocus field? Not at all input fields....
Thank You!

you forgot the '}' at the end of the function.
echo "<script>
var i = 0;
function buttonClick() {
document.getElementById('inc').value = ++i;
}
</script>";
if ( ! defined( 'ABSPATH' ) ) {
exit; // Exit if accessed directly
}
?>
<div class="quantity">
<form>
<input type="number" id="inc" onfocus="if(this.value == '0') { this.value = ''; }" step="<?php echo esc_attr( $step ); ?>" min="<?php echo esc_attr( $min_value ); ?>" max="<?php echo esc_attr( $max_value ); ?>" name="<?php echo esc_attr( $input_name ); ?>" value="<?php echo esc_attr( $input_value ); ?>" title="<?php echo esc_attr_x( 'Qty', 'Product quantity input tooltip', 'woocommerce' ) ?>" class="input-text qty text" size="4" />
<input type="button" onclick="buttonClick()" value="Increment Value" />
</form>
</div>

Related

How to validate multi step form jquery Php

I am working with multi step form with php, I have array $rec where i am getting all
questions ( from database/dynamic).
I want to validate those fields whose key is mandatory and value is 1 (coming from array($rec)).
I want "next" page/question shouldn't display until I fill first question.
Here is my html code
<form action="<?php echo site_url('Nps/FormAdd'); ?>" method="post">
<?php //echo "<pre>"; print_R($keyslug);?>
<input type="hidden" name="mobile_no" value="<?php echo $keyslug['mobileNo']; ?>">
<input type="hidden" name="contact_mapping_id" value="<?php echo $keyslug['id']; ?>">
<?php $i="1";
$lastElement = end($rec);
$i="1";
foreach($rec as $key => $records)
{
<div class="card" id="<?php echo $records['ques_id']; ?>" >
<?php if($records['type']=="range" )
{
?>
<div class="form-group" style="margin-top: 10px;">
<div class="chart-scale develop-rating">
<?php $j=$records['start_range'];
$max= $records['end_range'];
for($i=$j;$i<=$max; $i++) {
?>
<button id="rating" attr-hide-div="<?php if($i <= $records['min_value']) { echo $records['max_show_ques_id']; } else { echo $records['show_ques_id']; }?>"
attr-show-div="<?php if($i <= $records['min_value']) { echo $records['show_ques_id']; } else { echo $records['max_show_ques_id']; }?>"attr-value="<?php echo $i; ?>" class="btn rating-button-click btn-scale btn-scale-asc-<?php echo $i; ?>">
<?php echo $i; ?>
</button>
<?php } ?>
<input type="hidden" id='ques_<?php echo $records['ques_id']; ?>' class="input-develop all-mandatory-check" attr-required="<?php echo $records['mandatory']; ?>" <?php if($records['IsRatingQuestion']=="1") { ?> name='rangeR_<?php echo $records['ques_id']; ?>' <?php } else { ?> name='ques_<?php echo $records['ques_id']; ?>' <?php } ?> value="">
</div>
</div>
<?php
}
elseif($records['type']=="check_box")
{
?>
<div class="form-group checkboxes">
<label class="form-control-label"><?php echo $records['question']; ?></label>
<div>
<?php
$opt = explode("::", $records['options']);
$result = count($opt);
$i="1";
foreach($opt as $s)
{
?>
<label class="form-container"><?php echo $s; ?>
<input class="all-mandatory-check" type="checkbox" attr-required="<?php echo $records['mandatory']; ?>" id="name" value='<?php echo $s; ?>' name='check_<?php echo $records['ques_id']; ?>[]'>
<span class="checkmark"></span>
</label>
<?php } ?>
</div>
</div>
<?php
}
$key;
if($key!="0"){
?>
<input type="button" name="previous" class="previous action-button" value="Previous" />
<?php } ?>
<?php
$record_last_end = $rec;
$lastElement = array_key_last($record_last_end);
if($key == $lastElement)
{
?>
<input type="submit" name="submit" value="submit" class="next action-button" >
<?php } else { ?>
<input type="button" name="next" id="next1" class="next action-button" value="Next" />
<?php } ?>
</div>
</div>
<?php
//$i++;
} ?>
</form>

Pretty checkbox does not work with WooCommerce

I would use Pretty checkbox in the WooCommerce checkout page.
First imported the CSS file:
// Pretty Checkbox
// =============================================================================
function child_enqueue_styles() {
// enqueue pretty checkbox style
wp_enqueue_style('pretty-checkbox', get_stylesheet_directory_uri() .'/pretty-checkbox/dist/pretty-checkbox.css', array());
}
add_action('wp_enqueue_scripts', 'child_enqueue_styles', 9999);
Then changed payment-mothod.php like this:
<li class="wc_payment_method payment_method_<?php echo esc_attr( $gateway->id ); ?>">
<div class="pretty p-default p-round">
<input id="payment_method_<?php echo esc_attr( $gateway->id ); ?>" type="radio" class="input-radio" name="payment_method" value="<?php echo esc_attr( $gateway->id ); ?>" <?php checked( $gateway->chosen, true ); ?> data-order_button_text="<?php echo esc_attr( $gateway->order_button_text ); ?>" />
</div>
<div class="state p-success-o">
<label for="payment_method_<?php echo esc_attr( $gateway->id ); ?>">
<?php echo $gateway->get_title(); /* phpcs:ignore WordPress.XSS.EscapeOutput.OutputNotEscaped */ ?> <?php echo $gateway->get_icon(); /* phpcs:ignore WordPress.XSS.EscapeOutput.OutputNotEscaped */ ?>
</label>
</div>
<?php if ( $gateway->has_fields() || $gateway->get_description() ) : ?>
<div class="payment_box payment_method_<?php echo esc_attr( $gateway->id ); ?>" <?php if ( ! $gateway->chosen ) : /* phpcs:ignore Squiz.ControlStructures.ControlSignature.NewlineAfterOpenBrace */ ?>style="display:none;"<?php endif; /* phpcs:ignore Squiz.ControlStructures.ControlSignature.NewlineAfterOpenBrace */ ?>>
<?php $gateway->payment_fields(); ?>
</div>
<?php endif; ?>
</li>
But radio buttons disappeared!
I can't find any error in the browser console, am I dummy missing something obvious?
The issue was because of using main </div> before div tag for lable.
Correct one is:
<div class="pretty p-default p-round">
<input id="payment_method_<?php echo esc_attr( $gateway->id ); ?>" type="radio" class="input-radio" name="payment_method" value="<?php echo esc_attr( $gateway->id ); ?>" <?php checked( $gateway->chosen, true ); ?> data-order_button_text="<?php echo esc_attr( $gateway->order_button_text ); ?>" />
<div class="state p-success-o">
<label for="payment_method_<?php echo esc_attr( $gateway->id ); ?>">
<?php echo $gateway->get_title(); /* phpcs:ignore WordPress.XSS.EscapeOutput.OutputNotEscaped */ ?> <?php echo $gateway->get_icon(); /* phpcs:ignore WordPress.XSS.EscapeOutput.OutputNotEscaped */ ?>
</label>
</div>
</div>
Note: I ignored using pretty box because it has some conflicts with using font icons and instead I used this thread.

Local Storage (Woocommerce Registration)

woocommerce registration will take email validation.
and after registration we will directly go to same page but it loading.
so i wanna make notification after registration in woocommerce.
any suggest?
<div class="alert success">
<span class="closebtn">×</span>
<strong>Registration Success!</strong> Check Email.
</div>
<form method="post" class="register-new-account">
<div class="">
<?php do_action( 'woocommerce_register_form_start' ); ?>
<?php if ( 'no' === get_option( 'woocommerce_registration_generate_username' ) ) : ?>
<p class="woocommerce-FormRow woocommerce-FormRow--wide form-row form-row-wide">
<label for="reg_username"><?php _e( 'Username', 'woocommerce' ); ?> <!-- <span class="required">*</span> --></label>
<input type="text" class="woocommerce-Input woocommerce-Input--text input-text" name="username" id="reg_username" value="<?php if ( ! empty( $_POST['username'] ) ) echo esc_attr( $_POST['username'] ); ?>" />
</p>
<?php endif; ?>
<p class="woocommerce-FormRow woocommerce-FormRow--wide form-row form-row-wide">
<label for="reg_email"><?php _e( 'Email address', 'woocommerce' ); ?> <!-- <span class="required">*</span> --></label>
<input type="email" class="woocommerce-Input woocommerce-Input--text input-text" name="email" id="reg_email" value="<?php if ( ! empty( $_POST['email'] ) ) echo esc_attr( $_POST['email'] ); ?>" />
</p>
<?php if ( 'no' === get_option( 'woocommerce_registration_generate_password' ) ) : ?>
<p class="woocommerce-FormRow woocommerce-FormRow--wide form-row form-row-wide">
<label for="reg_password"><?php _e( 'Password', 'woocommerce' ); ?> <!-- <span class="required">*</span> --></label>
<input type="password" class="woocommerce-Input woocommerce-Input--text input-text" name="password" id="reg_password" />
</p>
<?php endif; ?>
<!-- Spam Trap -->
<!-- <div style="<?php echo ( ( is_rtl() ) ? 'right' : 'left' ); ?>: -999em; position: absolute;"><label for="trap"><?php _e( 'Anti-spam', 'woocommerce' ); ?></label><input type="text" name="email_2" id="trap" tabindex="-1" autocomplete="off" /></div> -->
<?php do_action( 'woocommerce_register_form' ); ?>
<?php do_action( 'register_form' ); ?>
</div>
<p class="woocomerce-FormRow form-row margin-top-30">
<?php wp_nonce_field( 'woocommerce-register', 'woocommerce-register-nonce' ); ?>
<!-- <input type="submit" class="woocommerce-Button button" name="register" value="<?php esc_attr_e( 'Register', 'woocommerce' ); ?>" /> -->
<input type="submit" class="btn btn-default size-new-account" name="register" value="<?php esc_attr_e( 'Create new account', 'woocommerce' ); ?>" />
</p>
<?php do_action( 'woocommerce_register_form_end' ); ?>
</form>
just testing my button
localStorage.setItem('register1','success');
jQuery('input.btn.btn-default.size-new-account').click(function() {
var reg = localStorage.getItem('register1');
jQuery('.alert.success').show();
});
how can i show the notification after registration? thanks for help

When I click the update button, it won't change/update (CodeIgniter, Update Multiple Rows)

This is my controller:
function update_agenda() {
$id = $this->input->post['did'];
$this->load->model('agenda_model');
$data = array(
'nama' => $this->input->post('did'),
'keterangan' => $this->input->post('dketer')
);
($this->agenda_model->update($id, $data))
}
When I click button Save, it won't change anything. How can I fix this problem?
<td>
<input type ="checkbox" id="haha" class=checkbox1 name="checklist" value=<?php echo $agenda->id; ?>> <?php echo $agenda->id; ?>
</td>
<td>
<input type="text" id="hide" name="did" value="<?php echo $agenda->id; ?>">
</td>
<td>
<input type="text" name="dnama" id="nama_" value="<?php echo $agenda->nama; ?>" disabled />
</td>
<td>
<input type="text" name="dketer" id="ket_" value="<?php echo $agenda->keterangan; ?>" disabled>
</td>
<?php }?>
</td>
</tr>
</table>
<button onclick="saveUpdate()"> Save </button>
This is my model:
function update ($id,$data){
$this->db->where('id', $id);
$this->db->update('agenda', $data);
}
Here is my saveUpdate function
i hope this helpyou
view.php
<td>
<input type ="checkbox" id="haha" class=checkbox1 name="checklist" value=<?php echo $agenda->id; ?>> <?php echo $agenda->id; ?>
</td>
<td>
<input type="text" id="hide" name="did" value="<?php echo $agenda->id; ?>">
</td>
<td>
<input type="text" name="dnama" id="nama_" value="<?php echo $agenda->nama; ?>" disabled />
</td>
<td>
<input type="text" name="dketer" id="ket_" value="<?php echo $agenda->keterangan; ?>" disabled>
</td>
<?php }?>
</td>
</tr>
</table>
<button onclick="saveUpdate()"> Save </button>
controller.php
function update_agenda() {
$this->load->model('agenda_model');
$this->form_validation->set_rules('did', 'Did', 'trim|required|xss_clean');
$this->form_validation->set_rules('dketer', 'Dketer', 'trim|required|xss_clean');
if ($this->form_validation->run() === FALSE){
echo 'ERROR';
}
else{
$id = $this->input->post['did'];
$data = array(
'nama' => $this->input->post('did'),
'keterangan' => $this->input->post('dketer')
);
$this->agenda_model->update($id, $data);
$data['agenda'] = $this->agenda_model->get_data($id);
$this->load->view('formsuccess', $data);
}
}
model.php
function update($id, $data){
$this->db->where('id', $id);
$this->db->update('table', $data);
}
function get_data($id){
$this->db->where('id', $id);
return $this->db->get('table')->row();
}

Ignore checkbox that is disable

I have here a code that when you clicked the All link it will check all the check boxes and when None it will uncheck all the check boxes.
But I have a PHP conditions that when the $pta_fee == $pta_fee_trans the check box will be disable, but when I clicked the All link, the disable check box appears to be checked.
How can I ignore the disable check box if I checked the All link?
<div class="sub_profile right">
<p class="sub_content_text" style='margin-left: 25px;'>
All | None
MISCELLANEOUS FEES:
</p>
<?php
if($pta_fee == $pta_fee_trans)
{
?>
<p class="sub_content_text" style='margin-left: 30px;'>
<input type='checkbox' value="<?php echo $pta_fee; ?>" disabled>
PTA Fee : ₱ <?php echo $pta_fee; ?></p>
<?php
}
else
{
?>
<p class="sub_content_text" style='margin-left: 30px;'>
<input type='checkbox' name='draw[]' value="<?php echo $pta_fee; ?>" id="required-checkbox1" onClick="CheckIfChecked(this.id)">
PTA Fee : ₱ <?php echo $pta_fee; ?></p>
<?php
}
if($maintenance_fee == $maintenance_fee_trans)
{
?>
<p class="sub_content_text" style='margin-left: 30px;'>
<input type='checkbox' value="<?php echo $maintenance_fee; ?>" disabled>
Maintenance Fee : ₱ <?php echo $maintenance_fee; ?></p>
<?php
}
else
{
?>
<p class="sub_content_text" style='margin-left: 30px;'>
<input type='checkbox' name='draw[]' value="<?php echo $maintenance_fee; ?>" id="required-checkbox2" onClick="CheckIfChecked(this.id)">
Maintenance Fee : ₱ <?php echo $maintenance_fee; ?></p>
<?php
}
if($id_school == $id_school_trans)
{
?>
<p class="sub_content_text" style='margin-left: 30px;'>
<input type='checkbox' value="<?php echo $id_school; ?>" disabled>
School ID : ₱ <?php echo $id_school; ?></p>
<?php
}
else
{
?>
<p class="sub_content_text" style='margin-left: 30px;'>
<input type='checkbox' name='draw[]' value="<?php echo $id_school; ?>" id="required-checkbox3" onClick="CheckIfChecked(this.id)">
School ID : ₱ <?php echo $id_school; ?></p>
<?php
}
if($electricity == $electricity_trans)
{
?>
<p class="sub_content_text" style='margin-left: 30px;'>
<input type='checkbox' value="<?php echo $electricity; ?>" disabled>
Electricity : ₱ <?php echo $electricity; ?></p>
<?php
}
else
{
?>
<p class="sub_content_text" style='margin-left: 30px;'>
<input type='checkbox' name='draw[]' value="<?php echo $electricity; ?>" id="required-checkbox4" onClick="CheckIfChecked(this.id)">
Electricity : ₱ <?php echo $electricity; ?></p>
<?php
}
?>
<div id="sub_profile_cont">
<div class="sub_profile left">
<p class="block_cont left">
<div id = "submit-button-container" style="display:none;">
<input class="action_btn" type="submit" name="submit" id="pay_btn" value="COMPUTE" onClick="setUpdateAction();"/>
</div>
<b style="display: none";><input class="action_btn" type="submit" name="submit" id="pay_btn" value="COMPUTE" onClick="setUpdateAction();"/></b>
</p>
</div>
</div>
</div>
--Here's the javascript code for checking all the check boxes:
<script>
function selectToggle(toggle, form) {
var myForm = document.forms[form];
for( var i=0; i < myForm.length; i++ ) {
if(toggle) {
myForm.elements[i].checked = "checked";
}
else {
myForm.elements[i].checked = "";
}
}
}
Try this:
<script>
function selectToggle(toggle, form) {
var myForm = document.forms[form];
for( var i=0; i < myForm.length; i++ ){
if(myForm.elements[i].disabled != true){
if(toggle){
myForm.elements[i].checked = "checked";
}
else{
myForm.elements[i].checked = "";
}
}
}
}

Categories