Please help to solve this problem, i want to validate if "FROM (DATE)" is Greater Than "TO (DATE)" without disabling the Date else i will prompt the user. All answer are appreciated. I already search the possible solution to Google but i cant find.
Below is the screenshot and my code .
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<link href="https://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet">
<script>
$(document).ready(function(){
$( ".datepicker" ).datepicker();
})
</script>
<style>
table,th,td
{
border:1px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<th>SPORTS</th>
<th>FROM</th>
<th>TO</th>
</tr>
<tr>
<td>BASKET BALL</td>
<td><input type="text" class="datepicker"></td>
<td><input type="text" class="datepicker"></td>
</tr>
<tr>
<td>VOLLEY BALL</td>
<td><input type="text" class="datepicker"></td>
<td><input type="text" class="datepicker"></td>
</tr>
<tr>
<td>TENNIS</td>
<td><input type="text" class="datepicker"></td>
<td><input type="text" class="datepicker"></td>
</tr>
<tr>
<td>BASE BALL</td>
<td><input type="text" class="datepicker"></td>
<td><input type="text" class="datepicker"></td>
</tr>
</table>
</body>
</html>
Many Thanks,
I have write the simplified code to your need. By set minDate greater than the From date to the To date, you don't need to validate the dates.
Here is the code:
$(".datepicker").datepicker({
onSelect: function (selected, inst) {
var minDate = new Date(Date.parse(selected));
minDate.setDate(minDate.getDate() + 1);
$(this).parent().next().find('input').datepicker("option", "minDate", minDate);
}
});
FIDDLE DEMO
I guess I have solved your problem. I have done it only for Basketball, you can do for the rest I hope.
CHEERS !!
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<link href="https://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet">
<script>
$(document).ready(function(){
$( ".basketball_datepicker_start" ).datepicker();
$( ".basketball_datepicker_end" ).datepicker(
{
onSelect: function(selected) {
var fromDate = $('.basketball_datepicker_start').datepicker().val();
var toDate = $(this).datepicker().val();
if(fromDate > toDate) {
alert('Buddy, FromDate has to be greater than ToDate !!!');
}
}
}
);
})
</script>
<style>
table,th,td
{
border:1px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<th>SPORTS</th>
<th>FROM</th>
<th>TO</th>
</tr>
<tr>
<td>BASKET BALL</td>
<td><input type="text" class="basketball_datepicker_start"></td>
<td><input type="text" class="basketball_datepicker_end"></td>
</tr>
</table>
</body>
</html>
Related
In the code below I am trying to pass all the marks entered by the user to another page for execution but only the value of the first mark entered in the table is send.Is there a way to send all the values of the marks entered rather than just the first value;
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
function send(){
var marks=document.getElementById("marks").value;
var xmlhttp=new XMLHttpRequest()
xmlhttp.onreadystatechange=function()
{
if(this.readyState==4 &&this.status==200)
{
document.getElementById("result").innerHTML=this.responseText;
}
};
xmlhttp.open('GET','mark.php?marks='+marks,true);
xmlhttp.send();
}
</script>
</head>
<body>
<table>
<tr>
<td>name</td>
<td>marks</td>
</tr>
<tr>
<td><input type="text" ></td>
<td><input type="number" id ="marks"></td>
</tr>
<tr>
<td><input type="text" ></td>
<td><input type="number" id ="marks"></td>
</tr>
<tr>
<td><input type="text" ></td>
<td><input type="number" id ="marks"></td>
</tr>
</table>
<button onlick="send()" >submit</button>
<div id='result'><p></p><div>
</body>
</html>
If you remove the ID attributes from the number inputs you can obtain a reference to all of them using querySelectorAll with a suitable pattern. Once you have that nodelist reference you can iterate through to find the values and use as you need.
You should be able to process $_GET['marks'] in marks.php quite easily after that..
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<script>
function send(){
var marks=[];
/* Find all the input elements that are considered `marks` and assign their values to an array */
Array.from( document.querySelectorAll('input[type="number"]') ).forEach( input=>{
marks.push( input.value );
});
var xmlhttp=new XMLHttpRequest()
xmlhttp.onreadystatechange=function(){
if( this.readyState==4 &&this.status==200 ){
document.getElementById("result").innerHTML=this.responseText;
}
};
/* prepare the array.. could alternatively use JSON format */
xmlhttp.open( 'GET', 'mark.php?marks=[' + marks.join(',')+']' );
xmlhttp.send();
}
/* bind an event listener to the button */
document.addEventListener('DOMContentLoaded',function(){
document.querySelector('button').addEventListener('click',send)
});
</script>
</head>
<body>
<table>
<tr>
<td>name</td>
<td>marks</td>
</tr>
<tr>
<td><input type="text" /></td>
<td><input type="number" /></td>
</tr>
<tr>
<td><input type="text" /></td>
<td><input type="number" /></td>
</tr>
<tr>
<td><input type="text" /></td>
<td><input type="number" /></td>
</tr>
</table>
<button>submit</button>
<div id='result'><p></p><div>
</body>
</html>
help me, for the same result in textboxt result when i added value on textbox nilai 1 from popup,
I am confused what event should I use in java script for my case.
I tried using onChange event but it didn't work
here is my code
index.html
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<form method='post' action='' name='myF'>
Nilai 1 : <input type=text name='nilai1' id='nilai1' size='20' onchange="sameresult()">
<a href="javascript:void(0);" NAME="My Window Name" title=" My title here "
onClick='javascript:window.open("pop_up.html","Ratting",
"width=550,height=170,left=150,top=200,toolbar=1,status=1,");'> Cari</a>
<br>
<br>
Result :<input type=text name='result' id='result' size='20'>
</form>
<script langauge="javascript">
function sameresult(){
var a = document.getElementById('nilai1');
var result = document.getElementById('result');
result.value = a.value;
}
</script>
</body>
</html>
pop_up.html
<html>
<head>
<script langauge="javascript">
function post_value(s){
opener.document.getElementById('nilai1').value = s;
self.close();
}
</script>
<title>Popup</title>
</head>
<body>
<table border='1'>
<tr>
<td>No</td>
<td>Value</td>
<td>Action</td>
</tr>
<tr>
<td>1</td>
<td>200</td>
<td>Select</td>
</tr>
<tr>
<td>2</td>
<td>300</td>
<td>Select</td>
</tr>
</form>
</body>
</html>
you can use onkeypress event like
Nilai 1 : <input type=text name='nilai1' id='nilai1' size='20' onkeypress="sameresult()">
$(document).ready(function() {
$("#datepicker").datepicker();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td width="150"> Abend Date(Cycle):<input id="datepicker" /></td>
</tr>
</table>
Datepicker is part of jquery UI, not jquery. Not sure why it worked for you, but in your snippet it doesn't work even when moved outside of the <td> tag.
$(document).ready(function() {
$("#datepicker").datepicker();
});
<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/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<table>
<tr>
<td width="150"> Abend Date(Cycle): <input id="datepicker" /></td>
</tr>
</table>
I'm making a form in which I want to automate some calculations. The form contains a table with some inputs. The Javascript is below the form.
For a reason unknown to me, the calculation won't start or isn't performed correctly.
Here's the code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
</head>
<body>
<form>
<fieldset>
<legend>Inkomsten</legend>
<table>
<tr>
<th scope="col"></th>
<th scope="col">Per maand</th>
<th scope="col">Per jaar</th>
<th scope="col">Totale termijn</th>
</tr>
<tr>
<td>Inkomen</td>
<td><input type="text" name="fldInkomenPerMaand" id="fldInkomenPerMaand"></td>
<td><input type="text" name="fldInkomenPerJaar" id="fldInkomenPerJaar" disabled></td>
<td><input type="text" name="fldInkomenTotaleTermijn" id="fldInkomenTotaleTermijn" disabled></td>
</tr>
<tr>
<td>Vakantiegeld</td>
<td><input type="text" name="vakantiegeldPerMaand" id="vakantiegeldPerMaand" disabled></td>
<td><input type="text" name="vakantiegeldPerJaar" id="vakantiegeldPerJaar"></td>
<td><input type="text" name="vakantiegeldTotaleTermijn" id="vakantiegeldTotaleTermijn" disabled></td>
</tr>
</table>
</fieldset>
</form>
<script type="text/javascript">
function berekeningInkomenPerJaar() {
var inkomenPerMaand = parseInt(document.getElementById("fldInkomenPerMaand").value);
var inkomenPerJaar = document.getElementById("fldInkomenPerJaar");
inkomenPerJaar.value = inkomenPerMaand * 12;
}
</script>
</body>
</html>
The problem is your function is not being run when the input is changed.
It is possible to use the JS addEventListener function to run your code whenever the input value is changed like so:
var inputElement = document.getElementById("fldInkomenPerMaand");
inputElement.addEventListener("change", berekeningInkomenPerJaar);
Your original code with the event listener added in:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
</head>
<body>
<form>
<fieldset>
<legend>Inkomsten</legend>
<table>
<tr>
<th scope="col"></th>
<th scope="col">Per maand</th>
<th scope="col">Per jaar</th>
<th scope="col">Totale termijn</th>
</tr>
<tr>
<td>Inkomen</td>
<td><input type="text" name="fldInkomenPerMaand" id="fldInkomenPerMaand"></td>
<td><input type="text" name="fldInkomenPerJaar" id="fldInkomenPerJaar" disabled></td>
<td><input type="text" name="fldInkomenTotaleTermijn" id="fldInkomenTotaleTermijn" disabled></td>
</tr>
<tr>
<td>Vakantiegeld</td>
<td><input type="text" name="vakantiegeldPerMaand" id="vakantiegeldPerMaand" disabled></td>
<td><input type="text" name="vakantiegeldPerJaar" id="vakantiegeldPerJaar"></td>
<td><input type="text" name="vakantiegeldTotaleTermijn" id="vakantiegeldTotaleTermijn" disabled></td>
</tr>
</table>
</fieldset>
</form>
<script type="text/javascript">
function berekeningInkomenPerJaar() {
var inkomenPerMaand = parseInt(document.getElementById("fldInkomenPerMaand").value);
var inkomenPerJaar = document.getElementById("fldInkomenPerJaar");
inkomenPerJaar.value = inkomenPerMaand * 12;
}
var inputElement = document.getElementById("fldInkomenPerMaand");
inputElement.addEventListener("change", berekeningInkomenPerJaar);
</script>
</body>
</html>
I know there is a lot of topics about this and i checked a lot of them without success.
I have one input field in my form that creates a problem when it includes whitespaces. I already made it required so it's not possible to leave it empty or only add some whitespaces.
What i noticed is that i can add a text and just add a whitespace in the end or in the beginning and my work will fail.
Actually it should not be allowed to have any whitespaces at all, also not in the middle of the text but thats is to 99% not going to happend. What i understand you can only take away whitespaces in the beginning and in the end with trim function?
Could some helpful person help me what i have to add to my code that it works...?
Goal is that when i press submit the values from my five input fields should have no whitespaces at the beginning or in the end.
Here is my whole code.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Mathys Lieferungen</title>
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="jquery-ui.1.10.1.min.js"></script>
<script type="text/javascript" src="jquery.ui.timepicker.js"></script>
<script type="text/javascript" src="jquery.ui.progressbar.js"></script>
<script type="text/javascript" src="validate.js"></script>
<script type="text/javascript">
function changeHiddenInput (objDropDown)
{
document.getElementById("hiddenInput").value = objDropDown.value;
}
</script>
<script type="text/javascript">
$(document).ready(function() {
$('.timepicker').timepicker();
$('.datepicker').datepicker({dateFormat: 'dd.mm.yy'});
$('.button').button();
$('#myForm').submit(function() {
$('#formBox').hide();
var lnr = $("input[name=lnr]");
var auto_refresh = setInterval(
function()
{
$('#csv').load(lnr.val()+'_JobStatus.csv?'+new Date().getTime(),function(data){$(this).html(data).fadeIn("slow");}); });
$('#working').show();
$("#progressbar").progressbar();
var value = 0;
var timer = setInterval (function ()
{
$("div#progressbar").progressbar ("value", value);
value++;
if (value > 100) value = 0;
}, 60);
$url = "/BT_Mathys_LNr_export_0.1/services/BT_Mathys_LNr_export?method=runJob";
$i = 1
$('#myForm :input').each(function() {
$inputName = $(this).attr('name');
if ($inputName != 'submit') {
$url = $url + "&arg"+$i+"=--context_param%20"+$inputName+"="+$(this).val();
$i++
};
});
$('#runArea').load($url, function(){
$('#csv').hide();
$('#working').hide();
$('#resultBox').show();
$html = $('#runArea').html();
$('#csv').text($html);
});
return false;
});
});
</script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.1/themes/ui-lightness/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="style2.css">
<style type="text/css">
body {
background-color:#FFD8B2;
font-family: 'Century Schoolbook', Calibri,Arial;
font-size: 1em;
}
#logo {
position:absolute;
top:10px;
right:10px;
}
h1 {
margin-bottom:20px;
font-size: 1.5em;
font-weight:bold;
text-align:center;
}
#formBox, #resultBox, #working{
width:50%;
margin:auto;
margin-top:20%;
}
#resultBox, #working {
display:none;
}
#runArea{
border:none;
height:0;
width:0;
}
.button { font-family:Garamond; font-size: 15px; }
.ui-timepicker { font-family:Garamond; font-size: 11px; margin-left:40px }
.ui-datepicker { font-family:Garamond; font-size: 11px; margin-left:40px }
.ui-timepicker-hour-cell, .ui-timepicker-minute-cell { cursor:pointer; }
</style>
</head>
<body>
<div id="logo">
<img src="\\rzwsrv006\daten\Opacc_Betrieb\Marcel Mathys\Mathys\FLYER_LOGO.png" alt="Flyer" width="260" height="48">
</div>
<div id="formBox">
<h1>Lieferungen Mathys</h1>
<form method="get" id="myForm">
<table width="290px" height="auto" style="margin:auto;">
<tr>
<td><label for="lnr">Liefernummer:</label></td>
<td class="arg"><input type="text" name="lnr" class="required"></td>
</tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<!--<tr>
<td><label for="vAbladezeit_spaet">Abladezeit spät:</label></td>
<td><input type="text" name="vAbladezeit_spaet" class="timepicker"></td>
</tr>
<tr>
<td><label for="vAbladezeit_frueh">Abladezeit früh:</label></td>
<td><input type="text" name="vAbladezeit_frueh" class="timepicker"></td>
</tr>-->
<tr>
<td><label for="vAbladetermin">Abladetermin:</label></td>
<td><input type="text" name="vAbladetermin" class="datepicker"></td>
</tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr>
<td><label for="vLadezeit_spaet">Ladezeit spät:</label></td>
<td><input type="text" name="vLadezeit_spaet" class="timepicker"></td>
</tr>
<tr>
<td><label for="vLadezeit_frueh">Ladezeit früh:</label></td>
<td><input type="text" name="vLadezeit_frueh" class="timepicker"></td>
</tr>
<tr>
<td><label for="vLadedatum">Ladedatum:</label></td>
<td><input type="text" name="vLadedatum" class="datepicker"></td>
</tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr>
<td>Mitarbeiter:</td>
<td><select id="dropdown" name="dropdown" onchange="changeHiddenInput(this)">
<option value="e.schaer#flyer.ch" name="email">Ester Schär</option>
<option value="i.gerber#flyer.ch" name="email">Irene Gerber</option>
<option value="m.maeder#flyer.ch" name="email">Marion Mäder</option>
<option value="apelsinrepubliken#hotmail.com" name="email">Jens Frejd</option>
<option value="marcel.lack#symbium.ch" name="email">Marcel Lack</option>
</select></td>
</tr>
<tr>
<td></td>
<td><input type="hidden" name="hiddenInput" id="hiddenInput" /></td>
</tr>
<tr>
<td><p style="text-align:center;"><input type="submit" name="submit" id="submit" value=" Ausführen " class="button"></p></td>
<td></td>
</tr>
</table>
</form>
</div>
<div id="working" onkeydown ="my_onkeydown_handler();">Verarbeitung läuft, bitte warten und job nicht abbrechen. Job läuft im Hintergrund<div id="progressbar">
</div>
</div>
<div id="resultBox">
<h1 id="csv"></h1>
<p style="text-align:center;"><input type="button" onClick="location.href='./'" value=" << Neue Lieferung ausführen " class="button"></p>
<!--<p style="text-align:left;">Rückmeldung:<br>
<textarea id="csv" style="width:100%;height:300px;"></textarea>
</p>-->
</div>
<iframe id="runArea" />
</body>
How about just using a regex to replace the white-space:
str.replace(/\s/g, "");