How to show div/form when select function executes in javascript? - javascript

I need some help on when my FullCalendar Select:function{} exectues I want to my div (form) to show. right now I implemented a alert/prompt to show. But I need help or guide me on what am I doing wrong in my code below. All I need is to show my div when I double click on the calendar, basically replace the prompt to the form. thank you for the help. here is my code.
Javascript snippet:
select: function(info ) {
let title = prompt("Event Content:");
if (title) {
calendar.addEvent({
title: title,
start: info.startStr,
end: info.endStr
})
}
calendar.unselect();
},
HTML:
<div class="modal fade" id="schedule-edit">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Add Task</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<form id="event-form">
<div class="form-group">
<label>Title:</label>
<input type="text" name = "title" id="title" class="form-control">
</div>
<div class="form-group">
<label>Project:</label>
<input type="text" id="project" class="form-control">
</div>
<div class="form-group">
<label>Est. Time (hours)</label>
<input type="text" id="time" class="form-control" placeholder="(Examples: 3,12.5,5.75")>
</div>
<div class="form-group">
<label>Time Spent (hours)</label>
<input type="text" id ="timeSpent" class="form-control" placeholder="(Examples: 3,12.5,5.75")>
</div>
<div class="form-group">
<label>Description</label>
<!--Add rich text editor here -->
<div class="sample-toolbar" id="description">
<span class="fa fa-bold fa-fw"></span>
<span class="fa fa-italic fa-fw"></span>
<span class="fa fa-list fa-fw"></span>
<span class="fa fa-link fa-fw"></span>
</div>
<div class="editor" id="sampleeditor"></div>
<div class="form-group">
<label>Priority</label>
<select class="form-control" id='firstList' name='firstList' onclick="getFoodItem()">
</select>
</div>
<div class="form-group">
<label>Start Date</label>
<br>
<input type="date" id="myDate" placeholder="yyyy-MM-dd" />
</div>
<div class="form-group">
<label>Due Date</label>
<br>
<input type="date" id="myDue" placeholder="yyyy-MM-dd" />
</div>
</div>
</form>
</div>


<input type="text" id="txtDate" name="SelectedDate" readonly="readonly" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"
type="text/javascript"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css"
rel="Stylesheet" type="text/css" />
<script type="text/javascript">
$(function () {
$("#txtDate").datepicker({
changeMonth: true,
changeYear: true,
showOn: 'button',
buttonImageOnly: false,
buttonImage: '',
dateFormat: 'dd/mm/yy',
onSelect: function (dateString, txtDate) {
DisplayDate("Selected Date: " + dateString + "\nTextBox ID: " + txtDate.id);
}
});
});
function DisplayDate(message) {
alert(message);
};
</script>
As you see above, when we click on any date, DisplayData function is called and we display a message.
And to hide/show any div, you can do something like:
const targetDiv = document.getElementById("third");
const btn = document.getElementById("toggle");
btn.onclick = function () {
if (targetDiv.style.display !== "none") {
targetDiv.style.display = "none";
} else {
targetDiv.style.display = "block";
}
};
<body>
<div id="first">This is the FIRST div</div>
<div id="second">This is the SECOND div</div>
<div id="third">This is the THIRD div</div>
<button id="toggle">Hide THIRD div</button>
</body>
As it's obvious, I'm not going to make a fuss. However, if anything is unclear, feel free to ask!

Related

Modal need to be validated after validation it should move to another modal

In this code I need to validate modal after validation it should move to another modal
In jquery I have validated after successfully validated the data-target have been added in jquery code,but it does not working properly
fiddle link for the detailed view
after entering the values there is problem in jquery part because the email and text box have been validated
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<button class="main" data-toggle="modal" data-target="#myModalnew" data-dismiss="modal">Check</button>
<div class="modal_main">
<div class="modal fade" id="myModalnew" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h2 class="modal-title">Heading</h2>
<h4>Details</h4>
</div>
<div class="modal-body border">
<form id="contact" method="POST">
<fieldset>
<div class="input-group email">
<span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span>
<input id="email" type="email" class="form-control" name="email" placeholder="Email">
</div>
<div class="input-group name">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input id="name" type="text" class="form-control" placeholder="Name">
</div>
<div class="tab-content">
<div id="criteria_ship" class="tab-pane fade in active">
<div class="input-group address">
<span class="input-group-addon"><i class="glyphicon glyphicon-map-marker"></i></span>
<input id="address" type="text" class="form-control" placeholder="Street">
</div>
<div class="input-group town">
<input type="text" class="form-control" id="city" placeholder="City">
<input type="text" class="form-control" id="postcode" placeholder="Postcode">
</div>
<div class="paybutton">
<input type="submit" class="but_key but_link" id="pay" value="Payment" data-toggle="modal" data-target="#" data-dismiss=""
>
</div>
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
</div>
<div class="modal fade" id="myModalnew1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<
<h2 class="modal-title">getsmartnet.com</h2>
<h4>Smartnet's Payment</h4>
</div>
<div class="modal-body">
<form>
<fieldset>
<div class="main_card">
<div class="input-group card">
<span class="input-group-addon"><i class="glyphicon glyphicon-credit-card"></i></span>
<input id="card" type="text" class="form-control" placeholder="Card Number">
</div>
<div>
<div class="input-group date">
<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
<input type="text" class="form-control" id="expiry" placeholder="MM/YY">
<span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
<input type="text" class="form-control" id="code" placeholder="CVC">
</div>
</div>
<div class="input-group check_rem">
<input type="checkbox" id="rem_check"> Remember Me
</div>
<fieldset id="main_rem">
<div class="input-group forgot"id="check_mobile">
<div class="input-group">
<span>For security, please enter your <strong><span>mobile phone number</span></strong>
</span>
</div>
<div class="input-group mob_rem">
<span class="input-group-addon"><i class="glyphicon glyphicon-phone"></i></span>
<input type="tel" class="form-control" id="mob_num">
</div>
</div>
</fieldset>
<fieldset>
<div class="but_link">
Pay
</div>
</fieldset>
</div>
</fieldset>
</form>
</div>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function(){
var name = $( "#name" ),
password = $( "#password" ),
street=$("#street"),
city=$("#city"),
pin=$("#postcode");
$('#pay').click(function(e) {
var isValid = true;
$('input[type="text"]').each(function() {
if ($.trim($(this).val()) == '') {
isValid = false;
$(this).css({
"border": "1px solid red"
});
isValid = false;
}
else {
$(this).css({
"border": "",
"background": ""
});
isValid = true;
}
});
var email = $( "#email" ).val();
var check_em=false;
if ($.trim(email).length == 0) {
$("#email").css({
"border": "1px solid red"
});
check_em=false;
e.preventDefault();
}
else if (validateEmail(email)) {
$("#email").css({
"border": "",
"background": ""
});
check_em=true;
}
else {
$("#email").css({
"border": "1px solid red"
});
check_em=false;
e.preventDefault();
}
if(check_em==true && isValid==true){
alert("final");
$(this).attr('data-dismiss',"modal");
$(this).attr('data-target',"#myModalnew1");
}
});
});
function validateEmail(email) {
var filter = /^[a-zA-Z0-9]+#[a-zA-Z0-9]+.[a-z]{2,4}$/;
var res_tes=filter.test(email)
console.log(res_tes);
if (res_tes==true) {
return true;
}
else {
return false;
}
}
</script>
</body>
</html>

Your isValid was remaining false even after the validation was successful, so if(check_em==true && isValid==true) this was never true, and next modal was never triggered.
Here I fixed those issues, now it works
$(document).ready(function() {
var name = $("#name"),
password = $("#password"),
street = $("#street"),
city = $("#city"),
pin = $("#postcode");
$('#pay').click(function(e) {
//prevent form submission to server
e.preventDefault();
//set it to false initially
var isValid = false;
$('input[type="text"]').each(function() {
if ($.trim($(this).val()) === '') {
$(this).css({
"border": "1px solid red"
});
} else {
$(this).css({
"border": "",
"background": ""
});
// set it to true, only if it's valid
isValid = true;
}
});
var email = $("#email").val();
var check_em = false;
if ($.trim(email).length === 0) {
$("#email").css({
"border": "1px solid red"
});
check_em = false;
e.preventDefault();
} else if (validateEmail(email)) {
$("#email").css({
"border": "",
"background": ""
});
check_em = true;
} else {
$("#email").css({
"border": "1px solid red"
});
check_em = false;
e.preventDefault();
}
if (check_em && isValid) {
$(this).attr('data-dismiss', "modal");
$(this).attr('data-target', "#myModalnew1");
}
});
});
function validateEmail(email) {
var filter = /^[a-zA-Z0-9]+#[a-zA-Z0-9]+.[a-z]{2,4}$/;
return filter.test(email);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<button class="btn btn-primary main" data-toggle="modal" data-target="#myModalnew" data-dismiss="modal">Check</button>
<div class="modal_main">
<div class="modal fade" id="myModalnew" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h2 class="modal-title">Heading</h2>
<h4>Details</h4>
</div>
<div class="modal-body border">
<form id="contact" method="POST">
<fieldset>
<div class="input-group email">
<span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span>
<input id="email" type="email" class="form-control" name="email" placeholder="Email">
</div>
<div class="input-group name">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input id="name" type="text" class="form-control" placeholder="Name">
</div>
<div class="tab-content">
<div id="criteria_ship" class="tab-pane fade in active">
<div class="input-group address">
<span class="input-group-addon"><i class="glyphicon glyphicon-map-marker"></i></span>
<input id="address" type="text" class="form-control" placeholder="Street">
</div>
<div class="input-group town">
<input type="text" class="form-control" id="city" placeholder="City">
<input type="text" class="form-control" id="postcode" placeholder="Postcode">
</div>
<div class="paybutton">
<input type="submit" class="but_key but_link" id="pay" value="Payment" data-toggle="modal" data-target="#" data-dismiss=""
>
</div>
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
</div>
<div class="modal fade" id="myModalnew1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h2 class="modal-title">getsmartnet.com</h2>
<h4>Smartnet's Payment</h4>
</div>
<div class="modal-body">
<form>
<fieldset>
<div class="main_card">
<div class="input-group card">
<span class="input-group-addon"><i class="glyphicon glyphicon-credit-card"></i></span>
<input id="card" type="text" class="form-control" placeholder="Card Number">
</div>
<div>
<div class="input-group date">
<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
<input type="text" class="form-control" id="expiry" placeholder="MM/YY">
<span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
<input type="text" class="form-control" id="code" placeholder="CVC">
</div>
</div>
<div class="input-group check_rem">
<input type="checkbox" id="rem_check"> Remember Me
</div>
<fieldset id="main_rem">
<div class="input-group forgot"id="check_mobile">
<div class="input-group">
<span>For security, please enter your <strong><span>mobile phone number</span></strong>
</span>
</div>
<div class="input-group mob_rem">
<span class="input-group-addon"><i class="glyphicon glyphicon-phone"></i></span>
<input type="tel" class="form-control" id="mob_num">
</div>
</div>
</fieldset>
<fieldset>
<div class="but_link">
Pay
</div>
</fieldset>
</div>
</fieldset>
</form>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>

plugin doesn't show the modified messages - jQuery Validate plugin

jQuery validator doesn't recognize the messages that I set for the error. Could you help me?
This is my HTML document:
<!DOCTYPE html>
<html lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Subir cursos</title>
<link rel="stylesheet" href="css/jquery-ui.css">
<link rel="stylesheet" href="css/jquery-ui.theme.css">
<link rel="stylesheet" href="css/jquery-ui.structure.css">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-8">
<ol class="breadcrumb">
<li>Inicio</li>
<li>Gestor</li>
<li class="active">Subir Curso</li>
</ol>
</div>
<div class="col-md-2">
<span class="glyphicon glyphicon-plus" aria-hidden="true"> Subir Catalogo
</div>
</div>
<div class="row">
<div class="col-md-12">
<h3 class="text-center">
Subir curso
</h3>
</div>
</div>
<div class="row">
<div class="col-md-3">
</div>
<div class="col-md-6">
<form role="form" enctype="multipart/form-data" method="post" id="curso" action="R/rCurso.php">
<p class="text-muted">Los campos marcados con (<span style="color:red">*</span>) son obligatorios</p>
<div class="form-group">
<label>Curso <span style="color:red">*</span></label>
<input class="form-control" id="ccrs" name="crs" type="text" required data-validation="length" pattern="/^[ A-Za-z0-9_#./#&+-]*$/"/>
</div>
<div class="form-group">
<label>Indice </label>
<textarea class="form-control" name="idx" id="cidx" ></textarea>
</div>
<div class="form-group">
<label>Descripcion</label>
<textarea class="form-control" name="dsr" id="cdsr" ></textarea>
</div>
<div class="form-group">
<label>Fecha <span style="color:red">*</span></label>
<input name="fch" type="text" id="datepicker" required/>
</div>
<div class="form-group">
<label>Idioma <span style="color:red">*</span></label>
<select id="languaje" name="lng" required>
</select>
</div>
<div class="form-group">
<label>Imágen <span style="color:red">*</span></label>
<input id="imgPick" name="imgPick" value="" type="hidden">
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#sel">Seleccionar Imagen</a></li>
<li><a data-toggle="tab" href="#upload">Subir imagen</a></li>
</ul>
<div class="tab-content">
<div id="sel" class="tab-pane fade in active">
<h3>Selecciona una Imagen </h3>
<div class="row">
<div class="col-xs-12 col-md-12" id="pickimg">
</div>
</div>
</div>
<div id="upload" class="tab-pane fade">
<h3>Subir Imagen</h3>
<input id="exampleInputFile" name="input_field_name" type="file" />
<p class="help-block">
Solo archivos png, jpg, y jpeg de 600x600px
</p>
</div>
</div>
</div>
<div class="form-group">
<label>Enlace Youtube <span style="color:red">*</span></label>
<input class="form-control" name="url1" id="curl1" type="text" required/>
</div>
<div class="form-group">
<label>Enlace Vimeo</label>
<input class="form-control" name="url2" id="curl2" type="text" />
</div>
<div class="form-group">
<label>Enlace DailyMotion</label>
<input class="form-control" name="url3" id="curl3" type="text" />
</div>
<div class="form-group">
<label>Nivel <span style="color:red">*</span></label>
<select name="lvl" id="clvl" required>
<option value="1">Superior</option>
<option value="2">Medio Superior</option>
</select>
</div>
<div class="form-group">
<label>Palabras clave <span style="color:red">*</span></label>
<input class="form-control" name="key" id="ckey" type="text" required/>
</div>
<div class="form-group">
<label>Autor <span style="color:red">*</span></label>
<select name="idAuth" id="idAuth" required>
</select>
</div>
<div class="form-group"><script src="js/jquery.js"></script>
<label>Escuela <span style="color:red">*</span></label>
<select name="idEscu" id="idEscu" required>
</select>
</div>
<div class="form-group">
<label>Categoria <span style="color:red">*</span></label>
<select id="catg" name="idCatg" required>
</select>
</div>
<div class="form-group">
<label>Subcategoria <span style="color:red">*</span></label>
<select id="subCat" name="idSubctg" required>
</select>
</div>
<button type="submit" id="save" class="btn btn-default">
Enviar
</button>
</form>
</div>
<div class="col-md-3">
</div>
</div>
</div>
<script src="js/webService.js"></script>
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery-ui.js"></script>
<script src="js/jquery-validate.js"></script>
And this is the Script part where I have to set the messages right?, I did but then when I test, I get the default error message that is
This field is required.
here the script part, tell me if other functions make that the code works like that or if I did something wrong
$(document).ready(inicio);
function inicio() {
$(function () {
$("#datepicker").datepicker();
});
$( "#curso" ).validate( {
onkeyup: function (element, event) {
if (event.which === 9 && this.elementValue(element) === "") {
return;
} else {
this.element(element);
}
},
rules: {
ccrs: {
required: true,
minlength: 10
},
cidx: {
minlength: 10
},
cdsr: {
minlength: 10
},
datepicker: {
required: true,
date: true
},
languaje: {
required: true
},
curl1: {
required: true,
url: true
},
curl2: {
url: true
},
curl3: {
url: true
}
},
messages: {
ccrs: {
required:"Please enter your firstname",
minlength:"el minimo es 10"},
cidx: {
minlength:"your test must have more than 10 characters"},
cdsr: {
minlength:"your test must have more than 10 characters"},
datepicker: {
required: "Please set a date",
date: "It must be a Date"
},
languaje: {
required: "Please set any language"
},
curl1: {
required:"Please enter a valid email address",
url: "you must set an url"}
}
} );
var autores = "#" + $('#idAuth').attr('id');
var escuelas = "#" + $('#idEscu').attr('id');
var categorias = "#" + $("#catg").attr('id');
var subcategorias = "#" + $('#subCat').attr('id');
var idiomas = "#" + $('#languaje').attr('id');
listAutores(autores);
listEscuelas(escuelas);
listCategorias(categorias);
listIdiomas(idiomas);
$(categorias).one(function () {
listSubcategorias(subcategorias, $(this).val());
});
$(categorias).on("change", function () {
listSubcategorias(subcategorias, $(this).val());
});
listImgCursos("#pickimg");
}//inicio

Within .validate(), you've mixed up the id with the name...
rules: {
ccrs: { // <- must match the NAME, not the ID!
required: true,
minlength: 10
},
....
},
messages: {
ccrs: { // <- must match the NAME, not the ID!
required: "Please enter your firstname",
minlength: "el minimo es 10"
},
....
For simplicity, just make the id and name the same.
<input id="ccrs" name="ccrs" type="text" ....
The only reason validation was still working was because you set some HTML5 validation attributes inline. For example, required was only working because you had the required attribute inline (that's also why you saw the default message).
BTW, there is no need to have inline HTML5 validation attributes when you properly declare the rules within the .validate() method. Remember, the jQuery Validate plugin will dynamically disable HTML5 validation, so certain HTML5 attributes will be picked up and used by jQuery Validate, while others will be ignored.
DEMO: jsfiddle.net/psr9grq7/3/

datetimepicker bootstrap eonasdan

I need to get the changed value in the datetimepicker.
I tried
$('#startDate').datetimepicker().on('dp.change', function (event) {
console.log(event.date);
});
And :
$('#startDate').datetimepicker().on('dp.hide', function (event) {
console.log(event.date);
});
But the result is the value before the change.
Help me to understand please.

i think this is what you want (just edit the $('input') with your element ID or class name:
https://jsfiddle.net/yqgxd472/
<div class="container">
<div class="row">
<div class='col-sm-6'>
<br>
<br>
<br>
<div class="form-group">
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</div>
js:
$(function() {
$('input').datetimepicker({
format: 'YYYY-MM-DD H:m:s'
});
});
$('input').datetimepicker().on('dp.change', function(event) {
console.log(moment(event.date).format('YYYY-MM-DD')); // using moment.js
});

clear checkboxes of selected options in jquery multiple select

In below fiddle, I have a bootstrap modal and there is a Select Users MultipleSelect.
I need to clear the selection on modal close, like set the dropdown to defaults without any selection.
For example, if I select user 1 and user 2, then on modal close, none should be selected. The previous selection must be gone.
The code I am trying isn't helping me out and neither are any posts here on stack overflow.
A little that I tried is this :
$("#usersDropDown option:selected").attr("checked",false);
And this :
$("#usersDropDown option:selected").attr("selected",false);
And also this:
$("#usersDropDown option:selected").removeAttr("checked");
Please guide me what should I do ?
Fiddle

Hi can you check now fiddle. Its working I guess.
I add this code to modal shown. If you want you can add it to hidden function
$("#usersDropDown").siblings(".ms-parent")
.find("li.selected input[type='checkbox']").click();

You can use the following code to reset the form data and the multi select box in the drop-down on bootstrap modal window to clear contents.
$('#shareLocationModal').on('hidden.bs.modal', function(){
$('#usersDropDown').multipleSelect('refresh'); // to reset the multi select users dropdown
$(this).find('form')[0].reset(); // To reset form fields
})

You can use $('#usersDropDown').multipleSelect("uncheckAll"); inorder to deselect all.
JSFiddle
var currentDate = new Date();
var day = currentDate.getDate();
if (day < 10)
day = "0" + day;
var month = currentDate.getMonth() + 1;
if (month < 10) {
month = "0" + month;
}
var hours;
var year = currentDate.getFullYear();
todayDateReport = year + "-" + month + "-" + day;
$("#currentDate").html(todayDateReport);
startDate = todayDateReport + " 00:00:00";
endDate = todayDateReport + " 23:59:59";
hours = " 00:00";
$('.input-group').datetimepicker({
format: 'YYYY-MM-DD HH:mm',
collapse: true,
sideBySide: false,
useCurrent: false,
showClose: true,
});
$('#hoursInput').datetimepicker({
format: 'HH:mm',
collapse:true,
sideBySide:false,
useCurrent:false,
showClose:true,
focusOnShow: false,
});
$('#hoursInputExpiry').datetimepicker({
format: 'HH:mm',
collapse:true,
sideBySide:false,
useCurrent:false,
showClose:true,
focusOnShow: false,
});
$("#startDateInputExpiry").val(startDate);
$("#endDateInputExpiry").val(endDate);
$("#hoursInput").val(hours);
$("#hoursInputExpiry").val(hours);
$("#sendDropDownOptions").on('change', function() {
if ($("#sendDropDownOptions option:selected").text() == "Datetime") {
$("#durationHoursSend").addClass('hide');
$("#sendTD").append($("#startdatetimeSend"))
$("#startdatetimeSend").removeClass('hide');
} else if ($("#sendDropDownOptions option:selected").text() == "Hours") {
$("#startdatetimeSend").addClass('hide');
$("#sendTD").append($("#durationHoursSend"))
$("#durationHoursSend").removeClass('hide');
} else {
$("#startdatetimeSend").addClass('hide');
$("#durationHoursSend").addClass('hide');
}
});
$('#shareLocationModal').on('shown.bs.modal', function() {
$('#usersDropDown').multipleSelect("uncheckAll");
if ($("#expiryDropDownOptions option:selected").text() == "DatetimeExp") {
$("#startdatetimeExpiry").removeClass('hide');
$("#expiryTD").append($("#startdatetimeExpiry"))
}
});
$("#expiryDropDownOptions").on('change', function() {
if ($("#expiryDropDownOptions option:selected").text() == "HoursExp") {
$("#startdatetimeExpiry").addClass('hide');
$("#durationHoursExpiry").removeClass('hide');
$("#expiryTD").append($("#durationHoursExpiry"))
}else if ($("#expiryDropDownOptions option:selected").text() == "DatetimeExp") {
$("#durationHoursExpiry").addClass('hide');
$("#startdatetimeExpiry").removeClass('hide');
$("#expiryTD").append($("#startdatetimeExpiry"))
}
else {
$("#durationHoursExpiry").addClass('hide');
$("#startdatetimeExpiry").addClass('hide');
}
});
$("#usersDropDown").multipleSelect({
placeholder: "Select Users",
selectAll: true,
width: "100%",
filter: true,
});
$("#send").on("click", function()
{
$("#sendDropDownOptions").val('Now').trigger('change');
});
.modal-body {
max-height: calc(100vh - 210px);
overflow-y: auto;
}
<link href="https://rawgit.com/wenzhixin/multiple-select/master/multiple-select.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/3.1.1/css/jasny-bootstrap.css" rel="stylesheet"/>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script><script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script type="text/javascript" src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/3.1.1/css/jasny-bootstrap.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/3.1.1/js/jasny-bootstrap.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.45/js/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/multiple-select/1.2.0/multiple-select.js"></script>
<link rel="stylesheet" type="text/css" href="https://rawgit.com/wenzhixin/multiple-select/master/multiple-select.css">
<button class="btn btn-primary btn-responsive md-btn" id="btnn" data-toggle="modal" data-target="#shareLocationModal">
Share
</button>
<div id="shareLocationModal" class="modal fade">
<div class="modal-dialog wideModal">
<div class="modal-content">
<div class="modal-header modal-header-custom">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="fa fa-times" aria-hidden="true"></i></button>
<h4 class="modal-title" id="modaltitle">Share Location Preferences</h4>
</div>
<div class="modal-body">
<div class="container">
<div class="row form-group">
<div class="col-xs-12">
<div class="form-group col-md-12 col-sm-6">
<form id="shalreLocationDetails" class="form">
<div>
<div class="form-group">
<label>Phone No:</label>
<input type="tel" class="form-control" id="phoneNo" data-toggle="tooltip" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Phone No" onkeypress="return checkValidation(event)" data-placement="bottom" placeholder="Mobile Number"
maxlength="10" data-validation="number">
<!-- <input type="text" class="form-control" id="phone"placeholder="Phone No" data-validation="number" data-validation-allowing="+" /> -->
</div>
<div class="form-group">
<label>e-mail:</label>
<input type="email" class="form-control" id="email" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="e-mail" placeholder="e-mail" data-validation="email">
</div>
<div class="form-group">
<label>Select Users:</label>
<select id="usersDropDown" multiple="multiple" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Select Users">
<option>User 1</option>
<option>User 2</option>
<option>User 3</option>
<option>User 4</option>
</select>
</div>
<div class="form-group">
<label>Send:</label>
<select id="sendDropDownOptions" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Send Options" class="form-control" style="width:100%;">
<option value="Now">Now</option>
<option value="Datetime">Datetime</option>
<option value="Now">Hours</option>
</select>
</div>
<div id="sendTD"></div>
<br>
<div class="form-group">
<label>Expiry:</label>
<select id="expiryDropDownOptions" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Expiry Options" class="form-control" style="width:100%;">
<option>DatetimeExp</option>
<option>HoursExp</option>
</select>
</div>
<div id="expiryTD"></div>
<br>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary btn-responsive md-btn" id="send">Send</button>
<button type="button" class="btn btn-default btn-responsive md-btn" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
<div id="startdatetimeSend" class="hide">
<div class='input-group date' id='startDate'>
<input type='text' class="form-control" placeholder="Start Date" id="startDateInputExpiry" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<div id="durationHoursSend" class="hide">
<div class='date' id='startDate'>
<input type='text' class="form-control" placeholder="Start Date" id="hoursInput" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<div id="startdatetimeExpiry" class="hide">
<div class="input-group date" id='endDate'>
<input type='text' class="form-control" placeholder="End Date" id="endDateInputExpiry" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<div id="durationHoursExpiry" class="hide">
<div class='date' id='startDate'>
<input type='text' class="form-control" placeholder="Start Date" id="hoursInputExpiry" style="position: relative;" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>

Have you tried $("#usersDropDown").prop('selectedIndex',-1); ?

Works for me:
$("input:checkbox").removeAttr("checked");

activeform variable not updating

I have a Jquery function to activate and deactivate forms based off the current form. When I click on the submit button I can get the value of the activeform on the page load if I have it set to ID, but nothing off the second form. When I set it to class it doesn't seem to load any at all and I get no alert back when I click the submit. My jquery is as such:
<script>
$(document).ready(function() {
var activeform = "register";
$("#loginlink").click(function(e) {
var activeform = "login";
$("#login").show("blind", 1000);
$("#register").hide("blind", 1000);
})
$("#registerlink").click(function(e) {
var activeform = "register";
$("#register").show("blind", 1000);
$("#login").hide("blind", 1000);
})
$(".submit").click(function(e) {
e.preventDefault();
alert(activeform);
});
});
</script>
And the code for my forms:
<p>
<form id="register">
<div class='row'>
<div class="col-xs-4"></div>
<div class="col-xs-4">
<label for username><i class="fa fa-user"></i> Username</label>
<input class="form-control" type="text" id="username"></div>
<div class="col-xs-4"></div>
</div>
<div class="row">
<div class="col-xs-4"></div>
<div class="col-xs-4">
<label for password><i class="fa fa-key"></i> Password</label>
<input class="form-control" type="password" id="password"></div>
<div class="col-xs-4"></div>
</div>
<div class="row">
<div class="col-xs-4"></div>
<div class="col-xs-4">
<label for email><i class="fa fa-envelope"></i> Email</label>
<input class="form-control" type="text" id="email"></div>
<div class="col-xs-4"><i class="fa fa-info-circle" title="You may be notified of delayed or denied payments." data-toggle="tooltip"></i></div>
</div>
<div class="row">
<div class="col-xs-4"></div>
<div class="col-xs-4">
<label for submit><i class="fa fa-info" data-toggle="tooltip" title="By Registering you Agree to be Bound by our Terms of Service"></i></label>
<button type="button" class="btn btn-success form-control" class="submit">Register</button></div>
<div class="col-xs-4"></div>
</div>
</form>
<form id="login" style="display:none;">
<div class='row'>
<div class="col-xs-4"></div>
<div class="col-xs-4">
<label for username><i class="fa fa-user"></i> Username</label>
<input class="form-control" type="text" id="username"></div>
<div class="col-xs-4"></div>
</div>
<div class="row">
<div class="col-xs-4"></div>
<div class="col-xs-4">
<label for password><i class="fa fa-key"></i> Password</label>
<input class="form-control" type="password" id="password"></div>
<div class="col-xs-4"></div>
</div>
<div class="row">
<div class="col-xs-4"></div>
<div class="col-xs-4">
<br />
<button type="button" class="btn btn-success form-control" class="submit">Login</button></div>
<div class="col-xs-4"></div>
</div>
</form>
</p>
Login | Register
Last but not least. Here's a fiddle. :)
https://jsfiddle.net/rm6j5da9/2/

You were recreating the activeform variable every time in the click event. remove the var keyword. you already declared that as a global variable inside the document ready scope.
$(function(){
var activeform = "register";
$("#loginlink").click(function(e) {
activeform = "login";
$("#login").show("blind", 1000);
$("#register").hide("blind", 1000);
});
$("#registerlink").click(function(e) {
activeform = "register";
$("#register").show("blind", 1000);
$("#login").hide("blind", 1000);
});
$(".submit").click(function(e) {
e.preventDefault();
alert(activeform);
});
});
Also you need to make sure that you have the submit css class on both the login and register buttons
Here is a working sample

Categories