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!
Related
This question already has answers here:
jQuery AJAX submit form
(20 answers)
Closed 4 years ago.
I created a contact page.
When I click on the submit button, this form sends my form information to the server-side file (PHP), but the submit button does nothing.
I do not get an answer in the AJAX!
<script type="text/javascript">
$(document).ready(function() {
$('#submit').click(function() {
$('#submit').attr('value', 'Please wait...');
$.post("sender.php", $("#contactform").serialize(), function(response) {
$('#success').html(response);
$('#submit').attr('value', 'SEND');
});
return false;
});
});
</script>
<!doctype html>
<html>
<head>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<link href="styles/contactform-style.css" rel="stylesheet" id="contact-from-style" >
<meta charset="utf-8">
<title>My Contact form</title>
</head>
<body>
<section id="contact">
<div class="container prop">
<!-- <div class="well well-sm">
<h3><strong>Contact us Pars Coders </strong></h3>
</div>-->
<div class="row" id="p">
<div class="col-md-7">
<img src="img/email-icon.png" class="img-responsive text-center" alt="Pars Codres" />
</div>
<div class="col-md-5">
<h4><strong>Tmas Ba ma </strong></h4>
<form id="#contactform">
<div class="form-group">
<input type="text" class="form-control" name="name" value="" placeholder="Name">
</div>
<div class="form-group">
<input type="email" class="form-control" name="email" value="" placeholder="E-mail">
</div>
<div class="form-group">
<textarea class="form-control" name="description" rows="3" placeholder="Description"></textarea>
</div>
<button class="btn btn-success" type="submit" name="button" id="submit">
<i class="fa fa-paper-plane-o" aria-hidden="true"></i> Send ...
</button>
<div id="success" style="color: red;">؟</div>
</form>
</div>
</div>
</div>
</section>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
</body>
</html>
<?php
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['description'];
$to = 's3dhossein#gmail.com';
$subject = 'the subject';
$message = 'FROM: '.$name.' Email: '.$email.'Message: '.$message;
$headers = 'From: s3dhossein#gmail.com' . "\r\n";
if (filter_var($email, FILTER_VALIDATE_EMAIL)) { // this line checks that we have a valid email address
mail($to, $subject, $message, $headers); //This method sends the mail.
echo "Your email was sent!"; // success message
}else{ echo "Invalid Email, please provide an correct email.";
}
?>
Where do you think the problem is?
Can an error come from AJAX?
Found problems:
1) An error is raised: Error: Bootstrap's JavaScript requires jQuery. It means that the bootstrap's js file must be loaded after the jQuery's js file. So invert their positions:
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
2) An error is raised: ReferenceError: $ is not defined for the line $(document).ready(function () {. This means that the jquery is not recognized inside your script. So bring all the js imports in the page head. The times for the js imports at the bottom of the page are long gone.
3) The form tag must be <form id="contactform">, not <form id="#contactform">.
4) If you are submitting through an ajax request, then you must use a button of type "button", not of type "submit". Then you can remove the return false; from the $('#submit').click(function (){...} function too.
Suggestions:
Define an "error" callback for the ajax request.
Define the meta tags as the first ones in the head tags.
Working code:
<!doctype html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes" />
<meta charset="UTF-8" />
<!-- The above 3 meta tags must come first in the head -->
<title>My Contact form</title>
<!-- CSS resources -->
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<link href="styles/contactform-style.css" rel="stylesheet" id="contact-from-style" >
<!-- JS resources -->
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#submit').click(function () {
$('#submit').attr('value', 'Please wait...');
$.post("sender.php", $("#contactform").serialize(), function (response) {
$('#success').html(response);
$('#submit').attr('value', 'SEND');
});
});
});
</script>
</head>
<body>
<section id="contact">
<div class="container prop">
<!-- <div class="well well-sm">
<h3><strong>Contact us Pars Coders </strong></h3>
</div>-->
<div class="row" id="p">
<div class="col-md-7">
<img src="img/email-icon.png" class="img-responsive text-center" alt="Pars Codres" />
</div>
<div class="col-md-5">
<h4><strong>Tmas Ba ma </strong></h4>
<form id="contactform">
<div class="form-group">
<input type="text" class="form-control" name="name" value="" placeholder="Name">
</div>
<div class="form-group">
<input type="email" class="form-control" name="email" value="" placeholder="E-mail">
</div>
<div class="form-group">
<textarea class="form-control" name="description" rows="3" placeholder="Description"></textarea>
</div>
<button class="btn btn-success" type="button" name="button" id="submit">
<i class="fa fa-paper-plane-o" aria-hidden="true"></i> Send ...
</button>
<div id="success" style="color: red;">؟</div>
</form>
</div>
</div>
</div>
</section>
</body>
</html>
I'm stuck with a strange problem where a javascript function isn't getting invoked when I click on submit button(LOG IN) from inside a form.
<html>
<head>
<title></title>
<script>
$('#loginBtn').click(function () {
$(this).html('<img src="http://www.bba-reman.com/images/fbloader.gif" />');
});
</script>
</head>
</html>
Is there anything different I should do here? I'm unable to figure this out. Please could I ask for help?
Remove the extra ) at the end of function hideBtn().
It should look like this
function hideBtn(){
alert('hello');
};
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="app/js/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="app/js/bootstrap/css/bootstrap-theme.min.css">
<link rel="stylesheet" type="text/css" href="app/css/bootsnipLogin.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="app/js/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="app/js/login.js"></script>
<link rel="shortcut icon" href="app/image/favicon.ico" />
</head>
<body >
<div class="container">
<div class="card card-container">
<br/>
<center><img src="app/image/wd-logo.gif"></center>
<br/><br/>
<img id="profile-img" class="profile-img-card" src="app/image/avatar_2x.png" />
<br/>
<p id="profile-name" class="profile-name-card"></p>
<form class="form-signin" action="" method="post">
<input id="username" name="username" placeholder="User Name" class="form-control" required autofocus>
<br/><br/><br/>
<input type="password" id="password" name="password" placeholder="Password" class="form-control" required >
<br/><br/><br/>
<div align="center">
<span id = "errorspan"><?php echo $error; ?></span>
</div>
<br/><br/><br/>
<button class="btn btn-lg btn-primary btn-block btn-signin" type="submit" name="submit" id="loginBtn">SIGN IN</button>
</form><!-- /form -->
</div><!-- /card-container -->
</div><!-- /container -->
<script>
$('#loginBtn').click(function(){
// alert('as');
$(this).html('<img src="http://www.bba-reman.com/images/fbloader.gif" />');
});
</script>
</body>
</html>
There's an extra ');' in your script. Remove it and it will work.
function hideBtn(){
//$(this).html('<img src="http://www.bba-reman.com/images/fbloader.gif" />');
alert('hello');
}
Remove the extra ) then your code will work properly like below
function hideBtn()
{
alert('Hii');
}
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 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
I have checked radio button using Jquery buts its not updated in UI .
Anyone has any idea .below is my snippets...
<!DOCTYPE html>
<html>
<head>
<title>Radio Button</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 getValue() {
alert("Value is :"+$('input[name=animal]:checked').val());
}
function setValue(toBeSetID) {
$("input[name=animal][id=radio-choice-2]").prop("checked", true);
$("label[for='rock']").addClass("ui-radio-on");
alert("Value is :"+$('input[name=animal]:checked').val());
}
</script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Radio Button</h1>
</div><!-- /header -->
<div data-role="content">
<input type="radio" name="animal" id="cat" value="Cat" />
<label for="cat">Cat</label>
<input type="radio" name="animal" id="radio-choice-2" value="choice-2"/>
<label for="radio-choice-2">Dog</label>
<input type="radio" name="animal" id="radio-choice-3" value="choice-3" />
<label for="radio-choice-3">Hamster</label>
<input type="radio" name="animal" id="radio-choice-4" value="choice-4" />
<label for="radio-choice-4">Lizard</label>
<input type="button" value="Get Radio Button Value" onclick="getValue();">
<input type="button" value="Set Radio Button Value" onclick="setValue();">
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
Its Checked by programm as alert box says But not updated in UI.
As Chase says in his answer to your other question, you have to refresh the jQuery Mobile widget when you change the checked property of the underlying form element. This can be done by writing:
$("input[name=animal][id=radio-choice-2]")
.prop("checked", true).checkboxradio("refresh");
That way, you do not have to manipulate the classes yourself, the mobile widget does all the work.
Note in passing that your selector targets an element that has an id attribute, so it can be simplified:
$("#radio-choice-2").prop("checked", true).checkboxradio("refresh");