I was wondering if anyone could please need help me validate my form.
The two fields that need validation are house number and postcode
I need to make the house number only two numbers
and the postcode only 5 characters.
I've used a pattern attribute and was wondering if I can display the message on more than one field.
<div class="col-md-6 text-center">
<form name="submit-to-google-sheet">
<label>Address</label>
<br>
<input name="address" type="text" placeholder="House Number" pattern="[0-9]{2}">
<br>
<br>
<input name="address2" type="text" placeholder="Street Name">
<br>
<br>
<input name="city" type="text" placeholder="City/Town">
<br>
<br>
<input name="postcode" type="text" placeholder="Postcode" pattern="[0-9]{5}">
<br>
<br>
<label>Plant Type</label>
<br>
<select name="plant">
<option value="tree">TREE</option>
<option value="shrub">SHRUB</option>
</select>
<br>
<br>
<label>Description</label>
<br>
<textarea input name="description">
</textarea>
<br>
<br>
<label>Rating</label>
<br>
<div class="rating">
<input id="star1" type="radio" name="rating" value="1">
<label for="star1" aria-hidden="true">
<i class="fas fa-star"></i>
</label>
<input id="star2" type="radio" name="rating" value="2">
<label for="star2" aria-hidden="true">
<i class="fas fa-star"></i>
</label>
<input id="star3" type="radio" name="rating" value="3">
<label for="star3" aria-hidden="true">
<i class="fas fa-star"></i>
</label>
<input id="star4" type="radio" name="rating" value="4">
<label for="star4" aria-hidden="true">
<i class="fas fa-star"></i>
</label>
<input id="star5" type="radio" name="rating" value="5">
<label for="star5" aria-hidden="true">
<i class="fas fa-star"></i>
</label>
</div>
<br>
<br>
<button type="submit">SUBMIT</button>
</form>
Simply you can can do it using a html attribute maxlength = "2"
For Example
<div class="col-md-6 text-center">
<form name="submit-to-google-sheet">
<label>Address</label>
<br>
<input name="address" type="text" placeholder="House Number" pattern="[0-9]{2}" maxlength="2">
<br>
<br>
<input name="address2" type="text" placeholder="Street Name">
<br>
<br>
<input name="city" type="text" placeholder="City/Town">
<br>
<br>
<input name="postcode" type="text" placeholder="Postcode" pattern="[0-9]{5}" maxlength="5">
<br>
<br>
<label>Plant Type</label>
<br>
<select name="plant">
<option value="tree">TREE</option>
<option value="shrub">SHRUB</option>
</select>
<br>
<br>
<label>Description</label>
<br>
<textarea input name="description">
</textarea>
<br>
<br>
<label>Rating</label>
<br>
<div class="rating">
<input id="star1" type="radio" name="rating" value="1">
<label for="star1" aria-hidden="true">
<i class="fas fa-star"></i>
</label>
<input id="star2" type="radio" name="rating" value="2">
<label for="star2" aria-hidden="true">
<i class="fas fa-star"></i>
</label>
<input id="star3" type="radio" name="rating" value="3">
<label for="star3" aria-hidden="true">
<i class="fas fa-star"></i>
</label>
<input id="star4" type="radio" name="rating" value="4">
<label for="star4" aria-hidden="true">
<i class="fas fa-star"></i>
</label>
<input id="star5" type="radio" name="rating" value="5">
<label for="star5" aria-hidden="true">
<i class="fas fa-star"></i>
</label>
</div>
<br>
<br>
<button type="submit">SUBMIT</button>
</form>
Related
I'm using a multi-step form from this question and answer on StackOverflow
To add to this form;
1.) how can it work with conditional logic, as in, if the user's input radio first question is to choose ppc or organic, if they select organic then only certain "hidden" divs with "organic" class show, and the PPC related divs don't. But the other neutral hidden divs will show later. I think the problem is they are all hidden already so the first script seems to override the second javascript that looks for "if this... else".
2.)A second problem with the multi-step form without buttons above is you cannot tab to a second or third input text field on the last page. It just blanks out.
<script type='text/javascript'>
$(document).ready(function(){
$('#traffic').on('change', function() {
if ( this.value == 'organic' )
{
$(".org").show();
$(".ppc").hide();
}
else
{
$(".org").hide();
$(".ppc").show();
}
});
});
</script>
<script type="text/javascript">
document.querySelector("form").onchange = function(e) {
var currentFormPage = e.target.parentElement.parentElement;
console.log(e.target.name + ": " + e.target.value);
if(currentFormPage.nextElementSibling) {
currentFormPage.classList.add("hidden");
currentFormPage.nextElementSibling.classList.remove("hidden");
}
}
</script>
<form>
<h2>Free Google Ads Audit!</h2>
<div>
<h4>Do you want Organic or PPC traffic right now?</h4>
<label class="radio-choice" style="display: none"><input type="radio" name="traffic" id="traffic" value="" checked></label>
<label class="radio-choice"><input type="radio" name="traffic" id="traffic" value="organic">Organic is the best</label>
<label class="radio-choice"><input type="radio" name="traffic" id="traffic" value="ppc">PPC is better</label>
</div>
<div class="hidden ppc">
<h4>What's your monthly ads budget?</h4>
<label class="radio-choice" style="display: none"><input type="radio" name="whats_your_monthly_ads_budget" value="" checked></label>
<label class="radio-choice"><input type="radio" name="whats_your_monthly_ads_budget" value="2000-10000">2,000 - 10,000</label>
<label class="radio-choice"><input type="radio" name="whats_your_monthly_ads_budget" value="11000-50000">11,000 - 50,000</label>
<label class="radio-choice"><input type="radio" name="whats_your_monthly_ads_budget" value="51000-100000">51,000 - 100,000</label>
<label class="radio-choice"><input type="radio" name="whats_your_monthly_ads_budget" value="+100000">100,000+</label>
</div>
<div class="hidden ppc">
<h4>Have you ever had an Adwords account?</h4>
<label class="radio-choice" style="display: none"><input type="radio" name="adwords" value="" checked></label>
<label class="radio-choice"><input type="radio" name="food" id="adwords" value="2-3 years">Yes</label>
<label class="radio-choice"><input type="radio" name="food" id="adwords" value="5 years">No</label>
</div>
<div class="hidden org">
<h4>How much experience do you have?</h4>
<label class="radio-choice" style="display: none"><input type="radio" name="experience" value="" checked></label>
<label class="radio-choice"><input type="radio" name="exp" id="experience" value="2-3 years">2-3 years</label>
<label class="radio-choice"><input type="radio" name="exp" id="experience" value="5 years">5 years</label>
</div>
<div class="hidden">
<h4>What are your Goal(s)?</h4>
<label class="radio-choice" style="display: none"><input type="radio" name="what_are_your_goals" value="" checked></label>
<label class="radio-choice"><input type="radio" name="what_are_your_goals" value="Lead Generation">Lead Generation</label>
<label class="radio-choice"><input type="radio" name="what_are_your_goals" value="Brand Awareness">Brand Awareness</label>
<label class="radio-choice"><input type="radio" name="what_are_your_goals" value="Online Sales">Online Sales</label>
<label class="radio-choice"><input type="radio" name="what_are_your_goals" value="Sign-ups">Sign-ups</label>
</div>
<div class="hidden">
<h4>Success! You qualify for a Free Google Ads Audit, enter your email to confirm!</h4>
<input type="text" placeholder="Full name">
<input type="email" placeholder="Company Email">
<input type="button" name="email" value="Download">
</div>
</form>
This should work how you want it. Unfortunately, jquery invokes the first id as they're unique so if you want multiple elements to do the same functionality you'll have to make them all classes.
<html>
<head>
<title>Test</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<style>
.hidden {
display: none;
}
</style>
<script>
$(document).ready(function() {
$('.traffic').on('change', function() {
if (this.value === "organic") {
$(".org").show();
$(".ppc").hide();
} else {
$(".org").hide();
$(".ppc").show();
}
});
});
</script>
</head>
<body>
<form>
<h2>Free Google Ads Audit!</h2>
<div>
<h4>Do you want Organic or PPC traffic right now?</h4>
<label class="radio-choice" style="display: none">
<input type="radio" name="traffic" id="traffic" value="" checked>
</label>
<label class="radio-choice">
<input type="radio" name="traffic" class="traffic" value="organic">Organic is the best </label>
<label class="radio-choice">
<input type="radio" name="traffic" class="traffic" value="ppc">PPC is better </label>
</div>
<div class="hidden ppc">
<h4>What's your monthly ads budget?</h4>
<label class="radio-choice" style="display: none">
<input type="radio" name="whats_your_monthly_ads_budget" value="" checked>
</label>
<label class="radio-choice">
<input type="radio" name="whats_your_monthly_ads_budget" value="2000-10000">2,000 - 10,000 </label>
<label class="radio-choice">
<input type="radio" name="whats_your_monthly_ads_budget" value="11000-50000">11,000 - 50,000 </label>
<label class="radio-choice">
<input type="radio" name="whats_your_monthly_ads_budget" value="51000-100000">51,000 - 100,000 </label>
<label class="radio-choice">
<input type="radio" name="whats_your_monthly_ads_budget" value="+100000">100,000+ </label>
</div>
<div class="hidden ppc">
<h4>Have you ever had an Adwords account?</h4>
<label class="radio-choice" style="display: none">
<input type="radio" name="adwords" value="" checked>
</label>
<label class="radio-choice">
<input type="radio" name="food" id="adwords" value="2-3 years">Yes </label>
<label class="radio-choice">
<input type="radio" name="food" id="adwords" value="5 years">No </label>
</div>
<div class="hidden org">
<h4>How much experience do you have?</h4>
<label class="radio-choice" style="display: none">
<input type="radio" name="experience" value="" checked>
</label>
<label class="radio-choice">
<input type="radio" name="exp" id="experience" value="2-3 years">2-3 years </label>
<label class="radio-choice">
<input type="radio" name="exp" id="experience" value="5 years">5 years </label>
</div>
<div class="hidden">
<h4>What are your Goal(s)?</h4>
<label class="radio-choice" style="display: none">
<input type="radio" name="what_are_your_goals" value="" checked>
</label>
<label class="radio-choice">
<input type="radio" name="what_are_your_goals" value="Lead Generation">Lead Generation </label>
<label class="radio-choice">
<input type="radio" name="what_are_your_goals" value="Brand Awareness">Brand Awareness </label>
<label class="radio-choice">
<input type="radio" name="what_are_your_goals" value="Online Sales">Online Sales </label>
<label class="radio-choice">
<input type="radio" name="what_are_your_goals" value="Sign-ups">Sign-ups </label>
</div>
<div class="hidden">
<h4>Success! You qualify for a Free Google Ads Audit, enter your email to confirm!</h4>
<input type="text" placeholder="Full name">
<input type="email" placeholder="Company Email">
<input type="button" name="email" value="Download">
</div>
</form>
</body>
</html>
I want to dynamically get values of all checked radio buttons in certain div on a click of button .add
<div class="item">
<title class="name">Espresso</title>
**<div class="option1">**
<fieldset>
<legend>Pick </legend>
<label for="radio-1" >Short</label>
<input type="radio" name="radio-1" class="radio-1" id="radio-1"
value="Short">
<label for="radio-2">Long</label>
<input type="radio" name="radio-1" class="radio-1" id="radio-2" value="Long">
<hr>
<label for="radio-3">In big cup</label>
<input type="radio" name="radio-2" class="radio-1" id="radio-3" value="In big cup">
<label for="radio-4">Small cup</label>
<input type="radio" name="radio-2" class="radio-1" id="radio-4"
value="Small cup">
</fieldset>
</div>
<hr>
<button type="submit" class="add">+Add</button>
<span class="price" value="4$">Price:<br>5$</span>
</div>
And here is .js function that should get the values of radio buttons and append it to list, but im not getting any response.
$('.add').click (function(){
$(this).siblings("fieldset").children("input[type=radio]:checked")
.each(function () {
var selectedOptions = $(this).parent().text();
$(".orderOptions").last().append("<li> +selectedOption+ </li>");
});
});
So whole process is: .click (get values of all checked radio buttons from html div) and save it to the list.
In your click event you wrote:
$(this).siblings("fieldset").children("input[type=radio]:checked")
this is wrong because this here is reference to the button not the div which you want to get the input inside it.
so you have to use the div itself :
$('#call1 fieldset input[type=radio]:checked')
then you can simply get the checked value by this.value and append it to any other div.
$('.add').click (function(){
$('#call1 fieldset input[type=radio]:checked')
.each(function () {
$('.orderOptions').append("<li>" +this.value+ "</li>");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item">
<title class="name">Espresso</title>
<div id="call1" class="option1">
<fieldset>
<legend>Pick </legend>
<label for="radio-1" >Short</label>
<input type="radio" name="radio-1" class="radio-1" id="radio-1"
value="Short">
<label for="radio-2">Long</label>
<input type="radio" name="radio-1" class="radio-1" id="radio-2" value="Long">
<hr>
<label for="radio-3">In big cup</label>
<input type="radio" name="radio-2" class="radio-1" id="radio-3" value="In big cup">
<label for="radio-4">Small cup</label>
<input type="radio" name="radio-2" class="radio-1" id="radio-4"
value="Small cup">
</fieldset>
</div>
<hr>
<button type="submit" class="add">+Add</button>
<span class="price" value="4$">Price:<br>5$</span>
</div>
<div class='orderOptions'></div>
This is working
$(this).parent().children(".option1").children("fieldset").children("input[type='radio']:checked").each(function (index,element) {
var selectedOptions = $(element).prev("label").text();
$(".orderOptions").last().append("<li>" +selectedOptions+ "</li>");
});
Html
<div class="item">
<title class="name">Espresso</title>
**<div class="option1">**
<fieldset>
<legend>Pick </legend>
<label for="radio-1" >Short</label>
<input type="radio" name="radio-1" class="radio-1" id="radio-1"
value="Short">
<label for="radio-2">Long</label>
<input type="radio" name="radio-1" class="radio-1" id="radio-2" value="Long">
<hr>
<label for="radio-3">In big cup</label>
<input type="radio" name="radio-2" class="radio-1" id="radio-3" value="In big cup">
<label for="radio-4">Small cup</label>
<input type="radio" name="radio-2" class="radio-1" id="radio-4"
value="Small cup">
</fieldset>
</div>
<hr>
<button type="submit" class="add">+Add</button>
<span class="price" value="4$">Price:<br>5$</span>
</div>
<ul class="orderOptions">
</ul>
</div>
If you want to address a fieldset relative to your "add" button, then you can use something like this:
$('.add').click (function(){
...
$(this).siblings('div').find(':checked')
...
});
This works, because not your <fieldset> but the <div class="option1"> is the sibling of the pressed button. Once you have found the right div with the fieldset within, the selector for the checked options can be simplified to :checked, since it searches within the <div> ("write less do more ...").
$('.add').click (function(){
$('.orderOptions').append('<hr><ul>'+
$(this).siblings('div').find(':checked')
.map((_,e)=>"<li>"+e.value+"</li>").get().join('')+'</ul>'
)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item">
<title class="name">Espresso</title>
<div id="call1" class="option1">
<fieldset>
<legend>Pick </legend>
<label for="radio-1" >Short</label>
<input type="radio" name="radio-1" class="radio-1" id="radio-1"
value="Short">
<label for="radio-2">Long</label>
<input type="radio" name="radio-1" class="radio-1" id="radio-2" value="Long">
<hr>
<label for="radio-3">In big cup</label>
<input type="radio" name="radio-2" class="radio-1" id="radio-3" value="In big cup">
<label for="radio-4">Small cup</label>
<input type="radio" name="radio-2" class="radio-1" id="radio-4"
value="Small cup">
</fieldset>
</div>
<hr>
<button type="submit" class="add">+Add</button>
<span class="price" value="4$">Price:<br>5$</span>
</div>
<div class='orderOptions'></div>
I have a form with many checkbox. User must select at least one of them to submit the form. I've tested other stacks found here without success. This is my HTML code:
<form id="formnewsletter" action="mypage">
<input name="list" value="1" type="hidden">
<input class="form-control" id="email" name="email" value="" placeholder="Email" required="required" type="email">
<div class="formphonebox">
<input class="form-control" id="prefix" name="prefix" value="0039" style="display:inline; width:25%;" type="text"> <input class="form-control" id="number" name="number" value="" placeholder="Cellulare" style="width:70%; float:right" type="text">
</div>
<hr>
<div class="formlistbox">
<span class="checkbox">
<input class="listchecknewsletter" value="26" id="group26" name="group" type="checkbox">
<label for="group26">group26</label>
</span>
<span class="checkbox">
<input class="listchecknewsletter" value="47" id="group47" name="group" type="checkbox">
<label for="group47">group47</label>
</span>
<span class="checkbox">
<input class="listchecknewsletter" value="41" id="group41" name="group" type="checkbox">
<label for="group41">group41</label>
</span>
<span class="checkbox">
<input class="listchecknewsletter" value="55" id="group55" name="group" type="checkbox">
<label for="group55">group55</label>
</span>
<span class="checkbox">
<input class="listchecknewsletter" value="30" id="group30" name="group" type="checkbox">
<label for="group30">group30</label>
</span>
<span class="checkbox">
<input class="listchecknewsletter" value="58" id="group58" name="group" type="checkbox">
<label for="group58">group58</label>
</span>
</div>
<hr>
<span class="checkbox">
<input id="privacycheck" type="checkbox" required="required">
<label for="privacycheck"><small>Privacy Policy</small></label>
</span>
<div align="center">
<button type="submit" name="Submit" class="btn btn-danger" value="Iscrivimi">Iscrivimi</button>
</div>
</form>
UPDATE with solution. This is the script that worked in my case:
//controlla che almeno un checkbox delle liste/gruppi newsletter sia flaggato
$(document).ready(function () {
function checkMe() {
document.getElementById("formnewsletter").onsubmit = function() {
//controlla che almeno un checkbox delle liste/gruppi newsletter sia flaggato
if (document.querySelector('.listchecknewsletter:checked')) {
// at least one is checked
} else {
// none are checked
alert("Seleziona una lista!");
return false;
}
};
}
window.onload = function() {
checkMe();
}
});
Can someone suggest me the JavaScript code to let it work fine?
Since you haven't tagged it with jQuery, here is a solution in plain ol' javascript.
You can use CSS class of the checkboxes along with querySelector
if (document.querySelector('.listchecknewsletter:checked')) {
// at least one is checked
} else {
// none are checked
}
with jquery it would work like this for example:
$("#submit").on("click", function() {
var checkboxes = $('.formlistbox input[type="checkbox"]');
if(checkboxes.filter(':checked').length < 1) {
alert("please check at least 1 checkbox");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input name="list" value="1" type="hidden">
<input class="form-control" id="email" name="email" value="" placeholder="Email" required="required" type="email">
<div class="formphonebox">
<input class="form-control" id="prefix" name="prefix" value="0039" style="display:inline; width:25%;" type="text"> <input class="form-control" id="number" name="number" value="" placeholder="Cellulare" style="width:70%; float:right" type="text">
</div>
<hr>
<div class="formlistbox">
<span class="checkbox">
<input class="listchecknewsletter" value="26" id="group26" name="group" type="checkbox">
<label for="group26">group26</label>
</span>
<span class="checkbox">
<input class="listchecknewsletter" value="47" id="group47" name="group" type="checkbox">
<label for="group47">group47</label>
</span>
<span class="checkbox">
<input class="listchecknewsletter" value="41" id="group41" name="group" type="checkbox">
<label for="group41">group41</label>
</span>
<span class="checkbox">
<input class="listchecknewsletter" value="55" id="group55" name="group" type="checkbox">
<label for="group55">group55</label>
</span>
<span class="checkbox">
<input class="listchecknewsletter" value="30" id="group30" name="group" type="checkbox">
<label for="group30">group30</label>
</span>
<span class="checkbox">
<input class="listchecknewsletter" value="58" id="group58" name="group" type="checkbox">
<label for="group58">group58</label>
</span>
</div>
<hr>
<span class="checkbox">
<input id="privacycheck" type="checkbox" required="required">
<label for="privacycheck"><small>Privacy Policy</small></label>
</span>
<div align="center">
<button type="submit" name="Submit" class="btn btn-danger" value="Iscrivimi" id="submit">Iscrivimi</button>
</div>
If you (want to) use jQuery:
if($('.listchecknewsletter:checked').length > 0) {
// one or more are checked
}
Further, if you want to POST all the checkbox values, you have to change their name to group[], to make it an array.
In my html form I have two different types of input with same $scope variable as model.
I have 3 radio buttons and a number input field
<div class="form-group">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input type="radio" ng-model="article.internal_memory" value="16" name="options" id="option1" > 16GB
</label>
<label class="btn btn-primary">
<input type="radio" ng-model="article.internal_memory" value="32" name="options" id="option2" > 32GB
</label>
<label class="btn btn-primary">
<input type="radio" ng-model="article.internal_memory" value="64" name="options" id="option3" > 64GB
</label>
</div>
<input ng-model="article.internal_memory" id="internal-memory-input" placeholder="Outra" type="number" class="form-control">
</div>
But if I select one of the radio button inputs, it doesn't set the value.
Having two different inputs for the same scope variable causes conflicts?
Use ng-value instead of value
Like this
<div class="form-group">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input type="radio" ng-model="article.internal_memory" ng-value="16" name="options" id="option1"> 16GB
</label>
<label class="btn btn-primary">
<input type="radio" ng-model="article.internal_memory" ng-value="32" name="options" id="option2"> 32GB
</label>
<label class="btn btn-primary">
<input type="radio" ng-model="article.internal_memory" ng-value="64" name="options" id="option3"> 64GB
</label>
</div>
<input ng-model="article.internal_memory" id="internal-memory-input" placeholder="Outra" type="number" class="form-control">
</div>
DEMO
I need help with the validation.
That's my code:
HTML:
<label for="option">כיתה נוכחית:</label>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input type="radio" name="class" value="12" > י"ב
</label>
<label class="btn btn-primary">
<input type="radio" name="class" value="11" > י"א
</label>
<label class="btn btn-primary">
<input type="radio" name="class" value="10"> י'
</label>
<label class="btn btn-primary">
<input type="radio" name="class" value="9" id="9" onkeyup="validateClass()"> ט'
</label>
<label class="btn btn-primary">
<input type="radio" name="class" value="8" > ח'
</label>
<label class="btn btn-primary">
<input type="radio" name="class" value="7" id="7" onkeyup="validateClass()"> ז'
</label>
<label class="btn btn-primary">
<input type="radio" name="class" value="6" id="6" onkeyup="validateClass()"> ו'
</label>
And the result:
Question: I wanna check if the user clicked on one of the buttons.
I tried to do:
if (calss10 === null)
I want to do this with: onekeyup=" "
This will solve your problem.
You need to create a function that runs when the user submit the form (onsubmit)
this is a form example:
P.S you need to add an id to every radio button id="class"
<form onsubmit="return Validate()">
<label for="option">כיתה נוכחית:</label>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input type="radio" name="class" value="12" > י"ב
</label>
<label class="btn btn-primary">
<input type="radio" name="class" value="11" > י"א
</label>
<label class="btn btn-primary">
<input type="radio" name="class" value="10"> י'
</label>
<label class="btn btn-primary">
<input type="radio" name="class" value="9" id="9" onkeyup="validateClass()"> ט'
</label>
<label class="btn btn-primary">
<input type="radio" name="class" value="8" > ח'
</label>
<label class="btn btn-primary">
<input type="radio" name="class" value="7" id="7" onkeyup="validateClass()"> ז'
</label>
<label class="btn btn-primary">
<input type="radio" name="class" value="6" id="6" onkeyup="validateClass()"> ו'
</label>
</form>
function Validate() {
if (!Validate_Class())
return false;
}
function Validate_Class() {
if (!document.getElementById("class").checked) {
alert("אתה חייב לבחור כיתה!");
return false;
}
}
Wouldn't this get the job done?
var myClickedElement;
$('input[name="class"]').click(function(e) {
myClickedElement = $(this);
});