This seems to work fine when I test in firefox. As soon as I install it through phonegap, it doesn't. I have removed as much code as I can to make it as simple as I can.
Why when I press the button, does the alert('ok'); not happen on iOS or Android?
My code is below.
Thanks,
<!DOCTYPE html>
<html>
<head>
<title>XYZ</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http:code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script src="http:code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http:code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<script>
function saveResponseToLocalStorage(){
alert('ok');
}
</script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>XYZ</h1>
</div><!-- /header -->
<div data-role="content">
<h2>Search By Postcode + Name</h2>
<form>
<label for="name">Name:</label>
<input type="text" name="text" id="text" value="">
<br/>
<label for="city">Post Code:</label>
<input type="text" name="postcode" id="postcode" value="">
<br/>
<button onclick="saveResponseToLocalStorage()">Search</button>
</form>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
Try to put this before the alert
navigator.notification.alert("ok");
Related
I'm trying to create a login system. I want the system to take me to another page "page3.htm" when I press the login button. I have been trying to test my system in jquery, but the code below does not seem to work. Why is that?
The "login.js" file contains:
window.onload =function() {
var loginBtn = document.getElementById('go');
loginBtn.addEventListener('click',function(){
document.location.href = './page3.html';
});
}
The "index.html" file contains:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Insert this line above script imports -->
<script>if (typeof module === 'object') {window.module = module; module = undefined;}</script>
<!--Jquery -->
<script>window.$ = window.jQuery = require('./jquery-3.3.1.min.js');</script>
<!--Jquery end -->
<!--login css -->
<link rel="stylesheet" type="text/css" href="/bootstrap/css/login.css">
<!--login css ends here -->
<!--Database link -->
<script src='dbcon.js'></script>
<!--database link ends -->
<!--login link -->
<script src='login.js'></script>
<!--login link ends -->
<style>
</style>
</head>
<body>
<form>
<h1>Fashion World</h1>
<div class="inset">
<p>
<label for="username">Username</label>
<input type="text" name="username" id="username">
</p>
<p>
<label for="password">PASSWORD</label>
<input type="password" name="password" id="password">
</p>
<p>
<input type="checkbox" name="remember" id="remember">
<label for="remember">Remember me for 14 days</label>
</p>
</div>
<p class="p-container">
<span>Forgot password ?</span>
<input type="submit" name="go" id="go" value="Log in">
</p>
</form>
</body>
</html>
I am just new to Javascript and Jquery Coding and I made a form under Jquery Mbile and I want to Multiply two input values and on clicking "calculate" button I want to show the result in third box in Jquery Forms. I tried alot but can't figure out what the problem is . Following is my HTML and Javascript file, please help me in solving this problem, Thanks
<!DOCTYPE html>
<html>
<head>
<title>Nitro Motorbike</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script src="Calculation.js"></script>
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
</head>
<body>
<div data-role="page" data-title="Nitro Motorbike">
<!-- Header-->
<div data-role="header">
<h1>Nitro Motorbike Total Cost Calculation Screen</h1>
<input type="button" value="Home" id="btnAdd" data-inline="true" data-icon="home" data-iconpos="right" onclick="window.location.href='file:///F:/programming%20business%20apps/Assignment/Nitro%20Motorbikemain%20page%20JQuery.html'">
</div>
<!-- Main-->
<div data-role="main" class="ui-content">
</div>
<form name="totalCostForm">
<div class="ui-field-contain">
<label for="txttotalProduction">Total Production (Please Enter Total Number of Bikes Produced) </label><br>
<input type="text" name="txttotalProduction" id="txttotalProduction"> <br>
<label for="txtcostPerBike"> Cost Per Bike</label><br>
<input type="text" name="txtcostPerBike" id="txtcostPerBike"><br>
<label for="txtcalculateTotalCost">Total Cost</label><br>
<input type="text" name="txtcalculateTotalCost" id="txtcalculateTotalCost" Disabled><br>
</div>
<input type="button" value="Calculate" id="btnAdd" data-inline="true" data-icon="check" data-iconpos="right" onclick="process()"> <br> <br>
<input type="button" value="Click here to Proceed" id="btnAdd" data-inline="true" data-icon="carat-r" data-iconpos="right"
onclick="window.location.href='file:///F:/programming%20business%20apps/Assignment/SydneystoreJquery.html'">
</form>
</div>
<!-- Footer -->
<div data-role="footer">
<h4>Copyright Nitro Motorbike</h4>
</div>
</div>
</body>
</html>
(Javascript Function)
function process()
{
if (!ValidateMyForm()) return;
var totalProduction= document.getElementById('txttotalProduction').value;
var costPerBike = document.getElementById('txtcostPerBike').value;
var calculateTotalCost = (totalProduction)*(costPerBike);
document.getElementById('txtcalculateTotalCost').value= calculateTotalCost;
}
I created a Plunker that works just fine when I remove the ValidateMyForm call (since you didn't include it). I'd say your issue lies in:
if (!ValidateMyForm()) return;
I found a code from w3schools for jquery mobile on and off slider input. But i don't know how to take out the value from the input and show it by PHP. Here is the HTML which was on w3schools:-
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.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>
</head>
<body>
<div data-role="page">
<div data-role="main" class="ui-content">
<form method="post" action="demoform.asp">
<label for="switch">Flip Toggle Switch:</label>
<input type="checkbox" data-role="flipswitch" name="switch" id="switch">
<br>
<input type="submit" data-inline="true" value="Submit">
</form>
</div>
</div>
</body>
</html>
Please tell me how to take the value from this input in PHP. Thanks in advance
if(isset($_POST['switch']))
{
echo "On. The user On the switch.";
}
else
{
echo "Off. The user kept the switch Off.";
}
We having a slight issues with our mobile forms
I have a mobile form that our users use to send us contact request. The problem we have is that when they press submit the loading icon keeps going even though the form has been submitted and the the data received. We still get the data but it does not look very professional as the user does not know if the form has gone and could resubmit the web form leading to double submissions
Thank you very much for your help in advance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc1/jquery.mobile- 1.0rc1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.js"> </script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Hire </h1>
</div><!-- /header -->
<div data-role="content">
<form action="thankyou2.php" method="POST">
<!-- Wrap Inputs in fieldcontain which will sort out borders and padding, can cause layout to break -->
<div data-role="fieldcontain">
<label for="firstName"> Your Name: </label>
<input type="text" name="name" value="" id="firstName" /> <!-- Use id and name values -->
</div>
<div data-role="fieldcontain">
<label for="lastName"> Your Email: </label>
<input type="text" name="email" value="" id="lastName" /> <!-- Use id and name values -->
</div>
<div data-role="fieldcontain">
<label for="lastName"> Event Description </label>
<textarea rows=7 name=message></textarea> <!-- Use id and name values -->
</div>
<div data-role="fieldcontain">
<input type="submit" name="submit" value="Send Request" data-theme="b" />
</div>
</form>
</div>
<div data-role="footer">
</div><!-- /footer -->
</div>
<script>
$('form').submit( function(e) {
var vals = $(this).serialize();
$.post( 'thankyou2.php', vals, function (data) {
});
e.preventDefault();
});
</script>
</body>
</html>
what you are doing is not specifing what to do on succes or error.
try the following
$("#btnId").click(function(e) {
e.preventDefault();
//show loading animation
$.ajax({
...
success:function(data){
//remove loading animation
},
error:function(){//remove loading animation
}
});
});
I hope this helps.
Edit: I'm sorry i automaticly made it ajax.. for a non-ajax approach try the next:
$('#form').submit(function() {
$('#loading_image').show();
$.post('/somepage.htm', function() {
$('#loading_image').hide();
});
});
i have a simple Jquery script which allow me to place a nice drop down login box but i have a simple issue with it
when i tried to place more than 1 box lets say 5 the script totally messed
i believe its something regarding the DIV id's and duplication but i don't find a way to resolve this problem
JS code
// Login Form
$(function() {
var button = $('#loginButton');
var box = $('#loginBox');
var form = $('#loginForm');
button.removeAttr('href');
button.mouseup(function(login) {
box.toggle();
button.toggleClass('active');
});
form.mouseup(function() {
return false;
});
$(this).mouseup(function(login) {
if(!($(login.target).parent('#loginButton').length > 0)) {
button.removeClass('active');
box.hide();
}
});
});
html code
<!doctype html>
<html>
<head>
<meta charset="utf8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>jQuery Dropdown Login Freebie | The Finished Box</title>
<link rel="stylesheet" href="css/style.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js?ver=1.4.2"></script>
<script src="js/login.js"></script>
</head>
<body>
<div id="bar">
<div id="container">
<!-- Login Starts Here -->
<div id="loginContainer">
<span>Login</span><em></em>
<div style="clear:both"></div>
<div id="loginBox">
<form id="loginForm">
<fieldset id="body">
<fieldset>
<label for="email">Email Address</label>
<input type="text" name="email" id="email" />
</fieldset>
<fieldset>
<label for="password">Password</label>
<input type="password" name="password" id="password" />
</fieldset>
<input type="submit" id="login" value="Sign in" />
<label for="checkbox"><input type="checkbox" id="checkbox" />Remember me</label>
</fieldset>
<span>Forgot your password?</span>
</form>
</div>
</div>
<!-- Login Ends Here -->
</div>
</div>
</body>
</html>
Yes, Change the ID's and It will work for more than one.