Jquery validation error displayed on "label". How to fix it?

Jquery validation error displayed on "label". How to fix it? - javascript

My form is made using the “bootstrap” styles. To check for input fields, I use “jquery” validation. Label with the name is on top of input, when you click on input, “label” moves over “input”. When you click “Next”, the error “validation” appears on top of the “label” with the name, and should be located under the “input”. How to fix so that “label” moves above “input” and the error is below “input”?
my code
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/jquery.validate.min.js"></script>
</script>
<style type="text/css">
#step2,#step3,#step4,#step5{
display: none;
}
.form-group label
{
position: absolute;
top: 3px;
pointer-events: none;
left: 20px;
transition: .5s;
}
.container .form-group input:focus ~label,
.container .form-group input:valid ~label
{
left: 20px;
top: -20px;
color: rgb(66,133,244);
font-size: 12px;
font-weight: bold;
}
</style>
<script>
$(document).ready(function(e){
$.validator.addMethod("minlenghtname", function (value, element) {
return /^[a-z]+$/i.test(value);
}," does not match the format");
$.validator.addMethod("requiredname", function (value, element) {
return value.length > 2;
}," fill this field");
var v = $("#commentForm").validate({
rules: {
fname: {
requiredname: true,
minlenghtname: true
},
lname: {
requiredname: true,
minlenghtname: true
}
},
submitHandler: function() {
alert("Submitted, thanks!");
}
})
$(".next1").click(function() {
if (v.form()) {
$("#step2").show();
$("#step1").hide();
$("#progressText").html("Step 2 of 4");
}
});
});
</script>
</head>
<body>
<div class="container">
<div id="progressText" style="margin-bottom:20px;">Step 1 of 4</div>
<form class="cmxform" id="commentForm" method="get" action="">
<div id="step1">
<div class="row">
<div class="form-group col-md-6 col-sm-6">
<input class="form-control" id="fname" name="fname" required="">
<label>First Name:</label>
</div>
<div class="form-group col-md-6 col-sm-6">
<input class="form-control" id="lname" name="lname" required="">
<label>Last Name:</label>
</div>
<p class="buttonWrapper">
<input name="formNext1" type="button" class="next1 nextbutton" value="Next" alt="Next" title="Next">
</p>
</div>
</div>
<div id="step2">
Next
</div>
</form>
</div>
</body>
</html>

Validation also uses labels to show errors so you end up with double label for each field. Those from validation come with error class, so you can target them and either show it normally:
.form-group label.error {
position: static;
}
or treat it like that label but move down:
.form-group label.error {
top: 35px;
}

Related

Why is the content being appended to the wrong dynamically-generated tab?

I am trying to create jQuery Tabs dynamically. It should work so that every time I click on "Generate" Multiplication table button a new Tab should be created and a table with the current data parameters will be displayed in this tab.
Currently, the first tab stores all the tables, and the subsequent tabs do not store anything:
How can I make the first tab store only the first table and the second tab the next table and so on?
$( document ).ready(function() {
var tabs = [];
//Function to generate a multiplication table based on user's range input.
function generateTable(minCol, maxCol, minRow, maxRow) {
let tabsList = document.getElementById("tabsList");
let tableTabs = document.getElementById("tableTabs");
let tabObject = {
name: tabs.length,
minCol: minCol,
maxCol: maxCol,
minRow: minRow,
maxRow: maxRow
};
tabs.push(tabObject);
let listItem = document.createElement("li");
let anchor = document.createElement("a");
anchor.href = `#tab-${tabs.length-1}`;
anchor.innerText = `tab-${tabs.length-1}`;
listItem.appendChild(anchor);
tabsList.appendChild(listItem);
listItem.classList.add("ui-tabs-tab");
let tableDiv = document.createElement("div");
tableDiv.id = `tab-${tabs.length-1}`;
tableTabs.appendChild(tableDiv);
var error = document.getElementById("message");
var table = document.createElement("table");
var result = "";
//creating a multTable
for(var i=minRow; i<=maxRow;i++)
{
if(i==minRow)
{
result += "<tr>";
result += "<th>×</th>";
}
for(var j=minCol; j<=maxCol; j++)
{
if(i==minRow || j==minCol)
{
if(i==minRow)
result += "<th>" + j + "</th>";
else
result += "<td>"+ (i-1)*j + "</td>";
}
else
result += "<td>"+ (i-1)*j + "</td>";
}
result += "</tr>";
result += "<tr>";
result += "<th>" + i + "</th>";
if(i==maxRow)
{
for(var j=minCol; j<=maxCol; j++)
{
result += "<td>"+ i*j + "</td>";
}
}
}
//printing the table
table.innerHTML=result;
tableDiv.appendChild(table);
$("#tableTabs").tabs( { "active" : tabs.length-1});
return false;
}
//Function to validate user's input
$(function() {
$("#inputForm").submit(function(e) {
e.preventDefault();
}).validate({
submitHandler: function(form) {
var minCol = parseInt(document.getElementById("minCol").value);
var maxCol = parseInt(document.getElementById("maxCol").value);
var minRow = parseInt(document.getElementById("minRow").value);
var maxRow = parseInt(document.getElementById("maxRow").value);
generateTable(minCol, maxCol, minRow, maxRow);
return false;
}
});//end validate
});//end function
});
html {
background-color: #9FA5FF;
height: 100%;
}
body {
background-color: #E2E3FF;
margin: 0 auto;
width: 70%;
}
h2 {
padding-top: 20px;
padding-bottom: 20px;
text-align: center;
background-color: #c68de2;
}
h6 {
text-align: center;
margin-bottom: 0px;
}
.purple-background {
background-color:#c68de2;
}
.black {
color:#000000;
}
.inputfield{
height:30px;
}
.containerInput {
padding-left: 0px;
padding-right: 0px;
}
.container {
padding: 20px 0;
overflow: scroll;
height: 400px;
}
#multTable {
margin: auto;
}
#multTable td, th {
width: 50px;
font-size: 20px;
border: 1px solid blue;
}
#multTable td:nth-child(even) {
background-color: #ffffff;
}
#multTable th {
background-color: #9FA5FF;
}
#message p{
color: red;
margin-bottom: 0px;
padding-top: 15px;
padding-left: 15px;
text-align: center;
}
.error {
color: red;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Multiplication table</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.theme.min.css" integrity="sha512-9h7XRlUeUwcHUf9bNiWSTO9ovOWFELxTlViP801e5BbwNJ5ir9ua6L20tEroWZdm+HFBAWBLx2qH4l4QHHlRyg==" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" integrity="sha512-aOG0c6nPNzGk+5zjwyJaoRUgCdOrfSDhmMID2u4+OIslr0GjpLKo7Xm0Ao3xmpM4T8AmIouRkqwj1nrdVsLKEQ==" crossorigin="anonymous" />
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.2/jquery.validate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="js/validate.js"></script>
</head>
<body>
<div class="containerInput">
<h2>Multiplication Table</h2>
<div class="row justify-content-center">
<div class="col-lg-6 col-md-6-offset-3 col-sm-12 well" >
<form id="inputForm" class = 'card p-3 bg-light' class="form-horizontal">
<h6>Please enter range values for your Multiplication Table.</h6>
<hr>
<div class="form-group">
<label class="control-label col-sm-10" for="minCol">Minimum Column Value:</label>
<div class="col-sm-12">
<input class="form-control inputfield" id="minCol" name="minCol" value="-50">
</div>
<div id="minColSlider" class="sliderMC"></div>
</div>
<div class="form-group">
<label class="control-label col-sm-10" for="maxCol">Maximum Column Value:</label>
<div class="col-sm-12">
<input class="form-control inputfield" id="maxCol" name="maxCol" value="-50">
</div>
<div id="maxColSlider" class="sliderMC2"></div>
</div>
<div class="form-group">
<label class="control-label col-sm-10" for="minRow">Minimum Row Value:</label>
<div class="col-sm-12">
<input class="form-control inputfield" id="minRow" name="minRow" value="-50">
</div>
<div id="minRowSlider" class="sliderMR"></div>
</div>
<div class="form-group">
<label class="control-label col-sm-10" for="maxRow">Maximum Row Value:</label>
<div class="col-sm-12">
<input class="form-control inputfield" id="maxRow" name="maxRow" value="-50">
</div>
<div id="maxRowSlider" class="sliderMR2"></div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-secondary purple-background black">Generate</button>
</div>
</div>
</form>
</div>
</div>
</div>
<div id="message">
</div>
<div id="tableTabs">
<ul id="tabsList">
</ul>
</div>
</body>
</html>
Fiddle demo

Re-initialization of the tabs is failing. You need to destroy them if they exist first.
if ($('#tableTabs').tabs()) {
$("#tableTabs").tabs('destroy');
}
$("#tableTabs").tabs({
"active": tabs.length - 1
});
Also note that your table markup is incomplete. It's lacking a closing table row tag:
<tr><th>×</th><th>-50</th></tr><tr><th>-50</th><td>2500</td>
$( document ).ready(function() {
var tabs = [];
//Function to generate a multiplication table based on user's range input.
function generateTable(minCol, maxCol, minRow, maxRow) {
let tabsList = document.getElementById("tabsList");
let tableTabs = document.getElementById("tableTabs");
let tabObject = {
name: tabs.length,
minCol: minCol,
maxCol: maxCol,
minRow: minRow,
maxRow: maxRow
};
tabs.push(tabObject);
let listItem = document.createElement("li");
let anchor = document.createElement("a");
anchor.href = `#tab-${tabs.length-1}`;
anchor.innerText = `tab-${tabs.length-1}`;
listItem.appendChild(anchor);
tabsList.appendChild(listItem);
listItem.classList.add("ui-tabs-tab");
let tableDiv = document.createElement("div");
tableDiv.id = `tab-${tabs.length-1}`;
tableTabs.appendChild(tableDiv);
var error = document.getElementById("message");
var table = document.createElement("table");
var result = "";
//creating a multTable
for(var i=minRow; i<=maxRow;i++)
{
if(i==minRow)
{
result += "<tr>";
result += "<th>×</th>";
}
for(var j=minCol; j<=maxCol; j++)
{
if(i==minRow || j==minCol)
{
if(i==minRow)
result += "<th>" + j + "</th>";
else
result += "<td>"+ (i-1)*j + "</td>";
}
else
result += "<td>"+ (i-1)*j + "</td>";
}
result += "</tr>";
result += "<tr>";
result += "<th>" + i + "</th>";
if(i==maxRow)
{
for(var j=minCol; j<=maxCol; j++)
{
result += "<td>"+ i*j + "</td>";
}
}
}
//printing the table
table.innerHTML=result;
tableDiv.appendChild(table);
if ($('#tableTabs').tabs()) {
$("#tableTabs").tabs('destroy');
}
$("#tableTabs").tabs( { "active" : tabs.length-1});
return false;
}
//Function to validate user's input
$(function() {
$("#inputForm").submit(function(e) {
e.preventDefault();
}).validate({
submitHandler: function(form) {
var minCol = parseInt(document.getElementById("minCol").value);
var maxCol = parseInt(document.getElementById("maxCol").value);
var minRow = parseInt(document.getElementById("minRow").value);
var maxRow = parseInt(document.getElementById("maxRow").value);
generateTable(minCol, maxCol, minRow, maxRow);
return false;
}
});//end validate
});//end function
});
html {
background-color: #9FA5FF;
height: 100%;
}
body {
background-color: #E2E3FF;
margin: 0 auto;
width: 70%;
}
h2 {
padding-top: 20px;
padding-bottom: 20px;
text-align: center;
background-color: #c68de2;
}
h6 {
text-align: center;
margin-bottom: 0px;
}
.purple-background {
background-color:#c68de2;
}
.black {
color:#000000;
}
.inputfield{
height:30px;
}
.containerInput {
padding-left: 0px;
padding-right: 0px;
}
.container {
padding: 20px 0;
overflow: scroll;
height: 400px;
}
#multTable {
margin: auto;
}
#multTable td, th {
width: 50px;
font-size: 20px;
border: 1px solid blue;
}
#multTable td:nth-child(even) {
background-color: #ffffff;
}
#multTable th {
background-color: #9FA5FF;
}
#message p{
color: red;
margin-bottom: 0px;
padding-top: 15px;
padding-left: 15px;
text-align: center;
}
.error {
color: red;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Multiplication table</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.theme.min.css" integrity="sha512-9h7XRlUeUwcHUf9bNiWSTO9ovOWFELxTlViP801e5BbwNJ5ir9ua6L20tEroWZdm+HFBAWBLx2qH4l4QHHlRyg==" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" integrity="sha512-aOG0c6nPNzGk+5zjwyJaoRUgCdOrfSDhmMID2u4+OIslr0GjpLKo7Xm0Ao3xmpM4T8AmIouRkqwj1nrdVsLKEQ==" crossorigin="anonymous" />
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.2/jquery.validate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="js/validate.js"></script>
</head>
<body>
<div class="containerInput">
<h2>Multiplication Table</h2>
<div class="row justify-content-center">
<div class="col-lg-6 col-md-6-offset-3 col-sm-12 well" >
<form id="inputForm" class = 'card p-3 bg-light' class="form-horizontal">
<h6>Please enter range values for your Multiplication Table.</h6>
<hr>
<div class="form-group">
<label class="control-label col-sm-10" for="minCol">Minimum Column Value:</label>
<div class="col-sm-12">
<input class="form-control inputfield" id="minCol" name="minCol" value="-50">
</div>
<div id="minColSlider" class="sliderMC"></div>
</div>
<div class="form-group">
<label class="control-label col-sm-10" for="maxCol">Maximum Column Value:</label>
<div class="col-sm-12">
<input class="form-control inputfield" id="maxCol" name="maxCol" value="-50">
</div>
<div id="maxColSlider" class="sliderMC2"></div>
</div>
<div class="form-group">
<label class="control-label col-sm-10" for="minRow">Minimum Row Value:</label>
<div class="col-sm-12">
<input class="form-control inputfield" id="minRow" name="minRow" value="-50">
</div>
<div id="minRowSlider" class="sliderMR"></div>
</div>
<div class="form-group">
<label class="control-label col-sm-10" for="maxRow">Maximum Row Value:</label>
<div class="col-sm-12">
<input class="form-control inputfield" id="maxRow" name="maxRow" value="-50">
</div>
<div id="maxRowSlider" class="sliderMR2"></div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-secondary purple-background black">Generate</button>
</div>
</div>
</form>
</div>
</div>
</div>
<div id="message">
</div>
<div id="tableTabs">
<ul id="tabsList">
</ul>
</div>
</body>
</html>

How to correctly place .addClass and .removeClass in Modal Box?

The problem is that I have been made aware that I should stop using .hide and .show within my javascript. Now I have learned that a better alternative is to use .addClass and .removeClass as this provides better control and more stylizing.
However for some reason the code is not working. Could I please get help?
I have replaced the previous .hide and .show with the new .addClass and .removeClass, I have provided a new class named showme and even css to display the code as a block.
var content = "";
$('a[href="#ex5"]').click(function(event) {
event.preventDefault();
$(this).modal({
escapeClose: false,
clickClose: false,
showClose: false,
});
$('#myDiv, #myDivs').hide();
$('input[type=checkbox]').prop('checked', false);
});
$('.yourCheckbox, .yourCheckboxx').change(function() {
if ($(this).prop("checked")) {
$("#" + $(this).data('target')).addClass('showme');
content = $("#" + $(this).data('target')).html();
} else {
$("#" + $(this).data('target')).removeClass('showme');
content = "";
}
});
$('[rel="modal:close"]').on('click', () => {
$('.btn').parent().append(content);
})
.onlyThese {
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
input[type="checkbox"]+label {
color: blue
}
input[type="checkbox"] {
display: none
}
input[type="checkbox"]:checked+label {
color: red
}
}
input:focus {
outline: none;
}
.showme {
display: block;
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
<!-- Remember to include jQuery :) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<!-- jQuery Modal -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />
<p>
<a class="btn" href="#ex5">Sectors </a>
</p>
<div id="ex5" ; class="modal" ; style="background-color:white">
<div style="float:left;">
<p>
<input type="checkbox" id="group1" class="yourCheckbox" data-target="myDiv" checked="checked">
<label for="group1" class="onlyThese">Publication </label>
</p>
<div id="myDiv" class="showme"> blastoise </div>
<p>
<input type="checkbox" id="group2" class="yourCheckboxx" data-target="myDivs" checked="checked">
<label for="group2" class="onlyThese">Food </label>
</p>
<div id="myDivs" class="showme"> water </div>
</div>
<div>
<div>
<p style="float:right">
<b>Apply</b>
</p>
</div>
</div>
All I want is for the code to work the way it used to with .hide and .show but instead now using .addClass and .removeClass.

You may have to remove and add class in different conditions or you could use toggleClass using .hideme class instead of .showme:
var content = "";
$('a[href="#ex5"]').click(function(event) {
event.preventDefault();
$(this).modal({
escapeClose: false,
clickClose: false,
showClose: false,
});
$('#myDiv, #myDivs').addClass('hideme');
$('input[type=checkbox]').prop('checked', false);
});
$('.yourCheckbox, .yourCheckboxx').change(function() {
if ($(this).prop("checked")) {
//$("#" + $(this).data('target')).removeClass('hideme');
content = $("#" + $(this).data('target')).html();
} else {
//$("#" + $(this).data('target')).addClass('hideme');
content = "";
}
$("#" + $(this).data('target')).toggleClass('hideme');
});
$('[rel="modal:close"]').on('click', () => {
$('.btn').parent().append(content);
})
.onlyThese {
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
input[type="checkbox"]+label {
color: blue
}
input[type="checkbox"] {
display: none
}
input[type="checkbox"]:checked+label {
color: red
}
}
input:focus {
outline: none;
}
.hideme {
display: none;
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
<!-- Remember to include jQuery :) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<!-- jQuery Modal -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />
<p>
<a class="btn" href="#ex5">Sectors </a>
</p>
<div id="ex5" ; class="modal" ; style="background-color:white">
<div style="float:left;">
<p>
<input type="checkbox" id="group1" class="yourCheckbox" data-target="myDiv" checked="checked">
<label for="group1" class="onlyThese">Publication </label>
</p>
<div id="myDiv" class="showme"> blastoise </div>
<p>
<input type="checkbox" id="group2" class="yourCheckboxx" data-target="myDivs" checked="checked">
<label for="group2" class="onlyThese">Food </label>
</p>
<div id="myDivs" class="showme"> water </div>
</div>
<div>
<div>
<p style="float:right">
<b>Apply</b>
</p>
</div>
</div>

Why is my masonary line of code not working?

I am a starting junior developer who is relatively new to coding.
I have been assigned a task of creating a pop up modal box to replace an old drop down menu.
I have created the pop up modal box but when I place the masonry layout into my new piece of code it doesn't work.
var content = "";
$('a[href="#ex5"]').click(function(event) {
event.preventDefault();
$(this).modal({
escapeClose: false,
clickClose: false,
showClose: false,
});
$('input[type=checkbox]').prop('checked', false);
});
var masonary_layout = '';
var offset = 0;
$(document).ready(function() {
$('.ads-section .sectors .options .single-option .sector-print-temp').change(function() {
if ($(this).is(":checked")) {
$('.sector-print').val('1');
} else {
$('.sector-print').val('0');
}
offset = 0;
setOffsetValue();
loadAds();
//$('.load-more').hide();
});
});
.onlyThese {
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
input[type="checkbox"]+label {
color: white
}
input[type="checkbox"] {
display: none
}
input[type="checkbox"]:checked+label {
color: red
}
}
input:focus {
outline: none;
}
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
<!-- Remember to include jQuery :) -->
<!-- jQuery Modal -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />
<div class="sectors">
<div style="padding-top:20px" ;>
<a class="btn" href="#ex5">
Sectors <span class="down-arrow"; style="color:blue">
<i class="fa fa-caret-down"></i>
</span>
</div></a>
</div>
</div>
<div id="ex5" ; class="modal" ; style="background-color:black;">
<div class="options" ; style="line-height:1.8; float:left;">
<p> <input type="checkbox" checked="checked" id="group1" class="sector-print-temp">
<label for="group1" class="onlyThese">
<b> Publication </b> </label> </p>
</div>
<div class="your-div">
<p style="font-size:16px; text-transform:uppercase; float:right">
<b>Apply</b>
</p>
</div>
</div>
I would just like clarification on what I am doing wrong.

Why i am not able to submit the form?

i am working on payment gateway, in that when i try to submit form with jquery it doesn't submit the form $('#checkout_form').submit(); here is my whole code for that
braintree.client.create({
authorization: 'sandbox_g42y39zw_348pk9cgf3bgyw2b'
}, function (err, clientInstance) {
if (err) {
console.error(err);
return;
}
braintree.hostedFields.create({
client: clientInstance,
styles: {
'input': {
'font-size': '14px',
'font-family': 'helvetica, tahoma, calibri, sans-serif',
'color': '#3a3a3a'
},
':focus': {
'color': 'black'
}
},
fields: {
number: {
selector: '#card-number',
placeholder: '4111 1111 1111 1111'
},
cvv: {
selector: '#cvv',
placeholder: '123'
},
expirationMonth: {
selector: '#expiration-month',
placeholder: 'MM'
},
expirationYear: {
selector: '#expiration-year',
placeholder: 'YY'
},
postalCode: {
selector: '#postal-code',
placeholder: '90210'
}
}
}, function (err, hostedFieldsInstance) {
if (err) {
console.error(err);
return;
}
hostedFieldsInstance.on('validityChange', function (event) {
var field = event.fields[event.emittedBy];
if (field.isValid) {
if (event.emittedBy === 'expirationMonth' || event.emittedBy === 'expirationYear') {
if (!event.fields.expirationMonth.isValid || !event.fields.expirationYear.isValid) {
return;
}
} else if (event.emittedBy === 'number') {
$('#card-number').next('span').text('');
}
// Remove any previously applied error or warning classes
$(field.container).parents('.form-group').removeClass('has-warning');
$(field.container).parents('.form-group').removeClass('has-success');
// Apply styling for a valid field
$(field.container).parents('.form-group').addClass('has-success');
} else if (field.isPotentiallyValid) {
// Remove styling from potentially valid fields
$(field.container).parents('.form-group').removeClass('has-warning');
$(field.container).parents('.form-group').removeClass('has-success');
if (event.emittedBy === 'number') {
$('#card-number').next('span').text('');
}
} else {
// Add styling to invalid fields
$(field.container).parents('.form-group').addClass('has-warning');
// Add helper text for an invalid card number
if (event.emittedBy === 'number') {
$('#card-number').next('span').text('Looks like this card number has an error.');
}
}
});
hostedFieldsInstance.on('cardTypeChange', function (event) {
// Handle a field's change, such as a change in validity or credit card type
if (event.cards.length === 1) {
$('#card-type').text(event.cards[0].niceType);
} else {
$('#card-type').text('Card');
}
});
$('.panel-body').submit(function (event) {
if($('#nonce').val() == '') {
event.preventDefault();
hostedFieldsInstance.tokenize(function (err, payload) {
if (err) {
console.error(err);
return false;
}
$('#nonce').val(payload.nonce);
$('#checkout_form').submit();
return true;
});
} else {
return true;
}
});
});
});
body {
background-color: #fff;
}
.panel {
width: 80%;
margin: 2em auto;
}
.bootstrap-basic {
background: white;
}
.panel-body {
width: 90%;
margin: 2em auto;
}
.helper-text {
color: #8A6D3B;
font-size: 12px;
margin-top: 5px;
height: 12px;
display: block;
}
/* Braintree Hosted Fields styling classes*/
.braintree-hosted-fields-focused {
border: 1px solid #0275d8;
box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
}
.braintree-hosted-fields-focused.focused-invalid {
border: 1px solid #ebcccc;
box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(100,100,0,.6);
}
#media (max-width: 670px) {
.btn {
white-space: normal;
}
}
<script src="https://js.braintreegateway.com/web/3.36.0/js/client.min.js"></script>
<script src="https://js.braintreegateway.com/web/3.36.0/js/hosted-fields.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet">
<div class="panel panel-default bootstrap-basic">
<div class="panel-heading">
<h3 class="panel-title">Enter Card Details</h3>
</div>
<form class="panel-body" action="checkout.php" method="post" id="checkout_form">
<div class="row">
<div class="form-group col-sm-8">
<label class="control-label">Card Number</label>
<!-- Hosted Fields div container -->
<div class="form-control" id="card-number"></div>
<span class="helper-text"></span>
</div>
<div class="form-group col-sm-4">
<div class="row">
<label class="control-label col-xs-12">Expiration Date</label>
<div class="col-xs-6">
<!-- Hosted Fields div container -->
<div class="form-control" id="expiration-month"></div>
</div>
<div class="col-xs-6">
<!-- Hosted Fields div container -->
<div class="form-control" id="expiration-year"></div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="form-group col-sm-6">
<label class="control-label">Security Code</label>
<!-- Hosted Fields div container -->
<div class="form-control" id="cvv"></div>
</div>
<div class="form-group col-sm-6">
<label class="control-label">Zipcode</label>
<!-- Hosted Fields div container -->
<div class="form-control" id="postal-code"></div>
</div>
</div>
<input type="hidden" name="payment_method_nonce" id="nonce">
<button type="submit" value="submit" id="submit" class="btn btn-success btn-lg center-block">Pay with <span id="card-type">Card</span></button>
</form>
</div>
Can anyone please help to resolve this issue ?

Get text box with textfields on radio button click

I'm coding a page with some radio buttons and stuck with some problems. Here is my
current output
Below is my code
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<style>
#sitehtn {
display: none
}
.container {
width: 100%;
height: 600px;
background-color: rgb(179, 174, 174);
}
#datepickerT {
margin-left: 2em;
}
.eventDateDiv {
height: 150px;
width: 30%;
margin-left: auto;
margin-right: auto;
}
#daysBetween {
margin-top: -1.4em;
margin-left: 30%;
}
.eventShowDiv {
height: 250px;
width: 30%;
margin-left: auto;
margin-right: auto;
}
.event {
color: green;
margin-top: 5px;
}
</style>
<script>
$(function() {
$( "#datepickerF" ).datepicker({
showOn : "button",
buttonImage : "calendar.gif",
buttonImageOnly : true
});
$( "#datepickerT" ).datepicker({
showOn : "button",
buttonImage : "calendar.gif",
buttonImageOnly : true
});
$('#getdays').click(function() {
var start = $('#datepickerF').datepicker('getDate');
var end = $('#datepickerT').datepicker('getDate');
var days = (end - start)/1000/60/60/24;
document.getElementById("daysBetween").innerText=days;
});
$('input[type=radio]').change(function() {
$('#sitehtn').hide()
$(this).parent().next().show()
});
function displayResult(browser) {
document.getElementById("result").value=browser
}
});
</script>
</head>
<body>
<div class="container">
<div class="eventDateDiv">
<div class="event">
EVENT DATE
</div>
<p>FROM: <input type="text" id="datepickerF" /></p>
<p>To: <input type="text" id="datepickerT" /></p>
<button id="getdays">NO.OF DAYS </button>
<p id="daysBetween"> </p>
</div>
<div class="eventShowDiv">
<div class="event">
EVENT SHOW TIME
</div>
<p>TYPE OF SHOW: </p>
<label>
<input type="radio" name="sitewebGroup" value="Courtier" id="courtierRadio" />
Unique
</label>
<input type="text" name="site" id="sitehtn" />
<br />
<label>
<input type="radio" name="sitewebGroup" value="Agence" id="agenceRadio" />
Varied
</label>
<input type="text" name="textfield3" id="sitehtn" />
</div>
</div>
</body>
</html>
My actual expected output is.
When I click on Unique radioButton, A textbox will appear and automatically Next
Radio Button(Varied)will hide
The Text Box include..Four Text Fields Inside it..two fields For The FROM and
TO Date picker and a Content Placeholder,and Last a Button To add same 4
Fields to the next Line in the same Text Box
As I'm new in this field, I need your support and valuable comments to solve this.

This may work with the date picker. You have to add the content holder and textbox though.
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<style>
#sitehtn {
display: none
}
.container {
width: 100%;
height: 600px;
background-color: rgb(179, 174, 174);
}
#datepickerT {
margin-left: 2em;
}
.eventDateDiv {
height: 150px;
width: 400px;
margin-left: 0;
margin-right: auto;
}
#daysBetween {
margin-top: -1.4em;
margin-left: 30%;
}
.eventShowDiv {
height: 250px;
width: 30%;
margin-left: auto;
margin-right: auto;
}
.event {
color: green;
margin-top: 5px;
}
</style>
<script>
function loading() {
$( ".datepickerF" ).datepicker({
showOn : "button",
buttonImage : "calendar.gif",
buttonImageOnly : true
});
$( ".datepickerT" ).datepicker({
showOn : "button",
buttonImage : "calendar.gif",
buttonImageOnly : true
});
$('.getdays').click(function() {
var start = $(this).prev().prev().find('input').datepicker('getDate');
var end = $(this).prev().find('input').datepicker('getDate');
var days = (end - start)/1000/60/60/24;
$(this).next().text(days);
});
$('input[id=courtierRadio]').change(function() {
$('#hideRadio').html("");
$('#hideRadio').append(getAppleInfo());
});
function displayResult(browser) {
document.getElementById("result").value=browser
}
};
window.onload = loading;
// anti-pattern! keep reading...
function getAppleInfo() {
var eventDateDiv ="";
eventDateDiv = $("<div></div>").addClass("eventDateDiv");
eventDateDiv.append($("<p></p>").text("FROM: ").append($("<input>").attr("class", "datepickerF").attr("type", "text")));
eventDateDiv.append($("<p></p>").text("TO: ").append($("<input>").attr("class", "datepickerT").attr("type", "text")));
eventDateDiv.append($("<button></button>").text("NO.OF DAYS ").attr("class", "getdays"));
eventDateDiv.append($("<p></p>").attr("class", "daysBetween"));
eventDateDiv.append($("<a>").text("Add Another").attr("href", "#").attr("onclick", "belowDiv(this)"));
return eventDateDiv;
}
function belowDiv(self){
$('#hideRadio').append(getAppleInfo());
loading();
}
</script>
</head>
<body>
<div class="container">
<div class="eventDateDiv" title="numb">
<div class="event">
EVENT DATE
</div>
<p>FROM: <input type="text" class="datepickerF" /></p>
<p>To: <input type="text" class="datepickerT" /></p>
<button class="getdays">NO.OF DAYS </button>
<p class="daysBetween"> </p>
</div>
<div class="eventShowDiv" title="dumb">
<div class="event">
EVENT SHOW TIME
</div>
<p>TYPE OF SHOW: </p>
<label>
<input type="radio" name="sitewebGroup" value="Courtier" id="courtierRadio" />
Unique
</label>
<input type="text" name="site" />
<br />
<div id="hideRadio">
<label>
<input type="radio" name="sitewebGroup" value="Agence" id="agenceRadio" />
Varied
</label>
<input type="text" name="textfield3" />
</div>
</div>
</div>
</body>
</html>

For your #1 question try this.
$('#courtierRadio').on('change', function () {
$('#sitehtn').show();
$('#agenceRadio').hide();
});

Develop Reference

JavaScript is the programming language of the Web.

Jquery validation error displayed on "label". How to fix it? - javascript

Related

Why is the content being appended to the wrong dynamically-generated tab?

How to correctly place .addClass and .removeClass in Modal Box?

Why is my masonary line of code not working?

Why i am not able to submit the form?

Get text box with textfields on radio button click

Categories

Resources