I am learning to write web apps at the moment and have built a small calculator. The problem is that the page refreshes after I press one of the form buttons.
I have tried the data-ajax="false" in several of the tags to no avail. I have tried it in the and tags but no luck.
Any ideas? Below is my code:
<html>
<head>
<title>GST Calculator</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<!-- FontAwesome - http://fortawesome.github.io/Font-Awesome/ -->
<link rel="stylesheet" href="css/font-awesome.min.css" />
<!-- jQueryMobileCSS - original without styling -->
<link rel="stylesheet" href="css/jquerymobile.css" />
<!-- nativeDroid core CSS -->
<link rel="stylesheet" href="css/jquerymobile.nativedroid.css" />
<!-- nativeDroid: Light/Dark -->
<link rel="stylesheet" href="css/jquerymobile.nativedroid.light.css" id='jQMnDTheme' />
<!-- nativeDroid: Color Schemes -->
<link rel="stylesheet" href="css/jquerymobile.nativedroid.color.blue.css" id='jQMnDColor' />
<!-- jQuery / jQueryMobile Scripts -->
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<script language="javascript" type="text/javascript">
// GST Calculator Script
function addgst(form) {
var dollarAmount = new Number(form.dollarAmount.value);
var subtotal = new Number(dollarAmount);
var gst = new Number(dollarAmount * 0.1);
var total = new Number(dollarAmount * 1.1);
form.subtotal.value = subtotal.toFixed(2);
form.gst.value = gst.toFixed(2);
form.total.value = total.toFixed(2);
}
function subtractgst(form) {
var dollarAmount = new Number(form.dollarAmount.value);
var gst = new Number(dollarAmount / 11);
var subtotal = new Number(dollarAmount - gst);
var total = new Number(dollarAmount);
form.subtotal.value = subtotal.toFixed(2);
form.gst.value = gst.toFixed(2);
form.total.value = total.toFixed(2);
}
</script>
</head>
<body>
<div data-role="page" data-theme='b'>
<div data-role="header" data-position="fixed" data-tap-toggle="false" data-theme='b'>
<i class='icon-ellipsis-vertical'></i>
<h1>GST Calculator</h1>
</div>
<div data-role="content">
<form>
<ul data-role="listview" data-inset="true">
<li data-role="fieldcontain">
<label for="dollarAmount2">Amount:</label>
<input type="tel" name="dollarAmount" id="dollarAmount2" value="" data-clear-btn="true" placeholder="">
</li>
<li>
<fieldset class="ui-grid-a">
<div class="ui-block-a"><button type="submit" data-theme="b" onclick="addgst(this.form)" name="addGst" value="Add GST">+ GST</button></div>
<div class="ui-block-b"><button type="submit" data-theme="b" onclick="subtractgst(this.form)" name="subtractGst" value="Subtract GST" >- GST</button></div>
</fieldset>
</li>
<li data-role="fieldcontain">
<label for="subtotal2">Sub Total:</label>
<input type="text" name="subtotal" id="subtotal2" value="" data-clear-btn="true" placeholder="">
</li>
<li data-role="fieldcontain">
<label for="gst2">GST:</label>
<input type="text" name="gst" id="gst2" value="" data-clear-btn="true" placeholder="">
</li>
<li data-role="fieldcontain">
<label for="total2">Total:</label>
<input type="text" name="total" id="total2" value="" data-clear- btn="true" placeholder="">
</li>
</ul>
</form>
</div>
</div>
</body>
</html>
Try adding return false; to your onClick event:
onclick="addgst(this.form); return false"
The <input type="submit"> buttons will always submit the form to the server to be processed. Because you're not doing any server-side processing you can just use <input type="button"> elements
see here for more info on the different types of input available.
So your example would be
<input type="button" data-theme="b" onclick="addgst(this.form)" name="addGst" value="Add GST">+ GST</input>
As a side note, it's strongly discouraged to add your click handlers inline like this: onclick="addgst(this.form)" It's usually preferred to do this in the script itself to properly separate your display code and your processor code. Here's a link to Event Listeners
Related
I have this table with some dependent information that uses Javascript and there is an Add and check button to insert elements dynamically in the table and a delete button for each row to delete. When I click the "add and check" button, a set of rows gets added to the table.
Here is what I have:
Javascript and HTML 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" xml:lang="en" lang="en">
<head>
<title>Game</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="robots" content="index,follow" />
<link rel="stylesheet" type="text/css" href="styles.css" />
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<div class="contanier">
<div class="row">
<div class="col-sm-6" style="padding:20px; border-right:1px solid #000;">
<div class="form-group">
<label for="email">First Number</label>
<input type="number" name="number1" class="form-control" id="number1" min="1">
</div>
<div class="form-group">
<label for="pwd">Second Number</label>
<input type="number" name="number2" class="form-control" id="number2" min="1" >
</div>
<div class="form-group">
<label for="pwd">Amount</label>
<input type="number" name="amount" class="form-control" id="amount" min="1" >
</div>
<button type="button" id="addbtn" class="btn btn-primary">Add and Check</button>
</div>
<div class="col-sm-6">
<h4 class="text-center">Result</h4>
<div id="main_box">
<div>
<input type="checkbox" name="style" value="classical" onchange="add()">
<label>Remove Doublets</label></div>
<table id="result" class="table table-striped">
<tbody class="tbody">
<tr>
<th>Number</th><th>Amount</th><th>Action</th>
</tr>
</tbody>
</table>
<h3>Total Amount:<span id="totl">0</span></h3>
<form action="" method="post" >
<div id="inputs">
</div>
<input type="hidden" name="user_id" value="22">
<input type="hidden" name="game_id" value="111">
<input type="submit" name="save_data" class=" btn btn-danger" value="SAVE" >
</form>
</div>
</div>
</div>
</div>
<script>
var indx=1;
var total_amount = 0;
$("#addbtn").click(function(){
var number = jQuery('#number1').val();
var number2 = jQuery('#number2').val();;
var amount = parseInt(jQuery('#amount').val());
if(number!="" && number2!="" && amount!="")
{
const arr_num_first = Array.from(String(number));
const arr_num_second = Array.from(String(number2));
for (let numOf_f_array of arr_num_first)
{
for (let numOf_s_array of arr_num_second)
{
total_amount = total_amount+amount;
var new_number = numOf_f_array+""+numOf_s_array;
$('.tbody').append("<tr class='input"+indx+"' ><td>"+new_number+"</td><td>"+amount+"</td><td><button class='dlt' data-am='"+amount+"' data-c='input"+indx+"'>X</button></td><tr>");
$('#inputs').append("<input type='hidden' name='num[]' value='"+new_number+"' class='input"+indx+"' >");
$('#inputs').append("<input type='hidden' name='amount[]' value='"+amount+"' class='input"+indx+"' >");
indx++;
}
}
$('#totl').html(total_amount);
}else{ alert('Fill all fields')}
});
$( "#main_box" ).on( "click",".dlt", function() {
var classname = $(this).attr('data-c');
var dlt_amount = parseInt($(this).attr('data-am'));
var new_total = total_amount-dlt_amount;
total_amount = new_total;
$('#totl').html(new_total);
$('.'+classname).remove();
});
</script>
</body>
</html>
I am very new to javascript. Using this provided HTML script:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>JavaScript Reverse Exercise</title>
<link
rel="stylesheet"
type="text/css"
href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css"
/>
</head>
<body class="bg-dark">
<form class="bg-light border rounded w-50 mx-auto mt-5 p-3">
<h2 class="mt-2 mb-4">Reverse</h2>
<div class="form-group w-50">
<label for="input">Enter an 8-digit number: </label>
<input type="number" class="form-control" id="input" required />
</div>
<div class="form-group mt-4">
<input type="submit" class="btn btn-info" value="Reverse" />
</div>
</form>
<script src="02-reverse.js"></script>
</body>
</html>
I need to accept the input and manipulate it before writing the output to a popup window. I understand the manipulation aspect, but the input and output is tripping me up. My very simple code does not produce any popup window or any result at all:
var num = document.getElementsById("input").value;
// do stuff to num
window.alert(num);
HTML
<form id="theForm">
<h2>Reverse</h2>
<div>
<label for="theNumber">Enter an 8-digit number: </label>
<input type="number" minlength="8" maxlength="8" min="10000000" max="99999999" id="theNumber" required autofocus />
</div>
<div>
<input type="submit" value="Reverse" />
</div>
</form>
JavaScript
var theForm = document.getElementById('theForm');
theForm.addEventListener('submit', function(event) {
event.preventDefault();
var theNumber = document.getElementById("theNumber").value;
if (theNumber.length < 8 || theNumber.length > 8) {
window.alert('Number must be 8 digits.');
} else {
// reverse number then display
window.alert(theNumber);
}
});
Give this Fiddle a look: https://jsfiddle.net/d8wa2n5h/
I am experiencing a weird issue... when I load the page the first time this works completely:
<script type="text/javascript">
jQuery(function($){
$("#phone").mask("(999) 999-9999");
});
</script>
but if I try POSTing to the same page again, with my "Add" or "Remove" button, the above function doesn't work any longer. In other works, the phone field will be perfect and filtered when the page is first loaded, but when you try and add more club fields, the phone filter no longer works. Why isn't the phone field being masked anymore, am I doing something wrong?
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Basic Page Needs -->
<meta charset="utf-8">
<title>Test Page</title>
<meta http-equiv="cache-control" content="no-cache"/>
<!-- Mobile Specific Metas -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<!-- css -->
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/framework.css">
<!-- Scripts -->
<script src="https://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.js"></script>
<script src="maskedinput.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(function($){
$("#phone").mask("(999) 999-9999");
});
</script>
</head>
<body>
<div data-role="page">
<!-- header -->
<div data-role="header" class="page-header">
</div>
<!--/header -->
<form style="" method="POST">
<fieldset style="text-align: center;">
<label for="phone">Cell Phone</label>
<input type="tel" id="phone" style="" value="<?php if(isset($_POST['phone'])) echo $_POST['phone'];?>" name="phone" />
<br />
<?php
if(isset($_POST['add']))
$_POST['club_num']++;
if(isset($_POST['remove']) && $_POST['club_num'] > 1)
$_POST['club_num']--;
if(!isset($_POST['club_num']))
$_POST['club_num'] = 1;
?>
<input type="hidden" value="<?php if(isset($_POST['club_num'])) echo $_POST['club_num'];?>" name="club_num" />
<h3 style="font-size: 1.5em; margin-top: 40px;">Are you in a Club?</h3>
<?php
$count = 0;
do {
$count++;
?>
<label for="clubs<?=$count?>"><?=$count?>. Club</label>
<input type='text' id="clubs<?=$count?>" name="clubs<?=$count?>" value="<?php if(isset($_POST['clubs'.$count])) echo $_POST['clubs'.$count];?>" />
<?php if($count == $_POST['club_num']){ ?>
<div style="text-align: center; display: inline-block;" data-type="horizontal" data-role="controlgroup" data-mini="true">
<input data-theme="e" data-icon="plus" type="submit" name="add" value="Add" />
<input data-theme="e" data-icon="minus" <?=($_POST['club_num']==1)?'disabled="disabled"':''?> data-iconpos="right" type="submit" name="remove" value="Remove"/>
</div>
<?php
}
} while ($count < $_POST['club_num']);
?>
</fieldset>
</form>
<br />
<!-- footer -->
<div data-role="footer" class="footer">
<div class="ui-grid-solo">
<div class="ui-block-a">
<div class="ui-bar ui-bar-e" style="height:120px">
</div>
</div>
</div>
</div>
<!-- /footer -->
</div>
<!-- /page -->
</body>
</html>
When one of the buttons is pressed the page content is reloaded using AJAX. This means the original element '#phone' (that you bound the mask function to) is replaced.
I can't see where you are doing the AJAX request from, but you need to call $("#phone").mask("(999) 999-9999"); again once the page has reloaded.
I figured out how to solve this problem, by using jd182 answer and jeroen comment and link here: http://demos.jquerymobile.com/1.2.0/docs/forms/forms-sample.html
Since it is submitting an ajax form, like jd182 stated, and because it was mobile jquery, all post automatically send as a ajax post.
All I had to do was change
<form style="" method="POST">
to
<form style="" method="POST" data-ajax="false">
and it fixed the problem, because it posted regularly!
Thanks jeroen and jd182!
Trying to implement panel event without success
using this code in
$(document).on("panelbeforeopen", "#leftpane", function(event, ui ){ //
alert("panelbeforeopen");
var disableForm = "<?php echo ($_SESSION['user'] == '' ? 'true' : 'false') ?>";
if(disableForm){
alert("form disabled");
}else{
alert("form enabled");
}
});
This will result in just working if i refresh the page totally.
If i put it in my included .js file it works without refreshing the page but PHP function to get user in session will be trick.. I dont want to solve it that way.
my header looks like this:
<head>
<title>Titel</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile- 1.4.0.min.css" />
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="_js/javascript.js"></script>
<script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>
</head>
html
<body>
<div data-role="page" id="menu">
<!-- Panels begins here -------------------------------------------------------------------------->
<div data-role="panel" id="leftpane" data-position="left" data-swipe-close="true" data-display="overlay" data-theme="a">
<h4 id="loginTitel">Login</h4>
<p id="output"></p>
<div id="formDiv">
<form id="loginForm" >
<label for="usn" class="ui-hidden-accessible">Username : </label>
<input type="text" maxlength="25" placeholder="username" data-mini="true" required autofocus name="username" />
<label for="passwd" class="ui-hidden-accessible">Password : </label>
<input type="password" maxlength="25" placeholder="password" data-mini="true" required autofocus name="password" />
<input name="action" type="hidden" value="login" />
<button data-theme="b" id="submit" data-mini="true" type="submit">Login</button>
</form>
</div>
<p />
</div>
<!-- /leftpanel -->
<div data-role="panel" id="infoPanel" data-display="overlay" data-position="right" data-theme="b">
<h2>Information</h2>
<p>content</p>
</div>
<!-- /rightpanel -->
<!-- Panels end here -------------------------------------------------------------------------->
<div data-role="header" position="inline"><img src="_pic/globe.png" alt="Low resolution logo" class="align-right"/>
<h1>JQM Site</h1>
</header>
</div>
<div data-role="content" id="content">
<h4>Titel</h4>
<p>
content
</p>
</div>
<footer data-role="footer" class="ui-body-c" data-position="fixed"> </footer>
</div>
Main function I´m trying to reach here is to make a check if user session exist and show content in leftpanel depending on result of Session.
maby I´m approaching this all wrong? an example would be much helpful
I know that IE 7-9 are Grade A supported. But with my site it is not working, I can’t figure out for the life of me why. Here is the link: http://www.fuelingminds.com/userpages.cfm I’ve done previous projects using alpha 4 and everything looked just fine, but I switched to beta 1 now. are there any known issues that are out there or am I just missing something obvious in my code?
Note: I tried disabling ajax to see if that was the cause, but still the same skewed look, I’ve tried on IE 7 and 9 on multiple computers, tried using jquery mobile from a local source instead as well.
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script>
<link href="css/loginandError.css" type="text/css" />
</head>
<body>
<div data-role="page" data-theme="c" id="login" data-ajax="false">
<div data-role="header">
<a onClick="window.history.back()" data-icon="back" data-direction="reverse" >back</a>
home
<h1>Fueling The Future - Login</h1>
</div>
<div data-role="content" align="center">
<form action="loginAct.cfm" method="post" data-ajax="false">
<input type="text" value="youremail#email.com" name="email">
<input type="password" value="password" name="pass">
<br>
<input type="submit" value="login" name="login" data-inline="true">
<br>
Register To Apply Today!
</form>
</div>
</div>
<!--- <div data-role="page" data-theme="c" id="register" data-ajax="false">
<div data-role="header">
<h1>Fueling The Future</h1>
<!--<div data-role="navbar">
<ul data-inset="true" style="margin-top: 0px; margin-bottom: 0px;">
<li>Home</li>
<li>The Program</li>
<li>Page 3</li>
<li>Page 4</li>
<li>Contact</li>
</ul>
</div>-->
</div>
<div data-role="content">
<cfform action="regAction.cfm" method="post" data-ajax="false">
<label for="email">E-mail</label>
<cfinput type="text" label="E-mail" name="email" >
<label for="pass">password</label>
<cfinput type="password" name="pass" >
<label for="passChk">enter password again</label>
<cfinput type="password" name="passChk" >
<label for="fName">First Name</label>
<cfinput type="text" name="fName">
<label for="lName">Last Name</label>
<cfinput type="text" name="lName">
<br>
<cfinput type="submit" name="submit" value="register" data-inline="true">
</cfform>
</div>
<div data-role="footer">
</div>
</div>--->
</body>
</html>
Is this page working with your IE9?
If yes, it is unfortunately Alpha3 of jQuery Mobile, but perhaps these fixes will work for you:
// Fix for IE9 and experimental jQuery Mobile Datepicker
//customize jQuery Mobile to let IE7+ in (Mobile IE)
$(document).bind("mobileinit", function(){
//reset type=date inputs to text
$.mobile.page.prototype.options.degradeInputs.date = true;
$.extend($.mobile, {
//extend gradeA qualifier to include IE7+
gradeA: function() {
//IE version check by James Padolsey, modified by jdalton - from http://gist.github.com/527683
var ie = (function() {
var v = 3, div = document.createElement('div'), a = div.all || [];
while (div.innerHTML = '<!--[if gt IE '+(++v)+']><br><![endif]-->', a[0]);
return v > 4 ? v : !v;
}());
//must either support media queries or be IE7+
return $.support.mediaquery || (ie && ie >= 7);
}
});
});
You have to put these lines of code between query.js and query.mobile.js.
You need to have <!DOCTYPE html> or else it wont read the html5 correctly.
<meta charset="utf-8" http-equiv="X-UA-Compatible" content="IE=9" />
<!--[if IE 7]><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /><![endif]-->
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<style type="text/css">
.clear {
zoom: 1;
display: none;
}
</style>
<![endif]-->
paste this to your layout page