Validation of form using jquery mobile or javascript - javascript

I am using the following code which displays a form. The form elements should be validated . Please find the attached code with what i have tried.
<!doctype html>
<html>
<head>
<title> App</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css">
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<body>
<div data-role="page" id="home">
<div data-role="header">
<h1>site Details</h1>
</div>
<div data-role="content">
Enter the details of site
Modify site details
</div>
</div>
<div data-role="page" id="Site entry1">
<div data-role="header">
Home
<h1>Welcome To enter the details of site</h1>
</div>
<div data-role="content">
<div class="content-primary">
<form id= "1">
<ul data-role="listview">
<li data-role="fieldcontain">
<label for="sitename">Site name:</label>
<input type="text" sitename="name" id="sitename" value="" />
</li>
<li data-role="fieldcontain">
<label for="siteno">Site name:</label>
<input type="text" siteno="siteno" id="siteno" value="" />
</li>
Next
</ul>
</form>
</div>
</div>
</div>
<div data-role="page" id="Site entry2">
<div data-role="header">
previous
<h1>Welcome To enter the module details of site</h1>
</div>
<div data-role="content">
<div class="content-primary">
<form>
<ul data-role="listview">
<li data-role="fieldcontain">
<label for="moduleno">name:</label>
<input type="text" modulename="moduleno" id="moduleno" value="" />
</li>
<li class="ui-body ui-body-b">
<fieldset class="ui-grid-a">
<div class="ui-block-b"><button type="submit" data-theme="a">Submit</button></div>
</fieldset>
</li>
</ul>
</form>
</div>
</div>
<div data-role="footer">
Next
</div>
</div>
<div data-role="page" id="Site entry3">
<div data-role="header">
previous
<h1>Welcome To enter the exe details of site</h1>
</div>
<div data-role="content">
<div class="content-primary">
<form>
<ul data-role="listview">
<li data-role="fieldcontain">
<label for="modulename">name:</label>
<input type="text" name="name" id="name" value="" />
</li>
<li class="ui-body ui-body-b">
<fieldset class="ui-grid-a">
<div class="ui-block-b"><button type="submit" data-theme="a">Submit</button></div>
</fieldset>
</li>
</ul>
</form>
</div>
</div>
<div data-role="footer">
Home
</div>
</div>
<div data-role="page" id="Modify site">
<div data-role="header">
Home
<h1>List of sites </h1>
</div>
<div data-role="content">
</div>
<div data-role="footer">
</div>
</div>
</body>
</html>
find the following scripting
function validate()
{
var siteName = document.getElementById("siteName").value;
var siteNo = document.getElementById("siteNo").value;
if (siteName.length == 0)
{
alert("Please, enter your name");
return false;
}
if (siteNo.length == 0)
{
alert("Please, enter your no");
return false;
var numbers = /^[0-9]+$/;
if(siteNo.value.match(numbers))
{
return true;
}
}
}
How to validate that site no will be only numbers and site name only text.
The code i have tried above is not serving for the purpose.


Your html has an error too .. there two body tags .. remove one
<body>
<body>
Alse check this fiddle for validation. Make use of jQuery


Statements after a return usually are not executed. Change:
function validate()
{
var siteName = document.getElementById("siteName").value;
var siteNo = document.getElementById("siteNo").value;
if (siteName.length == 0)
{
alert("Please, enter your name");
return false;
}
if (siteNo.length == 0)
{
alert("Please, enter your no");
return false;
} // !!
var numbers = /^[0-9]+$/;
if(siteNo.value.match(numbers))
{
return true;
}
else
return false; // !!!
}
Recommendation: if the code would have been properly indented, this error would have been quite more obvious.

Related

How do have my page fill the username and password on an external site?

I am trying to make an HTML page, that when users access, it will take them to a 3rd party external site (I have no control over), and fill in the username and password fields, and log them in.
This is the source of the external site, which I got from my browser.
<!DOCTYPE html>
<html><head>
<title>Omitted | Login</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript">
var areActiveModsSelected = false;
var areInactiveModsSelected = false;
function SetActiveSelection()
{
var checkboxes = document.ActiveMods.getElementsByClassName("ModSelection");
areActiveModsSelected = !areActiveModsSelected;
SetSelection(checkboxes, areActiveModsSelected);
}
function SetInactiveSelection()
{
var checkboxes = document.InactiveMods.getElementsByClassName("ModSelection");
areInactiveModsSelected = !areInactiveModsSelected;
SetSelection(checkboxes, areInactiveModsSelected);
}
function SetSelection(checkboxes, isSelected)
{
for(var i=0, n=checkboxes.length;i<n;i++)
{
checkboxes[i].checked = isSelected;
}
}
function checkSavegame()
{
var e = document.getElementById("savegame");
if (e != null) {
var savegame = e.options[e.selectedIndex].text;
var isEmpty = isEmptySavegame(savegame);
document.getElementById("mapSelector").disabled = !isEmpty;
document.getElementById("difficultySelector").disabled = !isEmpty;
}
}
function isEmptySavegame(value)
{
var ret = value.match(/SAVEGAME \d\d* - Empty/g) || value.match(/SPIELSTAND \d\d* - Leer/g) || value.match(/SAUVEGARDE \d\d* - Vide/g);
return ret != null;
}
window.onload = function()
{
checkSavegame();
}
</script>
<link rel="stylesheet" type="text/css" href="css/main.css" />
<link rel="stylesheet" type="text/css" href="css/monitor.css" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel="icon" href="favicon.ico" type="image/x-icon" />
<script type="text/javascript" src="js/all.js"></script>
</head>
<body>
<div class="white-bg clearfix">
<header class="main-header" role="banner" data-module="sticky">
<div class="header-bar clearfix"> <div class = "row column"> <div class = "top-bar-right"> <ul class = "menu float-left"><li><a target="_newTwitter" href="https://twitter.com/url"><span class="icon icon-twitter"></span></a></li><li><a target="_newFacebook" href="https://www.facebook.com/giants.farming.simulator"><span class="icon icon-facebook"></span></a></li><li><a target="_newYoutube" href="http://www.youtube.com/user/giantssoftware"><span class="icon icon-youtube"></span></a></li><li><a target="_newGoogleolus" href="https://plus.google.com/109211762279175256996"><span class="icon icon-google"></span></a></li> </ul>
<ul class="dropdown menu float-right"><li class="is-dropdown-submenu-parent is-down-arrow menu-flags"><img src="img/icons/flag-en.png" alt="lang"><ul class="menu submenu is-dropdown-submenu first-sub vertical"><li><img style="border:1px solid #000;" src="img/icons/flag-en.png" alt="English"><span class="country">English</span> <span>(en)</span></li><li><img style="border:1px solid #000;" src="img/icons/flag-de.png" alt="Deutsch"><span class="country">Deutsch</span> <span>(de)</span></li><li><img style="border:1px solid #000;" src="img/icons/flag-fr.png" alt="Francais"><span class="country">Francais</span> <span>(fr)</span></li></ul></li></ul> </div>
</div>
</div>
<div class="top-bar"> <div class="row column"> <div class="top-bar-left"> <img src="img/logo.png"> </div> <div class="top-bar-right"> <ul class="menu float-left"> <li><span>HOME</span></li>
<li><span>SAVEGAMES</span></li>
<li><span>MODS</span></li>
<li><span>JOURNAL</span></li>
<li><div class="status-indicator online"><span>ONLINE</span></div></li></ul></div></div></div></header><section class="content-wrap"><div class="row"> <div class="medium-8 columns">
<img src="template/gsfs.png"><br/><br/><h2>Login to server</h2>
<p>Please enter your login credentials</p>
<div class="row column">
<form name="input" action="index.html?lang=en" method="POST"><div class="table2"><div class="row column table-even"><div class="medium-3 columns column-label">Username</div><div class="medium-9 columns"><input type="text" name="username" value=""></div></div><div class="row column table-odd"><div class="medium-3 columns column-label">Password</div><div class="medium-9 columns"><input type="password" name="password" value=""></div></div><div class="row column table-even text-right">
<input class="button button-form-submit" name="login" type="submit" value="Login"></div></div></form><br />
<h2>Dedicated Server Mobile App (Free)</h2><div><a class="itunesbadge" href="https://itunes.apple.com/WebObjects/MZStore.woa/wa/viewSoftware?id=1135922781&mt=8" style="display:inline-block;overflow:hidden;background:url(https://linkmaker.itunes.apple.com/images/badges/en-us/badge_appstore-lrg.svg) no-repeat;width:135px;height:40px;background-position: center;"></a><a class="googleplaybadge" href="https://play.google.com/store/apps/details?id=com.giantssoftware.fs17_dedi_app" style="margin-left: 5px; display:inline-block;overflow:hidden;background:url(https://play.google.com/intl/en_us/badges/images/apps/en-play-badge-border.png) no-repeat;width:141px;height:40px;background-size: cover;background-position-x: -4px;background-position-y: -3px;"></a></div></div>
</div>
<div class="medium-4 columns">
<div class="social-wrapper">
<div class="social-header clearfix">
<div class="title-wrap clearfix" style="line-height: 62px;">
<i class="icon icon-twitter"></i><span>Twitter</span>
</div>
Follow
</div>
<!-- Load from cache: ../cached/fs17_dedi_twitter_cache_farmingsim_4.json-->
<div class="social-news-block">
<p>RT hi: Come and meet us at E3 at booth West Hall #4512 to learn more about Farming Simulator 19, the next game in the successf…</p>
<span class="post-date">about 1 hour ago</span>
</div>
<div class="social-news-block">
<p>Are you are bale stacking champion? Are you at #blank ? Then show us your skills. The… <a target="_blank" href="blank">nothing</a></p>
<span class="post-date">4 days ago</span>
</div>
<div class="social-news-block">
<span class="post-date">11 days ago</span>
</div>
<div class="social-news-block">
<p>RT #url: We are glad to announce our plans for further expansion by moving to bigger office spaces for our two existing studios…</p>
<span class="post-date">12 days ago</span>
</div>
</div>
</div>
</div>
</section>
<div class="partners clearfix text-center"> <div class="row"> <div class="columns">
<img style="vertical-align:text-top;" src="template/image_11.gif" /> </div> </div> </div> <footer class="main-footer clearfix">
<div class="row">
<div class="medium-8 columns">
<div class="copyright"><img class="copyright__logo" src="img/logos/footer-logo.png"><div>© 2016 GIANTS Software GmbH Alle Rechte vorbehalten.<br>Alle anderen Warenzeichen sind das Eigentum ihrer jeweiligen Besitzer.</div></div> </div>
<div class="medium-4 small-12 columns">
<ul class="menu menu-footer float-right">
<li>7.0.5.0</li>
</ul>
</div>
</div>
</footer>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/frontend.js"></script>
<script>$(document).foundation();</script>
</div>
</body>
</html>
I tried this, but it simply redirects to the page without filling any of the fields.
<DOCTYPE html>
<html>
<head>
<title>TEST</title>
<script>
window.onload = function() {
document.getElementById('loginForm').submit();
};
</script>
</head>
<body>
<form id="loginForm" action="URL of site" method="POST">
<input type=hidden name="username" value="moo"/>
<input type=hidden name="password" value="boo"/>
</form>
</body>
</html>
What is wrong with my code, and how can I achieve my goal?
Thank you.

Loading Data From A Specific URL Using Ajax

I am new to javascript and ajax and having some serious trouble getting data to be displayed in a HTML document using the correct javascript code. I need to have the data from a specific web address displayed on the HTML document. Can anyone point me in the right direction?
application.js
function load_test(list_item) {
var list = list_item.find('dl');
var promise = $.ajax('http://www.ehustudent.co.uk/hallm/cis1007api/student-feedback/test' + list_item.data('id'));
promise.done(function(data) {
for(var idx = 0; idx < data.length; idx++) {
list.append('<dt>' + data[idx].id + '</dt>');
list.append('<dd>' + data[idx].studentnr + '</dd>');
list.append('<dd>' + data[idx].name + '</dd>');
list.append('<dd>' + data[idx].feedback + '</dd>');
}
});
}
index.html
<html>
<head>
<link rel="stylesheet" href="style.css"/>
<script src="jquery.min.js"></script>
<script src="application.js"></script>
</head>
<body>
<div class="row">
<div class="column small-12">
<h1>Feedback</h2>
</div>
</div>
<ol class="feedback">
<li class="row">
<div class="column small-12 large-10">
<h2>Student Name Goes Here</h2>
</div>
<div class="column small-12 large-2 text-right">
(delete)
</div>
<div class="column small-12">
<p>Student Feedback Goes Here</p>
</div>
</li>
</ol>
</ol>
<form id="add_feedback" action="#">
<div class="row">
<div class="column small-12 large-6">
<label>Name
<input type="text" name="name" placeholder="Enter your name here"/>
</label>
</div>
</div>
<div class="row">
<div class="column small-12 large-6">
<label>Feedback
<textarea name="feedback" placeholder="Please provide some useful and constructive feedback"></textarea>
</label>
</div>
</div>
<div class="row">
<div class="column small-12 large-6 text-right">
<input type="submit" value="Add Feedback"/>
</div>
</div>
</form>
Any help would be greatly appreciated.
Thanks!

Try this code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled 1</title>
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script>
function load_test(list_item) {
var list = list_item.find('li');
var promise = $.ajax('http://www.ehustudent.co.uk/hallm/cis1007api/student-feedback/test' );
promise.done(function(data) {
console.log(data);
for(var idx = 0; idx < data.length; idx++) {
list.append('<dt>' + data[idx].id + '</dt>');
list.append('<dd>' + data[idx].studentnr + '</dd>');
list.append('<dd>' + data[idx].name + '</dd>');
list.append('<dd>' + data[idx].feedback + '</dd>');
}
});
}
$(function(){
load_test($('.feedback'));
});
</script>
</head>
<body>
<div class="row">
<div class="column small-12">
<h1>Feedback</h2>
</div>
</div>
<ol class="feedback">
<li class="row">
<div class="column small-12 large-10">
<h2>Student Name Goes Here</h2>
</div>
<div class="column small-12 large-2 text-right">
(delete)
</div>
<div class="column small-12">
<p>Student Feedback Goes Here</p>
</div>
</li>
</ol>
<form id="add_feedback" action="#">
<div class="row">
<div class="column small-12 large-6">
<label>Name
<input type="text" name="name" placeholder="Enter your name here"/>
</label>
</div>
</div>
<div class="row">
<div class="column small-12 large-6">
<label>Feedback
<textarea name="feedback" placeholder="Please provide some useful and constructive feedback"></textarea>
</label>
</div>
</div>
<div class="row">
<div class="column small-12 large-6 text-right">
<input type="button" onclick="tex" value="Add Feedback"/>
</div>
</div>
</form>
</body>
</html>

You have mistakes in you HTML + Javascript code:
HTML: there is must remove it
JavsSctipt:
you don't have [dl] element in your HTML
[list_item.data('id')] this code return undefined value, so your URL not working as well, you must get the correct id.
You didn't call your function [load_test], so you can't see the results

How to make the contents of multiple div class elements editable

My objective is to make the contents of multiple div elements editable either with all of the same div class name, or with different class names. I am aware of the contenteditable attribute but my problem is being able to save it using java-script so that when the page reloads, the edited content is saved and displayed. I have been trying to follow the tutorial on this website...
http://www.developerdrive.com/2012/06/allowing-users-to-edit-text-content-with-html5/
So far i have separated the java-script code into a different file called mailscript.js
I included the file near the top of the html5 file using...
I also changed the ...
document.getElementById
to...
document.getElementsByClassName
in the Java-script file that a made. I don't really know where to go from here. In short, the edits fail to save. Her are the files...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Package Information</title>
<script type="text/javascript" src="mailscript.js"></script>
<link rel="stylesheet" href="mailstyle.css">
<link rel="icon"
type="image/ico"
href="favicon.ico">
</head>
<body onload="checkEdits()">
<div id="wrapper">
<div id="header">
<header><h1>Bison Mail</h1></header>
</div>
<hr>
<br id="clearleft">
<div id="leftcolumn">
<hr>
<ul class="navbar">
<li>Home</li>
<li>Packages</li>
<li>Contact Us</li>
<li>Sign-Out</li>
</ul>
<hr>
</div>
<div id="rightcolumn">
<div class="container">
<div class="table-row">
<div class="heading">Name:</div>
<div class="name" contenteditable="true">Meshech Price</div>
</div>
<div class="table-row">
<div class="heading">Date Received:</div>
<div class="dateRecieved" contenteditable="true">11/1/2014</div>
</div>
<div class="table-row">
<div class="heading">Date of Pickup:</div>
<div class="dateOfPickup" contenteditable="true">None</div>
</div>
<div class="table-row">
<div class="heading">ID:</div>
<div class="ID" contenteditable="true">N/A</div>
</div>
<div class="table-row">
<div class="heading">E-mail:</div>
<div class="email" contenteditable="true"><address>shackster3773#yahoo.com</address></div>
</div>
<div class="table-row">
<div class="heading">E-mail Sent:</div>
<div class="emailSent" contenteditable="true">Sent</div>
</div>
<div class="table-row">
<div class="heading">Signature:</div>
<div class="signature" contenteditable="true">N/A</div>
</div>
</div>
<hr>
<input type="button" value="save my edits" onclick="saveEdits()"/>
<input type="button" value="add package" onclick="addElement()"/>
<br>
<hr>
<div id="footer">
<br>
<p>By: Meshech ©</p>
</div>
</div>
</div>
</body>
</html>
and for the java-script file
function saveEdits() {
//get the editable element
var editElem = document.getElementsByClassName("name");
//display.write(editElem);
//get the edited element content
var userVersion = editElem.innerHTML;
//display.write(userVersion);
//save the content to local storage
localStorage.userEdits = userVersion;
//write a confirmation to the user
document.getElementsByClassName("update").innerHTML="Edits saved!";
}
function checkEdits() {
//find out if the user has previously saved edits
if(localStorage.userEdits!==null)
document.getElementsByClassName("name").innerHTML = localStorage.userEdits;
}
Any help would be Greatly appreciated. Thanks in advance!

Try this. Your divs need to look like <div id="name" class="edit" contenteditable="true">Meshech Price</div>
HTML
<div class="container">
<div class="table-row">
<div class="heading">Name:</div>
<div id="name" class="edit" contenteditable="true">Meshech Price</div>
</div>
<div class="table-row">
<div class="heading">Date Received:</div>
<div id="dateRecieved" class="edit" contenteditable="true">11/1/2014</div>
</div>
Javascript
function saveEdits() {
var editElem = document.getElementsByClassName("edit");
localStorage.userEdits = {}
Array.prototype.forEach.call(editElem, function(e) {
console.log(e.id)
localStorage.setItem([e.id], e.innerHTML);
});
document.getElementsByClassName("update").innerHTML="Edits saved!";
}
function checkEdits() {
if(localStorage.userEdits) {
var editElem = document.getElementsByClassName("edit");
Array.prototype.forEach.call(editElem, function(e) {
console.log(e.id)
e.innerHTML = localStorage.getItem(e.id);
});
}
}

mobile app jquery variable results in "undefined"

Given:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="format-detection" content="telephone-no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, minimum-scale=1, maximum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi">
<title>Our Application</title>
<link rel="stylesheet" href="css/themes/default/jquery.mobile-1.3.2.css">
<link rel="stylesheet" href="css/main.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="js/jquery.js"></script> <!-- added -->
<script src="js/jquery.mobile-1.3.2.js"></script> <!-- added -->
<script>
function getSearchVars() {
var src_priceMin = 500;
$('#form1').submit(function () {
src_priceMin = $("#form_priceMin").val();
});
var searchQuery =
'{' +
',"priceMin":' + src_priceMin +
'}';
// encode variable
var encVar = encodeURIComponent(searchQuery);
return encVar;
}
var goUrl = encodeURIComponent("http://mysite.net/api/properties?json=" + getSearchVars()) + "&callback=?";
var searchUrl = 'http://anotherSite.com/get/?url=' + goUrl;
$(document).on("pageinit", function(){
$("#search").live("pageshow", function(){
$('#form1').submit(function() {
searching = true;
var prcMin = $("#form_priceMin").val();
getResults();
$.mobile.changePage( "#src_page", { transition: "slide", changeHash: false });
return false;
});
return false;
});
});
function init() {
document.addEventListener("deviceready", onDeviceReady, false);
}
function onDeviceReady() {
// move navigator.geolocation to here later for device test
}
function getResults() {
$.getJSON(searchUrl, function (data) {
console.log("Starting Results Fetch");
console.log(searchUrl);
});
return false;
}
</script>
</head>
<body onload="init()">
<div id="home" data-role="page" data-theme="c" data-title="Go: Home">
<div class="myLogo"><img src="img/go_my_logo.jpg" alt="Go my" /></div>
<div data-role="controlgroup" id="searchField" >
<label for="searchTitle">Find Prices:</label>
<input type="text" name="name" id="searchPrc" value="" placeholder="enter price" data-mini="true" />
<img src="img/srch_btn.png" alt="search button" />
</div> <!-- search -->
<div data-role="footer" data-position="fixed" data-id="vs_footer" data-theme="c">
<div data-role="navbar">
<ul>
<li>Home</li>
<li>Search</li>
</ul>
</div> <!-- navbar -->
</div> <!-- footer nav-->
</div> <!-- home page -->
<!-- search page -->
<div data-role="page" id="search" data-theme="c">
<div data-role="header" class="logo">
<h1>Search</h1>
Home
</div>
<div data-role="content" >
<form id="form1">
<div id="fnameDiv" data-role="fieldcontain">
<label for="form_priceMin">Min. Price:</label>
<input type="text" name="form_priceMin" id="form_priceMin" placeholder="Enter min price" />
</div>
<div id="submitDiv" data-role="fieldcontain">
<input type="submit" value="Submit" data-inline="true"/>
</div>
</form>
</div>
<div class="modal"></div>
<div data-role="footer" data-position="fixed" data-id="vs_footer">
<div data-role="navbar">
<ul>
<li>Home</li>
<li>Search</li>
</ul>
</div> <!-- navbar -->
</div> <!-- footer nav-->
</div> <!-- search page -->
<!-- Search Results--->
<div data-role="page" id="src_page">
<div data-role="header">
<h3>Search Results</h3>
</div>
<div data-role="content" id="src_content">
</div>
<div data-role="footer" data-position="fixed" data-id="vs_footer">
<div data-role="navbar">
<ul>
<li>Home</li>
<li>Search</li>
</ul>
</div> <!-- navbar -->
</div> <!-- footer nav-->
</div> <!-- Search Results -->
</body>
</html>
The issue I'm running into is that when I submit, the value of "priceMin" in my search URL is "undefined".
Is this a scoping issue? Am I referencing the variable/form field incorrectly? The basic idea is that one would type in the Price in the Search page, click Submit, be taken to a results page displaying all things of at least that price. The purpose in the use of the URL is that I'm using an api to display "things" of a certain price. I can do it with the static value, but my call to get the value from the form field yields no data.

How to make a simple text field validation and button to go to next page with jQuery Mobile?

This is what I got, but I cannot get the correct way to go load another page if the correct text is added in the textbox. Can someone help me getting the right syntax?
<script type='text/javascript'>//<![CDATA[
$(document).delegate('[data-role="page"]', 'pageinit', function () {
var $submit = $(this).find('input[type="submit"]'),
$text = $(this).find('input[type="text"]');
$text.bind('keyup', function () {
if (this.value == 'llab') {
$submit.button('enable');
} else {
$submit.button('disable');
}
}).trigger('keyup');
});
//]]>
</script>
</head>
<body>
<!-- Home -->
<div data-role="page" id="page1">
<div data-theme="a" data-role="header">
<h3>
Uppgift 1
</h3>
</div>
<div data-role="content">
<p>
Uppgift nummer ett blir att ...
</p>
<img src="https://maps.googleapis.com/maps/api/staticmap?center=Centralstationen, Göteborg&zoom=14&size=288x200&markers=Centralstationen, Göteborg&sensor=false" width="288" height="200" />
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<label for="pwtext">
</label>
<input name="passwordtext" id="pwtext" placeholder="" value="" type="text" />
</fieldset>
</div>
<input type="submit" data-theme="b" data-icon="check" data-iconpos="left" value="Ta dig vidare" id="sendbtn" name="sendbtn"/>
<a data-role="button" data-theme="a" href="start.html" data-icon="home" data-iconpos="left">
Tillbaka till startsidan
</a>
</div>
</div>
</body>
</html>

Updated answer:
Here is a complete solution for your question/problem.
Markup:
Consists of two pages, login page (page1) and (page2) upon successful login.
<!-- Start of first page -->
<div data-role="page" id="page1">
<div data-role="header">
<h1>page1 header</h1>
</div><!-- /header -->
<div data-role="content">
<p>enter password</p>
<form id="login" action="" method="">
<input name="pwtext" id="pwtext" placeholder="" value="" type="text" class="required" />
<input type="submit" data-theme="b" data-icon="check" data-iconpos="left" value="Ta dig vidare" id="sendbtn" name="sendbtn" />
</form>
</div><!-- /content -->
<div data-role="footer">
<h4>Page1 Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
<!-- Start of second page -->
<div data-role="page" id="page2">
<div data-role="header">
<h1>Bar</h1>
</div><!-- /header -->
<div data-role="content">
<p>password accepted</p>
<p>Back to page1</p>
</div><!-- /content -->
<div data-role="footer">
<h4>Page2 Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
Password validation and redirect to next page if the password is correct.
$("#login").submit(function() {
var emptyFields = $(":input.required").filter(function() {
return !$.trim(this.value).length;
});
if(emptyFields.length) {
$("#pwtext").css("background-color", "#ffff76");
$("#pwtext").attr("placeholder", "Passeword required!");
return false;
}
if ($('#pwtext').val() != 'omar') {
$("#pwtext").css("background-color", "#ffff76");
$("#pwtext").attr("placeholder", "Passeword required!");
return false;
}
if ($('#pwtext').val() == 'omar') {
$.mobile.changePage("#page2", "slideup");
return false;
}
});
JSFiddle: test

Categories