<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<link rel="stylesheet" type="text/css" href="css/mobipick.css" />
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script
src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<script type="text/javascript" src="js/external/xdate.js"></script>
<script type="text/javascript" src="js/external/xdate.i18n.js"></script>
<script type="text/javascript" src="js/mobipick.js"></script>
<script>
$(document).on("pagecreate", pageselector, function() {
var picker = $("input[type='text']", this);
picker.mobipick();
picker.on("change", function() {
// formatted date, like yyyy-mm-dd
var date = $(this).val();
// JavaScript Date object
var dateObject = $(this).mobipick("option", "date");
});
});
</script>
</head>
<body>
<input type="text" placeholder="Last Service Date">
<input type="submit" value="Book">
<input type="reset" value="Reset">
</body>
I am using Mobipick for date, i have these included files in js and css folder of my
project but the calender is not showing up when a touch the date input area on mobile.
I want to add date to my form, I have implementeed it in a project in webstorm through jquery-ui which works fine on the browser but not on mobile
According to your fiddle source change the code like following. Include the jquery and jquery mobile libraries in your script
<link rel="stylesheet" href="http://mobipick.sustainablepace.net/css/mobipick.css" />
<script src="http://mobipick.sustainablepace.net/external/xdate.js"></script>
<script src="http://mobipick.sustainablepace.net/external/xdate.i18n.js"></script>
<script src="http://mobipick.sustainablepace.net/js/mobipick.js"></script>
<div data-role="page" id="index">
<div data-role="main" class="ui-content">
<form action="#" method="POST" id="myForm">
<label for="CustomerName" class="ui-hidden-accessible">Name:</label>
<input type="text" name="CustomerName" id="CustomerName" value="" placeholder="Name"/>
<label for="PhoneNumber" class="ui-hidden-accessible">Phone Number</label>
<input type="text" name="PhoneNumber" id="PhoneNumber" placeholder="Phone Number"/>
<label for="Address" class="ui-hidden-accessible">Address</label>
<input type="text" name="Address" id="Address" placeholder="Address">
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<input type="radio" name="TDI" id="TDI3" value="TDI30" />
<label for="TDI3">TDI 3.0</label>
<input type="radio" name="TDI" id="TDI4" value="TDI42" />
<label for="TDI4">TDI 4.2</label>
</fieldset>
</div>
<label for="RegistrationNumber" class="ui-hidden-accessible">Registration Number</label>
<input type="text" name="Registration Number" id="RegistrationNumber" placeholder="Registration Number"/>
<input type="text" placeholder="Last Service Date" id="sdate"/>
<input type="submit" value="Book"/>
<input type="reset" value="Reset"/>
</form>
</div>
</div>
and your javascript code is like
$(document).on("pagecreate",function(event){
$('#sdate').mobipick({
dateFormat: "MM-dd-yyyy"
});
});
Refer this FIDDLE
this also FIDDLE DEMO
Related
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
<body>
<div class="container">
<label for="uname"><b>Username</b></label>
<input type="text" placeholder="Enter Username" name="uname" required>
<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required>
<button type="submit" onclick=" doFunction()">Login</button>
<label>
<input type="checkbox" checked="checked" name="remember"> Remember me
</label>
</div>
<script>
function doFunction(){
var data = $('.container').serializeArray();//this will convert into array
console.log(typeof data)//print the type of data
console.log(data);//print the data
}
</script>
</body>
I want to select the class by id and see data in the console to check whether data is being processed correctly or not. I am getting length=0 when printing the data.
My output:
object
blabla.html:25 []
length: 0
__proto__: Array(0)
blabla.html:27
string
The serializeArray() method is intended to be called on form elements, not div. As such you should hook your logic to the submit event of a parent form, not the click of a button, and certainly not using an on* event attribute. Try this:
$('form').on('submit', function(e) {
e.preventDefault();
var data = $(this).serializeArray();
console.log(typeof data) //print the type of data
console.log(data); //print the data
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" action="/foo">
<div class="container">
<label for="uname"><b>Username</b></label>
<input type="text" placeholder="Enter Username" name="uname" required>
<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required>
<button type="submit">Login</button>
<label>
<input type="checkbox" checked="checked" name="remember">
Remember me
</label>
</div>
</form>
Try this code.
You need to use form to serilize the inputs.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
<body>
<form id="loginform" name="test" method="post">
<div class="container">
<label for="uname"><b>Username</b></label>
<input type="text" placeholder="Enter Username" name="uname" required>
<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required>
<button type="submit" onclick=" doFunction()">Login</button>
<label>
<input type="checkbox" checked="checked" name="remember"> Remember me
</label>
</div>
</form>
<script>
function doFunction(){
var data = $('#loginform').serializeArray();//this will convert into array
console.log(typeof data)//print the type of data
console.log(data);//print the data
return false;
}
</script>
</body>
As I hide an <input> tag with the hide() function in JQuery Mobile, also, it hides the <input> it does not hide the <div> surrounding the <input> that has been implemented by JQuery Mobile.
I could work on the DOM afterwards to make it disapear of course, but I am looking for a better solution.
Here is the case, you'll notice that the div surrounding <input type="text" name="lastname" id="lastname"> is still on the screen (you can run it a W3C editor like here):
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<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>
<div data-role="page">
<div data-role="header">
<h1>Text Inputs</h1>
</div>
<div data-role="main" class="ui-content">
<form method="post" action="/action_page_post.php">
<div class="ui-field-contain">
<label for="firstname">First name:</label>
<input type="text" name="firstname" id="firstname">
<label for="lastname">Last name:</label>
<input type="text" name="lastname" id="lastname">
<script type="text/javascript">
$(document).ready(
$('body').find('[id="lastname"]').hide()
);
</script>
</div>
<input type="submit" data-inline="true" value="Submit">
</form>
</div>
</div>
</body>
</html>
I've tried to apply the hide() function on the parent() but it does take the parent as if, the <div> that I want to hide is not yet on the screen, and hide the whole form instead of a specific field:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<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>
<div data-role="page">
<div data-role="header">
<h1>Text Inputs</h1>
</div>
<div data-role="main" class="ui-content">
<form method="post" action="/action_page_post.php">
<div class="ui-field-contain">
<label for="firstname">First name:</label>
<input type="text" name="firstname" id="firstname">
<label for="lastname">Last name:</label>
<input type="text" name="lastname" id="lastname">
<script type="text/javascript">
$(document).ready(
$('body').find('[id="lastname"]').parent().hide()
);
</script>
</div>
<input type="submit" data-inline="true" value="Submit">
</form>
</div>
</div>
</body>
</html>
At the moment you try to access to the parent div it is not painted.. One way is to use JavaScript setTimeout() method to hide that div element:
setTimeout(function() {
$('#lastname').parent().hide();
}, 1);
<link rel="stylesheet" href="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<div data-role="page">
<div data-role="header">
<h1>Text Inputs</h1>
</div>
<div data-role="main" class="ui-content">
<form method="post" action="/action_page_post.php">
<div class="ui-field-contain">
<label for="firstname">First name:</label>
<input type="text" name="firstname" id="firstname">
<label for="lastname">Last name:</label>
<input type="text" name="lastname" id="lastname">
</div>
<input type="submit" data-inline="true" value="Submit">
</form>
</div>
</div>
I want to check if my last name element has information on it with an "If" statement but i dont know where to place it or if im going about this wrong. The purpose is to eventually check if all the boxes are filled before i can hit the submit button. So whats the best way to go about checking this?
function check() {
let lastName = document.findElementById('last-name').value;
addressForm = document.shippingAddressForm;
addressForm.addEventListener('submit', (event) => {
event.preventDefault();
});
alert("Please enter all fields ");
}
<head>
<meta charset="utf-8">
<title>JavaScript</title>
<link href="style.css" rel="stylesheet">
<script src="main.js" defer></script>
</head>
<body>
<form id="shipping-address-form" name="shippingAddressForm" action="#" method="post">
<h1>Shipping Address</h1>
<div class="flex-container">
<div>
<label for="first-name">First Name:</label>
<input type="text" id="first-name" name="firstName" />
</div>
<div>
<label for="last-name">Last Name:</label>
<input type="text" id="last-name" name="lastName" />
</div>
</div>
<div class="flex-container">
<label for="address">Address:</label>
<input type="text" id="address" name="address" />
</div>
<div class="flex-container">
<div>
<label for="city">City:</label>
<input type="text" id="city" name="city" />
</div>
<div>
<label for="state">State:</label>
<input type="state" id="state" name="state" />
</div>
<div>
<label for="zip-code">Zip Code:</label>
<input type="text" id="zip-code" name="zipCode" />
</div>
</div>
<div class="flex-container">
<div>
<label for="phone-number">Phone Number:</label>
<input type="text" id="phone-number" name="phoneNumber" />
</div>
<div>
<label for="email">Email:</label>
<input type="text" id="email" name="email" />
</div>
</div>
<div class="button">
<button type="submit">Submit</button>
</div>
</form>
</body>
Problem
You didn't call the function check(). You only defined it.
Suggested solution
Try this I deleted the content of function check(). This example only shows calling the function (but better is using required attribute in HTML https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input required is on half of the page)
function check() {
alert("Please enter all fields ");
}
<head>
<meta charset="utf-8">
<title>JavaScript</title>
<link href="style.css" rel="stylesheet">
<script src="main.js" defer></script>
</head>
<body>
<form id="shipping-address-form" name="shippingAddressForm" action="#" method="post" onsubmit='check()'>
<h1>Shipping Address</h1>
<div class="flex-container">
<div>
<label for="first-name">First Name:</label>
<input type="text" id="first-name" name="firstName" />
</div>
<div>
<label for="last-name">Last Name:</label>
<input type="text" id="last-name" name="lastName" />
</div>
</div>
<div class="flex-container">
<label for="address">Address:</label>
<input type="text" id="address" name="address" />
</div>
<div class="flex-container">
<div>
<label for="city">City:</label>
<input type="text" id="city" name="city" />
</div>
<div>
<label for="state">State:</label>
<input type="state" id="state" name="state" />
</div>
<div>
<label for="zip-code">Zip Code:</label>
<input type="text" id="zip-code" name="zipCode" />
</div>
</div>
<div class="flex-container">
<div>
<label for="phone-number">Phone Number:</label>
<input type="text" id="phone-number" name="phoneNumber" />
</div>
<div>
<label for="email">Email:</label>
<input type="text" id="email" name="email" />
</div>
</div>
<div class="button">
<button type="submit">Submit</button>
</div>
</form>
</body>
and also if you want display error message with FF
Error messages
If you want Firefox to present a custom error message when a field fails to validate, you can use the x-moz-errormessage attribute to do so:
<input type="email"
x-moz-errormessage="Please specify a valid email address.">
This is my html
<!DOCTYPE HTML>
<html lang="en-GB">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<title</title>
<link rel="stylesheet" href="demo.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.creditCardValidator.js"></script>
<script type="text/javascript" src="demo1.js"></script>
<script type="text/javascript">
$('.tabHeader').click(function () {
$('.demo form').hide().filter($(this).attr('href')).show()
return false;
}).eq(0).click();
</script>
</head>
<div class="demo">
Form A
Form B
<form id="formA">
<h2>Card Payment</h2>
<input type='hidden' id='ccType' name='ccType' />
<ul class="cards">
<li class="visa">Visa</li>
<li class="visa_electron">Visa Electron</li>
<li class="mastercard">MasterCard</li>
<li class="maestro">Maestro</li>
</ul>
<label for="card_number">Card number</label>
<input type="text" name="card_number" id="card_number">
<div class="vertical">
<label for="expiry_date">Expiry date <small>mm/yy</small>
</label>
<input type="text" name="expiry_date" id="expiry_date" maxlength="5">
<label for="cvv">CVV</label>
<input type="text" name="cvv" id="cvv" maxlength="3">
</div>
<div class="vertical maestro">
<label for="issue_date">Issue date <small>mm/yy</small>
</label>
<input type="text" name="issue_date" id="issue_date" maxlength="5"> <span class="or">or</span>
<label for="issue_number">Issue number</label>
<input type="text" name="issue_number" id="issue_number" maxlength="2">
</div>
<label for="name_on_card">Name On card</label>
<input type="text" name="name_on_card" id="name_on_card">
<input type="submit" value="Pay Now !">
</form>
<form id="formB">Name:
<input type="text" name="name" id="name" value="" />Email:
<input type="text" name="email" id="email" value="" />Comments:
<textarea name="comments" id="comments" cols="25" rows="3"></textarea>
<input type="submit" value="submit" />
</form>
basically has two forms which can be selected using tabs.I have the java script
$('.tabHeader').click(function () {
$('.demo form').hide().filter($(this).attr('href')).show()
return false;
}).eq(0).click();
in the header which does the swapping.but when I implement this html file,both the forms are displayed in the page.
But this is the demo #http://jsfiddle.net/25WDr here its working fine,but this html is not working.The js fiddle demo is done by a user here.but I cant implement it.It showing both form.The mistake is in the html i made..can anyone figure it out
Try to put your javascript code inside a document ready
$(function() {
$('.tabHeader').click(function () {
$('.demo form').hide().filter($(this).attr('href')).show()
return false;
}).eq(0).click();
});
Because in head part all your html is not built yet, So $('.tabHeader') is empty.
You should wait the end of load of your html part in order to manipulate it.
Another solution could be put your script before the </body>
in the demo they are actually hiding the other form while clicking the first
$(function() {
$('<a>FormB</a>').prependTo('.demo').click(function () {
$('.demo form').hide().filter('#formB').show()
}).click();
$('<a>FormA</a>').prependTo('.demo').click(function () {
$('.demo form').hide().filter('#formA').show()
}).click();
});
I'm trying to change the city and state based on the zip code a user enters. This should all be done on the same page with jquery. I found some code elsewhere on this site but couldn't get it to work. Here is the code snippet:
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>
<script type="text/javascript" src="js/cufon-yui.js"></script>
<script type="text/javascript" src="js/Myriad_Pro_700.font.js"></script>
<script type="text/javascript">
$("#zip").bind("change", function(e){
$.getJSON("http://mydomain.com/code.php?zip=" + $("#zip").val(),
function(data){
$.each(data, function(i,item){
if (item.field == "city") {
$("#city").val(item.value);
} else if (item.field == "state") {
$("#state").val(item.value);
}
});
});
});
</script>
and this is my html:
<label>zip</label>
<input type="text" name="zip" maxlength="5" id="zip" class="textbox1" />
<label>first name</label>
<input type="text" name="fname" class="textbox1" />
<label>last name</label>
<input type="text" name="lname" class="textbox1" />
<label>address</label>
<input type="text" name="address" class="textbox1" />
<label>address 2</label>
<input type="text" name="address2" class="textbox1" />
<label>city</label>
<input type="text" name="city" id="city" class="textbox1" />
<label>state</label>
<input type="text" name="state" id="state" class="textbox1" maxlength="2" />
The php file outputs the json just fine.
You are trying to access the inputs by ID and your inputs don't have ID's. Either change your selector or give you inputs ID's.
The subdomain is inaccurate (as I said in my email). change
...
$.getJSON("http://mydomain.com/code.php?zip=" + $("#zip").val(),
...
to
...
$.getJSON("http://www.mydomain.com/code.php?zip=" + $("#zip").val(),
...