This question already has answers here:
Validating multiselect with jquery validation plugin
(2 answers)
How can I use jQuery validation with the "chosen" plugin?
(18 answers)
Closed 4 years ago.
I am trying to set some validation rules on a multiselect field. Problem is the validation only works when I deactivate the JQuery multiselect pluggin. See fiddle. Is there a way to make the two work together?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!doctype html>
<html>
<head>
<link href="http://wowislandcharter.com/roit/script/jquery/multiselect/multiselect.css"
type="text/css"
rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>
</head>
<body>
<form id="myform">
<select id="symptom" name="symptom" multiple="" size="15" >
<option value="1">Watery diarrhea</option><option value="2">Abdominal cramps</option><option value="3">Nausea</option><option value="4">Vomiting</option><option value="5">Diarrhea</option><option value="6">Fever</option><option value="7">Bloody Diarrhea</option><option value="8">Cramps</option><option value="9">Facial pallor</option><option value="10">Tea-colored urine</option><option value="11">Abdominal pain</option><option value="12">Jaundice</option><option value="13">Headache</option><option value="14">Stiff neck</option><option value="15">Weakness</option><option value="16">Confusion</option>
</select>
<br/>
<input type="submit" value="Validate!">
</form>
<script src="http://wowislandcharter.com/roit/script/jquery/multiselect/multiselect.js"></script>
<script>
$("#symptom").multiselect({
columns:2,
texts:{placeholder:"SELECT SYMPTOM"}
})
$( "#myform" ).validate({
rules: {
symptom: {
required: true,
}
}
});
</script>
</body>
</html>
Related
This question already has answers here:
Clicking a button within a form causes page refresh
(11 answers)
Closed 2 years ago.
Have a simple input box and submit button to append item to list. I have the correct ID’s and selectors. How is set up is you click with “click” function and when it clicks it selects the ul with its id selector then append is used to add the item but nothing appears.
$(document).ready(function() {
$("#somebutton1").click(function() {
$("#someul1").append("<li>Appended item</li>");
});
});
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width" />
<title>cfds</title>
<link rel="stylesheet" href="img/bootstrap.min.css" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<form id="someform1" name="someformname1">
<input id="someinput1" type="text">
<input id="somebutton1" type="submit">
</form>
<br><br>
<div id="somediv1">
<ul id="someul1">
<li>coffee</li>
<li>milk</li>
<li>tea</li>
</ul>
</div>
<br><br>
<script src="https://code.jquery.com/jquery-3.5.0.min.js" integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ=" crossorigin="anonymous"></script>
<script src="img/popper.min.js"></script>
<script src="img/bootstrap.min.js"></script>
</body>
</html>
The issue is because the button is in a form and clicking on it submits that form. To have the JS work as you expect you need to stop that form from submitting, which can be done by using a submit event handler and calling preventDefault() on the event which is raised.
In addition you can append the typed value by reading the val() of the field. You can also empty the field after the value is appended. Try this:
jQuery($ => {
let $input = $('#someinput1');
$("#someform1").on('submit', function(e) {
e.preventDefault();
let value = $input.val().trim();
if (value)
$("#someul1").append(`<li>${value}</li>`);
$input.val('');
});
});
<form id="someform1" name="someformname1">
<input id="someinput1" type="text">
<input id="somebutton1" type="submit">
</form><br /><br />
<div id="somediv1">
<ul id="someul1">
<li>coffee</li>
<li>milk</li>
<li>tea</li>
</ul>
</div><br /><br />
<script src="https://code.jquery.com/jquery-3.5.0.min.js" integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ=" crossorigin="anonymous"></script>
Working on a personal project with a navigation bar. I am using jquery x.load() to load html pages into a specific div. The pages load correctly into the div. However, one of the is using a jquery flipswitch. I am trying to read the state of this flipswitch, to no prevail. I have a main javascript file that loads the individual pages, which is basically my x.load(). I have a working jquery script for reading the switch state, that works when placed directly into the developers console. I have attempted this code both inline in the individual page as well as my main javascript file. When I place it inside the individual page, it will at times cause a race condition to develop.
I am looking for any suggestions, advice, or direction on being able to read the status of the flipswitch from the individual pages.
The first section of code is my javascript file. The second section of code, is both my individual page, as well as my main html page that loads the individual html page, respectively.
jQuery(document).ready(function() {
var SideNav = $('.side-nav'),
NavTrigger = $('.nav-trigger'),
Content = $('.content'),
ApartmentAlarm = $('#Alarm'),
$('.ui-flipswitch').click(function(){console.log($(this).hasClass('ui-flipswitch-active') ? 'On' : 'Off')})
NavTrigger.on('click', function(event) {
event.preventDefault();
alert("click works");
$([SideNav, NavTrigger]).toggleClass('nav-visible');
});
ApartmentAlarm.on('click', function() {
//event.preventDefault();
Content.load('alarm.html');
$([SideNav, NavTrigger]).toggleClass('nav-visible');
});
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<form>
<label for="LeftSwitch">Left Light:</label>
<input type="checkbox" data-role="flipswitch" name="LeftSwitch" id="LeftSwitch">
<br>
<label for="RightSwitch">Right Light</label>
<input type="checkbox" data-role="flipswitch" name="RightSwitch" id="RightSwitch">
</form>
<script type="text/javascript">
$(document).ready(function() {
console.log('hello');
$('#LeftSwitch').on('flipswitchcreate', function(event, ui) {
alert('me')
});
//$('.ui-flipswitch').click(function(){console.log($(this).hasClass('ui-flipswitch-active') ? 'On' : 'Off')})
})
</script>
</body>
</html>
<html>
<head>
<title>
</title>
<link rel="stylesheet" href="apt.css">
</head>
<body>
<header class="page-header">
<div class="apartment-name">Carlson Casa</div>
<div class="data-top">
<ul class="top-data">
<li>Time</li>
<li>Outside Temp</li>
<li>Inside Temp</li>
<li>Menu<span></span></li>
</ul>
</div>
</header>
<main class="main-content">
<nav class="side-nav">
<ul>
<li>Apartment</li>
<li class="nav-label">Living Room</li>
<li>Alarm control</li>
<li>Chandelier</li>
<li class="nav-label">Bedroom</li>
<li>Lights</li>
<li>Alarm Clock</li>
</ul>
</nav>
<div class="content">
Controls go here
</div>
</main>
<script src="jquery-2.1.4.js"></script>
<script src="main.js"></script>
</body>
</html>
As you are using jQuery Mobile Flipswitch of type checkbox, you can get the status by checking the property checked. Here is a jQuery Mobile Flipswitch playground:
var cases = {false: "Unchecked", true: "Checked"};
function getStatus() {
$("#statusLeft").html(cases[$("#LeftSwitch").prop("checked")]);
$("#statusRight").html(cases[$("#RightSwitch").prop("checked")]);
}
$(document).on("change", "#LeftSwitch", function(e) {
var status = $(this).prop("checked");
$("#statusLeft").html("Changed to "+cases[status]);
});
$(document).on("change", "#RightSwitch", function(e) {
var status = $(this).prop("checked");
$("#statusRight").html("Changed to "+cases[status]);
});
function toggleLeft() {
var status = $("#LeftSwitch").prop("checked");
$("#LeftSwitch").prop("checked", !status).flipswitch("refresh");
}
function toggleRight() {
var status = $("#RightSwitch").prop("checked");
$("#RightSwitch").prop("checked", !status).flipswitch("refresh");
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="content">
<form>
<label for="LeftSwitch">Left Light:</label>
<input type="checkbox" data-role="flipswitch" name="LeftSwitch" id="LeftSwitch">
<span id="statusLeft">Unchecked</span>
<br>
<label for="RightSwitch">Right Light</label>
<input type="checkbox" data-role="flipswitch" name="RightSwitch" id="RightSwitch">
<span id="statusRight">Unchecked</span>
</form>
<button class="ui-btn" onclick="getStatus();">Get Status</button>
<button class="ui-btn" onclick="toggleLeft();">Toggle Left</button>
<button class="ui-btn" onclick="toggleRight();">Toggle Right</button>
</div>
</div>
</body>
</html>
By using the change event instead of click you will be notified of the flipswitch toggling also if you are setting the status in code.
Additional notes:
About what you are defining "race condition" i believe you are referring to one of the common mistakes when using jQuery Mobile, i.e. document.ready vs. page events. Please read this post here, and also take some time to read the whole story in deep in this great post of Omar here: jQuery Mobile “Page” Events – What, Why, Where, When & How? (you will find here some other useful posts about this topic).
Moreover: you are trying to update the flipswtches manually by setting the ui-flipswitch-active class by yourself, but i believe you will run into the problem of keeping the status and the ui consistent. So, you may better use the standard JQM way to set the flipswitch status by using flipswitch.refresh. There is already an example in my code snippet.
The last note: until you strongly need it - and you know how to versioning jQuery Mobile - please use the same version of these libraries in all your files, so in your case i believe the pair jQuery 2.1 + JQM 1.4.5 shall be just fine.
jQuery(document).ready(function() {
var SideNav = $('.side-nav'),
NavTrigger = $('.nav-trigger'),
Content = $('.content'),
ApartmentAlarm = $('#Alarm');
$('.ui-flipswitch').click(function(){console.log($(this).hasClass('ui-flipswitch-active') ? 'On' : 'Off')});
NavTrigger.on('click', function(event) {
event.preventDefault();
alert("click works");
$([SideNav, NavTrigger]).toggleClass('nav-visible');
});
ApartmentAlarm.on('click', function() {
//event.preventDefault();
Content.load('alarm.html');
$([SideNav, NavTrigger]).toggleClass('nav-visible');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<form>
<label for="LeftSwitch">Left Light:</label>
<input type="checkbox" data-role="flipswitch" name="LeftSwitch" id="LeftSwitch">
<br>
<label for="RightSwitch">Right Light</label>
<input type="checkbox" data-role="flipswitch" name="RightSwitch" id="RightSwitch">
</form>
<script type="text/javascript">
$(document).ready(function() {
console.log('hello');
$('#LeftSwitch').on('flipswitchcreate', function(event, ui) {
alert('me')
});
//$('.ui-flipswitch').click(function(){console.log($(this).hasClass('ui-flipswitch-active') ? 'On' : 'Off')})
})
</script>
</body>
</html>
This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 5 years ago.
I would like to change a picture on the site when a selector/combobox changed. It works perfectly in a Bootply, but it looks like the change event not caught neither in local env, nor in appspot...
Here is the HTML:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="/static/js/nbafantasy.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" ></script>
<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/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
</head>
<body>
Eastern conference
<div class="form-group">
<img src="http...">
<select class="custom-select mb-2 mr-sm-2 mb-sm-0" id="11a" name="11a">
<option>-</option>
<option>4:0</option>
<option>4:1</option>
<option>4:2</option>
<option>4:3</option>
<option>3:4</option>
<option>2:4</option>
<option>1:4</option>
<option>0:4</option>
</select>
<img src="...">
</div>
<div clas
And the JS:
$('#11a').on('change', function (e) {
console.log('fired');
if((document.getElementById('11a').value).charAt(0) == "4") {
document.getElementById("21aimg").src="http....";
}else{
document.getElementById("21aimg").src="http.....";
}
});
You have to wrap your event binding in $(document).ready(fn) block:
$(document).ready(function() { // <---ensures that DOM is ready to use
$('#11a').on('change', function(e) { // <---now it will be bound on target element
console.log('fired');
if (this.value.charAt(0) == "4") {
document.getElementById("21aimg").src = "http....";
} else {
document.getElementById("21aimg").src = "http.....";
}
});
});
What I am trying to do is, after selecting a date on Bootstrap Datetimepicker, it should load a value on my input field, but I don't know how to do that. There's my JSFiddle.
This is my jQuery for datetimepicker
$(function () {
$('.datetimepickerinline').datetimepicker({inline: true});
});
I need to use it for all inputs, or in other words, closest input field.
You called so many unwanted libraries. Just try this bootstrap datepicker. Hope this work for you.
$(document).ready(function(){
$('#datepicker').datepicker({
format: 'dd/mm/yyyy',
autoclose: true,
todayHighlight: true,
forceParse: false,
});
});
demo
Here is solution you want: jsfiddle
$('.datetimepickerinline').on('change dp.change', function(e){
$('input').val($(this).data('date'));
});
See reference here
Further more, I noticed that you want use moment.js
You can use something like this, using custom format:
$('.datetimepickerinline').on('change dp.change', function(e){
$('input').val(moment($(this).data('date')).format('DD/MM/YYYY, h:mm'));
});
You need to apply class 'datetimepickerinline' on your input field.
<input id="" placeholder="press to show calendar" class="input datetimepickerinline">
Try this fiddle : - https://jsfiddle.net/ekm0on2a/11/
you need to add datepicker class in your input field.
<link rel="stylesheet" type="text/css" media="screen" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<link href="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/build/css/bootstrap-datetimepicker.css" rel="stylesheet">
<script type="text/javascript" src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
<script src="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/src/js/bootstrap-datetimepicker.js"></script>
<div id="container">
<div class="my-example">
<input id="datepicker" placeholder="press to show calendar" class="input input-datepicker">
<div class="dropdown">
<div class="datetimepickerinline">
</div>
</div>
</div>
</div>
//script
$(function () {
$('#datepicker').datetimepicker({inline: true});
});
i want to get date from and make SQL query with it, but i have a little problem :S
I cant get the date and i don't know how to give to an php variable :S
Even more i'm not allowed to use submit (Post and Get methods)
<?php
session_start();
if(isset($_SESSION['myusername']))
{
$hi='';
}else
{
header("location:login.php");
}
require_once '../../templates/DBconnect.php';
$link = DBconnect::connect();
?>
<html>
<head>
<title>bootstrap datepicker examples</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- Bootstrap CSS and bootstrap datepicker CSS used for styling the demo pages-->
<link rel="stylesheet" href="../css/datepicker.css">
<link rel="stylesheet" href="../css/bootstrap.css">
</head>
<body>
<div class="container" width="50%">
<div class="hero-unit" width="50%">
<input type="text" placeholder="Begin Date" id="example1">
</div>
</div>
<div class="container" width="50%">
<div class="hero-unit" width="50%">
<input type="text" placeholder="End Date" id="example2" onchange="hole()">
</div>
</div>
<!-- Load jQuery and bootstrap datepicker scripts -->
<script src="../js/jquery-1.9.1.min.js"></script>
<script src="../js/bootstrap-datepicker.js"></script>
<script type="text/javascript">
// When the document is ready
$(document).ready(function () {
$('#example1').datepicker({
format: "dd-mm-yyyy"
});
});
$(document).ready(function () {
$('#example2').datepicker({
format: "dd-mm-yyyy"
});
});
function hole(){
this.$('.example1').datepicker('getDate');
alert($('#example1').val());
}
</script>
</body>
</html>
You have to use client side script such as JavaScript to pass the SQL query without submitting the page. Some JavaScript libraries such as jquery can be used with minimal JavaScript code.