Problem
The maximum number of players for each position is:
2 out of 4 goalies
6 out of 15 defencemen
12 out of 31 forwards
I've gotten to the point where I'll click on a hockey player and that name gets added to a input field in a form, but if you already have two goalies selected, ie has a class of is-active and then click on one of the other two unselected players with the default is-inactive class, that name will still be added into an input when there should only be two goalies max. And unfortunately, this is also the case with the defencemen and the forwards too.
Goal
When starredGoaltenders === maxGoaltenders or starredDefencemen === maxDefencemen or starredForwards === maxFowards the names of players that do not have not been selected of that specific position and do not have an is-active class should not be added to any input in the form.
scripts.js
function countSelected() {
$(".player").on("click", function(){
// Checks if the maximum number of players have been selected
// If so, return false and then do nothing
// If not, the class will toggle from `is-inactive` to `is-active`
if ($(this).find(".picked.is-inactive.full").length > 0) return false;
$(this).find(".picked").toggleClass("is-inactive is-active");
$(".player").removeClass("not-picked");
$(".player").not(":has(.is-active)").addClass("not-picked");
// Count the number of players with stars
var starredGoaltenders = $(".player--goalie").find(".picked.is-active").length;
var starredDefencemen = $(".player--defencemen").find(".picked.is-active").length;
var starredForwards = $(".player--forward").find(".picked.is-active").length;
console.log(starredGoaltenders, starredDefencemen, starredForwards);
// The number of starred players for each position cannot exceed the following numbers
var maxGoaltenders = 2;
var maxDefencemen = 6;
var maxFowards = 12;
// If the number of starred players hits its max, a class of `is-completed` is adding to the corresponding checkmark to indicate that the task has been completed
if (starredGoaltenders === maxGoaltenders) {
$(".checkmark--goalie").addClass("is-completed");
$(".player--goalie").find(".picked").addClass("full");
} else {
$(".checkmark--goalie").removeClass("is-completed");
$(".player--goalie").find(".picked.is-inactive").removeClass('full');
}
if (starredDefencemen === maxDefencemen) {
$(".checkmark--defencemen").addClass("is-completed");
$(".player--defencemen").find(".picked").addClass("full");
} else {
$(".checkmark--defencemen").removeClass("is-completed");
$(".player--defencemen").find(".picked.is-inactive").removeClass('full');
}
if (starredForwards === maxFowards) {
$(".checkmark--forward").addClass("is-completed");
$(".player--forward").find(".picked").addClass("full");
} else {
$(".checkmark--forward").removeClass("is-completed");
$(".player--forward").find(".picked.is-inactive").removeClass('full');
}
// If all the conditions are met show the submit vote button
if (starredGoaltenders === maxGoaltenders && starredDefencemen === maxDefencemen && starredForwards === maxFowards) {
$(".btn--submit").show();
$(".btn--submit").addClass("slideLeft");
} else{
$(".btn--submit").hide();
$(".btn--submit").removeClass("slideLeft");
}
});
} countSelected();
// Every time a player is clicked, note the name of the player
$(".player").on("click", function(){
var playerNames = [];
$("input:text").each(function(i, t) { playerNames.push(t.value) });
if ($(this).find("picked.is-active")) {
var playerName = $(this).find(".player__name").html();
var index = playerNames.indexOf(playerName);
if (index == -1) // Add player
$("input:text:eq(" + playerNames.indexOf("") + ")").val(playerName);
else // Remove player
$("input:text:eq(" + index + ")").val("");
} else {
$("input").val("");
}
});
index.html - Snippet includes form and one out of the 60 available players to be clicked on
<form id="form">
<input type="text" name="p1" id="p1">
<input type="text" name="p2" id="p2">
<input type="text" name="p3" id="p3">
<input type="text" name="p4" id="p4">
<input type="text" name="p5" id="p5">
<input type="text" name="p6" id="p6">
<input type="text" name="p7" id="p7">
<input type="text" name="p8" id="p8">
<input type="text" name="p9" id="p9">
<input type="text" name="p10" id="p10">
<input type="text" name="p11" id="p11">
<input type="text" name="p12" id="p12">
<input type="text" name="p13" id="p13">
<input type="text" name="p14" id="p14">
<input type="text" name="p15" id="p15">
<input type="text" name="p16" id="p16">
<input type="text" name="p17" id="p17">
<input type="text" name="p18" id="p18">
<input type="text" name="p19" id="p19">
<input type="text" name="p20" id="p20">
<button class="btn btn--submit" type="submit"><img src="src/img/ballot-alt.png" class="image--ballot">Submit Vote</button>
</form>
<div class="player player--forward year--2000 year--2010">
<div class="tooltip">
<p class="tooltip__name">Mark Stone</p>
<p class="tooltip__hometown"><span>Hometown:</span> Winnipeg, Man.</p>
<p class="tooltip__years"><span>Years Played:</span> 2008-2012</p>
<div class="tooltip__stats--inline">
<div class="stats__group stats--games">
<p class="stats__header">GP</p>
<p class="stats__number stats__number--games">232</p>
</div>
<div class="stats__group stats--goals">
<p class="stats__header">G</p>
<p class="stats__number stats__number--goals">106</p>
</div>
<div class="stats__group stats--assists">
<p class="stats__header">A</p>
<p class="stats__number stats__number--assists">190</p>
</div>
<div class="stats__group stats--points">
<p class="stats__header">Pts</p>
<p class="stats__number stats__number--points">296</p>
</div>
<div class="stats__group stats--penalties">
<p class="stats__header">Pim</p>
<p class="stats__number stats__number--penalties">102</p>
</div>
</div>
</div>
<div class="player__headshot player--mstone">
<div class="picked is-inactive"><i class="fa fa-star" aria-hidden="true"></i></div>
</div>
<p class="player__name">Mark Stone</p>
<p class="player__position">Forward</p>
</div>
Probably, the easiest way to approach this problem is to repopulate all your inputs every time someone clicks on a player, rather than trying to populate each input once. This means you can keep your application state in a simple, easily understood data structure that is independent of your DOM/UI, rather than having to consult the DOM each time something new happens.
This is how I would probably write it.
var players = [
{name: 'Ovechkin', type: 'F'},
{name: 'Dubnyk', type: 'G'}
// your complete player list goes here
],
selectedPlayers: []; // these are the players the user has chosen
var getCurrentPlayerCount = function (playerType) {
// return the number of players currently selected of one type
return selectedPlayers.reduce(function (count, player) {
if (player.type === playerType) return count + 1;
return count;
}, 0);
}
var selectPlayer = function (player) {
// You call this when someone clicks on a player
var currentForwardCount = getCurrentPlayerCount('F')
currentDefenceCount = getCurrentPlayerCount('D'),
currentGoalieCount = getCurrentPlayerCount('G');
// Do nothing (or show a UI message) if someone goes over their
// player-type limit
if (player.type === 'F' && currentForwardCount > 12) return;
if (player.type === 'D' && currentDefenceCount > 6) return;
if (player.type === 'G' && currentGoalieCount > 2) return;
// If you get here, it means the player can be added, so add
// it to the user's list
selectedPlayers.push(player);
updateUI();
}
I'm not including updateUI here. You can work that out on your own.
If you need to support IE 8 or any other browser that does not support Array.prototype.reduce, you will need to do getCurrentPlayerCount differently.
Related
I'm building a web app that converts Galloons to Liters and vise versa. Got one textbox to enter gallon/litters, the user selects on a radio button what they want to convert too. Now the problem arises when validating the input:
for liters it must be Greater than 0 but less than 1000 for the gallons it must be greater than 0 but less than 4000. So if I've selected liters it must validate only liters but both validations are coming up. Here's my code:
Form:
<body onload="setup()">
<div data-role="page">
<div style="padding: 20px;">
<div data-role="fieldcontain">
<input type="number" id="temperature" name="temperature">
<label id="label">Gallons</label>
</div>
<fieldset data-role="controlgroup">
<legend>Convert to:</legend>
<input type="radio" name="units" id="Gallons" value="Gallons"
onclick="setUnits('Liters')">
<label for="Gallons">Gallons</label>
<input type="radio" name="units" id="Liters" value="Liters"
checked="checked" onclick="setUnits('Gallons')">
<label for="Liters">Liters</label>
</fieldset>
<input type="button" onclick="convert()" value="Convert">
<p id="answer"></p>
</div>
</div>
</body>
JavaScript:
function setup()
{
var cType;
setUnits("Gallons");
cType = "Gallons";
document.getElementById("Gallons").onclick =
function () {
cType="";
cType="Liters";
setUnits("Liters");
CheckInput(cType);
};
document.getElementById("Liters").onclick =
function () {
cType="";
cType="Gallons";
setUnits("Gallons");
CheckInput(cType);
};
CheckInput(cType);
}
function setUnits(unit) {
var label = document.getElementById("label");
label.innerHTML = unit;
}
function CheckInput(cType) {
var CheckInputcType= cType;
var angleInput = document.getElementById("temperature");
if(CheckInputcType.localeCompare("Gallons")==0)
{
angleInput.addEventListener("blur",validateG);
}
else(CheckInputcType.localeCompare("Liters")==0)
{
angleInput.addEventListener("blur",validateL);
}
}
function validateL(){
var angleInput = document.getElementById("temperature");
if (angleInput.value >= 1000 || angleInput.value<=0)
{
alert('Liters must be between 0 and 1000');
angleInput.value = "";
}
}
function validateG() {
var angleInput = document.getElementById("temperature");
if (angleInput.value >= 4000 || angleInput.value<=0)
{
alert('Gallons must be between 0 and 4000');
angleInput.value = "";
}
}
You have a problem with your method CheckInput(cType), because every time you click on Galons or liters radio button you are adding a new listener event on temperature input.
Just simply create one listener and verify radio state on that validator method.
[![enter image description here][1]][1]I am looking to clear out all the fields that are filled in from this script below when a second search is entered. This script fills in 25 boxes with shoe-sizes and prices after for looping through it all, the problem is if the next item searched does not have the same number of shoe sizes (which is often), the boxes are left with the previous data (ex. First shoe goes up to size 15, the next shoe search only goes up to size 12, so sizes 12.5-15 are left with the previous data because its not overwriting them).
$('#searchForm').on('submit', (e) => {
e.preventDefault();
let searchText = $('#search-box').val();
$.ajax({
url: "/",
type: 'POST',
data: {
input: searchText},
success: function(res) {
console.log(res);
let product = res;
document.getElementById("shoe").innerHTML = (product.stockx.shoeId);
document.getElementById("date").innerHTML = (product.stockx.release);
document.getElementById("sneakerid").style.backgroundImage = 'url('+(product.photo)+')';
document.getElementById("shoeOverlay").style.backgroundImage = 'url('+(product.photo)+')';
let size = product.stockx.price_size
for( let i = 0; i < size.length; i += 1) {
document.getElementById(i === 0 ? `shoesize` : `shoesize${i}`).innerHTML = (size[i].sizing),
document.getElementById(i === 0 ? `stockxprice` : `stockxprice${i}`).innerHTML = ('$' + size[i].pricing);
}
for( let i = 0; i < product.sizes.length; i += 1) {
document.getElementById(i === 0 ? `goatprice` : `goatprice${i}`).innerHTML = ('$' + product.sizes[i][1]*.01);
if (product.sizes[i][1]*.01 > size[i].pricing) document.getElementById(i === 0 ? `goatprice` : `goatprice${i}`).style.color = "#00ffb3";
else if (product.sizes[i][1]*.01 < size[i].pricing) document.getElementById(i === 0 ? `stockxprice` : `stockxprice${i}`).style.color = "#00ffb3";
}
}}
)})
})
HTML snippet
<table class="table">
<tr>
<td>
<div class="innerbox">
<div id="shoesize" ></div>
<div class="prices">
<div id="stockxprice"></div>
<div id="goatprice"></div>
</div>
<div class="logocontainer">
<div class="stockxlogo"> <img src="img/stockxlogo.svg" ></div>
<div class="goatlogo"><img src="img/goatlogo.svg" height="30px" width="30px"></div>
</div>
<form id="searchForm">
<input type="text" autocomplete="off" id="search-box">
<div class="searchlogo"> <img src="img/searchlogo.svg" height="15px" width="15px" href="#"></div>
</form>
</div>
[1]: https://i.stack.imgur.com/plWLo.jpg
If the elements are inside a form, you can use the form.reset() method.
HTMLFormElement.reset():
The HTMLFormElement.reset() method restores a form element's default values. This method does the same thing as clicking the form's reset button.
you can read more here: HTMLFormElement.reset
Run and test:
function resetForm() {
let form = document.getElementById("myForm");
form.reset();
}
<form id="myForm">
<input type="text" value="" />
<input type="text" value="" />
<input type="text" value="" />
<input type="text" value="" />
<input type="text" value="" />
<input type="text" value="" />
</form>
<input type="button" value="reset" onclick="resetForm()" />
EDIT: If the elements are not inside a form:
If your elements are not inside a form, you can then give them all a common class name to help you iterate through them.
Run and test:
function resetElems() {
$(".resetable").html("");
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="shoesize" class="resetable">15</div>
<div class="prices">
<div id="stockxprice" class="resetable">13</div>
<div id="goatprice" class="resetable">14</div>
</div>
<input type="button" value="click to reset" onclick="resetElems()" />
EDIT 2: To only reset on the second search and after:
If you wish to only perform the reset after the first search you can declare a global variable to keep count of the searches (increment it on every search) and then do something like this:
var count = 0; // this variable is global; it's not inside any function
$('#searchForm').on('submit', (e) => {
e.preventDefault();
let searchText = $('#search-box').val();
$.ajax({
url: "/",
type: 'POST',
data: {
input: searchText
},
success: function(res) {
if(count > 0) { // only reset if it's not the first search
$(".resetable").html("");
}
count++; // increment the count
// other code ...
}
});
});
I'm trying to calculate the %share which is simply an addition of share1+share2 == 100. However, I want it to work only on the two checked checkboxes.
How do I go about detecting the selected checkbox and apply the function accordingly?
var MAX = 2;
$('input.addnominee').click(function() {
($('input.addnominee:checked').length == MAX) ? $('input.addnominee').not(':checked').attr('disabled',true):$('input.addnominee').not(':checked').attr('disabled',false);
});
$("#share1").focusout(function() {
var share1 = $("#share1").val();
var answer = 100 - share1;
$("#share2").val(answer);
});
$("#share2").focusout(function() {
var share2 = $("#share2").val();
var answer = 100 - share2;
$("#share1").val(answer);
});
label {
display: block;
}
.block {
background-color: #eee;
padding: 15px;
margin-bottom: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<h6>You can choose a maximum of 2 users</h6>
<div class="block">
<label class="checkbox"> Add User
<input class="addnominee" type="checkbox" data-toggle="collapse" data-target="#fnominee">
</label>
<div class="form-group">
<input type="number" pattern="[0-9]*" id="share1" class="form-control" placeholder="% share" required>
</div>
</div>
<div class="block">
<label class="checkbox"> Add User
<input class="addnominee" type="checkbox" data-toggle="collapse" data-target="#fnominee">
</label>
<div class="form-group">
<input type="number" pattern="[0-9]*" id="share2" class="form-control" placeholder="% share" required>
</div>
</div>
<div class="block">
<label class="checkbox"> Add User
<input class="addnominee" type="checkbox" data-toggle="collapse" data-target="#fnominee">
</label>
<div class="form-group">
<input type="number" pattern="[0-9]*" id="share3" class="form-control" placeholder="% share" required>
</div>
</div>
<div class="block">
<label class="checkbox"> Add User
<input class="addnominee" type="checkbox" data-toggle="collapse" data-target="#fnominee">
</label>
<div class="form-group">
<input type="number" pattern="[0-9]*" id="share4" class="form-control" placeholder="% share" required>
</div>
</div>
Do you have a specific reason to use focusout?
You could catch the ID's of the two "selected" elements inside your checkbox function. Or to be precise, get id of input that is in the next div inside the clicked checkbox's parent:
var active1, active2;
var MAX = 2;
$('input.addnominee').click(function() {
($('input.addnominee:checked').length == MAX) ? $('input.addnominee').not(':checked').attr('disabled',true):$('input.addnominee').not(':checked').attr('disabled',false);
let checked = $('input.addnominee:checked');
active1 = $(checked[0]).parent().next('div').children('input').attr('id');
//Let's assign active2 only if we have multiple selected checkboxes:
if(checked.length > 1) active2 = $(checked[1]).parent().next('div').children('input').attr('id');
});
Here's example with click. To simplify it a bit, I added stepper class into every number input, and we're now detecting click for the class stepper:
$(document).on('click','.stepper',function(){
if($(this).attr('id') == active1){ //Check which one user clicked
if(active2 != undefined){ //Make the math only if we have another active element
var share1 = $('#'+active1).val();
var answer = 100 - share1;
$('#'+active2).val(answer);
}
}else if($(this).attr('id') == active2){
if(active1 != undefined){
var share2 = $('#'+active2).val();
var answer = 100 - share2;
$('#'+active1).val(answer);
}
}
});
Fiddle: https://jsfiddle.net/xpvt214o/677733/
This surely works also with focusout, but you need to remember that clicking stepper wont focus the input, so it wouldn't be very functional.
And with this same idea you could also disable the inputs which are not 'active'.
I hope this helps!
EDIT:
Maybe a bit simplified version with the same idea:
jQuery(document).ready(function($) {
var MAX = 2;
$('input.addnominee').click(function() {
($('input.addnominee:checked').length == MAX) ? $('input.addnominee').not(':checked').attr('disabled',true):$('input.addnominee').not(':checked').attr('disabled',false);
});
$(document).on('click','.stepper',function(){
var checked = $('input.addnominee:checked');
if(checked.length > 1){
var active1 = $(checked[0]).parent().next('div').children('input');
var active2 = $(checked[1]).parent().next('div').children('input');
var share = $(this).val();
var answer = 100 - share;
if($(this).attr('id') == $(active1).attr('id')){
$(active2).val(answer);
}else if($(this).attr('id') == $(active2).attr('id')){
$(active1).val(answer);
}
}
});
});
Fiddle: https://jsfiddle.net/128uzmj3/
I have a html form, where user need to enter the name and address of their office. The number of offices are dynamic.
I want to add an Add More button, so that users can enter the details of any number of offices.
My question is, how can I create an array of inputs where new elements can be added and removed using JavaScript. Currently, I'm doing it using js clone method, but I want an array, so that input data can easily be validated and stored to database using Laravel.
What I'm currently doing..
This is my HTML form where users have to enter the address of their clinic or office. I've taken a hidden input field and increasing the value of that field whenever a new clinic is added, so that I can use loop for storing data.
<div class="inputs">
<label><strong>Address</strong></label>
<input type="text" class="hidden" value="1" id="clinicCount" />
<div id="addresscontainer">
<div id="address">
<div class="row" style="margin-top:15px">
<div class="col-md-6">
<label><strong>Clinic 1</strong></label>
</div>
<div class="col-md-6">
<button id="deleteclinic" type="button" class="close deleteclinic"
onclick="removeClinic(this)">×</button>
</div>
</div>
<textarea name="address1" placeholder="Enter Clinic Address" class="form-control"></textarea>
<label class="text-muted" style="margin-top:10px">Coordinates (Click on map to get coordinates)</label>
<div class="row">
<div class="col-md-6">
<input class="form-control" id="latitude" type="text" name="latitude1" placeholder="Latitude" />
</div>
<div class="col-md-6">
<input class="form-control" id="longitude" type="text" name="longitude1" placeholder="Longitude" />
</div>
</div>
</div>
</div>
</div>
<div class="text-right">
<button class="btn btn-success" id="addclinic">Add More</button>
</div>
And my js code..
function numberClinic(){
//alert('test');
var i=0;
$('#addresscontainer > #address').each(function () {
i++;
$(this).find("strong").html("Clinic " + i);
$(this).find("textarea").attr('name','name'+i);
$(this).find("#latitude").attr('name','latitude'+i);
$(this).find("#longitude").attr('name','longitude'+i);
});
}
$("#addclinic").click(function(e){
e.preventDefault();
$("#addresscontainer").append($("#address").clone());
numberClinic();
$("#addresscontainer").find("div#address:last").find("input[name=latitude]").val('');
$("#addresscontainer").find("div#address:last").find("input[name=longitude]").val('');
$("#clinicCount").val(parseInt($("#clinicCount").val())+1);
});
function removeClinic(address){
if($("#clinicCount").val()>1){
$(address).parent('div').parent('div').parent('div').remove();
$("#clinicCount").val(parseInt($("#clinicCount").val())-1);
}
numberClinic();
}
This way, I think I can store the data to the database but can't validate the data. I'm using the laravel framework.
One way you could do this is by using the position of the input in the parent as the index in the array, then saving the value in the array every time each input is changed. Then you can just add and remove inputs.
Sample code:
var offices = document.getElementById('offices');
var output = document.getElementById('output');
var data = [];
var i = 0;
document.getElementById('add').addEventListener('click', function() {
var input = document.createElement('input');
input.setAttribute('type', 'text');
input.setAttribute('placeholder', 'Office');
var button = document.createElement('button');
var index = i++;
input.addEventListener('keyup', function() {
for (var i = 0; i < offices.children.length; i++) {
var child = offices.children[i];
if (child === input) {
break;
}
}
// i is now the index in the array
data[i] = input.value;
renderText();
});
offices.appendChild(input);
});
document.getElementById('remove').addEventListener('click', function() {
var children = offices.children;
if (children.length === data.length) {
data = data.splice(0, data.length - 1);
}
offices.removeChild(children[children.length - 1]);
renderText();
});
function renderText() {
output.innerHTML = data.join(', ');
}
JSFiddle: https://jsfiddle.net/94sns39b/2/
So, I need a function to check if the rules I've made apply to the options I have in my form.
The first box is a name box and it needs to have at least three letters and contain at least one whitespace to pass.
The other box is age, it needs to have a number between 1 and 125, I can do that on my own but I'm thinking there might be a nice way to set all of the rules at once so I thought I'd include it.
The third option is a set of three radio buttons of which one has to be selected and the fourth box is an info box that should consist of a text with at least 30 letters. These rules should be checked on the press of a button, this is how far I've gotten on my own:
var sendButton = $("button:first").addClass("sendButton");
var age = document.getElementsByName('age')[0].value;
sendButton.click(function(){
var infoName = document.getElementsByName('infoName')[0].value;
if (infoName.length<3){
console.log("Your name must consist of at least three letters and contain a whitespace");
};
}
});
<section class="column">
<h2>Contact us</h2>
<form action="#">
<fieldset>
<legend>Form</legend>
<div class="textinput">
<label for="infoName">Ditt namn:</label>
<input type="text" name="infoName" placeholder="ex. John Doe">
</div>
<div class="textinput">
<label for="infoName">Din ålder:</label>
<input type="text" name="age" placeholder="ex. 25">
</div>
<div class="radioSelection">
<label>Choose your favorite</label>
<input type="radio" name="favorite" id="html" value="html">
<label for="html">HTML</label>
<input type="radio" name="favorite" id="js" value="js">
<label for="js">JavaScript</label>
<input type="radio" name="favorite" id="css" value="css">
<label for="css">CSS</label>
</div>
<div class="textareainput">
<label for="info">Info about you:</label>
<textarea placeholder="Type something about yourself, this area must contain 30 letters or more"></textarea>
</div>
<div class="action">
<button>Send</button>
</div>
function validateForm(){
var infoName = document.getElementsByName('infoName')[0].value;
var age= document.getElementsByName('age')[0].value;
var favourites = document.getElementsByName('favorite');
var problems = 0;
if(infoName.length < 3){
// Failed length validation
problems++;
}
var spaceIndex = infoName.indexOf(' ');
if(spaceIndex === -1){
// Name does not contain a space.
problems++;
}
else if(spaceIndex === 0){
// Name begins with space
problems++;
}
else if(spaceIndex === infoName.length - 1){
// Space is last character.
problems++;
}
var hasCheck = false;
for(var i = 0; i < favourites.length; i++){
if(favourites[i].checked){
hasCheck = true;
break;
}
}
if(!hasCheck){
// No radio button has been checked.
problems++;
}
var ageNum = parseInt(age);
if(isNaN(ageNum)) {
// Age is not a number
problems++;
}
else if(ageNum < 1 || ageNum > 125){
// Age is not within boundaries
problems++;
}
/// etc etc, for all your validations.
return problems === 0;
}
At the end of the validation, if any problems are detected, the form will not be submitted (because problems === 0 is false). Also the number validation I've put in there is not very robust. Check out this question which goes into detail about number validation.
The validation method should be called on submission of the form, rather than when the button is clicked
$('form').submit(function(e){
var valid = validateForm();
if(!valid){
e.preventDefault();
return false;
}
});