I am trying to create a HTML5 based progress bar with three steps. The objective I want to achieve is field level progression as well as step level progression.
So the whole progress bar can be divided into two sections, where the first section is 50% and second section is 50% and if there are total 20 fields then after entering each field the progress bar moves 5% .Since want to implement this as well as include images in those steps. It's somehow not working out.
<div id="tmm-form-wizard" class="container substrate">
<div class="row stage-container">
<div class="stage tmm-current col-lg-4 col-md-4 col-sm-4 col-xs-4">
<div class="stage-header personaldetails"></div>
<div class="stage-content">
<h3 class="stage-title angel_font" style="color:#ffffff !important; font-size:14px !important;">Personal Details</h3>
</div>
</div><!--/ .stage-->
<div class="stage col-lg-4 col-md-4 col-sm-4 col-xs-4">
<div class="stage-header planselection"></div>
<div class="stage-content">
<h3 class="stage-title angel_font" style="color:#ffffff !important; font-size:14px !important;">Plan Selection</h3>
</div>
</div><!--/ .stage-->
<div class="stage col-lg-4 col-md-4 col-sm-4 col-xs-4 norightbar">
<div class="stage-header reviewpay"></div>
<div class="stage-content">
<h3 class="stage-title angel_font" style="color:#ffffff !important; font-size:14px !important;">Review and Pay</h3>
</div>
</div><!--/ .stage-->
</div><!--/ .row-->
</div><!--/ .container-->
</div> <!--LOGO, NEED HELP AND PROGRESS CONTAINER ENDS-->
</nav><!--FIXED NAVIGATION ENDS-->
<div class="col-lg-3 col-md-3 col-sm-3 hidden-xs"></div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 lalign">
<form action="" method="post" id="step1_form" name="step1_form">
<span class="angel_font pan_no">PAN Number</span>
<input type="text" class="form-control input_outline" placeholder="Type your PAN Number (eg: BODPM4264E)" id="pan_text" name="pan_text" onblur="checkField(this)" maxlength="10" style="text-transform:uppercase;"/>
<p class="angel_font" id="err_msgpan">PAN card must contain a mix of Alphabets (A-Z) and Numbers (0-9)</p>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 hidden-xs"></div>
</div> <!--PAN NUM ENDS-->
<div class="row"> <!--DOB TEXT STARTS-->
<div class="col-lg-3 col-md-3 col-sm-3 hidden-xs"></div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 lalign">
<span class="angel_font dob">Date of Birth (as per PAN card)</span>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 hidden-xs"></div>
</div> <!--DOB TEXT ENDS-->
<div class="row"> <!--DOB FIELD STARTS-->
<div class="col-lg-3 col-md-3 col-sm-3 hidden-xs"></div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<input type="tel" class="input_outline" placeholder="DD" id="dd_text" name="dd_text" maxlength="2" onkeypress="return isNumber(event)" size="4" onblur="isEmpty(this)"/>
<input type="tel" class="input_outline" placeholder="MM" id="mm_text" name="mm_text" maxlength="2" onkeypress="return isNumber(event)" size="4" onblur="isEmpty(this)"/>
<input type="tel" class="input_outline" placeholder="YYYY" id="yyyy_text" name="yyyy_text" maxlength="4" onkeypress="return isNumber(event)" size="6" onblur="isEmpty(this)"/>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 hidden-xs"></div>
</div> <!--DOB FIELD ENDS-->
/* Stage */
#tmm-form-wizard .stage:before,
#tmm-form-wizard .stage:after { background-color: #ffffff; } /* Set color for STAGE LINE */
#tmm-form-wizard .stage-header { background-color: #d8e3ee;; } /* Set background color for STAGE HEADER */
#tmm-form-wizard .stage-title { color: #464646; } /* Set color for STAGE TITLE */
#tmm-form-wizard .stage-info { color: #a8a8a8;} /* Set color for STAGE INFO */
/* end Stage */
/* Current stage */
#tmm-form-wizard .stage.tmm-current .stage-header { background-color: #fabf00; } /* Set background color for CURRENT STAGE */
#tmm-form-wizard .stage.tmm-current .stage-header.head-number { color: #fff; } /* Set color for CURRENT STAGE TEXT */
#tmm-form-wizard .stage.tmm-current:after,
#tmm-form-wizard .stage.tmm-current:before { background-color: #fabf00; } /* Set background color for CURRENT STAGE LINE */
/* end Current stage */
/* Success stage */
#tmm-form-wizard .stage.tmm-success .stage-header { background-color: #00a33e; } /* Set background color for SUCCESS STAGE */
#tmm-form-wizard .stage.tmm-success .stage-header.head-number { color: #3c611b; } /* Set color for SUCCESS STAGE TEXT */
#tmm-form-wizard .stage.tmm-success:after,
#tmm-form-wizard .stage.tmm-success:before { background-color: #fabf00; } /* Set background color for SUCCESS STAGE LINE */
#tmm-form-wizard .stage.tmm-success .stage-header:after { color: #00a33e; } /* Set color for SUCCESS STAGE ICON */
/* end Success stage */
#tmm-form-wizard.substrate { background-color: transparent !important; } /* Set background color for FORM SUBSTRATE */
If I understand your question you want to change the progress value according to some other form field, respecting whether these fields are filled or not. Try look at this sample:
$(function() {
$("input[type='text']").change(function() {
var progress = parseInt($("progress").val());
var val = $(this).val();
// Change the progress value according to the value in the input field
$("progress").val(val.length > 0 ? (progress + 10) : (progress - 10));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<progress value="0" max="100"></progress>
<br/>
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
I used the HTML5 progress, but you can use your own, and I handle change event of all input fields in the page. If some field is changed and its value is not empty, I update the progress value towards 100%.
You'll need to perform this algorithm:
elements with content / # of elements
Whenever an element is altered.
To do this, you need to "wire up" each input so that when its value is changed, the progress bar is updated:
// When the document is ready
$(function() {
// Find all the input elements are group them
// If you are using other input types besides textboxes, update the selector
var $inputs = $("input[type='text']");
// Find out how many there are:
var amount = $inputs.length;
// Wire up each input to a callback function for
// when their value gets changed
$inputs.change(function() {
var progress = parseInt($("progress").val());
// Loop through all the inputs to see how many have values
var count = 0;
$.each(inputs,function(index, value){
if(value !== ""){
count++;
}
});
// Calculate the progress %
var prog = parseInt((count / amount) * 100);
$("progress").val(prog);
});
});
Related
I am receiving a bunch of ERR_HTTP2_PROTOCOL_ERROR messages in dev tools after 1 of the pages submits a form to a controller and then the controller displays a different view.
This is the sequence of events:
OnlineEnrollmentController presents Index.cshtml.
The View Index.cshtml displays text to the user and the user clicks a button to submit a form.
The form is sent to OnlineEnrollmentController/Agreement where a View is returned.
The View Agreement.cshtml is presented to the user and the user clicks a button to submit a form.
The form is sent to OnlineEnrollmentController/Profile where the ActionResult Profile reads data from a database, populates a model and returns the model to the View Profile.cshtml.
The View Profile.cshtml is presented to the user and the user clicks a button to submit a form.
The form is sent to OnlineEnrollmentController/Rate where the ActionResult Rate reads data from a database, populates a model and returns the model to the View Rate.cshtml.
The View Rate.cshtml is presented to the user and asks the user to enter a rate into a text box. The user enters a rate and clicks on the button to submit the form.
The form is sent to OnlineEnrollmentController/Election where the ActionResult Election gets the rate that was populated and stores in a TempData field. A new list of object is created where each object contains 3 fields and is returned to the View Election.cshtml.
The View Election.cshtml uses a foreach loop to display the contents of the list of object.
All this logic works except now I am receiving this ERR_HTTP2_PROTOCOL_ERROR when the View Election.cshtml is loaded.
Here are the specifics:
The application has a shared view called _NoMenu.cshtml. This is the contents of the file:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<title>#ViewData["Title"]</title>
<link rel="stylesheet" href="~/css/site.css" />
<script src="https://use.fontawesome.com/54ec0da54f.js"></script>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous" />
<!-- font awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous" />
<style>
/* Style for showing in progress bar
--------------------------------------------------*/
.submit-progress {
position: fixed;
top: 30%;
left: 50%;
height: 6em;
padding-top: 2.3em;
/* The following rules are the
ones most likely to change */
width: 20em;
/* Set 'margin-left' to a negative number
that is 1/2 of 'width' */
margin-left: -10em;
padding-left: 2.1em;
background-color: #17a2b8a8;
color: black;
-webkit-border-radius: 0.4em;
-moz-border-radius: 0.4em;
border-radius: 0.4em;
box-shadow: 0.4em 0.4em rgba(0,0,0,0.6);
-webkit-box-shadow: 0.4em 0.4em rgba(0,0,0,0.6);
-moz-box-shadow: 0.4em 0.4em rgba(0,0,0,0.6);
}
.hidden {
visibility: hidden;
}
.submit-progress i {
margin-right: 0.5em;
}
.mb-5, .my-5 {
margin-bottom: 1.5rem !important;
}
.scrollHeight {
height: 85vh;
}
.hideit {
display: none;
}
.width95 {
width: 95%;
}
.myDIV {
height: 75%;
overflow: auto;
}
.content500 {
height: 500px;
}
.content600 {
height: 600px;
}
.content800 {
height: 800px;
}
</style>
</head>
<body>
<div>
#RenderBody()
</div>
</body>
</html>
I use this for any page in my application where I dont want to show a standard bootstrap menu structure.
Here is the contents of the view Rate.schtml:
#model AccuRecordV3.Models.OnlineEnrollment_Indicative_Verify
#{
ViewData["Title"] = "Online Enrollment - Rate";
Layout = "~/Views/Shared/_NoMenu.cshtml";
}
#using (Html.BeginForm("Election", "OnlineEnrollment", FormMethod.Post))
{
<section id="rate" class="vh-100" style="background-color: #508bfc;">
<div class="container py-5 h-100">
<div class="row d-flex justify-content-center align-items-center h-100">
<div class="col-12 col-md-8 col-lg-6 col-xl-5">
<div class="card shadow-2-strong" style="border-radius: 1rem;">
<div class="card-body p-5 text-center scrollHeight">
<h3 class="mb-5">Online Enrollment</h3>
<h5 class="mb-5">Step 1 of 3</h5>
<div id="rateDIV" class="myDIV">
<div id="ratecontent" class="content500">
<div class="form-outline mb-4">
<label class="form-label text-left width95">
#Model.messageLiteral
</label>
</div>
<div class="form-outline mb-4">
<label class="form-label text-left width95">
The minimum contribution rate allowed by your plan is #Model.outputMinPct and the
maximum contribution rate allowed by your plan is #Model.outputMaxPct
</label>
</div>
<div class="form-outline mb-4">
<label class="form-label text-left">
How much would you like to contribute?
</label>
</div>
<div class="form-outline mb-4">
<input type="number" id="electedRate" asp-for="electedRate" class="form-control form-control-lg rate" value="#Model.electedRate" placeholder="0" min="#Model.ss_CtrbKMinPct" step="1" max="#Model.ss_CtrbKMaxPct" />
<label class="form-label text-danger" for="electedRate" id="rateerrorLabel"> </label>
</div>
<button class="btn btn-primary btn-lg btn-block" type="button" id="rateButton" disabled onclick="return DisplayProgressMessage(this, 'rate');">Next</button>
<button class="btn btn-outline-primary btn-lg btn-block" type="button" id="cancelRateButton" onclick="return Cancel(this, 'rate');">Cancel</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
}
<script>
$(function () {
var rate = 0;
$('.rate').each(function () {
rate += parseInt($(this).val());
});
var minRate = parseInt("#Model.ss_CtrbKMinPct");
var maxRate = parseInt("#Model.ss_CtrbKMaxPct");
if (rate < minRate || rate > maxRate) {
$("#rateButton").prop("disabled", true);
} else {
$("#rateButton").prop("disabled", false);
}
$('.rate').change(function () {
var rate = 0;
$('.rate').each(function () {
rate += parseInt($(this).val());
});
var minRate = parseInt("#Model.ss_CtrbKMinPct");
var maxRate = parseInt("#Model.ss_CtrbKMaxPct");
if (rate < minRate || rate > maxRate) {
$("#rateButton").prop("disabled", true);
} else {
$("#rateButton").prop("disabled", false);
}
})
})
function DisplayProgressMessage(ctl, msg) {
$(ctl).prop("disabled", true).text(msg);
$("#submitButton").prop("disabled", true);
$(".submit-progress").removeClass("hidden");
const myTimeout = setTimeout(function () {
$("form").submit();
}, 5);
}
</script>
The view Rate.schtml works correctly, using jquery to validate the rate the user enters and then submits the form back to the controller.
This is the contents of Election.cshtml:
#model AccuRecordV3.Models.OnlineEnrollment_Indicative_Verify
#{
ViewData["Title"] = "Online Enrollment - Rate";
Layout = "~/Views/Shared/_NoMenu.cshtml";
}
#using (Html.BeginForm("Summary", "OnlineEnrollment", FormMethod.Post))
{
<section id="elections" class="vh-100" style="background-color: #508bfc;">
<div class="container py-5 h-100">
<div class="row d-flex justify-content-center align-items-center h-100">
<div class="col-12 col-md-8 col-lg-6 col-xl-5">
<div class="card shadow-2-strong" style="border-radius: 1rem;">
<div class="card-body p-3 text-center scrollHeight">
<h3 class="mb-5">Online Enrollment</h3>
<h5 class="mb-5">Step 2 of 3</h5>
<div id="electionsDIV" class="myDIV">
<div id="electionscontent" class="content600">
<div class="form-outline mb-4">
<label class="form-label text-left width95">
These are the funds that are available to you. You can allocate your contribution to any/all of these funds. Remember, you wont be able to submit your elections all your total elections added together equal 100%.
</label>
</div>
#foreach (var localRecord in Model.electionData)
{
<div class="row width95">
<label for="NewPct" class="col-sm-9 col-form-label text-left">#localRecord.FundName</label>
<div class="col-sm-3">
<input type="number" class="form-control election" id="NewPct" name="NewPct" min="#localRecord.MinPct" max="#localRecord.MaxPct" value="0">
<input type="number" id="HostFID" name="HostFID" hidden value="#localRecord.HostFID" />
</div>
</div>
}
<div class="row width95">
<label class="col-sm-9 col-form-label text-left">Total</label>
<label id="ElectionTotal" name="ElectionTotal" class="col-sm-3 col-form-label text-right">0%</label>
</div>
<button class="btn btn-primary btn-lg btn-block" type="button" id="electionButton" disabled onclick="return DisplayProgressMessage(this, 'elections');">Next</button>
<button class="btn btn-outline-primary btn-lg btn-block" type="button" id="cancelElectionButton" onclick="return Cancel(this, 'elections');">Cancel</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
}
<script>
$(function () {
$('.election').change(function () {
var sum = 0;
$('.election').each(function () {
sum += parseInt($(this).val());
});
var totalElection = sum + "%";
$("#ElectionTotal").text(totalElection)
if (sum == 100) {
$("#electionButton").prop("disabled", false);
} else {
$("#electionButton").prop("disabled", true);
}
})
})
function DisplayProgressMessage(ctl, msg) {
$(ctl).prop("disabled", true).text(msg);
$("#submitButton").prop("disabled", true);
$(".submit-progress").removeClass("hidden");
const myTimeout = setTimeout(function () {
$("form").submit();
}, 5);
}
</script>
When this view loads, and I look at dev tools, this is what I see:
and
So, for some reason, this error is preventing jquery.min.js from loading which in turn causes the '$' not defined error.
It looks like this error is also preventing the style sheet from loading properly as well.
Some research into this says it's a CORS issue but I dont see how I could have a CORS issue on one page (Elections.schtml) and not on the others (Index.schtml, Agreement.schtml, Profile.schtml, and Rate.schtml).
Any idea how to resolve this?
Thanks.
I have 4 divs with bootstrap col-md-3 class. When clicked on any Div, I am expanding width of that div to 100%, showing expanded contents and hiding(display:none) other divs.
On close button, I want to reverse changes, so I am trying to assign 25% width, hinding expanded contents and making other divs visible(display:block).
But changes are not getting reflected.
function openTab(tab) {
var i, x, y;
x = document.getElementsByClassName("containerTab");
y = document.getElementsByClassName("OuterTab");
for (i = 0; i < x.length; i++)
{
if(i==tab-1)
{
y[i].style.width="100%";
y[i].style.transition= "width 0.5s ease-in";
x[i].style.maxHeight="5000px";
x[i].style.transition= "max-height 1s ease-in";
}
else
{
y[i].style.display="none";
}
}
}
function closeTab(tab)
{
var i, x, y,z, a;
x = document.getElementsByClassName("containerTab");
y = document.getElementsByClassName("OuterTab");
for (i = 0; i < x.length; i++)
{
if(i==tab-1)
{
y[i].style.width= "25%";
y[i].style.transition= "width 0.5s ease-in";
x[i].style.maxHeight = "0px";
x[i].style.transition= "max-height 1s ease-in";
}
else
{
y[i].style.display = "block";
}
}
}
.border1{border: 1px solid; border-radius: 5px;padding:2px}
.border2{border: 1px solid; border-radius: 7px;padding:10px}
.containerTab {
cursor: pointer;
color: black;
max-height: 0;
min-height:0;
overflow: hidden;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid" style="padding:10px">
<div class="row">
<div class="col-md-3 col-xs-12 text-center OuterTab" onclick="openTab(1);" style="">
<div class="border1">
<div class="border2">
content 1
</div>
<div id="b1" class="containerTab" style="">
Expanded content 1
<div><button onclick="closeTab(1)">Close</button></div>
</div>
</div>
</div>
<div class="col-md-3 col-xs-12 text-center OuterTab" onclick="openTab(2);" style="">
<div class="border1">
<div class="border2">
content 2
</div>
<div id="b2" class="containerTab" style="width:100%;">
Expanded content 2
<div><button onclick="closeTab(1)">Close</button></div>
</div>
</div>
</div>
<div class="col-md-3 col-xs-12 text-center OuterTab" onclick="openTab(3);" style="">
<div class="border1">
<div class="border2">
content 3
</div>
<div id="b3" class="containerTab" style="width:100%;">
Expanded content 3
<div><button onclick="closeTab(1)">Close</button></div>
</div>
</div>
</div>
<div class="col-md-3 col-xs-12 text-center OuterTab" onclick="openTab(4);" style="">
<div class="border1">
<div class="border2">
content 4
</div>
<div id="b3" class="containerTab" style="width:100%;">
Expanded content 4
<div><button onclick="closeTab(1)">Close</button></div>
</div>
</div>
</div>
</div>
Instead of re-applying the individual styles. Apply the new styles by simply adding a CSS class. Then on the click of the Close button, simply remove that class, which will cause the affected elements to revert to their previous style.
addClass and removeClass in jQuery - not removing class
Got answer in this post. Seems the problem was due to event bubbling as close button was inside clickable div, both closetab tab and opentab events were getting called. Worked fine when moved "close" button outside div.
I'm trying to create an upload preview for the image the user is uploading. I've gotten most of what I want done (thanks to stackoverflow... a lot of copying pasting and some tweaking) but since I don't know JavaScript, I can't get it to work exactly.
function uploadPreview(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
if (e.target.result.trim().length == 0) {
$('#serviceImage').attr('src', 'http://catawbabrewing.com/wp-content/themes/catawba/images/placeholder.png');
} else {
$('#serviceImage').attr('src', e.target.result);
}
}
reader.readAsDataURL(input.files[0]);
}
}
function uploadPreviewExt(input) {
if (input.trim().length == 0) {
var previewSrc = '{{CSS_URL}}/images/placeholder.jpg';
} else {
var previewSrc = input;
}
$('#serviceImage').attr('src', previewSrc);
}
function resetUploadPreview() {
if (!$('#previousImage').val()) {
$('#serviceImage').attr('src', 'http://catawbabrewing.com/wp-content/themes/catawba/images/placeholder.png');
} else {
$('#serviceImage').attr('src', '{{PROD_IMG}}/'.$('#previousImage').val());
}
}
$("#mainImage").change(function() {
uploadPreview(this);
});
$('[name="mainImgExt"]').on('change', function() {
uploadPreviewExt(this.value);
});
$('#clearUpload').on('click', function() {
$('#mainImage').val('');
if ($('#imgExt').val().trim().length == 0) {
resetUploadPreview();
} else {
uploadPreviewExt($('#imgExt').val());
}
});
$('#clearUploadExt').on('click', function() {
$('#imgExt').val('');
if (!$('#mainImage').val()) {
resetUploadPreview();
} else {
uploadPreview($('#mainImage'));
}
});
pointer {
cursor: pointer;
}
img.placeholder {
width: 100px;
height: 100px;
}
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="//unpkg.com/popper.js#1.12.9/dist/umd/popper.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<div class="form-group p-3 border p-2 rounded m-3">
<div class="row">
<div class="col-sm-3 text-center pt-2 border-right">
<label for="mainImage"><img src="http://catawbabrewing.com/wp-content/themes/catawba/images/placeholder.png" alt="Placeholder" id="serviceImage" class="placeholder img-thumbnail" aria-describedby="imagePreviewHelp" /></label>
<small id="imagePreviewHelp" class="form-text text-muted">Preview could appear stretched</small>
</div>
<div class="col">
<label for="mainImage">Image</label>
<div class="input-group mb-3">
<input type="file" class="form-control border p-1" id="mainImage" name="mainImage" />
<div class="input-group-append">
<span class="input-group-text bg-warning text-danger pointer" id="clearUpload">X</span>
</div>
</div>
<div class="input-group mb-3">
<input type="text" class="form-control" id="imgExt" name="mainImgExt" placeholder="Externel Image" aria-describedby="imageHelp" />
<div class="input-group-append">
<span class="input-group-text bg-warning text-danger pointer" id="clearUploadExt">X</span>
</div>
</div>
<small id="imageHelp" class="form-text text-muted">Upload a local image <strong>or</strong> link to an external image.</small>
</div>
</div>
</div>
View on JSFiddle
There is a lot of JavaScript involved (more then my comfort zone since I don't know it at all).
There are two versions of HTML that the JavaScript could come across. It depends whether the user is adding a service, or editing one. The form is generated dynamically with the help of TWIG.
In JSFiddle, there is one version of the image uploading part of the form (if it's adding a service) below is the version for editing a service. (The hidden input field "previousImage" is added and the preview is the current image rather then the placeholder)
<div class="form-group p-3 border p-2 rounded">
<div class="row">
<div class="col-sm-3 text-center pt-2 border-right">
<label for="mainImage"><img src="https://logismarketmx.cdnwm.com/ip/eve-maquinaria-mantenimiento-para-gruas-mantenimiento-de-gruas-987423-FGR.jpg" alt="Vinyl" id="serviceImage" class="placeholder img-thumbnail" aria-describedby="imagePreviewHelp" /></label>
<input type="hidden" name="previousImage" id="previousImage" value="eve-maquinaria-mantenimiento-para-gruas-mantenimiento-de-gruas-987423-FGR.jpg" />
<small id="imagePreviewHelp" class="form-text text-muted">Preview could appear stretched</small>
</div>
<div class="col">
<label for="mainImage">Image</label>
<div class="input-group mb-3">
<input type="file" class="form-control border p-1" id="mainImage" name="mainImage" />
<div class="input-group-append">
<span class="input-group-text bg-warning text-danger pointer" id="clearUpload">X</span>
</div>
</div>
<div class="input-group mb-3">
<input type="text" class="form-control" id="imgExt" name="mainImgExt" placeholder="Externel Image" aria-describedby="imageHelp" />
<div class="input-group-append">
<span class="input-group-text bg-warning text-danger pointer" id="clearUploadExt">X</span>
</div>
</div>
<small id="imageHelp" class="form-text text-muted">Upload a local image <strong>or</strong> link to an external image.</small>
</div>
</div>
</div>
That's the backstory of the problem. Here is what I'm struggling with.
I want it when the user clicks on the red 'X' to clear the field to it's immediate left. It clears the field, but I also want to reset the upload preview image.
The reason the second version of the form matters is because if the user resets and is adding, then the image changes to the placeholder (which is what happens for the local upload but not the external URL); but if the user is editing a service then the upload preview would reset to the previous image that was set to the service.
I have the javascript to what I think should be working, but it doesn't.
function resetUploadPreview()
{
if(!$('#previousImage').val())
{
$('#serviceImage').attr('src', '{{CSS_URL}}/images/placeholder.jpg');
}
else
{
$('#serviceImage').attr('src', '{{PROD_IMG}}/' . $('#previousImage').val());
}
}
The logic behind that is if input with the ID 'previousImage' is empty (or nonexistent) it would display the placeholder but if it does have a value than we use it's value (the filename) to display this image.
But it doesn't do that, clearing the local file upload resets the image to the placeholder no matter if previousImage is filled or not, and the external url doesn't clear at all.
Another feature I'd like implemented is if both fields are filled in (local and external) then clearing one would display the other image in the preview.
Sorry if this seems simple, the logic seems simple to me but I can't seem to get it to work and I have no idea what I am missing... seems to me like everything is where it should work, but it just doesn't.
When editing it doesn't reset to the previous image... it doesn't reset at all. Console is giving me the following error
TypeError: "../design/variant/productImages/".$ is not a function
The line of code that it leads to is:
function resetUploadPreview()
{
if(!$('#previousImage').val())
{
$('#serviceImage').attr('src', '{{CSS_URL}}/images/placeholder.jpg');
}
else
{
// This is the line that makes that error
$('#serviceImage').attr('src', '{{PROD_IMG}}/' . $('#previousImage').val());
}
}
When adding a new service if you add a local image first and then an external image it shows the external image preview just like it should. But once you clear the external image it should display the local image (since it is filled in) but it doesn't change the preview at all. And console isn't showing any warnings/errors.
What am I doing wrong?
Nice work!
I made two adjustments:
In JavaScript, string concatenation is performed by using the + sign, as opposed to the . sign. (Hence the TypeError message you referenced.) I changed the code in resetUploadPreview() accordingly.
The uploadPreview() function does not expect a jQuery object, but a jQuery object is passed to restore the main image when the external image field is cleared. I changed it to pass the DOM element instead: $('#mainImage')[0] instead of $('#mainImage'). For more info, see What does $(selector)[0] mean in jQuery?
function uploadPreview(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
if (e.target.result.trim().length == 0) {
$('#serviceImage').attr('src', '//catawbabrewing.com/wp-content/themes/catawba/images/placeholder.png');
} else {
$('#serviceImage').attr('src', e.target.result);
}
}
reader.readAsDataURL(input.files[0]);
}
}
function uploadPreviewExt(input) {
if (input.trim().length == 0) {
var previewSrc = '{{CSS_URL}}/images/placeholder.jpg';
} else {
var previewSrc = input;
}
$('#serviceImage').attr('src', previewSrc);
}
function resetUploadPreview() {
if (!$('#previousImage').val()) {
$('#serviceImage').attr('src', 'http://catawbabrewing.com/wp-content/themes/catawba/images/placeholder.png');
} else {
$('#serviceImage').attr('src', '{{PROD_IMG}}/' + $('#previousImage').val());
}
}
$("#mainImage").change(function() {
uploadPreview(this);
});
$('[name="mainImgExt"]').on('change', function() {
uploadPreviewExt(this.value);
});
$('#clearUpload').on('click', function() {
$('#mainImage').val('');
if ($('#imgExt').val().trim().length == 0) {
resetUploadPreview();
} else {
uploadPreviewExt($('#imgExt').val());
}
});
$('#clearUploadExt').on('click', function() {
$('#imgExt').val('');
if (!$('#mainImage').val()) {
resetUploadPreview();
} else {
uploadPreview($('#mainImage')[0]);
}
});
pointer {
cursor: pointer;
}
img.placeholder {
width: 100px;
height: 100px;
}
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="//unpkg.com/popper.js#1.12.9/dist/umd/popper.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<div class="form-group p-3 border p-2 rounded m-3">
<div class="row">
<div class="col-sm-3 text-center pt-2 border-right">
<label for="mainImage"><img src="http://catawbabrewing.com/wp-content/themes/catawba/images/placeholder.png" alt="Placeholder" id="serviceImage" class="placeholder img-thumbnail" aria-describedby="imagePreviewHelp" /></label>
<small id="imagePreviewHelp" class="form-text text-muted">Preview could appear stretched</small>
</div>
<div class="col">
<label for="mainImage">Image</label>
<div class="input-group mb-3">
<input type="file" class="form-control border p-1" id="mainImage" name="mainImage" />
<div class="input-group-append">
<span class="input-group-text bg-warning text-danger pointer" id="clearUpload">X</span>
</div>
</div>
<div class="input-group mb-3">
<input type="text" class="form-control" id="imgExt" name="mainImgExt" placeholder="Externel Image" aria-describedby="imageHelp" />
<div class="input-group-append">
<span class="input-group-text bg-warning text-danger pointer" id="clearUploadExt">X</span>
</div>
</div>
<small id="imageHelp" class="form-text text-muted">Upload a local image <strong>or</strong> link to an external image.</small>
</div>
</div>
</div>
This one has been driving me nuts and I have no clue what the problem is.
I have a quiz that has different kinds of question types (multiple choice, type in the answer, etc) and for each question, I set the innerHTML using a function and then populate it accordingly.
If it's a textbox question, I'd like to automatically set the focus to it. I've tried using javascript, jQuery, and the console window from within Chrome. I've set the tab index to -1. I've looked on this website, but none of the solutions seem to work.
Here's the code:
function populate(){
render_HTML(session.getCurrentItem().itemType);
if(session.getCurrentItem().itemType === "multiple choice"){
//multiple choice
}
else if(session.getCurrentItem().itemType === "typing"){
var element = document.getElementById("questionTest");
element.innerHTML = session.getCurrentItem().primaryText;
console.log("set text");
$( "#inputBox" ).focus();
}
}
.typing .typing-wrapper {
position: relative;
margin-top: 10px
}
.typing .typing-wrapper .typing-box {
width: 100%;
padding: 5.7px 23px;
height: 57px
}
.typing .typing-wrapper .typing-box:focus {
outline: 0;
}
<div class="central-area" id="central-area">
<div class="main typing">
<button class="next-button btn btn-inverse clearfix" id="unique-next-button" onclick="switchPage()" style="display: inline-block;" title="Next [Shortcut : Enter]"><span class="next-icon"></span>
<div class="next-text">
Next
</div></button>
<div class="question-row row column">
<div class="graphic"></div>
<div class="question-text" id="questionText">
to leave
</div>
</div>
<div class="hint row column">
<span class="hint-text">Type the correct <strong>French</strong> for the <strong>English</strong> above:</span>
</div>
<div class="alert alert-warning typing-alert"></div>
<div class="typing-wrapper">
<span class="marking-icon"></span>
<input autocomplete="off" class="shiny-box typing-box" id="inputBox" spellcheck="false" tabindex="-1" type="text">
</div>
</div>
</div>
function populate(){
render_HTML(session.getCurrentItem().itemType);
if(session.getCurrentItem().itemType === "multiple choice"){
//multiple choice
}
else if(session.getCurrentItem().itemType === "typing"){
var element = document.getElementById("questionTest");
element.innerHTML = session.getCurrentItem().primaryText;
console.log("set text");
$( "#inputBox" ).focus();
}
}
.typing .typing-wrapper {
position: relative;
margin-top: 10px
}
.typing .typing-wrapper .typing-box {
width: 100%;
padding: 5.7px 23px;
height: 57px
}
.typing .typing-wrapper .typing-box:focus {
outline: 0;
}
<div class="central-area" id="central-area">
<div class="main typing">
<button class="next-button btn btn-inverse clearfix" id="unique-next-button" onclick="switchPage()" style="display: inline-block;" title="Next [Shortcut : Enter]"><span class="next-icon"></span>
<div class="next-text">
Next
</div></button>
<div class="question-row row column">
<div class="graphic"></div>
<div class="question-text" id="questionText">
to leave
</div>
</div>
<div class="hint row column">
<span class="hint-text">Type the correct <strong>French</strong> for the <strong>English</strong> above:</span>
</div>
<div class="alert alert-warning typing-alert"></div>
<div class="typing-wrapper">
<span class="marking-icon"></span>
<input autocomplete="off" class="shiny-box typing-box" id="inputBox" spellcheck="false" tabindex="-1" type="text">
</div>
</div>
</div>
I am trying to integrate a payment gateway on a webpage using the stripe API. I am referring to this code snippet HERE. I am having trouble with loading JQUERY and kind of been struggling for some time to get it working. I am getting this error
Uncaught TypeError: Cannot read property 'addMethod' of undefined
I think the problem is because of not loading the jquery properly but not sure where its going wrong.
code
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<script type="text/javascript" src="https://js.stripe.com/v2/"></script>
<style>
/* Padding - just for asthetics on Bootsnipp.com */
body { margin-top:20px; }
/* CSS for Credit Card Payment form */
.panel-title {display: inline;font-weight: bold;}
.checkbox.pull-right { margin: 0; }
.pl-ziro { padding-left: 0px; }
.form-control.error {
border-color: red;
outline: 0;
box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(255,0,0,0.6);
}
label.error {
font-weight: bold;
color: red;
padding: 2px 8px;
margin-top: 2px;
}
.payment-errors {
font-weight: bold;
color: red;
padding: 2px 8px;
margin-top: 2px;
}
</style>
</head>
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"><img class="pull-right" src="http://i76.imgup.net/accepted_c22e0.png">Payment Details</h3>
</div>
<div class="panel-body">
<form role="form" id="payment-form">
<div class="row">
<div class="col-xs-12">
<div class="form-group">
<label for="cardNumber">CARD NUMBER</label>
<div class="input-group">
<input type="text" class="form-control" name="cardNumber" placeholder="Valid Card Number" required autofocus data-stripe="number" />
<span class="input-group-addon"><i class="fa fa-credit-card"></i></span>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-7 col-md-7">
<div class="form-group">
<label for="expMonth">EXPIRATION DATE</label>
<div class="col-xs-6 col-lg-6 pl-ziro">
<input type="text" class="form-control" name="expMonth" placeholder="MM" required data-stripe="exp_month" />
</div>
<div class="col-xs-6 col-lg-6 pl-ziro">
<input type="text" class="form-control" name="expYear" placeholder="YY" required data-stripe="exp_year" />
</div>
</div>
</div>
<div class="col-xs-5 col-md-5 pull-right">
<div class="form-group">
<label for="cvCode">CV CODE</label>
<input type="password" class="form-control" name="cvCode" placeholder="CV" required data-stripe="cvc" />
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="form-group">
<label for="couponCode">COUPON CODE</label>
<input type="text" class="form-control" name="couponCode" />
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<button class="btn btn-success btn-lg btn-block" type="submit">Start Subscription</button>
</div>
</div>
<div class="row" style="display:none;">
<div class="col-xs-12">
<p class="payment-errors"></p>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<script>
var $form = $('#payment-form');
$form.on('submit', payWithStripe);
/* If you're using Stripe for payments */
function payWithStripe(e) {
e.preventDefault();
/* Visual feedback */
$form.find('[type=submit]').html('Validating <i class="fa fa-spinner fa-pulse"></i>');
var PublishableKey = 'mykey'; // Replace with your API publishable key
Stripe.setPublishableKey(PublishableKey);
Stripe.card.createToken($form, function stripeResponseHandler(status, response) {
console.log
if (response.error) {
/* Visual feedback */
$form.find('[type=submit]').html('Try again');
/* Show Stripe errors on the form */
$form.find('.payment-errors').text(response.error.message);
$form.find('.payment-errors').closest('.row').show();
} else {
/* Visual feedback */
$form.find('[type=submit]').html('Processing <i class="fa fa-spinner fa-pulse"></i>');
/* Hide Stripe errors on the form */
$form.find('.payment-errors').closest('.row').hide();
$form.find('.payment-errors').text("");
// response contains id and card, which contains additional card details
var token = response.id;
console.log(token);
// AJAX
$.post('/account/stripe_card_token', {
token: token
})
// Assign handlers immediately after making the request,
.done(function(data, textStatus, jqXHR) {
$form.find('[type=submit]').html('Payment successful <i class="fa fa-check"></i>').prop('disabled', true);
})
.fail(function(jqXHR, textStatus, errorThrown) {
$form.find('[type=submit]').html('There was a problem').removeClass('success').addClass('error');
/* Show Stripe errors on the form */
$form.find('.payment-errors').text('Try refreshing the page and trying again.');
$form.find('.payment-errors').closest('.row').show();
});
}
});
}
/* Form validation */
jQuery.validator.addMethod("month", function(value, element) {
return this.optional(element) || /^(01|02|03|04|05|06|07|08|09|10|11|12)$/.test(value);
}, "Please specify a valid 2-digit month.");
jQuery.validator.addMethod("year", function(value, element) {
return this.optional(element) || /^[0-9]{2}$/.test(value);
}, "Please specify a valid 2-digit year.");
validator = $form.validate({
rules: {
cardNumber: {
required: true,
creditcard: true,
digits: true
},
expMonth: {
required: true,
month: true
},
expYear: {
required: true,
year: true
},
cvCode: {
required: true,
digits: true
}
},
highlight: function(element) {
$(element).closest('.form-control').removeClass('success').addClass('error');
},
unhighlight: function(element) {
$(element).closest('.form-control').removeClass('error').addClass('success');
},
errorPlacement: function(error, element) {
$(element).closest('.form-group').append(error);
}
});
paymentFormReady = function() {
if ($form.find('[name=cardNumber]').hasClass("success") &&
$form.find('[name=expMonth]').hasClass("success") &&
$form.find('[name=expYear]').hasClass("success") &&
$form.find('[name=cvCode]').val().length > 1) {
return true;
} else {
return false;
}
}
$form.find('[type=submit]').prop('disabled', true);
var readyInterval = setInterval(function() {
if (paymentFormReady()) {
$form.find('[type=submit]').prop('disabled', false);
clearInterval(readyInterval);
}
}, 250);
</script>
Your problem is that:
You are trying to use this jquery validation plugin without including it to your page.
add this to your page
<script type="text/javascript" src="http://cdn.jsdelivr.net/jquery.validation/1.13.1/jquery.validate.min.js"></script>
DEMO