jQuery elements not getting passed to perl cgi - javascript

I have a html pg which has got two forms and upon submit its calling a perl script. But in the script cgi param is not getting any values.
Html code --
<fieldset class="col_4" name="BetweenRange"> <legend>Range Comparison</legend>
<form action="call_range.pl" method="post" id="range1" target="Range1">
<table width="100%" border="1">
<tr>
<td><input name="r1_1stdate" type="text" id="from1" required/><input name="r1_2nddate" type="text" id="to1" required/></td>
</form>
<form action="call_range.pl" method="post" id="range2" target="Range2">
<td><input name="r2_1stdate" type="text" id="from2" required/><input name="r2_2nddate" type="text" id="to2" required/></td>
</tr></form>
<tr>
<td><iframe id="I3" align="left" name="Range1" >Your browser does not support inline frames or is currently configured not to display inline frames.
</iframe></td>
<td><iframe id="I4" align="left" name="Range2" >Your browser does not support inline frames or is currently configured not to display inline frames.
</iframe></td>
</tr>
</table>
</fieldset>
Script goes here --
$(function() {
$( "#from1" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
changeYear: true,
numberOfMonths: 1,
onClose: function( selectedDate ) {
$( "#to1" ).datepicker( "option", "minDate", selectedDate );
}
});
$( "#to1" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
changeYear: true,
numberOfMonths: 1,
onClose: function( selectedDate ) {
$( "#from1" ).datepicker( "option", "maxDate", selectedDate );
}
});
<!-- RangeComparison form submit , getting called after selecting 2nd date-->
$("#to1").change(function() { this.form.submit(); }); });
$(function() {
$( "#from2" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
changeYear: true,
numberOfMonths: 1,
onClose: function( selectedDate ) {
$( "#to2" ).datepicker( "option", "minDate", selectedDate );
}
});
$( "#to2" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
changeYear: true,
numberOfMonths: 1,
onClose: function( selectedDate ) {
$( "#from2" ).datepicker( "option", "maxDate", selectedDate );
}
});
<!-- RangeComparison form submit , getting called after selecting 2nd date-->
$("#to2").change(function() {
this.form.submit(); });
});
Perl code --
use strict;
use CGI;
my $query = CGI->new;
print $query->header;
my $from1 = $query->param('from1');
my $to1 = $query->param('to1');
print "</br>Value passed for form1 $from1</br>$to1";
print $query->end_html;
Where is this going wrong ? I would appreciate if someone can help.
Link to JSFiddle http://jsfiddle.net/jDd5U/

You HTML is seriously invalid. You have forms where forms are not allowed. Browser error recovery is likely to break them as it tries to generate a valid DOM. Use a validator.
The name of a form control is used as the key in submitted data. You are trying to look it up by the id which isn't submitted.

Related

Add Today Button in datetimepicker with the below code

I would like to add Today button in datetimepicker calender. I have an idea to add with the syntax "todayBtn:true". But i dont know how to implement it while showing with the below code
<html>
<body>
<input class="form-control date" data-date-format="yyyy-mm-dd hh:ii" data-link-field="dtp_input1" placeholder="select to validity" name="from_validity" type="text" id="shankar" value="">
</body>
</html>
<script>
$("#shankar").click(function () {
$("#shankar").datetimepicker('show').on('changeDate',function(ev) {
$('.datetimepicker').hide();
});
});
</script>
Set following properties for your datepicker (todayBtn:"linked").
$('#dateFieldId').datepicker({
todayBtn: "linked",
todayHighlight : true,
orientation: "left",
autoclose: true
});
Include jquery-ui javascript and css and add the code
refer : http://jqueryui.com/datepicker/#buttonbar
$(function() {
$( "#shankar" ).datepicker({
showButtonPanel: true
});
});
And to put Todays date in the panel:
$('button.ui-datepicker-current').live('click', function() {
$.datepicker._curInst.input.datepicker('setDate', new Date()).datepicker('hide');
});
Refer here: https://forum.jquery.com/topic/jquery-ui-datepicker-today-button
Try showButtonPanel: true
$(function() {
$( "#shankar" ).datepicker({
showButtonPanel: true
});
});
JSfiddle
If you mean this datetimepicker it would be as simple as that:
<html>
<body>
<input type="text" id="shankar" class="form-control" name="from_validity" placeholder="select to validity">
</body>
</html>
<script>
$(function() {
$("#shankar").datetimepicker({
showTodayButton: true,
format: 'YYYY-MM-DD hh:mm'
});
});
</script>

multiple JQuery datepicker fields

I have a form with multiple JQuery datepicker fields, but the problem is the first 2 fields only work and the rest not , i searched and found this , but didn't help., here is my code :
$('.datePicker').datepicker({
changeYear: true,
changeMonth: true,
autoSize: true,
dateFormat: "dd-mm-yy",
maxDate: "0y",
showAnim: "show",
yearRange:'c-70:c+0',
});
HTML:
<input type="text" class='datePicker' name='startDate' ><span><img alt="" src="${assetPath(src: 'calendar-icon.png')}"/></span>
<input type="text" class='datePicker' name='endDate' ><span><img alt="" src="${assetPath(src: 'calendar-icon.png')}"/></span>
Try this:
$('.datePicker').each(function(){
$(this).datepicker({
changeYear: true,
changeMonth: true,
autoSize: true,
dateFormat: "dd-mm-yy",
maxDate: "0y",
showAnim: "show",
yearRange:'c-70:c+0',
});
});

How do I create events in jQuery Mobile 1.4 Datepicker?

I don't know how to use the function to set the selected date of the date input (Popup Datepicker), and set that date in the calendar below (Inline Datepicker). I have seen this function to set it: _setDate, or _setDateDatepicker, but I don't know how to implement it. Please, if someone could help me, I would appreciate it.
$.datepicker.setDefaults({
showOn: "both",
showWeek: true,
firstDay: 1,
dateFormat: 'dd/mm/yy',
maxDate: '+0',
selectOtherMonths: true,
regional: 'uk',
monthNames: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre']
<body>
<h2>Popup Datepicker</h2>
<div data-demo-html="true">
<input type="date" id="date_val" data-role="datebox" style="margin-top: 10px" data-options='{"mode": "calbox", "useNewStyle":true,"useFocus": true}'>
</div>
Evento:
<input type="text" id="event" name="event">
<input type="button" id="btn" value=" Enviar " onClick="myFunction()">
<h2>Inline Datepicker</h2>
<div data-demo-html="true">
<input type="text" id="cal" data-role="date" data-inline="true">
</div>
I think you can use the same functions as a regular datepicker.
Initialize the datepicker with the defaultDate option specified:
$( ".selector" ).datepicker({
defaultDate: +7
});
Get or set the defaultDate option, after initialization:
// Getter
var defaultDate = $( ".selector" ).datepicker( "option", "defaultDate" );
// Setter
$( ".selector" ).datepicker( "option", "defaultDate", +7 );
Source
Update: Just found some methods that might be useful
$( ".selector" ).datepicker( "setDate", "10/12/2012" );
API reference

Create multiple external jQuery datepicker functions and call selectively

This is a follow up to my original post here: Call jQuery datepicker from external file
EDITED:
Added correct jQuery code
I have a group of Perl reports all in one file. Most of the reports require the user to enter either a date or a date range. This would be simple if each report was in its own file, but since it's not, I need a way to call either the range-based datepicker or single date datepicker.
Here is the jQuery code:
$(function () {
$("#from").datepicker({
defaultDate: "+1w",
changeMonth: true,
changeYear: true,
numberOfMonths: 2,
showOn: "both",
buttonImageOnly: true,
buttonImage: "../images/calendar.gif",
dateFormat: "yyddmm",
altField: "#forminp1",
onClose: function (selectedDate) {
$("#to").datepicker("option", "minDate", selectedDate);
},
onSelect: function () {
$(this).datepicker.val();
}
});
$("#to").datepicker({
defaultDate: "+1w",
changeMonth: true,
changeYear: true,
numberOfMonths: 2,
showOn: "both",
buttonImageOnly: true,
buttonImage: "../images/calendar.gif",
dateFormat: "yyddmm",
altField: "#forminp2",
onClose: function (selectedDate) {
$("#from").datepicker("option", "maxDate", selectedDate);
},
onSelect: function () {
$(this).datepicker.val();
}
});
$("#single").datepicker({
defaultDate: "+1w",
numberOfMonths: 2,
showOn: "both",
buttonImageOnly: true,
buttonImage: "../images/calendar.gif",
altField: "#forminp1",
changeMonth: true,
changeYear: true,
dateFormat: "yymmdd",
onSelect: function () {
$(this).datepicker.val();
}
});
});
To test, I created an HTML file containing the following:
<p>Double Dates</p>
<label for="from">From</label>
<input type="text" id="from" name="from">
<label for="to">to</label>
<input type="text" id="to" name="to">
<!--test the output-->
<p>Output the result</p>
<input type="text" id="forminp1" size="30"> <input type="text" id="forminp2" size="30">
<p>Single Date</p>
<input type="text" id="single">
The datepicker won't attached to any of the ids unless I remove the function targeting the single id.
Is there a way to build the correct datepicker based on the input id?

Jquery UI Datepicker on an image

Greetings,
I want to pop up the Jquery Datepick as the image is clicked and displaying next to it. Once a date is clicked, I want to post my form.
Here how I try this:
The HTML:
<form id="myform">
<span class="quickgo">
Quick Go:
<select>
<option value="1">Discovery Channel</option>
<option value="2">History Channel</option>
</select>
<img class="calenderpick" src="/img/calender.png" />
</form>
And the javascript part:
<script type="text/javascript">
$(function() {
$(".calenderpick").click(function() {
$(this).datepicker();
alert("it is clicked!");
});
});
</script>
Once this image is clicked, I can get the "it is clicked warning" however not the date picker. I also have no clue about how to trigger the form posting event once a date is picked. In the end I want to post the selected channel and the picked date so that I can switch the page.
Thanks
Hellnar,
here's what i use regularly in my mvc apps:
<input class="date" id="StartDate" name="StartDate" value="" type="hidden" />
<script type="text/javascript">
$(document).ready(function() {
$("#StartDate").datepicker({
dateFormat: 'dd-mm-yy',
changeMonth: true,
changeYear: true,
showOn: 'button',
buttonImage: '/img/calender.png'
});
});
</script>
hope this helps (notice i use an id and not a class selector). also, check the spelling on calender - should be calendar :)
edit - if you wanted to submit the form on selecting the date, change the javascript code to:
<script type="text/javascript">
$(document).ready(function() {
$("#StartDate").datepicker({
dateFormat: 'dd-mm-yy',
changeMonth: true,
changeYear: true,
showOn: 'button',
buttonImage: '/img/calender.png',
onSelect: function(dateText, inst) { $("#myform").submit(); }
});
});
</script>
Why its not opening on clicking the image
Look into the source over here JQuery Datepicker Icon Trigger
How to post the form on selecting a date
Look into the source over here JQuery Datepicker Events - onSelect
in the onSelect event you can do something like $("#form").submit()
Hope this helps

Categories