I'm new to javascript & jquery but I'm attempting to get my head around how I would implement a validation form where when the user places/drags the images in the correct order the form can then be submitted. I have the images dragging in different orders and an alert box outputting the order in an array but how would I go about setting a value for the user to order the array of images in? I have the latest version of jQuery linked to the page and jQuery UI.
I'm trying to implement an if else statement in the code. I'm just not sure where I'm going wrong.
Heres what I got so far..
$(window).load(function(){
$(function() {
//$('#submit').on('click', function() {
//var valid = true,
//message = '';
$( "#sortable" ).sortable({
placeholder: "ui-state-highlight",
cursor: 'crosshair',
update: function(event, ui) {
var order = $("#sortable").sortable("toArray");
$('#image_order').val(order.join(","));
alert($('#image_order').val());
}
});
$( "#sortable" ).disableSelection();
//if('#image_order').val { != [4,3,2,1];
//valid = false; }
//else {
//window.location.href = "http://google.com"
//}
});
});
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<form action="" method="post">
<input type="hidden" id="image_order" name="image_order" value="" />
<ul id="sortable" style="width: 524px;">
<li id="1" class="ui-state-default"><img src="http://placehold.it/100x90/ff0000/000000.png&text=1" /></li>
<li id="2" class="ui-state-default"><img src="http://placehold.it/100x90/ffff00/000000.png&text=2" /></li>
<li id="3" class="ui-state-default"><img src="http://placehold.it/100x90/00ff00/000000.png&text=3" /></li>
<li id="4" class="ui-state-default"><img src="http://placehold.it/100x90/00ffff/000000.png&text=4" /></li>
</ul>
<div style="clear:both;"></div>
<input name="Submit" value="RE-ORDER" type="submit" />
</form>
$(window).load(function(){
$(function() {
$( "#sortable" ).sortable({
placeholder: "ui-state-highlight",
cursor: 'crosshair',
update: function(event, ui) {
var order = $("#sortable").sortable("toArray");
order = JSON.stringify(order);
correct = JSON.stringify(["4","3","2","1"]);
if (order==correct){
//ENABLE WHATEVER HERE
}
}
});
$( "#sortable" ).disableSelection();
});
});
You can add a validate() function that checks when you sort and when you submit the form.
<input name="Submit" value="RE-ORDER" type="submit" onclick="return validate();"/>
You can return a boolean for wheter the form is valid or not to stop the onClick function from propagating.
Just go through the fields and make sure the order is correct before allowing the user to proceed.
var expectedOrder = ["4", "3", "2", "1"];
var currentOrder = [];
window.validate = function() {
if ($('#username').val().trim() === '') {
return false;
}
if (!isEqual(currentOrder, expectedOrder)) {
return false;
}
return true;
}
$(document).ready(function () {
$('#sortable').sortable({
placeholder: 'ui-state-highlight',
cursor: 'crosshair',
update: function (event, ui) {
currentOrder = $("#sortable").sortable("toArray");
if (validate()) {
alert('Navigating to http://www.google.com...');
}
$('#sortable').disableSelection();
}
});
});
function isEqual(arr1, arr2) {
return arr1.join('').localeCompare(arr2.join('')) === 0;
}
body {
padding: 8px;
}
.req {
color: #FF0000;
font-weight: bold;
}
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<form action="" method="post">
<label>Username:<span class="req" title="Field Required">*</span></label>
<input id="username" name="username" type="text" />
<br />
<input type="hidden" id="image_order" name="image_order" value="" />
<ul id="sortable" style="width: 524px;">
<li id="1" class="ui-state-default">
<img src="http://placehold.it/100x90/ff0000/000000.png&text=1" />
</li>
<li id="2" class="ui-state-default">
<img src="http://placehold.it/100x90/ffff00/000000.png&text=2" />
</li>
<li id="3" class="ui-state-default">
<img src="http://placehold.it/100x90/00ff00/000000.png&text=3" />
</li>
<li id="4" class="ui-state-default">
<img src="http://placehold.it/100x90/00ffff/000000.png&text=4" />
</li>
</ul>
<div style="clear:both;"></div>
<input name="Submit" value="RE-ORDER" type="submit" onclick="return validate();"/>
</form>
Related
When one image is selected ...
<div class="selectable">
<img src="https://glarza.com/imagens/tamanho-33.webp" class="ui-widget-content"value="SIZE-33"width="60"height="60">
<img src="https://glarza.com/imagens/tamanho-34.webp" class="ui-widget-content"value="SIZE-34"width="60"height="60">
</div>
this function select the size ...
<script>
$(function() {
$(".selectable").selectable({
selected: function() {
var selectedItemList = $("#medida-selecionada-dalista").empty();
$(".selectable img").each(function(index) {
if ($(this).hasClass("ui-selected")) {
selectedItemList.append(
$(this).attr("value") ); } });}});});
</script>
And show the selected size inside the id ...
<span id="medida-selecionada-dalista"></span>
My problem... I need to insert this value inside this input. I need only this. The others inputs are storeged in mysql.
<input type="size" class="form-control" id="size" name="size" value="">
Like so?
$(function() {
$(".selectable").selectable({
selected: function() {
var selectedItemList = $("#medida-selecionada-dalista").empty();
$(".selectable img").each(function(index) {
if ($(this).hasClass("ui-selected")) {
selectedItemList.append(
$(this).attr("value")
);
/* insert into input */
document.getElementById("size").value = this.getAttribute("value");
}
});
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<input type="size" class="form-control" id="size" name="size" value="">
<span id="medida-selecionada-dalista"></span>
<div class="selectable">
<img src="https://glarza.com/imagens/tamanho-33.webp" class="ui-widget-content" value="SIZE-33" width="60" height="60">
<img src="https://glarza.com/imagens/tamanho-34.webp" class="ui-widget-content" value="SIZE-34" width="60" height="60">
</div>
P.S. avoid jquery whenever you can...
I want to close the login-content div when I clicked outside the div I tried event but it ain't working
I have this html code
<nav class="login">
<ul>
<li id="login">
<a id="login-trigger" href="#">
Log in <span>▼</span>
</a>
<div id="login-content">
<form>
<fieldset id="inputs">
<input id="username" type="text" name="uname"
placeholder="University ID" required>
<input id="password" type="password" name="Password"
placeholder="Password" required>
</fieldset>
<fieldset id="actions">
<input type="submit" id="submit" value="Log in">
<label><input type="checkbox" checked="checked"> Keep me signed
in</label>
</fieldset>
</form>
</div>
</li>
</ul>
this js file script.js
$(document).ready(function(){
$('#login-trigger').click(function(){
$(this).next('#login-content').slideToggle();
$(this).toggleClass('active');
if ($(this).hasClass('active')) $(this).find('span').html('▲')
else $(this).find('span').html('▼')
})
});
You can use the blur event on #login-trigger - for that to work note that you have to add tabindex attribute to the #login-trigger element.
$('#login-trigger').blur(function() {
if ($(this).hasClass('active'))
$(this).trigger('click');
});
If the login-content is active this will trigger the click event and hide the div.
See demo below:
$(document).ready(function() {
$('#login-trigger').click(function() {
$(this).next('#login-content').slideToggle();
$(this).toggleClass('active');
if ($(this).hasClass('active')) $(this).find('span').html('▲')
else $(this).find('span').html('▼')
})
$('#login-trigger').blur(function() {
if ($(this).hasClass('active'))
$(this).trigger('click');
});
});
#login-content {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="login">
<ul>
<li id="login">
<a id="login-trigger" href="#" tabindex='-1'>
Log in <span>▼</span>
</a>
<div id="login-content">
<form>
<fieldset id="inputs">
<input id="username" type="text" name="uname" placeholder="University ID" required>
<input id="password" type="password" name="Password" placeholder="Password" required>
</fieldset>
<fieldset id="actions">
<input type="submit" id="submit" value="Log in">
<label><input type="checkbox" checked="checked"> Keep me signed
in</label>
</fieldset>
</form>
</div>
</li>
</ul>
In cases like these, I would add the mouseEventHandler to the body. Here are the utility functions I keep around.
function _wasElemClicked(element, e: MouseEvent) {
let { clientX: x, clientY: y } = e;
let { height, width, top, left } = _getDimensions(element);
if ((x > left && x < left + width) &&
(y > top && y < top + height)) {
return true;
}
return false;
}
function _getDimensions(elem) {
let { height, width, top, left } = elem.getBoundingClientRect();
return { height, width, top, left }
}
With that I would add the following body-click handler:
const bodyClick = e => {
if(!_wasElemClicked(targetElem, e) {
// close modal/dialog/popup
...
// cleanup event listener
document.body.removeEventHandler('click', bodyClick);
}
}
document.body.addEventHandler('click', bodyClick);
your html code is fine , need to change js,
$(document).ready(function(){
$('#login-trigger').click(function(event){
event.stopPropagation();
$("#login-content").slideToggle();
});
$("#login-content").on("click", function (event) {
event.stopPropagation();
});
});
$(document).on("click", function () {
$(".showup").hide();
});
working fiddle link here,
http://jsfiddle.net/evGd6/2/
Basically I have a form that needs to be submitted in order that the next section of the site appears, in this case it's when a video plays through and ends, the values are submitted via POST so i can't just have a hardcoded URL as i could if i used GET ie. thecycle.ie/test02.php?click='SCENE 09'. The EventListener works but i just can't get it to submit the form.
function listen(evnt, elem, func)
{
if (elem.addEventListener)
elem.addEventListener(evnt, func, false);
else if (elem.attachEvent)
{
var r = elem.attachEvent("on" + evnt, func);
return r;
}
else window.alert("I'm sorry, I'm afraid I can't do that.");
}
listen("ended", document.getElementById("bgvid"), changePage);
function changePage() {
document.getElementById('formID').submit(); // SUBMIT FORM
}
Below is the full page
<form name="formID" id="formID" method="post" action="test02.php">
<input type="hidden" id="bgstate" name="bgstate" value="1">
<input type="hidden" id="vostate" name="vostate" value="">
<input type="hidden" id="choice" name="choice" value="0">
<script type="text/javascript">
$(document).ready(function() {
var bgAudio = document.getElementById("background_audio");
if(bgAudio) {
bgAudio.volume = 1.0;
bgAudio.play();
}
});
</script>
<script type="text/javascript">
function PlayBG()
{
document.getElementById("bgstate").value = "0";
var bgAudio = document.getElementById("background_audio");
bgAudio.volume = 1.0;
bgAudio.play();
}
function StopBG()
{
document.getElementById("bgstate").value = "1";
var bgAudio = document.getElementById("background_audio");
bgAudio.volume = 0.0;
bgAudio.pause();
bgAudio.currentTime = 0;
}
</script>
<div id="timeline">
<!-- top point of ogham -->
<img src="img/timeline/timeline_start.png" width="31" height="31" id="timeline_01"><br>
<input name="click" id="timelineButton" type="image" value="SCENE 01" src="img/timeline/timeline_A.png" alt="navigation" onmouseover="javascript:this.src='img/timeline/timeline_A_on.png'" onmouseout="javascript:this.src='img/timeline/timeline_A.png'">
<input name="click" id="timelineButton" type="image" value="SCENE 02" src="img/timeline/timeline_C.png" alt="navigation" onmouseover="javascript:this.src='img/timeline/timeline_C_on.png'" onmouseout="javascript:this.src='img/timeline/timeline_C.png'">
<input name="click" id="timelineButton" type="image" value="SCENE 03" src="img/timeline/timeline_D_on.png" alt="navigation" onmouseover="javascript:this.src='img/timeline/timeline_D_on.png'" onmouseout="javascript:this.src='img/timeline/timeline_D_on.png'">
<!-- bottom point of ogham -->
<img src="img/timeline/timeline_end.png" alt="timeline"><br>
</div>
<div id="banner">
<img src="img/smalllogo.png" alt="the cycle">
<div class="menu">
<ul>
<li>
Home
</li>
<li>
Wiki
</li>
<li>
About
</li>
</ul>
</div>
<div id="music">
<img src="img/music.png" alt="music">
<input type="image" src="img/play.png" alt="play" onclick="PlayBG(); return false;" value="Play" onmouseover="javascript:this.src='img/play_on.png'" onmouseout="javascript:this.src='img/play.png'">
<input type="image" src="img/stop.png" alt="stop" onclick="StopBG(); return false;" value="Stop" onmouseover="javascript:this.src='img/stop_on.png'" onmouseout="javascript:this.src='img/stop.png'">
</div>
</div>
<script type="text/javascript">
function PlayVO18()
{
document.getElementById("vostate").value = "0";
var voAudio = document.getElementById("voiceover_audio18");
var bgAudio = document.getElementById("background_audio");
var oldBGVolume = bgAudio.volume;
voAudio.volume = 1.0;
voAudio.play();
}
function StopVO18()
{
document.getElementById("vostate").value = "1";
var voAudio = document.getElementById("voiceover_audio18");
voAudio.volume = 0.0;
voAudio.pause();
voAudio.currentTime = 0;
}
</script>
<audio id="voiceover_audio18" class="voiceover_audio" src="audio/vo_balor_07.mp3"></audio>
<audio id="background_audio" class="background_audio" src="audio/myth_cycle_01.mp3" loop=""></audio>
<video autoplay="" poster="img/balorlugh_01.jpg" id="bgvid">
<source src="vids/balorlugh_01.webm" type="video/webm">
<source src="vids/balorlugh_01.mp4" type="video/mp4">
</video>
<div id="decision">
<div class="container">
<div class="toggle18">
<h2>Balor<input type="image" src="img/speech.png" alt="play" onclick="PlayVO18(); return false;" value="Play" onmouseover="javascript:this.src='img/speech_on.png'" onmouseout="javascript:this.src='img/speech.png'"></h2>
<p>You have made a grave mistake, my friend. We will have your hand in the end, even if it takes a few lashings to strengthen your resolve... what is that?</p>
<br>
<div class="toggle">
<script type="text/javascript">
function listen(evnt, elem, func)
{
if (elem.addEventListener)
elem.addEventListener(evnt, func, false);
else if (elem.attachEvent)
{
var r = elem.attachEvent("on" + evnt, func);
return r;
}
else window.alert("I'm sorry, I'm afraid I can't do that.");
}
listen("ended", document.getElementById("bgvid"), changePage);
function changePage()
{
document.getElementById('formID').submit(); // SUBMIT FORM
}
</script>
<button type="submit" name="click" id="submit" class="buttons" value="SCENE 09">Skip</button>
<input type="hidden" id="submit" name="bgstate" value="SCENE 09">
</div>
</div>
</div>
</div>
<script type="text/javascript">
var menu_elements = document.querySelectorAll('.toggle'),
menu_length = menu_elements.length;
for (var i = 0; i < menu_length; i++)
{
menu_elements[i].addEventListener('click', function (e)
{
var target = document.querySelector('.container>.' + e.target.classList[0]); // clicked element
Array.prototype.filter.call(target.parentNode.children, function (siblings)
{
siblings.style.display = 'none'; // hide sibling elements
});
target.style.display = 'block'; // show clicked element
});
}
function MakeChoice08()
{
document.getElementById("choice").value = "08";
}
function MakeChoice04()
{
document.getElementById("choice").value = "04";
}
</script>
</form>
You can`t use "submit" in NAME or ID attribute along with the submit() method, as it will be confused between what it considers an object referenced by the name or id and the method.
Just change <button type="submit" name="click" id="submit" class="buttons" value="SCENE 09">Skip</button> to
<button type="submit" name="click" id="somethingelse" class="buttons" value="SCENE 09">Skip</button>
and <input type="hidden" id="submit" name="bgstate" value="SCENE 09"> to
<input type="hidden" id="somethingelse2" name="bgstate" value="SCENE 09">
guys. I made a custom dropdown list, but can't get its value right.
So basically I need to save the value of a chosen dropdown element and use it in the form along with other data.
Any ideas how to fix this?
<form method="post" action="/subscribed.php">
<ul>
<li>
<input type="name" placeholder="Name" name="name" id="name" />
</li>
<li>
<input type="email" placeholder="Your email" name="email" id="email" />
</li>
<li>
<input type="hidden" name="data-value" id="data-value">
<div class="wrapper-demo">
<div id="dd" class="wrapper-dropdown-3" tabindex="1">
<span>Option</span>
<ul class="dropdown">
<li>option1</li>
<li>option2</li>
<li>option3</li>
<li>option4</li>
<li>option5</li>
</ul>
</div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
function DropDown(el) {
this.dd = el;
this.placeholder = this.dd.children('span');
this.opts = this.dd.find('ul.dropdown > li');
this.val = '';
this.index = -1;
this.initEvents();
}
DropDown.prototype = {
initEvents : function() {
var obj = this;
obj.dd.on('click', function(event){
$(this).toggleClass('active');
return false;
});
obj.opts.on('click',function(e){
var opt = $(this);
var el = e.target;
obj.val = opt.text();
obj.index = opt.index();
obj.placeholder.text(el.getAttribute("data-value"));
$('data-value').val(el.getAttribute("data-value"));
});
},
getValue : function() {
return this.val;
},
getIndex : function() {
return this.index;
}
}
$(function() {
var dd = new DropDown( $('#dd') );
$(document).click(function() {
// all dropdowns
$('.wrapper-dropdown-3').removeClass('active');
});
});
</script>
</li>
<li>
<input type="submit" value="Submit" />
</li>
</ul>
</form>
you are using $('data-value') that is wrong selector, use $('#data-value'),
if you are selecting using id then put # before that. $('#elementid');
Demo
I need to seperate the checked and unchecked check box from set of check boxes. i have done half-of-work but i can't able to separate the checked and unchecked checkbox. please help me out.
Below example has the merge button. when clicked on the merge button. it has to be separate the checked and unchecked checkbox.
$('document').ready( function() {
var b = $('#hid').val();
for (var i=0; i<b; i++) {
var data ="<li><input type='checkbox' id='"+i+"'>Example"+i+"</li>";
$('#aa').append(data);
//$('td').css({'border-right':'1px solid red', ''});
$('.checklist').append(data);
}
//var a = $('input[type="checkbox"]').length;
//$('input[type="checkbox"]').attr("checked");
//if ($(this).is(':checked')) {
//}
/* for (j=0; j<a; j++)
{
var che = $("input[type=checkbox]:checked").length;
alert (che);
if(che > 3))
{
alert ('this is 2');
} else {
alert('you clicked more than four');
}
}*/
$('#mer').click( function() {
var che = $('input[type="checkbox"]:checked').filter(":checked").length;
//alert($('input[type="checkbox"]:checked').filter(":not(:checked)").length);
$('input[type="checkbox"]:checked').attr('disabled', true);
});
/*
for (var j=0; j<=b; j++) {
function isEven(j) {
if (j%2 == 0)
alert(j);
return true;
else
return false;
}
}
*/
/* $(function() {
$('input[type="checkbox"]').bind('click',function() {
if($('input[type="checkbox"]:checked').length == 2) {
$(':checked').attr('disabled', true);
}
});
});
*/
});
</script>
<style type="text/css">
.wrapper {
width:900px;
height:auto;
margin:0 auto;
}
.checklist {
margin:0px;
padding:0px;
}
ul.checklist {
margin:0px;
padding:0px;
}
ul.checklist li {
list-style-type:none;
}
.dull {
color:#ccc;
}
</style>
</head>
<body>
<div class="wrapper">
<input type="hidden" name="no. of checkbox" value="15" id="hid"/>
<ul class="checklist">
</ul>
<input type="button" value="merge" id="mer" />
</div>
</body>
</html>
Perhaps something like:
var unchecked = [];
var checked = [];
jQuery.each($('input[type="checkbox"]'), function() {
if (this.checked) {
checked.push(this);
}
else {
unchecked.push(this);
}
});
You can select checked with:
$(":checkbox:checked")
And not checked with:
$(":checkbox:not(:checked)")
Hope this helps. Cheers
$('#mer').click( function() {
var checked = [];
var unchecked = [];
$('input[type="checkbox"]').each(function(){
if( this.checked ){
checked.push(this);
}else{
unchecked.push(this);
}
});
});
I'm not sure to understand what you want to accomplish. From your comments it seems to me that you need something like this (replace your div.wrapper with mine and add the jQuery code before the end of your body):
HTML code (div.wrapper) :
<div class="wrapper">
<form action="#" method="get" accept-charset="utf-8">
<ul class="checkboxes">
<li><label for="chk_1">chk_1</label>
<input type="checkbox" name="chk1" value="" id="chk_1">
</li>
<li><label for="chk_2">chk_2</label>
<input type="checkbox" name="chk2" value="" id="chk_2">
</li>
<li><label for="chk_3">chk_3</label>
<input type="checkbox" name="chk3" value="" id="chk_3">
</li>
<li><label for="chk_4">chk_4</label>
<input type="checkbox" name="chk4" value="" id="chk_4">
</li>
<li><label for="chk_5">chk_5</label>
<input type="checkbox" name="chk5" value="" id="chk_5">
</li>
<li><label for="chk_6">chk_6</label>
<input type="checkbox" name="chk6" value="" id="chk_6">
</li>
</ul>
<input type="button" value="merge" id="mer" />
</form>
jQuery code:
<script type="text/javascript" charset="utf-8">
$('document').ready( function() {
$('#mer').click( function() {
var checked = $(':checkbox:checked').parents("li").remove();
checked.insertBefore($(".checkboxes li:first"));
});
});
</script>