I am using Javascript regualar expression for form validation in my project.Once the validation is completed without any error and while clicking submit button the form should submit and I need to change the submit value to 'please wait..'.
I have tried two methods.
Method 1:By changing the submit value
Method 2:Hide/show method using jquery
Both the methods are not working and i couldn't find the error to.Can anyone help me with this?
/*
// Initialize and add the map
function initMap() {
// The location of Uluru
var uluru = {lat: 12.991011, lng: 77.721225};
// The map, centered at Uluru
var map = new google.maps.Map(
document.getElementById('map'), {zoom: 10, center: uluru});
// The marker, positioned at Uluru
var marker = new google.maps.Marker({position: uluru, map: map});
}
*/
function pagetest(){
var name= document.getElementById("name").value;
var filt = /^[a-zA-Z]+$/;
if (!name.match(filt)){
document.getElementById("name").style.borderColor="red";
document.getElementById("nameerror").innerHTML='Name should not contain any number or special characters';
document.getElementById("nameerror").style.color='red';
}
else{
document.getElementById("name").style.borderColor="green";
document.getElementById("nameerror").innerHTML='valid name';
document.getElementById("nameerror").style.color='green';
}
var number=document.getElementById("mobile").value;
if(number.length!=10)
{
document.getElementById("mobile").style.borderColor="red";
document.getElementById("moberror").innerHTML="Number should be exactly 10 digits and not less than or more than that";
document.getElementById("moberror").style.color='red';
}
else
{
document.getElementById("mobile").style.borderColor="green";
document.getElementById("moberror").innerHTML="valid number";
document.getElementById("moberror").style.color='green';
}
var email = document.getElementById("email").value;
var filter = /^([a-zA-Z0-9_\.\-])+\#(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,3})+$/;
if (!filter.test(email)) {
document.getElementById("email").style.borderColor="red";
document.getElementById("emailerror").innerHTML="Please provide a valid email address";
document.getElementById("emailerror").style.color="red";
}
else{
document.getElementById("email").style.borderColor="green";
document.getElementById("emailerror").innerHTML='valid email address';
document.getElementById("emailerror").style.color='green';
}
var country= document.getElementById("country").value;
var filt = /^[a-zA-Z]+$/;
if (!country.match(filt)) {
document.getElementById("country").style.borderColor="red";
document.getElementById("countryerror").innerHTML='country should not contain any number or special characters';
document.getElementById("countryerror").style.color='red';
}
else{
document.getElementById("country").style.borderColor="green";
document.getElementById("countryerror").innerHTML='Valid Country name';
document.getElementById("countryerror").style.color='green';
}
var city= document.getElementById("city").value;
var filt = /^[a-zA-Z]+$/;
if (!city.match(filt)) {
document.getElementById("city").style.borderColor="red";
document.getElementById("cityerror").innerHTML='city should not contain any number or special characters';
document.getElementById("cityerror").style.color='red';
}
else{
document.getElementById("city").style.borderColor="green";
document.getElementById("cityerror").innerHTML='Valid city name';
document.getElementById("cityerror").style.color='green';
}
/* var reg = /[^A-Za-z]/;
if ((reg.test(query) == false) && (query ==""))
{
document.getElementById('query').style.borderColor="red";
document.getElementById('queryerror').innerHTML="This field is required";
}
else{
document.getElementById("query").style.borderColor="green";
document.getElementById("queryerror").innerHTML ="";
}*/
var security = document.getElementById("security").value;
var securitycode = document.getElementById("securitycode").innerHTML;
if(security ==securitycode){
document.getElementById("security").style.borderColor="";
document.getElementById("codeerror").innerHTML="Code matched";
document.getElementById("codeerror").style.color='green';
}
else{
document.getElementById("security").style.borderColor="red";
document.getElementById("codeerror").innerHTML="Code didn't match or emplty";
document.getElementById("codeerror").style.color='red';
var val =Math.floor(1000 + Math.random() * 9000);
document.getElementById("securitycode").innerHTML =val;
security.focus;
}
if( (name!="") && (email!="") && (number!="") && (country!="") && (city!="") && (security!=""))
{
//alert("ok");
document.getElementById("form_id").submit();//submit() is a predefined function in js.
//document.getElementById("").innerHTML='Please wait..';
}
}
/*$(document).ready(function(){
$('form').submit(function(){
if(validationIsTrue()){
(":button").css('display':'none');
('#Button1').css('display':'block');
}
else{
return false;
}
});
});
$("#form_id").on("submit", function(e){
var $this = $(this);
if(this.checkValidity()) {
e.preventDefault();
alert('ok');
//$this.parents(".form-wrap").hide();
//$(".success-msg").removeClass("hidden")
}
});
*/
.iframe-container{
position: relative;
width: 100%;
padding-bottom: 56.25%; /* Ratio 16:9 ( 100%/16*9 = 56.25% ) */
}
.iframe-container > *{
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
/* Demo styles */
.iframe-container{
margin-top:50px;
width:100%;
}
/*form */
.content{
background-image:url("contact-us (1).jpg");
min-height: 380px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
box-shadow: inset 0 0 0 400px rgba(185, 212, 212, 0.35);
/* Needed to position the navbar */
}
.form-group{
color:white;
}
.no-border {
border: 0;
box-shadow: none; /* You may want to include this as bootstrap applies these styles too */
}
.contact{
color:#BF2626;
font-weight:bold;
margin-top:25px;
}
input,textarea{
margin-left:5px;
}
input:focus{
background-color:#b9dbe2;
color:black;
}
label{
color:black;
margin-top:4px;
}
.code{
color:black;
font-weight:bold;
margin-left:7px;
}
h3{
margin-left:-80px;
}
#securitycode{
color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>
<script src="formvali.js"></script>
<link rel="stylesheet" href="form.css">
</head>
<body onsubmit="loginload()">
<div class="col-sm-12 content">
<div class="col-sm-1"></div>
<div class="col-sm-4">
<h2 class="text-center">
Fill out this form and we will get back to you<span class="glyphicon glyphicon-hand-right"></span>
</h2>
<!-- <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d7245780.082381814!2d-88.29713116153964!3d27.53212533124578!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x88c1766591562abf%3A0xf72e13d35bc74ed0!2sFlorida!5e0!3m2!1sen!2s!4v1470659148428" class="img-responsive" frameborder="0" style="border:0" allowfullscreen></iframe>
-->
<h3 class="text-center"><strong>Bangalore Office</strong></h3>
<iframe src="http://maps.google.com/maps?q=12.987510,77.620491 &z=13&output=embed" width="300" height="200" frameborder="0" style="border:0"></iframe>
<h3 class="text-center"><strong>Kerala Office</strong></h3>
<iframe src="http://maps.google.com/maps?q=9.988126,76.295285 &z=13&output=embed" width="300" height="200" frameborder="0" style="border:0"></iframe>
</div>
<div class="col-sm-6" style="line-height:1.45;">
<h1 class="text-center contact"> Contact Us</h1>
<form action="#" method="POST" id="form_id" name="myform">
<div class="row form-group">
<div class="col-sm-2"></div>
<div class="col-sm-1">
<label>Name</label>
</div>
<div class="col-sm-9">
<input type="text" id="name" class="form-control" placeholder="Enter Your Name">
<i id="nameerror"></i>
</div>
</div><br>
<div class="row form-group">
<div class="col-sm-2"></div>
<div class="col-sm-1">
<label>Mobile</label>
</div>
<div class="col-sm-9">
<input type="text" id="mobile" class="form-control" placeholder="Enter Your Mobile Number">
<i id="moberror"></i>
</div>
</div><br>
<div class="row form-group">
<div class="col-sm-2"></div>
<div class="col-sm-1">
<label style="margin-left:0px;">Email </label>
</div>
<div class="col-sm-9">
<input type="email" id="email" class="form-control"placeholder="Enter Your Email Id">
<i id="emailerror"></i>
</div>
</div><br>
<div class="row form-group">
<div class="col-sm-2"></div>
<div class="col-sm-1">
<label>Country</label>
</div>
<div class="col-sm-9">
<input type="text" id="country" class="form-control" placeholder="Enter Your Country Name">
<i id="countryerror"></i>
</div>
</div><br>
<div class="row form-group">
<div class="col-sm-2"></div>
<div class="col-sm-1">
<label>City</label>
</div>
<div class="col-sm-9">
<input type="text" id="city" class="form-control"placeholder="Enter Your City Name">
<i id="cityerror"></i>
</div>
</div><br>
<div class="row form-group">
<div class="col-sm-2"></div>
<div class="col-sm-1">
<label>Query</label>
</div>
<div class="col-sm-9">
<textarea type="text" class="form-control" id="query"placeholder="Enter Your Query here(optional)"></textarea>
<i id="queryerror"></i>
</div>
</div>
<div class="row form-group">
<div class="col-sm-1"></div>
<div class="col-sm-2"></div>
<div class="col-sm-6">
<span class="code"></strong>Security Code <span id="securitycode"></span></span>
<input type="number" id="security" class="form-control" placeholder="Enter the security code">
<i id="codeerror"></i><br>
<div class="form-group text-center">
<div class="col-sm-2"></div>
<input type="button" class="btn btn-warning" name="sub" value="Submit" onclick="pagetest()"/>
<button id="Button1" style="display:none;">Please wait..</button>
</div>
</div>
</div>
</div>
</form>
<script>
var val =Math.floor(1000 + Math.random() * 9000);
document.getElementById("securitycode").innerHTML = val;
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCXRmYpTXDBP7vdQ-2fy11OqoKGUuGfcxI&callback=initMap">
</script>
</body>
</html>
function pagetest(){
var name= document.getElementById("name").value;
var filt = /^[a-zA-Z]+$/;
if (!name.match(filt)){
document.getElementById("name").style.borderColor="red";
document.getElementById("nameerror").innerHTML='Name should not contain any number or special characters';
document.getElementById("nameerror").style.color='red';
}
else{
document.getElementById("name").style.borderColor="green";
document.getElementById("nameerror").innerHTML='valid name';
document.getElementById("nameerror").style.color='green';
}
var number=document.getElementById("mobile").value;
if(number.length!=10)
{
document.getElementById("mobile").style.borderColor="red";
document.getElementById("moberror").innerHTML="Number should be exactly 10 digits and not less than or more than that";
document.getElementById("moberror").style.color='red';
}
else
{
document.getElementById("mobile").style.borderColor="green";
document.getElementById("moberror").innerHTML="valid number";
document.getElementById("moberror").style.color='green';
}
var email = document.getElementById("email").value;
var filter = /^([a-zA-Z0-9_\.\-])+\#(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,3})+$/;
if (!filter.test(email)) {
document.getElementById("email").style.borderColor="red";
document.getElementById("emailerror").innerHTML="Please provide a valid email address";
document.getElementById("emailerror").style.color="red";
}
else{
document.getElementById("email").style.borderColor="green";
document.getElementById("emailerror").innerHTML='valid email address';
document.getElementById("emailerror").style.color='green';
}
var country= document.getElementById("country").value;
var filt = /^[a-zA-Z]+$/;
if (!country.match(filt)) {
document.getElementById("country").style.borderColor="red";
document.getElementById("countryerror").innerHTML='country should not contain any number or special characters';
document.getElementById("countryerror").style.color='red';
}
else{
document.getElementById("country").style.borderColor="green";
document.getElementById("countryerror").innerHTML='Valid Country name';
document.getElementById("countryerror").style.color='green';
}
var city= document.getElementById("city").value;
var filt = /^[a-zA-Z]+$/;
if (!city.match(filt)) {
document.getElementById("city").style.borderColor="red";
document.getElementById("cityerror").innerHTML='city should not contain any number or special characters';
document.getElementById("cityerror").style.color='red';
}
else{
document.getElementById("city").style.borderColor="green";
document.getElementById("cityerror").innerHTML='Valid city name';
document.getElementById("cityerror").style.color='green';
}
/* var reg = /[^A-Za-z]/;
if ((reg.test(query) == false) && (query ==""))
{
document.getElementById('query').style.borderColor="red";
document.getElementById('queryerror').innerHTML="This field is required";
}
else{
document.getElementById("query").style.borderColor="green";
document.getElementById("queryerror").innerHTML ="";
}*/
var security = document.getElementById("security").value;
var securitycode = document.getElementById("securitycode").innerHTML;
if(security ==securitycode){
document.getElementById("security").style.borderColor="";
document.getElementById("codeerror").innerHTML="Code matched";
document.getElementById("codeerror").style.color='green';
}
else{
document.getElementById("security").style.borderColor="red";
document.getElementById("codeerror").innerHTML="Code didn't match or emplty";
document.getElementById("codeerror").style.color='red';
var val =Math.floor(1000 + Math.random() * 9000);
document.getElementById("securitycode").innerHTML =val;
security.focus;
}
if( (name!="") && (email!="") && (number!="") && (country!="") && (city!="") && (security!="") && (name.match(filt)) && (number.length==10) && (filter.test(email)) && (country.match(filt)) && (city.match(filt)) && (security == securitycode))
{
alert("ok");
$('#submit_btn').val("Please wait");
document.getElementById("form_id").submit();//submit() is a predefined function in js.
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="formvali.js"></script>
<link rel="stylesheet" href="form.css">
</head>
<body onsubmit="loginload()">
<div class="col-sm-12 content">
<div class="col-sm-1"></div>
<div class="col-sm-4">
<h2 class="text-center">
Fill out this form and we will get back to you<span class="glyphicon glyphicon-hand-right"></span>
</h2>
<!-- <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d7245780.082381814!2d-88.29713116153964!3d27.53212533124578!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x88c1766591562abf%3A0xf72e13d35bc74ed0!2sFlorida!5e0!3m2!1sen!2s!4v1470659148428" class="img-responsive" frameborder="0" style="border:0" allowfullscreen></iframe>
-->
<h3 class="text-center"><strong>Bangalore Office</strong></h3>
<iframe src="http://maps.google.com/maps?q=12.987510,77.620491 &z=13&output=embed" width="300" height="200" frameborder="0" style="border:0"></iframe>
<h3 class="text-center"><strong>Kerala Office</strong></h3>
<iframe src="http://maps.google.com/maps?q=9.988126,76.295285 &z=13&output=embed" width="300" height="200" frameborder="0" style="border:0"></iframe>
</div>
<div class="col-sm-6" style="line-height:1.45;">
<h1 class="text-center contact"> Contact Us</h1>
<form action="" method="POST" id="form_id" name="myform">
<div class="row form-group">
<div class="col-sm-2"></div>
<div class="col-sm-1">
<label>Name</label>
</div>
<div class="col-sm-9">
<input type="text" id="name" class="form-control" placeholder="Enter Your Name">
<i id="nameerror"></i>
</div>
</div><br>
<div class="row form-group">
<div class="col-sm-2"></div>
<div class="col-sm-1">
<label>Mobile</label>
</div>
<div class="col-sm-9">
<input type="text" id="mobile" class="form-control" placeholder="Enter Your Mobile Number">
<i id="moberror"></i>
</div>
</div><br>
<div class="row form-group">
<div class="col-sm-2"></div>
<div class="col-sm-1">
<label style="margin-left:0px;">Email </label>
</div>
<div class="col-sm-9">
<input type="email" id="email" class="form-control"placeholder="Enter Your Email Id">
<i id="emailerror"></i>
</div>
</div><br>
<div class="row form-group">
<div class="col-sm-2"></div>
<div class="col-sm-1">
<label>Country</label>
</div>
<div class="col-sm-9">
<input type="text" id="country" class="form-control" placeholder="Enter Your Country Name">
<i id="countryerror"></i>
</div>
</div><br>
<div class="row form-group">
<div class="col-sm-2"></div>
<div class="col-sm-1">
<label>City</label>
</div>
<div class="col-sm-9">
<input type="text" id="city" class="form-control"placeholder="Enter Your City Name">
<i id="cityerror"></i>
</div>
</div><br>
<div class="row form-group">
<div class="col-sm-2"></div>
<div class="col-sm-1">
<label>Query</label>
</div>
<div class="col-sm-9">
<textarea type="text" class="form-control" id="query"placeholder="Enter Your Query here(optional)"></textarea>
<i id="queryerror"></i>
</div>
</div>
<div class="row form-group">
<div class="col-sm-1"></div>
<div class="col-sm-2"></div>
<div class="col-sm-6">
<span class="code"></strong>Security Code <span id="securitycode"></span></span>
<input type="number" id="security" class="form-control" placeholder="Enter the security code">
<i id="codeerror"></i><br>
<div class="form-group text-center">
<div class="col-sm-2"></div>
<input type="button" class="btn btn-warning" name="sub" value="Submit" onclick="pagetest()" id="submit_btn"/>
<button id="Button1" style="display:none;">Please wait..</button>
</div>
</div>
</div>
</div>
</form>
<script>
var val =Math.floor(1000 + Math.random() * 9000);
document.getElementById("securitycode").innerHTML = val;
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCXRmYpTXDBP7vdQ-2fy11OqoKGUuGfcxI&callback=initMap">
</script>
</body>
</html>
Replace your pagetest() function with this function code below and check, I'm using jQuery call here after validation check:
function pagetest(){
var name= document.getElementById("name").value;
var filt = /^[a-zA-Z]+$/;
if (!name.match(filt)){
document.getElementById("name").style.borderColor="red";
document.getElementById("nameerror").innerHTML='Name should not contain any number or special characters';
document.getElementById("nameerror").style.color='red';
}
else{
document.getElementById("name").style.borderColor="green";
document.getElementById("nameerror").innerHTML='valid name';
document.getElementById("nameerror").style.color='green';
}
var number=document.getElementById("mobile").value;
if(number.length!=10)
{
document.getElementById("mobile").style.borderColor="red";
document.getElementById("moberror").innerHTML="Number should be exactly 10 digits and not less than or more than that";
document.getElementById("moberror").style.color='red';
}
else
{
document.getElementById("mobile").style.borderColor="green";
document.getElementById("moberror").innerHTML="valid number";
document.getElementById("moberror").style.color='green';
}
var email = document.getElementById("email").value;
var filter = /^([a-zA-Z0-9_\.\-])+\#(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,3})+$/;
if (!filter.test(email)) {
document.getElementById("email").style.borderColor="red";
document.getElementById("emailerror").innerHTML="Please provide a valid email address";
document.getElementById("emailerror").style.color="red";
}
else{
document.getElementById("email").style.borderColor="green";
document.getElementById("emailerror").innerHTML='valid email address';
document.getElementById("emailerror").style.color='green';
}
var country= document.getElementById("country").value;
var filt = /^[a-zA-Z]+$/;
if (!country.match(filt)) {
document.getElementById("country").style.borderColor="red";
document.getElementById("countryerror").innerHTML='country should not contain any number or special characters';
document.getElementById("countryerror").style.color='red';
}
else{
document.getElementById("country").style.borderColor="green";
document.getElementById("countryerror").innerHTML='Valid Country name';
document.getElementById("countryerror").style.color='green';
}
var city= document.getElementById("city").value;
var filt = /^[a-zA-Z]+$/;
if (!city.match(filt)) {
document.getElementById("city").style.borderColor="red";
document.getElementById("cityerror").innerHTML='city should not contain any number or special characters';
document.getElementById("cityerror").style.color='red';
}
else{
document.getElementById("city").style.borderColor="green";
document.getElementById("cityerror").innerHTML='Valid city name';
document.getElementById("cityerror").style.color='green';
}
/* var reg = /[^A-Za-z]/;
if ((reg.test(query) == false) && (query ==""))
{
document.getElementById('query').style.borderColor="red";
document.getElementById('queryerror').innerHTML="This field is required";
}
else{
document.getElementById("query").style.borderColor="green";
document.getElementById("queryerror").innerHTML ="";
}*/
var security = document.getElementById("security").value;
var securitycode = document.getElementById("securitycode").innerHTML;
if(security ==securitycode){
document.getElementById("security").style.borderColor="";
document.getElementById("codeerror").innerHTML="Code matched";
document.getElementById("codeerror").style.color='green';
}
else{
document.getElementById("security").style.borderColor="red";
document.getElementById("codeerror").innerHTML="Code didn't match or emplty";
document.getElementById("codeerror").style.color='red';
var val =Math.floor(1000 + Math.random() * 9000);
document.getElementById("securitycode").innerHTML =val;
security.focus;
}
$('#Button1').hide();
$('input[name=sub]').show();
if( (name!="") && (email!="") && (number!="") && (country!="") && (city!="") && (security!=""))
{
$('#Button1').show();
$('input[name=sub]').hide();
// $('#form_id').submit(); //uncomment if want to submit after validation
}
}
Related
I have a simple page that makes a flyer. I have the data displaying and am stuck with taking three of the variables and displaying them in a span for tear-off. Here's what I have so far. I've tried a few different approaches trying to get the Title, Name, and Phone to print out in the div. I'm using the multi-event listener to trigger the function to place the data in the span using the getElementsByClassName handler. Any direction is much appreciated.
// JavaScript Document
// Fill Flyer text Areas
// Flyer Title
var inputBoxTitle = document.getElementById('title_input');
inputBoxTitle.onkeyup = function(){
document.getElementById('title').innerHTML = inputBoxTitle.value;
}
// Contact Name
var inputBoxConName = document.getElementById('con_name_input');
inputBoxConName.onkeyup = function(){
document.getElementById('con_name').innerHTML = inputBoxConName.value;
}
// Contact Email
var inputBoxEmail = document.getElementById('email_input');
inputBoxEmail.onkeyup = function(){
document.getElementById('email').innerHTML = inputBoxEmail.value;
}
// Contact Phone
var inputBoxPhone = document.getElementById('phone_input');
inputBoxPhone.onkeyup = function(){
document.getElementById('phone').innerHTML = inputBoxPhone.value;
}
// Animal Name
var inputAnimalName = document.getElementById('name_animal_input');
inputAnimalName.onkeyup = function(){
document.getElementById('animal_name').innerHTML = inputAnimalName.value;
}
// Lost/Found Date
var inputLostDate = document.getElementById('date_lost_input');
inputLostDate.onkeyup = function(){
document.getElementById('date_lost').innerHTML = inputLostDate.value;
}
// Lost or Found
var inputLostFound = document.getElementsByName('lost_input');
(function (){
for(var i = 0; i < inputLostFound.length; i++){
inputLostFound[i].onclick = function(){
document.getElementById('lost_found').innerText = this.value;
}
}
})();
// Microchipped Radio
var inputMicro = document.getElementsByName('micro_input');
(function (){
for(var i = 0; i < inputMicro.length; i++){
inputMicro[i].onclick = function(){
document.getElementById('micro').innerText = this.value;
}
}
})();
// Color
var inputColor = document.getElementById('color_input');
inputColor.onkeyup = function(){
document.getElementById('color').innerHTML = inputColor.value;
}
// Breed
var inputBreed = document.getElementById('breed_input');
inputBreed.onkeyup = function(){
document.getElementById('breed').innerHTML = inputBreed.value;
}
// Animal Sex
var inputSex = document.getElementsByName('sex_input');
(function (){
for(var i = 0; i < inputLostFound.length; i++){
inputSex[i].onclick = function(){
document.getElementById('sex').innerText = this.value;
}
}
})();
// Description
var inputDescription = document.getElementById('description_input');
inputDescription.onkeyup = function(){
document.getElementById('description').innerHTML = inputDescription.value;
}
// Tear Offs
var res = inputBoxTitle + "<br>" + inputBoxConName + "<br>" + inputBoxPhone;
$('inputBoxTitle, inputBoxConName, inputBoxPhone').onkeyup, function(){
document.getElementsByClassName('tear_off_data').innerHTML = document.write(res);
}
.main-row {
flex-wrap: nowrap;
word-break: break-all;
}
.column, .rotate {
border: 1px dashed;
-webkit-box-flex: 1;
flex: 1 1 0;
}
.rotate {
height: 270px;
white-space: nowrap;
width: 0;
}
.rotate > div {
-webkit-transform: translate(0px, 110px) rotate(-90deg);
transform: translate(0px, 110px) rotate(-90deg);
}
.rotate > div > span {
border-bottom: 1px solid #ccc;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mootools/1.6.0/mootools-core.js" integrity="sha512-nxKp6INemMtUWHV+BToAOXm2ZV4+LCc/sw+4j2fyVJG088hHf7Rt/h8qCYT7bTsEtqkDCXo6sbtFlkro3Zo3HA==" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
</head>
<body>
<!---- Start Data Input for Flyer ---->
<div class="container" style="margin-bottom: 10px;">
<div class="jumbotron"><h1>San Antonio Pet Rescue</h1>
<p>locating lost and found/stray, dogs and cats</p>
</div>
<div class="row">
<div class="col-sm">Insert Your Title Here<input type="text" id="title_input" name="title_input" placeholder="Title"></div>
<div class="col-sm">Contact Name<input type="text" id="con_name_input" name="con_name_input" placeholder="Contact Name"></div>
<div class="col-sm">Contact Phone<input class="phone_us" type="tel" id="phone_input" name="phone_input" placeholder="xxx-xxx-xxxx"></div>
<div class="col-sm">Contact Email<input type="email" id="email_input" name="email_input" placeholder="Contact Email"></div>
</div>
<div class="row">
<div class="col-sm">Animal Name if Known<input type="text" id="name_animal_input" name="name_animal_input" placeholder="ex: Duke, Gracie, Ben, Unknown"></div>
<div class="col-sm">Date Found/Lost<input type="date" id="date_lost_input" name="date_lost_input"></div>
<div class="col-sm">Predominate Color<input type="text" id="color_input" name="color" placeholder="ex: Black, Rust, Black and White, Dark Brown..."></div>
<div class="col-sm">Breed of Animal<input type="text" id="breed_input" name="breed_input" placeholder="ex: Calico, Doberman, Apaloossa..."></div>
</div>
<div class="row">
<div class="col-3 col-sm">Lost/Found<input type="radio" id="lost" name="lost_input" value="Lost">Lost <input type="radio" id="found" name="lost_input" value="Found">Found</div>
<fieldset class="form-group">
<div class="row">
<div><legend class="col-form-label col-sm-2 pt-0">Sex</legend></div>
<div class="col-sm-10">
<div class="form-check">
<input class="form-check-input" type="radio" name="sex_input" id="male" value="Male" checked>
<label class="form-check-label" for="male">
Male
</label>
</div>
<div class="col-2 form-check">
<input class="form-check-input" type="radio" name="sex_input" id="female" value="Female">
<label class="form-check-label" for="female">
Female
</label>
</div>
</div>
</div>
</fieldset>
<div class="col-2 col-sm">Microchipped<input type="radio" id="micro_input" name="micro_input" value="Yes">Yes <input type="radio" name="micro" value="No">No <input type="radio" name="micro" value="Unknown">Unknown</div>
</div>
<div class="row">
<div class="col-sm col-6"><label>Add description here</label><textarea id="description_input" name="description_input" placeholder="Identifying Markings and Features, limit 316 characters including spaces
(Note: For found animals, you may want to withold specific details in order to screen for the animal's owner)" wrap="virtual" rows="10" cols="45"></textarea></div>
<div class="col-sm col-5"><label>Select Your Picture Here</label><input type="file" /></div>
</div>
<div class="row">
<div class="col-sm col-12" style="background-color: #e9ecef">Program sponsored by, Bruce Osborne, your JBGoodwin REALTORS for home sales & purchases and Apartment Leases.
For every home purchased or apartment leased through your referrals to Bruce, he will donate $50 to the pet rescue of your choice.</div>
</div>
</div> <!---- Container, Main ---->
<!---- Start Flyer Rendering ---->
<div class="container" style="border: dashed; height: 1200px; width: 1571px">
<div class="row">
<div class="h2 text-center" style="margin: 10px;">SA Pet Rescue</div>
</div>
<div class="row">
<div class="h5 text-center" style="margin: 10px;">locating lost and found/stray, dogs and cats</div>
</div>
<div class="container-md h1 text-center" id="title"></div>
<div class="container-md h1 text-center" id="preview"><img id="myImg" src="#" alt="your image here" width="700" height="400"></div> <!---- Display image ---->
<div class="row container-md">
<div class="col-4 container-md h3 text-center" id="con_name"></div>
<div class="col-4 container-md h3 text-center" id="phone"></div>
<div class="col-4 container-md h3 text-center" id="email"></div>
</div>
<div class="row">
<div class="col-2 container-md h5 text-center" id="animal_name"></div>
<div class="col-2 container-md h5 text-center">Microchipped <span id="micro"></span></div>
<div class="col-2 container-md h5 text-center" id="sex"></div>
<div class="col-2 container-md h5 text-center" id="breed"></div>
<div class="col-2 container-md h5 text-center" id="color"></div>
<div class="col-2 container-md h5 text-center"><span id="lost_found"></span> On <span id="date_lost"></span></div>
</div>
<div class="container-md h3 text-center" id="description"></div>
<div class="container-fluid">
<div class="col-xs-9">
<div class="row main-row">
<div class="rotate">
<div class="h5 tearoff"><span class="tear_off_data"></span></div></div>
<div class="rotate">
<div class="h5 tearoff"><span class="tear_off_data"></span></div></div>
<div class="rotate">
<div class="h5 tearoff"><span class="tear_off_data"></span></div></div>
<div class="rotate">
<div class="h5 tearoff"><span class="tear_off_data"></span></div></div>
<div class="rotate">
<div class="h5 tearoff"><span class="tear_off_data"></span></div></div>
<div class="rotate">
<div class="h5 tearoff"><span class="tear_off_data"></span></div></div>
<div class="rotate">
<div class="h5 tearoff"><span class="tear_off_data"></span></div></div>
<div class="rotate">
<div class="h5 tearoff"><span class="tear_off_data"></span></div></div>
<div class="rotate">
<div class="h5 tearoff"><span class="tear_off_data"></span></div></div>
</div>
</div>
</div>
</div>
<div class="container my-5"></div>
</body>
<script src="flyer-text.js"></script>
<script type="text/jscript">
window.addEventListener('load', function() {
document.querySelector('input[type="file"]').addEventListener('change', function() {
if (this.files && this.files[0]) {
var img = document.querySelector('img'); // $('img')[0]
img.src = URL.createObjectURL(this.files[0]); // set src to file url
}
});
});
</script>
</html>
You are missing .value after the element variables.
You also don't need to call document.write().
The 'Tear-offs' section should be:
var res = inputBoxTitle.value + "<br>" + inputBoxConName.value + "<br>" + inputBoxPhone.value;
$('inputBoxTitle, inputBoxConName, inputBoxPhone').onkeyup, function(){
document.getElementsByClassName('tear_off_data').innerHTML = res;
}
EDIT: I also noticed that you are declaring for loops inside of separate functions. You don't need to do this!
Example:
(function (){
for(var i = 0; i < inputLostFound.length; i++){
inputLostFound[i].onclick = function(){
document.getElementById('lost_found').innerText = this.value;
}
}
})();
Can simply be written as:
for(var i = 0; i < inputLostFound.length; i++){
inputLostFound[i].onclick = function(){
document.getElementById('lost_found').innerText = this.value;
}
}
when i click the Pay Now button in the Chrome console i see this error and nothing happens. I really need your help guys because my site is good, i need only to fix this error. Thanks in advance! Feel free to contact me for any incomprehension! Also you can find over here one photo of the error : Photo of Error in Console
//order_process.php
session_start();
$total_price = 0;
$item_details = '';
$order_details = '
<div class="table-responsive" id="order_table">
<table class="table table-bordered table-striped">
<tr>
<th>Prodotto</th>
<th>Quantità</th>
<th>Prezzo</th>
<th>Totale</th>
</tr>
';
if(!empty($_SESSION["shopping_cart"]))
{
foreach($_SESSION["shopping_cart"] as $keys => $values)
{
$order_details .= '
<tr>
<td>'.$values["product_name"].'</td>
<td>'.$values["product_quantity"].'</td>
<td align="right">€ '.$values["product_price"].'</td>
<td align="right">€ '.number_format($values["product_quantity"] * $values["product_price"], 2).'</td>
</tr>
';
$total_price = $total_price + ($values["product_quantity"] * $values["product_price"]);
$item_details .= $values["product_name"] . ', ';
}
$item_details = substr($item_details, 0, -2);
$order_details .= '
<tr>
<td colspan="3" align="right">Totale</td>
<td align="right">€ '.number_format($total_price, 2).'</td>
</tr>
';
}
$order_details .= '</table>';
?>
<!DOCTYPE html>
<html>
<head>
<title>Ordine</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://js.stripe.com/v2/"></script>
<script src="js/jquery.creditCardValidator.js"></script>
<meta charset="UTF-8" />
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.popover
{
width: 100%;
max-width: 800px;
}
.require
{
border:1px solid #FF0000;
background-color: #cbd9ed;
}
</style>
</head>
<body>
<div class="container">
<br />
<br />
<span id="message"></span>
<div class="panel panel-default">
<div class="panel-heading">Inserisci i dati per completare il tuo ordine.</div>
<div class="panel-body">
<form method="post" id="order_process_form" action="payment.php">
<div class="row">
<div class="col-md-8" style="border-right:1px solid #ddd;">
<h4 align="center">Dati Personali</h4>
<div class="form-group">
<label><b><i style="font-size:24px" class="fa"></i> Titolare Carta <span class="text-danger">*</span></b></label>
<input type="text" name="customer_name" id="customer_name" class="form-control" value="" />
<span id="error_customer_name" class="text-danger"></span>
</div>
<div class="form-group">
<label><b><i style="font-size:24px" class="fa"></i> Email <span class="text-danger">*</span></b></label>
<input type="text" name="email_address" id="email_address" class="form-control" value="" />
<span id="error_email_address" class="text-danger"></span>
</div>
<div class="form-group">
<label><b><i style="font-size:24px" class="fa"></i> Indirizzo <span class="text-danger">*</span></b></label>
<textarea name="customer_address" id="customer_address" class="form-control"></textarea>
<span id="error_customer_address" class="text-danger"></span>
</div>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label><b>Città <span class="text-danger">*</span></b></label>
<input type="text" name="customer_city" id="customer_city" class="form-control" value="" />
<span id="error_customer_city" class="text-danger"></span>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label><b>CAP <span class="text-danger">*</span></b></label>
<input type="text" name="customer_pin" id="customer_pin" class="form-control" value="" />
<span id="error_customer_pin" class="text-danger"></span>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label><b>Stato </b></label>
<input type="text" name="customer_state" id="customer_state" class="form-control" value="" />
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label><b>Nazione <span class="text-danger">*</span></b></label>
<input type="text" name="customer_country" id="customer_country" class="form-control" />
<span id="error_customer_country" class="text-danger"></span>
</div>
</div>
</div>
<hr />
<h4 align="center">Inserisci la carta di Credito.</h4>
<div class="form-group">
<label><i style="font-size:24px" class="fa"></i> Numero Carta <span class="text-danger">*</span></label>
<input type="text" name="card_holder_number" id="card_holder_number" class="form-control" placeholder="1234 5678 9012 3456" maxlength="20" onkeypress="" />
<span id="error_card_number" class="text-danger"></span>
</div>
<div class="form-group">
<div class="row">
<div class="col-md-4">
<label>mese di Scadenza</label>
<input type="text" name="card_expiry_month" id="card_expiry_month" class="form-control" placeholder="MM" maxlength="2" onkeypress="return only_number(event);" />
<span id="error_card_expiry_month" class="text-danger"></span>
</div>
<div class="col-md-4">
<label>Anno di Scadenza</label>
<input type="text" name="card_expiry_year" id="card_expiry_year" class="form-control" placeholder="YYYY" maxlength="4" onkeypress="return only_number(event);" />
<span id="error_card_expiry_year" class="text-danger"></span>
</div>
<div class="col-md-4">
<label>CVC</label>
<input type="text" name="card_cvc" id="card_cvc" class="form-control" placeholder="123" maxlength="4" onkeypress="return only_number(event);" />
<span id="error_card_cvc" class="text-danger"></span>
</div>
</div>
</div>
<br />
<div align="center">
<input type="hidden" name="total_amount" value="<?php echo $total_price; ?>" />
<input type="hidden" name="currency_code" value="EUR" />
<input type="hidden" name="item_details" value="<?php echo $item_details; ?>" />
<input type="button" name="button_action" id="button_action" class="btn btn-success btn-sm" onclick="stripePay(event)" value="Pay Now" />
</div>
<br />
</div>
<div class="col-md-4">
<h4 align="center">Details:</h4>
<?php
echo $order_details;
?>
</div>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
<script>
function validate_form()
{
var valid_card = 0;
var valid = false;
var card_cvc = $('#card_cvc').val();
var card_expiry_month = $('#card_expiry_month').val();
var card_expiry_year = $('#card_expiry_year').val();
var card_holder_number = $('#card_holder_number').val();
var email_address = $('#email_address').val();
var customer_name = $('#customer_name').val();
var customer_address = $('#customer_address').val();
var customer_city = $('#customer_city').val();
var customer_pin = $('#customer_pin').val();
var customer_country = $('#customer_country').val();
var name_expression = /^[a-z ,.'-]+$/i;
var email_expression = /^([a-z0-9\+_\-]+)(\.[a-z0-9\+_\-]+)*#([a-z0-9\-]+\.)+[a-z]{2,6}$/;
var month_expression = /^01|02|03|04|05|06|07|08|09|10|11|12$/;
var year_expression = /^2017|2018|2019|2020|2021|2022|2023|2024|2025|2026|2027|2028|2029|2030|2031$/;
var cvv_expression = /^[0-9]{3,3}$/;
$('#card_holder_number').validateCreditCard(function(result){
if(result.valid)
{
$('#card_holder_number').removeClass('require');
$('#error_card_number').text('');
valid_card = 1;
}
else
{
$('#card_holder_number').addClass('require');
$('#error_card_number').text('Numero Carta Invalido');
valid_card = 0;
}
});
if(valid_card == 1)
{
if(!month_expression.test(card_expiry_month))
{
$('#card_expiry_month').addClass('require');
$('#error_card_expiry_month').text('Data Errata');
valid = false;
}
else
{
$('#card_expiry_month').removeClass('require');
$('#error_card_expiry_month').text('');
valid = true;
}
if(!year_expression.test(card_expiry_year))
{
$('#card_expiry_year').addClass('require');
$('#error_card_expiry_year').error('Data Errata');
valid = false;
}
else
{
$('#card_expiry_year').removeClass('require');
$('#error_card_expiry_year').error('');
valid = true;
}
if(!cvv_expression.test(card_cvc))
{
$('#card_cvc').addClass('require');
$('#error_card_cvc').text('Data Errata');
valid = false;
}
else
{
$('#card_cvc').removeClass('require');
$('#error_card_cvc').text('');
valid = true;
}
if(!name_expression.test(customer_name))
{
$('#customer_name').addClass('require');
$('#error_customer_name').text('Nome Errato');
valid = false;
}
else
{
$('#customer_name').removeClass('require');
$('#error_customer_name').text('');
valid = true;
}
if(!email_expression.test(email_address))
{
$('#email_address').addClass('require');
$('#error_email_address').text('Indirizzo Email Errato');
valid = false;
}
else
{
$('#email_address').removeClass('require');
$('#error_email_address').text('');
valid = true;
}
if(customer_address == '')
{
$('#customer_address').addClass('require');
$('#error_customer_address').text('Inserisci Indirizzo');
valid = false;
}
else
{
$('#customer_address').removeClass('require');
$('#error_customer_address').text('');
valid = true;
}
if(customer_city == '')
{
$('#customer_city').addClass('require');
$('#error_customer_city').text('Inserisci Città');
valid = false;
}
else
{
$('#customer_city').removeClass('require');
$('#error_customer_city').text('');
valid = true;
}
if(customer_pin == '')
{
$('#customer_pin').addClass('require');
$('#error_customer_pin').text('Inserisci CAP');
valid = false;
}
else
{
$('#customer_pin').removeClass('require');
$('#error_customer_pin').text('');
valid = true;
}
if(customer_country == '')
{
$('#customer_country').addClass('require');
$('#error_customer_country').text('Inserisci Nazione');
valid = false;
}
else
{
$('#customer_country').removeClass('require');
$('#error_customer_country').text('');
valid = true;
}
}
return valid;
}
Stripe.setPublishableKey('pk_test_JKDlpKvWn3oe1nIwl75D9pC400hFQsqUwu');
function stripeResponseHandler(status, response)
{
if(response.error)
{
$('#button_action').attr('disabled', false);
$('#message').html(response.error.message).show();
}
else
{
var token = response['id'];
$('#order_process_form').append("<input type='hidden' name='token' value='" + token + "' />");
$('#order_process_form').submit();
}
}
function stripePay(event)
{
event.preventDefault();
if(validate_form() == true)
{
$('#button_action').attr('disabled', 'disabled');
$('#button_action').val('Payment Processing....');
Stripe.createToken({
number:$('#card_holder_number').val(),
cvc:$('#card_cvc').val(),
exp_month : $('#card_expiry_month').val(),
exp_year : $('#card_expiry_year').val()
}, stripeResponseHandler);
return false;
}
}
function only_number(event)
{
var charCode = (event.which) ? event.which : event.keyCode;
if (charCode != 32 && charCode > 31 && (charCode < 48 || charCode > 57))
{
return false;
}
return true;
}
</script>
I have a bootstrap form and i'm handling it with js.
but having problem cause if statement is not working correctly.
if you run the code you will see that the if statement that is comparing the second and third field is not working correctly
for second and third field in case 9 and a number below 9 it works but if you enter for example 10 and 5 for second and third field it wont work true.
Also if you enter 5 and 10 for second and third field it must return the error but it works.
any idea?
function mcalculate() {
var mainPrice = document.forms["disc"]["price"].value;
var productPercentage = document.forms["disc"]["t-per"].value;
var customerPercentage = document.forms["disc"]["c-per"].value;
var productCount = document.forms["disc"]["count"].value;
var runProject = true;
if (isNaN(mainPrice)){
document.getElementById("error1").innerHTML = "قیمت کالا باید عدد باشد";
runProject = false;
}
else {
document.getElementById("error1").innerHTML = "";
}
if (mainPrice<1){
document.getElementById("error2").innerHTML = "قیمت کالا باید عدد و مثبت باشد";
runProject = false;
}
else {
document.getElementById("error2").innerHTML = "";
}
if (isNaN(productPercentage ) || isNaN(customerPercentage)){
document.getElementById("error3").innerHTML = "درصد باید عدد باشد";
runProject = false;
}
else {
document.getElementById("error3").innerHTML = "";
}
if (productPercentage>100 || productPercentage<0){
document.getElementById("error4").innerHTML = "تخفیف شما بین 0 تا 100 نیست";
runProject = false;
}
else {
document.getElementById("error4").innerHTML = "";
}
if (customerPercentage>100 || customerPercentage<0 ){
document.getElementById("error5").innerHTML = "تخفیف مشتری بین 0 تا 100 نیست. ";
runProject = false;
}
else {
document.getElementById("error5").innerHTML = "";
}
if (isNaN(customerPercentage)){
document.getElementById("error6").innerHTML = "درصد باید عدد باشد"
runProject = false;
}
else if(customerPercentage > productPercentage){
document.getElementById("error6").innerHTML = "تخفیف مشتری از تخفیف شما بیشتر است";
runProject = false;
}
else {
document.getElementById("error6").innerHTML = "";
}
if (isNaN(productCount)){
document.getElementById("error7").innerHTML = "تعداد کالا باید عدد باشد";
runProject = false;
}
else {
document.getElementById("error7").innerHTML = "";
}
if (productCount<1){
document.getElementById("error8").innerHTML = "تعداد کالا باید عدد و مثبت باشد";
runProject = false;
}
else {
document.getElementById("error8").innerHTML = "";
}
if (runProject==true){
document.getElementById("calResult").innerHTML = "das"
}
else{
document.getElementById("calResult").innerHTML = "";
}
}
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-6">
<form name="disc" class="form-horizontal" action="" method="post">
<div class="form-group">
<label class="control-label col-md-6" for="price">قیمت کالا به تومان :</label>
<div class="col-md-6">
<input type="text" class="form-control" id="price" placeholder="مثلا 2580000" name="price" required>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-6" for="t-per">درصد تخفیف دریافتی شما :</label>
<div class="col-md-6">
<input type="text" class="form-control" id="t-per" placeholder="مثلا 8" name="t-per" required>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-6" for="c-per">درصد تخفیف شما به مشتری :</label>
<div class="col-md-6">
<input type="text" class="form-control" id="c-per" placeholder="مثلا 6" name="c-per" required>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-6" for="count">تعداد کالا :</label>
<div class="col-md-6">
<input type="text" class="form-control" id="count" placeholder="مثلا 5" name="count">
</div>
</div>
<div class="form-group">
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-2">
<button type="button" class="btn btn-default" onclick="mcalculate()">محاسبه</button>
</div>
<div class="col-md-2">
<button type="reset" class="btn btn-default">ریست</button>
</div>
</div>
</form>
</div>
<div class="col-md-3">
</div>
</div>
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-6">
<p id="error1" class="red"></p>
<p id="error2" class="red"></p>
<p id="error3" class="red"></p>
<p id="error4" class="red"></p>
<p id="error5" class="red"></p>
<p id="error6" class="red"></p>
<p id="error7" class="red"></p>
<p id="error8" class="red"></p>
<p id="calResult"></p>
</div>
<div class="col-md-3"></div>
</div>
You should cast all inputs that you want to use/compare as numbers to type Number first. .value always returns strings. You should also try to use dot notation instead of bracket notation whenever possible - reduces syntax noise.
var mainPrice = Number(document.forms.disc.price.value);
var productPercentage = Number(document.forms.disc.['t-per'].value);
var customerPercentage = Number(document.forms.disc.['c-per'].value);
var productCount = Number(document.forms.disc.count.value);
I'm trying to learn Bootstrap / play around with Bootsnipp.
I have copied the HTML, CSS and JS from the link (although I think I have redundancy here): http://bootsnipp.com/snippets/e3MBM
1) Is it Redundant to add the CDN link and the actual CSS and JS (From what I understand the latter would only be if I host the CSS and JS files locally? Can someone confirm this?
2)The damn thing doesn't work the way it is supposed to:
Is theirs - with each step shown separately.
Mine, on the other hand has everything together:
It's probably something so stupid and simple, but I have no idea.Can someone please help?
I tried JSFiddle *First time using it, looks easy, but I hope I've got it right :)
<!DOCTYPE HTML>
https://jsfiddle.net/vvstafo2/1/
You forgot to add bootstrap JS and CSS file thats why its conflict over there, Would you please once try with the below code?
$(document).ready(function () {
var navListItems = $('div.setup-panel div a'),
allWells = $('.setup-content'),
allNextBtn = $('.nextBtn');
allWells.hide();
navListItems.click(function (e) {
e.preventDefault();
var $target = $($(this).attr('href')),
$item = $(this);
if (!$item.hasClass('disabled')) {
navListItems.removeClass('btn-primary').addClass('btn-default');
$item.addClass('btn-primary');
allWells.hide();
$target.show();
$target.find('input:eq(0)').focus();
}
});
allNextBtn.click(function(){
var curStep = $(this).closest(".setup-content"),
curStepBtn = curStep.attr("id"),
nextStepWizard = $('div.setup-panel div a[href="#' + curStepBtn + '"]').parent().next().children("a"),
curInputs = curStep.find("input[type='text'],input[type='url']"),
isValid = true;
$(".form-group").removeClass("has-error");
for(var i=0; i<curInputs.length; i++){
if (!curInputs[i].validity.valid){
isValid = false;
$(curInputs[i]).closest(".form-group").addClass("has-error");
}
}
if (isValid)
nextStepWizard.removeAttr('disabled').trigger('click');
});
$('div.setup-panel div a.btn-primary').trigger('click');
});
body {
margin-top:40px;
}
.stepwizard-step p {
margin-top: 10px;
}
.stepwizard-row {
display: table-row;
}
.stepwizard {
display: table;
width: 50%;
position: relative;
}
.stepwizard-step button[disabled] {
opacity: 1 !important;
filter: alpha(opacity=100) !important;
}
.stepwizard-row:before {
top: 14px;
bottom: 0;
position: absolute;
content: " ";
width: 100%;
height: 1px;
background-color: #ccc;
z-order: 0;
}
.stepwizard-step {
display: table-cell;
text-align: center;
position: relative;
}
.btn-circle {
width: 30px;
height: 30px;
text-align: center;
padding: 6px 0;
font-size: 12px;
line-height: 1.428571429;
border-radius: 15px;
}
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css">
<link rel="stylesheet" href="http://bootsnipp.com/dist/bootsnipp.min.css?ver=7d23ff901039aef6293954d33d23c066">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="http://bootsnipp.com/dist/scripts.min.js"></script>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<div class="container">
<div class="stepwizard col-md-offset-3">
<div class="stepwizard-row setup-panel">
<div class="stepwizard-step">
1
<p>Step 1</p>
</div>
<div class="stepwizard-step">
2
<p>Step 2</p>
</div>
<div class="stepwizard-step">
3
<p>Step 3</p>
</div>
</div>
</div>
<form role="form" action="" method="post">
<div class="row setup-content" id="step-1">
<div class="col-xs-6 col-md-offset-3">
<div class="col-md-12">
<h3> Step 1</h3>
<div class="form-group">
<label class="control-label">First Name</label>
<input maxlength="100" type="text" required="required" class="form-control" placeholder="Enter First Name" />
</div>
<div class="form-group">
<label class="control-label">Last Name</label>
<input maxlength="100" type="text" required="required" class="form-control" placeholder="Enter Last Name" />
</div>
<div class="form-group">
<label class="control-label">Address</label>
<textarea required="required" class="form-control" placeholder="Enter your address" ></textarea>
</div>
<button class="btn btn-primary nextBtn btn-lg pull-right" type="button" >Next</button>
</div>
</div>
</div>
<div class="row setup-content" id="step-2">
<div class="col-xs-6 col-md-offset-3">
<div class="col-md-12">
<h3> Step 2</h3>
<div class="form-group">
<label class="control-label">Company Name</label>
<input maxlength="200" type="text" required="required" class="form-control" placeholder="Enter Company Name" />
</div>
<div class="form-group">
<label class="control-label">Company Address</label>
<input maxlength="200" type="text" required="required" class="form-control" placeholder="Enter Company Address" />
</div>
<button class="btn btn-primary nextBtn btn-lg pull-right" type="button" >Next</button>
</div>
</div>
</div>
<div class="row setup-content" id="step-3">
<div class="col-xs-6 col-md-offset-3">
<div class="col-md-12">
<h3> Step 3</h3>
<button class="btn btn-success btn-lg pull-right" type="submit">Submit</button>
</div>
</div>
</div>
</form>
</div>
I have been working on the below screen where I have a drop down for selecting a file/folder type(file type being default). When I Provide a valid file Path first, the ADD button is not getting enabled. After, I select the Folder from drop down and provide a valid folder path , then the ADD button is getting enabled. I think , the Problem is with the validation I'm using i.e.:ng-disabled="conditionForm.$invalid" Can you tell me where I am doing the mistake !!? Providing Code and screen shots below.
<form name="conditionForm" class="form-horizontal" role="form" novalidate="novalidate">
<div class="form-group">
<label class="col-sm-2 control-label no-padding-right">Type :</label>
<div class="col-sm-3" style="width:110px">
<select name="fileorfoldertype" id="ddlFileOrFolderType" class="form-control" ng-init="fileorfoldertype = fileorfoldertypes[0]" style="width:100px" ng-model="fileorfoldertype" ng-options="fileorfolderpath as fileorfolderpath.name for fileorfolderpath in fileorfoldertypes" ng-change="change()" required></select>
</div>
<div class="form-group" id="filepath">
<label class="col-sm-2 control-label no-padding-right">File Path:</label>
<div>
<div class="col-sm-3" style="border:0px solid red;">
<input name="filespath" id="txtfilepath" type="text" class="form-control" ng-model="filespath" ng-pattern="/^(([a-zA-Z]:)|(\\{2}\w+)\$?)(\\(\w[\w].*))(.jpg|.txt|.doc|.xls|.gif|.GIF|.exe|.pdf|.xml|.cvv|.dll)$/" required>
</div>
<div class="col-sm-3">
<p ng-show="conditionForm.filespath.$error.required" class="help-block" style="display: inline; float: left;">File Path is required and cannot be empty.</p>
<p ng-show="conditionForm.filespath.$error.pattern" class="help-block" style="display: inline; float: left;">The input is not a valid File Path.</p>
</div>
</div>
</div>
<div class="form-group" id="folderpath" style="display:none">
<label class="col-sm-2 control-label no-padding-right">Folder Path:</label>
<div>
<div class="col-sm-3" style="border:0px solid red;">
<input name="folderspath" id="txtfolderpath" type="text" class="form-control" ng-model="folderspath" ng-pattern="/^([A-Z|a-z]:\\[^*|><>?\n]*)|(\\\\.*?\\.*)$/" required>
</div>
<div class="col-sm-3">
<p ng-show="conditionForm.folderspath.$error.required" class="help-block" style="display: inline; float: left;">Folder Path is required and cannot be empty.</p>
<p ng-show="conditionForm.folderspath.$error.pattern" class="help-block" style="display: inline; float: left;">The input is not a valid Folder Path.</p>
</div>
</div>
</div>
</div>
<div class="form-group">
<div id="addbutton" class="col-sm-3" style="padding-left:590px;">
<button style="width:70px" class="btn" type="submit" ng-disabled="conditionForm.$invalid" ng-click="add()">
Add
</button>
</div>
</div>
<div class="form-group">
<div class="col-sm-10">
<div class="col-sm-10 mail-container">
<div class="mail-header">
<ul class="header-buttons">
<li>
<a class="tooltip-primary" ng-click="deleteCondition()"><i class="glyphicon glyphicon-remove"></i></a>
</li>
</ul>
</div>
</div>
<div class="col-sm-10" id="divGrid">
<table id="jQFileManagement"></table>
<div id="jqGridPager"></div>
</div>
</div>
</div>
</form>
$scope.fileorfoldertypes = [
{ id: "0", name: "File" },
{ id: "1", name: "Folder" },
];
$scope.change = function () {
if ($scope.fileorfoldertype.id === '0')
{
$("#folderpath").hide();
$("#filepath").show();
document.getElementById('txtfilepath').value = "";
document.getElementById('txtfolderpath').disabled = true;
document.getElementById("txtfilepath").disabled = false;
}
else if ($scope.fileorfoldertype.id === '1') {
$("#folderpath").show();
$("#filepath").hide();
document.getElementById('txtfolderpath').value = "";
document.getElementById('txtfilepath').disabled = true;
document.getElementById("txtfolderpath").disabled = false;
}
}
$scope.add = function () {
var filetype;
if ($scope.fileorfoldertype.id == "1") {
filetype = 1;
folderOrFilePath = $scope.folderspath;
var folderdata = {
typeId: filetype,
folderOrFilePath: $scope.folderspath
}
}
else {
filetype = 2;
folderOrFilePath = $scope.filespath;
var folderdata = {
typeId: filetype,
folderOrFilePath: $scope.filespath
}
}
selectedfolders.unshift(folderdata);
if (selectedfolders != "") {
$("#jQFileManagement")
.jqGrid('setGridParam',
{
datatype: 'local',
data: selectedfolders
})
.trigger("reloadGrid");
}
$scope.filespath = '';
$scope.folderspath = '';
$scope.conditionForm.$invalid = true;
};