I have a slider on my main page and developed a simple datepicker app that also should be displayed on the homepage. I used Jumi to make a module that has the complete datepicker module including a piece of Javascript and a call for the Joomla Jquery library. However when I try to display both the slider and the datepicker on the same page, the slider disappears. I'm confident that this is a Jquery issue. When I remove the Jquery call from my module the slider appears but the datepicker functionality stops working.
I tried pretty much everything including the NoConflict mode, that does not resolve anything however. What is the best way to call for the Jquery library in this Jumi module? I basically need to call for this library only once and have both functionalities use it but the way to do this is beyond me.
The code in the module:
<link rel="stylesheet" href="/js/css/ui- lightness/jquery-ui-1.10.3.custom.css" type="text/css" />
<script src="/js/jquery-1.9.1.js"></script>
<script src="/js/jquery-ui-1.10.3.custom.js"> </script>
<script src="/js/jquery.ui.datepicker-nl.js"></script>
<script src="/js/staying_length_cal.js"></script>
<script type="text/javascript">
$(function() {
$('input.datepicker').datepicker({
dateFormat: 'dd/mm/yy',
yearRange: "-0:+2",
changeMonth: true,
buttonImage: 'images/calendar.gif',
changeYear: true,
showOn: 'both',
buttonImageOnly: false
},
$.datepicker.regional['nl']);
});
</script>
<?php
if(isset($_POST['submit']))
{
$nights = $_POST['nights'];
$persons = $_POST['persons'];
$start_date = $_POST['start_date'];
$end_date = $_POST['end_date'];
header ("Location: Link that uses form information");}
?>
<form method="post" id="stayingCalculation">
<fieldset>
<h4>Ik zoek</h4>
<select id="stayLength" name="nights" onchange="calculateTotal(); " />
<option value="week">Week</option>
<option value="midweek">Midweek</option>
<option value="weekend">Weekend</option>
<option value="twoweek">Twee weken</option>
<option value="threeweek">Drie weken</option>
<option value="3">3 Nachten</option>
<option value="4">4 Nachten</option>
<option value="5">5 Nachten</option>
<option value="6">6 Nachten</option>
<option value="7">7 Nachten</option>
<option value="8">8 Nachten</option>
<option value="9">9 Nachten</option>
<option value="10">10 Nachten</option>
<option value="11">11 Nachten</option>
<option value="12">12 Nachten</option>
<option value="13">13 Nachten</option>
<option value="14">14 Nachten</option>
<option value="15">15 Nachten</option>
<option value="16">16 Nachten</option>
<option value="17">17 Nachten</option>
<option value="18">18 Nachten</option>
<option value="19">19 Nachten</option>
<option value="20">20 Nachten</option>
</select>
<h4>met</h4>
<select name="persons">
<option value="0">Niet relevant</option>
<option value="1">1 persoon</option>
<option value="2">2 personen</option>
<option value="3">3 personen</option>
<option value="4">4 personen</option>
<option value="5">5 personen</option>
<option value="6">6 personen</option>
</select>
<br/>
<h4>tussen</h4>
<p> <input type="text" name="start_date" id="start_date" value="" class="datepicker" data-jquerydateformat="dd-mm-yy" data-isodateformat="dd-mm-yyyy" onchange="setExpDate(this.value)" />
</p>
<h4>en</h4>
<p> <input type="text" name="end_date" id="end_Date" value="" class="datepicker" data-jquerydateformat="dd-mm-yy" data-isodateformate="dd-mm-yyyy" onchange="setStartDate(this.value)" /> </p>
</fieldset>
<input type="submit" name="submit" value="Zoeken" class="btn btn-primary"><br>
</form>
Thanks in advance!
For multiple jQuery inclusions you can use the jQueryEasy plugin which tries to include only one time jQuery.
Download the plugin
Install plugin
Enable plugin
In the plugin's configuration page, enable jQuery.
That's all.
http://extensions.joomla.org/extensions/core-enhancements/performance/jquery-scripts/18327
I had the same problem and I solved it using:
<script>
jQuery.noConflict();
jQuery(function() {
jQuery( "#datepicker1" ).datepicker();
jQuery( "#datepicker2" ).datepicker();
});
</script>
instead of $(...
Perhaps this might help you, too!
Related
I am having trouble with a lab of mine and just need some guidance or tips on where to go.
I need a function that alerts the user when any field is invalid and red outline any section that is invalid and if no sections are valid then to instead just display the users input such as name, gender state, fav movie type and so on.
I am stumped because I have created a test function which does not even work correctly when the user selects submit. when the name field is left empty it does not even alert the user that left the field blank.
<html>
<head>
<title>Form Practice</title>
</head>
<body>
<script type="text/javascript">
///// validate names
const form = document.getElementById("form");
document.getElementById("form").addEventListener("submit", validate);
var myForms=document.getElementById("myForms")
function validate(e) {
var first= document.forms["myForm"]["firstName"].value;
if(first==""){
alert("enter the first name");
event.preventDefault()
firstName.style.borderColor="red";
event.preventDefault()
return false;
}
}
</script>
<h1>Please Provide the Following Information</h1>
*fields marked with an asterisk are required<br><br>
<form name="myForm" id="form" method="post" action="mailto:lasdfasdf#asdfas.com" >
First Name*: <input type="text" name="firstName"><br>
Last Name*: <input type="text" name="lastName"><br>
Gender*: <input type="radio" name="gender" value="M">Male
<input type="radio" name="gender" value="F">Female <br>
Choose Your Favorite Types of Movies (check all that applies):
<input type="checkbox" name="movies" value="comedy"> Comedy
<input type="checkbox" name="movies" value="drama"> Drama
<input type="checkbox" name="movies" value="action"> Action
<input type="checkbox" name="movies" value="horror"> Horror<br>
Please select your state:
<select name="state">
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="DC">District Of Columbia</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select> <br>
Agree to privacy policy* <input type="checkbox" name="privacy" value="yes"> <br><br>
<input type="submit">
<input type="reset">
</form>
</body>
</html>
use or operator to check if first or last name is empty, also you need event.preventDefault() to cancel default action
function ValidationEvent(e) {
var fname = document.myForm.firstName;
var lname = document.myForm.lastName;
if (!fname.value || !lname.value) { // use 'or' operator here
fname.classList.add('red-border');
lname.classList.add('red-border');
e.preventDefault(); // Cancel action
alert("fill out please.");
}
else {
alert("thank you");
}
}
<h1>Please Provide the Following Information</h1>
*fields marked with an asterisk are required<br><br>
<form name="myForm" method="post" action="mailto:lasdfasdf#asdfas.com"
onsubmit="ValidationEvent(event)"> <!-- ValidationEvent(event) is required -->
First Name*: <input type="text" name="firstName"><br>
Last Name*: <input type="text" name="lastName"><br>
Gender*: <input type="radio" name="gender" value="M">Male
<input type="radio" name="gender" value="F">Female <br>
Choose Your Favorite Types of Movies (check all that applies):
<input type="checkbox" name="movies" value="comedy"> Comedy
<input type="checkbox" name="movies" value="drama"> Drama
<input type="checkbox" name="movies" value="action"> Action
<input type="checkbox" name="movies" value="horror"> Horror<br>
Please select your state:
<select name="state">
<option value="AL">Alabama</option>
</select> <br>
Agree to privacy policy* <input type="checkbox" name="privacy" value="yes"> <br><br>
<input type="submit">
<input type="reset">
</form>
What you are struggling with is that you are using the htmlinput whole dom element instead of the value of it, when in doubt always print the value and check what it actually contains console.log(fname);. So in your case you need to access the value of it, which you can get from the console.log actually. document.myForm.firstName.value
I added a small beginning for the red thingy you asked on the input but left the rest to you so i dont spoil the fun of it.
Here is a working jsfiddle: https://jsfiddle.net/odsvpwf0/
Below I have attached the code that I have. I need help getting my button on click to clear the first two forms then when it is clicked again clear the last field that is left. Please any help on this. I have been trying different things but currently don't know how I would go about doing this. I am new to writing any type of code so this may be a simple task but I don't really know how to do it.
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>Web Lock VPN Service</title>
<style type="text/css">
body {
background-image: url("https://lh3.googleusercontent.com/7eRbJLwlltrqMGUleKadG70Dn4oapmr7xQordaJhrblNGjSxGaf4x1-6IzDaUiLv_BaFhkgTfuucGSjvGH6w41GyBLbMZqHwZTHJ7CQqWgqYpuB4oa0_1BTP32CFBf07PHb_cgZrpw=w2400");
}
</style>
<script>
</script>
<!--EJD-5/11 added link to CSS style sheet-->
<link href="styles.css" rel="stylesheet"></link>
<!--EJD-5/11 used "pre" to move VPN picture to roughly the center of the page-->
<pre> <img src="https://lh3.googleusercontent.com/8MOV9pJZ0HuFhWUEb5Qj2li8L_pspnylQ6rnTYH5wmLGgWjxAfEZ8hFIXv4MPUqFnkVtzSY8Jf0zuKKiHWyHumtnG6Zw_7y9dNbfns1lKrYQn9BCf05JU3pmHmIhEweJOlkOd21tXw=w2400" style="width:300px;height:200px;"> </a>
</pre>
<pre><h1 id="bluetext"> WebLock VPN Order Form </h1>
</pre>
<!--EJD 5/11 Added horizontal line for style-->
<hr>
</head>
<body>
<pre><h2 id="generaltext"> Thank you for showing interest in Web Lock's VPN service! In order to purchase our product, please fill out the form below.</h2>
</pre>
<!--EJD 5/11- Created a radio button form as a client survey-->
<form name="survey" id="VPN">
<h3>What is the most important aspect of a VPN for you?</h3>
<p><input name="survey" type="radio" value="Small">Security</p>
<p><input name="survey" type="radio" value="Small">Speed</p>
<p><input name="survey" type="radio" value="Small">Price</p>
<p><input name="survey" type="radio" value="Small">Platform Availability</p>
</form>
<!--EJD 5/11 Created a form for filling out information to be validated later-->
<form required; name= "Module Selection" id="FT">
<h3 id="generaltext">Select your features below:</h3>
<p>
<input name="modules" type="checkbox" value="HighspeedVPN">High Speed VPN </p>
<p>
<input name="modules" type="checkbox" value="Antivirus">Antivirus Addon </p>
<p>
<input name="modules" type="checkbox" value="WebShield">Browse-safe web shield </p>
<p>
<input name="modules" type="checkbox" value="TransactionGuard">Transaction Guard </p>
</form>
<h3 id="generaltext">Fill out your information below:</h3>
<form required; name= "custinfo">
<p>
Name:   <input name="Name"size=:50 type="text"><br>
</p>
<p>
Email Address:   <input name="Emailaddress"size=:50 type="text"><br>
</p>
<p>
Street Address:   <input name="S_Address"size=:50 type="text"><br></p>
<p>
Address 2:   <input name="Address_2"size=:50 type="text"><br></p>
<p>
Zip Code:   <input name="Zip"size=:50 type="text"><br>
<p>
City:   <input name="City"size=:50 type="text"><br>
</form>
<!--EJD 5/11 Created a drop-down list for states to choose-->
<form name="states">
State: <select required; name="states">
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="DC">District Of Columbia</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select>
</form>
<!--EJD 5/11 created checkboxes for clients to order specific modules-->
<!--EJD 5/11 added a text area for clients to comment-->
<h3 id="generaltext">Questions and comments:</h3>
<p>
<textarea name= "Comments" rows="5" cols="80">
</textarea>
<!--EJD 5/11 Added a submit button and a clear button to tie to JS functions-->
<p>
<input type="button" value="Submit" onclick="dosubmit()">
<input type="button" value="Clear" onclick="doclear(); doclear2();"/>
<script>
function doclear() {
document.getElementById("VPN").reset();
}
function doclear2(){
document.getElementById("FT").reset();
}
I think you should declare a variable like isFirstClear with default = false, and add check condition in onClick button function:
if (!isFirstClear) {
doclear();
isFirstClear = true;
}
else {
doclear2();
}
It seems the javascript function is never executed. Can anyone tell me why?
<form>
<select type="text" name="month" id="month">
<option value="01">January</option>
<option value="02">February</option>
<option value="03">March</option>
<option value="04">April</option>
<option value="05">May</option>
<option value="06">June</option>
<option value="07">July</option>
<option value="08">August</option>
<option value="09">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<button type="submit" id="jobmonth">View all job requests in this month</button>
</form>
<script type="text/javascript">
$('#jobmonth').click(function() {
console.log("work");
var month = $('#month').val();
console.log(month);
}
</script>
None of the console.log work.
PS- Sorry for such a silly question. I'm just a beginner in JS.
Buttons of type submit are intended to submit the form to whatever it's action is. In this case, it would just refresh the page.
Instead, just change the type to button.
<button type="button" id="jobmonth">View all job requests in this month</button>
This will not submit the page and you will see your logged results.
Try giving an ID to your tag, then using the submit event instead. This means the console.log will be triggered when the form is submitted rather than the button being clicked, but the result should be the same:
<form id="myform">
<select type="text" name="month" id="month">
<option value="01">January</option>
<option value="02">February</option>
<option value="03">March</option>
<option value="04">April</option>
<option value="05">May</option>
<option value="06">June</option>
<option value="07">July</option>
<option value="08">August</option>
<option value="09">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<button type="submit" id="jobmonth">View all job requests in this month</button>
</form>
<script type="text/javascript">
$('#myform').on('submit', function() {
console.log("work");
var month = $('#month').val();
console.log(month);
}
</script>
You can also use the "submit" shorthand: https://api.jquery.com/submit/
My select2 is not working. It just shows up with multiple selectbox
<form action="">
<select class="js-example-basic-multiple" multiple="multiple">
<option value="AK">Alaska</option>
<option value="HI">Hawaii</option>
<option value="CA">California</option>
<option value="NV">Nevada</option>
<option value="OR">Oregon</option>
<option value="WA">Washington</option>
<option value="AZ">Arizona</option>
<option value="CO">Colorado</option>
<option value="ID">Idaho</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NM">New Mexico</option>
<option value="ND">North Dakota</option>
<option value="UT">Utah</option>
<option value="WY">Wyoming</option>
</select>
</form>
<script type="text/javascript">
$(".js-example-basic-multiple").select2();
</script>
Error in console:
Uncaught TypeError: $(...).select2 is not a function
at HTMLDocument.
JS FIDDLE:
https://jsfiddle.net/y6ogss94/
This runs fine if you have imported correctly - jQuery library, select2 js and select2 css.
Here I have imported jquery 2.0.0 and select2 css and js from their cdn and it works fine:
$(".js-example-basic-multiple").select2();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<form action="">
<select class="js-example-basic-multiple" multiple="multiple">
<option value="AK">Alaska</option>
<option value="HI">Hawaii</option>
<option value="CA">California</option>
<option value="NV">Nevada</option>
<option value="OR">Oregon</option>
<option value="WA">Washington</option>
<option value="AZ">Arizona</option>
<option value="CO">Colorado</option>
<option value="ID">Idaho</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NM">New Mexico</option>
<option value="ND">North Dakota</option>
<option value="UT">Utah</option>
<option value="WY">Wyoming</option>
</select>
</form>
Note:
You need to execute your select2 initialisation code only after you have included both the js libraries and DOM has loaded, which is a general practice for most jQuery plugins, not only this. So, while using this code you should write this script after including jquery and select2 scripts:
<script>
$(document).ready(function(){
$(".js-example-basic-multiple").select2();
});//document ready
</script>
In my PHP project I'm using 3 comboboxes to select Year, month and date. But I can't format that 3 values to save as a date in database in 2013-10-01 type. Given below is my code to select date.
<p>
<label class="floated" for="dtb_yr"><b>Date of Birth :</b></label>
<select name="dtb_yr">
<option value="2013" />2013
<option value="2014" />2014
<option value="2015" />2015
<option value="2016" />2016
<option value="2017" />2017
<option value="2018" />2018
<option value="2019" />2019
<option value="2020" />2020
<option value="2021" />2021
<option value="2022" />2022
</select>
<select name="dtb_mon">
<option value="january" />January
<option value="february" />February
<option value="March" />March
<option value="Apirl" />Apirl
<option value="May" />May
<option value="June" />June
<option value="July" />July
<option value="August" />August
<option value="September" />September
<option value="October" />October
<option value="November" />November
<option value="December" />December
</select>
<select name="dtb_day">
<option value="01" />01
<option value="02" />02
<option value="03" />03
<option value="04" />04
<option value="05" />05
<option value="06" />06
<option value="07" />07
<option value="08" />08
<option value="09" />09
<option value="10" />10
<option value="11" />11
<option value="12" />12
<option value="13" />13
<option value="14" />14
<option value="15" />15
<option value="16" />16
<option value="17" />17
<option value="18" />18
<option value="19" />19
<option value="20" />20
<option value="21" />21
<option value="22" />22
<option value="23" />23
<option value="24" />24
<option value="25" />25
<option value="26" />26
<option value="27" />27
<option value="28" />28
<option value="29" />29
<option value="30" />30
<option value="31" />31
</select>
<br class="clear"/>
</p>
Is there any way to select date and save date in more accuracy way, like given below textfeild?
<p>
<label class="floated" for="model_no"><b>Model no :</b></label>
<input type="text" name="model_no" id="model_no" placeholder="Enter Modle No" />
<br class="clear" />
</p>
You can use Jquery Date picker that you only need to select date and it can be save in specified format in database.
Add this code in head of your HTML document.
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$(function() {
$( "#dtb_yr" ).datepicker({ dateFormat: 'yy-mm-dd' });
});
</script>
Add this in your form
in HTML:
<input type="text" name="dtb_yr" id="dtb_yr" placeholder="Select Date" />
Add this code in PHP file
In PHP:
$dtb_yr = $_POST['dtb_yr'];
use Month option like this
<select name="dtb_mon">
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">Apirl</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
after submit your form
<?php
$date_string=$_POST['dtb_yr']."-".$_POST['dtb_mon']."-".$_POST['dtb_day'];
?>
Rather than using 3 different combo boxes to format your date, I think it might be easier to use a single text field with Jquery UI's datepicker. http://jqueryui.com/datepicker/#date-formats
For the format you are looking for, you can customize the datepicker's output. The documentation covers this quite well.
If you really want 3 different boxes, Zahidul's answer should work.
EDIT
Use this code as a guide:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Format date</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#datepicker" ).datepicker();
$( "#format" ).change(function() {
$( "#datepicker" ).datepicker( "option", "dateFormat", "dd mm yy" );
});
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker" size="30"></p>
The important part is $( "#datepicker" ).datepicker( "option", "dateFormat", "dd mm yy" ); where you are formatting the date according to your needs.
You can use the values that you get and at the PHP side you can use STR_TO_DATE function of MYSQL.you need a little mapper for having the month number from the text. Then you use this function--->get the output and use it for insertion in your database.check out the article here http://dev.mysql.com/doc/refman/5.0/en/date-and-time-functions.html#function_str-to-date
STR_TO_DATE('01,5,2013','%d,%m,%Y');
BTW, theres a typo in April.