Copy function only working on some inputs - javascript

I have a copy function set up on my checkout page. The sole purpose of it is to copy the text that was entered for the customers shipping information that they entered and display it further down the page in a confirmation section.
It is working great for the customers name and address1 line. The address2, city, state, and zipcode line will not show up though. I have no idea why. I am doing the exact same thing as I am doing for the address1 and name. I have tried changing data-copy names, but nothing is working.
This is where the customer would enter their shipping info at.
<div class="shippinginfocontainer">
<span class="summarytitle"><p>Enter Shipping Information</p>
</span><br>
<div class="center">
<div class="field">
<label class="paddingleft" for="fullname">Full Name</label>
<div class="center"><input type="text" class="biginputbarinline preview" id="ShipToFullname" data-copy="#name" name="ShipToFullname" required></div>
</div>
<div class="field">
<label class="paddingleft" for="streetline1">Street Line 1</label>
<div class="center"><input type="text" class="biginputbarinline preview" id="ShipTostreetline1" data-copy="#address1" name="ShipTostreetline1" required></div>
</div>
<div class="field">
<label class="paddingleft" for="streetline2">Street Line 2</label>
<div class="center"><input type="text" class="biginputbarinline" id="ShipTostreetline2" data-copy="#address2" name="ShipTostreetline2" value="<?php echo escape($user->data()->streetline2); ?>"></div>
</div>
<div class="field">
<label class="paddingleft" for="city">City</label>
<div class="center"><input type="text" class="biginputbarinline" id="ShipTocity" data-copy="#confirmcity" name="ShipTocity" value="<?php echo escape($user->data()->city); ?>" required></div>
</div>
</div>
<div class="formleftcenter">
<div class="field">
<label for="state">State</label>
<input type="text" class="mediuminputbar" id="ShipTostate" data-copy="#confirmstate" name="ShipTostate" value="<?php echo escape($user->data()->state); ?>" required>
</div>
<div class="formrightcenter">
<div class="field">
<label for="zipcode">Zip Code</label>
<input type="text" class="mediuminputbar" id="ShipTozipcode" name="ShipTozipcode" value="<?php echo escape($user->data()->zipcode); ?>" required>
</div>
I then am copying the text to here(I left the state one out):
<p>Shipping to:</p>
<p><div id="name"></div></p>
<p><div id="address1"></div></p>
<p><div id="address2"></div></p>
<p><div id="confirmcity"></div></p>
<p><div id="confirmzip"></div></p>
The Jquery
$(document).ready(function() {
$(".preview").on('input', function() {
$($(this).data('copy')).html($(this).val());
});
});
Any idea why it is not working on those inputs?

You only have the 'preview' class on your full name and address1 lines.
Your jquery selector is selecting all elements on the page with the class 'preview', so the logic inside will only apply to HTML elements with the class 'preview'.
You'll want to change the rest of your inputs to also include the 'preview' class.

You have preview class in name & address 1 input field
<input type="text" class="biginputbarinline preview" id="ShipToFullname" data-copy="#name" name="ShipToFullname" required>
but you dont have preview class in other input fields
<input type="text" class="biginputbarinline" id="ShipTostreetline2" data-copy="#address2" name="ShipTostreetline2">
add preview in other input field classes

I can't speak to the php part, but the HTML and jquery should look something like this:
window.addAddress = function() {
var inputs = $('input').map(function () {
return $(this).val();
});
var i = 0;
$.each($('.data'), function(){
$(this).html(inputs[i]);
i++;
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="shippinginfocontainer"> <span class="summarytitle"><p>Enter Shipping Information</p>
</span>
<br>
<div class="center">
<div class="field">
<label class="paddingleft" for="fullname">Full Name</label>
<div class="center">
<input type="text" class="biginputbarinline preview" id="ShipToFullname" data-copy="#name" name="ShipToFullname" value="Mickey Gordon" required>
</div>
</div>
<div class="field">
<label class="paddingleft" for="streetline1">Street Line 1</label>
<div class="center">
<input type="text" class="biginputbarinline preview" id="ShipTostreetline1" data-copy="#address1" name="ShipTostreetline1" value="Suite 105" required>
</div>
</div>
<div class="field">
<label class="paddingleft" for="streetline2">Street Line 2</label>
<div class="center">
<input type="text" class="biginputbarinline" id="ShipTostreetline2" data-copy="#address2" name="ShipTostreetline2" value="701 Rackamac Ln">
</div>
</div>
<div class="field">
<label class="paddingleft" for="city">City</label>
<div class="center">
<input type="text" class="biginputbarinline" id="ShipTocity" data-copy="#confirmcity" name="ShipTocity" value="Oxnard" required>
</div>
</div>
</div>
<div class="formleftcenter">
<div class="field">
<label for="state">State</label>
<input type="text" class="mediuminputbar" id="ShipTostate" data-copy="#confirmstate" name="ShipTostate" value="California" required>
</div>
<div class="formrightcenter">
<div class="field">
<label for="zipcode">Zip Code</label>
<input type="text" class="mediuminputbar" id="ShipTozipcode" name="ShipTozipcode" value="93031" required>
</div>
<p>Shipping to:</p>
<p>
<div id="name" class="data"></div>
</p>
<p>
<div id="address1" class="data"></div>
</p>
<p>
<div id="address2" class="data"></div>
</p>
<p>
<div id="confirmcity" class="data"></div>
</p>
<p>
<div id="confirmzip" class="data"></div>
</p>
<input type="button" value="Add" onclick="addAddress()" />

Related

Jquery validation of fields

I am trying to validate the form using jquery but it's not working.
I am trying to show a red line on-field if it's empty on button click.
Below is the HTML code.
<div id="myModal" class="modal">
<div class="modal-content">
<div id="custom-form">
<div class="col-md-8">
<form name="addData" method="post" id="addData" class="form"
action="#"
data-hasrequired="<?= $block->escapeHtmlAttr(__('* Required Fields')) ?>"
data-mage-init='{"validation":{}}'>
<fieldset class="fieldset">
<legend class="legend"><span><?= $block->escapeHtmlAttr(__('Fill in the fields to place your order.')) ?></span></legend>
<fieldset class="fieldset row">
<div class="fields col-md-6">
<div class="field name required">
<label class="label" for="title"><span><?= $block->
escapeHtmlAttr(__('Full Name')) ?></span></label>
<div class="control">
<input id="bnname" title="Name" value="" class="input-text" type="text" required="true" minlength="15">
</div>
</div>
<div class="field address required">
<label class="label" for="title"><span><?= $block->
escapeHtmlAttr(__('Address')) ?></span></label>
<div class="control">
<input id="bnaddress" title="Address" value="" class="input-text" type="text" data-validate="{'validate-street':true}"
>
</div>
</div>
<div class="field city required">
<label class="label" for="title"><span><?= $block->
escapeHtmlAttr(__('City')) ?></span></label>
<div class="control">
<input id="bntext" title="City" value="" class="input-text" type="text" data-validate="{'validate-street':true}"
>
</div>
</div>
<div class="field telephone required">
<label class="label" for="title"><span><?= $block->escapeHtmlAttr(__('Telephone')) ?></span></label>
<div class="control">
<input id="bntelephone" title="Telephone" value="" class="input-text" data-validate="{'required-number':true}"
type="text" >
</div>
</div>
<div class="field postalcode required">
<label class="label" for="title"><span><?= $block->escapeHtmlAttr(__('Postal code')) ?></span></label>
<div class="control">
<input id="bnpostalcode" title="Postal code" value="" class="input-text" data-validate="{'required-number':true}"
type="text" >
</div>
</div>
</div>
</fieldset>
</fieldset>
<div class="actions-toolbar">
<div class="primary">
<div class="action submit primary buy" title="Order Now"><span><?= $block->
escapeHtmlAttr(__('Order Now')) ?></span></div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
I am not sure how to simply validate these fields using jquery.
Here is the jquery code
var isValid;
$("input").each(function() {
var element = $(this);
if (element.val() == "") {
isValid = false;
}
});
is there any way we can add validation to it ?

Why jQuery steps not changing the section

I was trying to make a multi-step form using jQuery steps. I have tried taking some code from the actual documentation but don't know why their web page isn't showing the code snippets. I tried taking the code from one tutorial blog but it is not working as I have expected. The section is not changing I am new to jQuery and never used steps I am not getting where I am going wrong.
Code :
<form id="example-form" action="#" class="tab-wizard wizard-circle wizard clearfix">
<h6>Account</h6>
<section>
<br/>
<div class="row">
<div class="col-sm-4 col-sm-push-4">
<div class="form-group">
<label for="userName-2">User name </label>
<input id="userName-2" name="userName" type="text" value="Les" class="form-control ">
</div>
<div class="form-group">
<label for="password-2">Password</label>
<input id="password-2" name="password" value ="password" type="text" class=" form-control">
</div>
<div class="form-group">
<label for="confirm-2">Confirm Password</label>
<input id="confirm-2" name="confirm" type="text" value="password" class=" form-control">
</div>
</div>
</div>
</section>
<h6>Profile</h6>
<section>
<div class="row">
<div class="col-sm-2"></div>
<div class="col-sm-4">
<div class="form-group">
<label for="name-2">First name</label>
<input id="name-2" name="name" type="text" class="form-control">
</div>
<div class="form-group">
<label for="surname-2">Last name</label>
<input id="surname-2" name="surname" type="text" class="form-control">
</div>
<div class="form-group">
<label for="email-2">Email</label>
<input id="email-2" name="email" type="text" class="form-control email">
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="address-2">Address</label>
<input id="address-2" name="address" type="text" class="form-control">
</div>
<div class="form-group">
<label for="age-2">Age</label>
<input id="age-2" name="age" type="text" class="form-control number">
</div>
</div>
</div>
</section>
<h6>Warning</h6>
<section>
<div class="row">
<div class="col-sm-2"></div>
<div class="col-sm-8">
<div class="form-group">
<label>This is the question that is being asked to the user?</label>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1">
Option one is this and that—be sure to include why it's great
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2" >
Option two can be something else and selecting it will deselect option one
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" >
Option three. This is just a demo.
</label>
</div>
</div></div>
</div>
<hr>
<div class="row">
<div class="col-sm-2"></div>
<div class="col-sm-4">
<div class="form-group">
<label for="name-2">First name</label>
<input id="name-2" name="name" type="text" class="form-control">
</div>
<div class="form-group">
<label for="surname-2">Last name</label>
<input id="surname-2" name="surname" type="text" class="form-control">
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="age-2">Age</label>
<input id="age-2" name="age" type="text" class="form-control number">
</div>
<div class="form-group">
<label for="email-2">Email</label>
<input id="email-2" name="email" type="text" class="form-control email">
</div>
</div>
</div>
</section>
<h6>Finish</h6>
<section>
<input id="acceptTerms-2" name="acceptTerms" type="checkbox" class=""> <label for="acceptTerms-2">I agree with the Terms and Conditions.</label>
</section>
</form>
Js code:
var form = $("#example-form");
form.steps({
headerTag: "h6",
bodyTag: "section",
transitionEffect: "fade",
titleTemplate: '<span class="step">#index#</span> #title#'
});
Apologies for the long code here, I tried making codesandbox of the example but I can't able to find the CDN for steps.css and also the CDN for steps.js was not working there.

Form not submit while change checkbox in php

In this code, what happens when I change checkbox value (i.e. If I click on credit card checkbox) then <div class="creditcard"> shows, and if I click on paypal then <div class="paypal"> shows.
Now, when I choose credit card and then click on submit button, then form does not submit. And if I check paypal checkbox and click submit button then nothing happen again. I don't understand why.
How can I submit form whether I choose credit card checkbox or paypal?
$(document).ready(function() {
$('input.payment').on('change', function() {
$('input.payment').not(this).prop('checked', false);
});
$("#credit").click(function() {
if ($(this).is(":checked")) {
$(".creditcard").show();
$(".paypal").hide();
} else {
$(".creditcard").hide();
$(".paypal").show();
}
});
$("#paypal").click(function() {
if ($(this).is(":checked")) {
$(".paypal").show();
$(".creditcard").hide();
} else {
$(".paypal").hide();
$(".creditcard").show();
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post" action="checkout.php" autocomplete="off">
<div class="col-lg-7 mb--20 float-left">
<div class="form-group">
<label for="fname">Full Name</label>
<input type="text" class="form-control" id="fname" placeholder="Enter Your Name" name="fname" required="">
</div>
</div>
<div class="col-lg-5 float-right">
<div class="row">
<div class="col-12">
<div class="checkout-cart-total">
<div class="col-md-6">
<input type="checkbox" id="credit" class="payment" name="mode" value="credit card">
<label for="credit">Credit Card</label>
</div>
<div class="col-md-6">
<input type="checkbox" id="paypal" class="payment" name="mode" value="PayPal">
<label for="paypal">Paypal</label>
</div>
<div class="creditcard" style="display:block;">
<div class="form-group">
<label for="cardNumber">CARD NUMBER</label>
<input type="tel" class="form-control" name="cardNumber" placeholder="Valid Card Number" required value="" />
</div>
</div>
<div class="paypal" style="display:none;">
<div class="form-group">
<label for="paypal_email">Email ID</label>
<input type="email" class="form-control" name="paypal_email" placeholder="Please enter paypal email" required/>
</div>
</div>
<button type="submit" name="submit" id="submit" class="place-order w-100">Place order</button>
</div>
</div>
</div>
</div>
</form>
You should be using radio buttons instead of checkboxes. I cleaned up your code also to use one event handler.
I also updated so the appropriate fields are dynamically set as required.
$(document).ready(function() {
$('input.payment').on('change', function() {
$("input[name='cardNumber']").prop("required",false);
$("input[name='paypal_email']").prop("required",false);
$(".creditcard").hide();
$(".paypal").hide();
if($(this).val() == "PayPal"){
$(".paypal").show();
$("input[name='paypal_email']").prop("required",true);
}
else{
$("input[name='cardNumber']").prop("required",true);
$(".creditcard").show();
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post" action="checkout.php" autocomplete="off">
<div class="col-lg-7 mb--20 float-left">
<div class="form-group">
<label for="fname">Full Name</label>
<input type="text" class="form-control" id="fname" placeholder="Enter Your Name" name="fname" required="">
</div>
</div>
<div class="col-lg-5 float-right">
<div class="row">
<div class="col-12">
<div class="checkout-cart-total">
<div class="col-md-6">
<input checked type="radio" id="credit" class="payment" name="mode" value="credit card">
<label for="credit">Credit Card</label>
</div>
<div class="col-md-6">
<input type="radio" id="paypal" class="payment" name="mode" value="PayPal">
<label for="paypal">Paypal</label>
</div>
<div class="creditcard" style="display:block;">
<div class="form-group">
<label for="cardNumber">CARD NUMBER</label>
<input type="tel" class="form-control" name="cardNumber" placeholder="Valid Card Number" value="" />
</div>
</div>
<div class="paypal" style="display:none;">
<div class="form-group">
<label for="paypal_email">Email ID</label>
<input type="email" class="form-control" name="paypal_email" placeholder="Please enter paypal email" />
</div>
</div>
<button type="submit" name="submit" id="submit" class="place-order w-100">Place order</button>
</div>
</div>
</div>
</div>
</form>

Print html form input value or specific div content in JS with CSS

I have a form of a prescription. I want to print out that prescription form while submit and also want a proper format in that printout page.
form html
<form role="form" class="registration-form" id="registration_form_id">
<fieldset>
<div class="form-top">
<div class="form-top-left">
<h3>Patient Information</h3>
</div>
<div class="form-top-right">
<i class="fa fa-user"></i>
</div>
</div>
<div class="form-bottom">
<div class="form-group">
<label for="form-first-name">Name</label>
<input type="text" name="form-first-name" placeholder="name" class="form-first-name form-control require" id="name">
</div>
<div class="form-group">
<label for="form-last-name">Age</label>
<input type="number" name="form-last-name" placeholder="Age" class="form-last-name form-control require" id="age" >
</div>
<div class="form-group">
<label for="form-last-name">Mobile Number</label>
<input type="number" name="form-last-name" placeholder="Mobile Number" class="form-last-name form-control require" id="mobile_number" >
</div>
<div class="form-group">
<label for="form-last-name">Religion</label>
<input type="text" name="form-last-name" placeholder="Religion" class="form-last-name form-control require" id="religion" >
</div>
<div class="form-group">
<label for="form-last-name">Occupation</label>
<input type="text" name="form-last-name" placeholder="Occupation" class="form-last-name form-control require" id="occupation" required>
</div>
<div class="form-group">
<h4>Gender</h4>
<div class="row">
<div class="col-md-4">
Male<input class="col-md-4" type="radio" name="gender" value="1">
</div>
<div class="col-md-4">
Female<input class="col-md-4" type="radio" name="gender" value="2">
</div>
<div class="col-md-4">
Other<input class="col-md-4" type="radio" name="gender" value="3">
</div>
</div>
</div>
<div class="form-group">
<h4>Marital status</h4>
<div class="row">
<div class="col-md-4">
Married<input type="radio" class="col-md-4" name="marital_status" value="1">
</div>
<div class="col-md-4">
Single<input type="radio" name="marital_status" class="col-md-4" value="1">
</div>
</div>
</div>
<button type="button" class="btn btn-next">Next</button>
</div>
</fieldset>
<fieldset>
<div class="form-group">
<label for="form-about-yourself">Allergic history</label>
<textarea name="allergic_history" placeholder="Allergic history" class="form-about-yourself form-control " id="allergic_history" ></textarea>
</div>
<div class="form-group">
<label for="form-about-yourself">Personal history</label>
<textarea name="personal_history" placeholder="Personal history" class="form-about-yourself form-control " id="personal_history" ></textarea>
</div>
<button type="button" class="btn btn-previous">Previous</button>
<button type="button" class="btn" id="prescription_form_submition">Submit!</button>
</fieldset>
printout code in js
var divToPrint = document.getElementById('registration_form_id');
newWin= window.open("");
newWin.document.write('<html><style>#media print{body {font-size:16px;} #patient_doctor_info{border-bottom:1px solid #ccc;overflow:hidden;padding:20px 0 10px 0;} #patient_doctor_info span{font-size:18px;} #patient_info{float:left;} #doctor_info{float:right;} #patient_prescription_info{padding:20px 0;overflow:hidden;} #patient_old_prescription{padding-right:5%;border-bottom:1px solid #000;} #patient_new_prescription{overflow:hidden;padding:0 20px;} .new_prescription{font-size : 20px}}</style><body onload="window.print()"><div id="patient_doctor_info"><div id="patient_info"><p><lable>Name :</lable><span><b>'+name+'</b></span></p><p><lable>Mobile Number :</lable><span><b>'+mobile_no+'</b></span></p><p><lable>Age :</lable><span><b>'+age+'</b></span></p><p><lable>Gender :</lable><span><b>'+sex+'</b></span></p></div><div id="patient_prescription_info"><div id="patient_old_prescription"><p><lable>Allergy :</lable><span><b>'+allergic_history+'</b></span></p><p><lable>Social History :</lable><span><b>'+personal_history+'</b></span></p></div></div></body></html>');
newWin.print();
newWin.close();
the print pagelooks like the below image
But I want like below image
So my main questions are.....
how to printout specific div or form value of a webpage using javascript.
How to apply css in that print page?
I have googling this issue several times but still not getting proper solution.
Anybody help please ?

Show div on checkbox tick

I know this question has been asked and I've tried a few different methods but can't seem to get this to work. I'm trying to insert a div to extend a form based on a checkbox being ticked. Nothing seems to work at the moment. It's probably something stupid, I'd appreciate the assistance:
https://jsfiddle.net/4ydybrdd/#&togetherjs=qG3ypyIQsa
html:
<form method="post" autocomplete="off">
<div class="row resetpword">
<div class="container-fluid addblog"style="margin-
top:-40px;margin-bottom:20px;"><h2>Registration</h2></div>
<div class="container-fluid" style="margin-left:37px;">
<label>
First Name<span class="req">*</span>
</label>
<input type="text" required autocomplete="off"
name="firstname" />
</div>
<div class="container-fluid" style="margin-left:35px;">
<label>
Last Name<span class="req">*</span>
</label>
<input type="text" required autocomplete="off"
name="lastname" />
</div>
</div>
<div class="row resetpword" style="margin-top:0;">
<div class="container-fluid" style="margin-left:10px;">
<label>
Email Address<span class="req">*</span>
</label>
<input type="email" required autocomplete="off"
name="email" />
</div>
</div>
<div class="row resetpword" style="margin-top:0;">
<div class="container-fluid">
<label>
Set A Password<span class="req">*</span>
</label>
<input type="password"required autocomplete="off"
name="password"/>
</div>
</div>
<div class="container-fluid resetpword countrydropdown"
style="margin-top:0;margin-left:-15px;">
<label>
Country of origin<span class="req">*</span>
</label>
<select>
<option value="AF">Afghanistan</option>
<option value="AX">Åland Islands</option>
</select>
</div>
<div class="container-fluid resetpword" style="margin-top:0;">
<label>
Are you a blogger?<span class="req">*</span>
</label>
<input type="checkbox" name="check1" id="blogger"/>
</div>
<div class="addblog"><p>sausage</p></div>
<button type="submit" class="resetb button button-block"
name="register">Register</button>
</form>
js:
jQuery("#blogger").click(function() {
if($(this).is(":checked")) {
jQuery(".addblog").show(300);
}
else {
jQuery(".addblog").hide(300);;
}
});
Post the js code after document.ready and don't forget to add jquery link
Updated fiddle
/*!
* can yo u solve my issue? :) I don't understand why it won't wor
*/
$(document).ready(function(){
jQuery("#blogger").change(function() {
if($(this).is(":checked")) {
jQuery(".addblog").show(300);
}
else {
jQuery(".addblog").hide(300);;
}
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" autocomplete="off">
<div class="row resetpword">
<div class="container-fluid addblog"style="margin-top:-40px;margin-bottom:20px;"><h2>Registration</h2></div>
<div class="container-fluid" style="margin-left:37px;">
<label>
First Name<span class="req">*</span>
</label>
<input type="text" required autocomplete="off" name="firstname" />
</div>
<div class="container-fluid" style="margin-left:35px;">
<label>
Last Name<span class="req">*</span>
</label>
<input type="text" required autocomplete="off" name="lastname" />
</div>
</div>
<div class="row resetpword" style="margin-top:0;">
<div class="container-fluid" style="margin-left:10px;">
<label>
Email Address<span class="req">*</span>
</label>
<input type="email" required autocomplete="off" name="email" />
</div>
</div>
<div class="row resetpword" style="margin-top:0;">
<div class="container-fluid">
<label>
Set A Password<span class="req">*</span>
</label>
<input type="password"required autocomplete="off" name="password"/>
</div>
</div>
<div class="container-fluid resetpword countrydropdown" style="margin-top:0;margin-left:-15px;">
<label>
Country of origin<span class="req">*</span>
</label>
<select>
<option value="AF">Afghanistan</option>
<option value="AX">Åland Islands</option>
</select>
</div>
<div class="container-fluid resetpword" style="margin-top:0;">
<label>
Are you a blogger?<span class="req">*</span>
</label>
<input type="checkbox" name="check1" id="blogger"/>
</div>
<div class="addblog"><p>sausage</p></div>
<button type="submit" class="resetb button button-block" name="register">Register</button>
</form>
looking at your example it seems that your were missing the jquery library as well as some html changes
you have user .addblog class name in two divs.so when you click on check box both divs get show and hide.so remove any one class or use different class name for new div to be inserted..

Categories

Resources