I have two pages index.html and external.html.In index.html i have two text field. Inserting some text in those text field and clicking on a button i goes to external.html page.This external.html page has one button linking to index.html. When in click in that button it moves me to index.html.
Now the problem is when i move from external.html to index.html, the text fields remainds its previous value. i wanted it to clear its previous value when coming to index.html page. How to do that, please help me.
index.html
<section id="firstpage" data-role="page">
<header data-role="header" data-position="fixed">
<h1>First</h1>
</header>
<div data-role="content" >
<script type="text/javascript" >
$( function(){
$( '#name_field' ).val( "" );
});
$(document).ready(function () {
$('.clearme').focus(function() {
$(this).val("");
});
});
</script>
<label for="name" >Name:</label>
<input type="text" name="name" id="name_field" value="" class="clearme" placeholder="Enter Name"/>
<label for="email">Email:</label>
<input type="email" name="email" id="email_field" value="" placeholder="Enter Email Id" />
<input type="submit" id="button" value="External Page" data-theme="b" onclick="_gotopage( 'http://localhost/test/external.html' );"/>
</div>
<footer data-role="footer" data-theme="d" >
</footer>
</section>
external.html
<section id="secondpage" data-role="page">
<header data-role="header" data-position="fixed">
<h1>External</h1>
</header>
<div data-role="content" >
<script type="text/javascript" >
</script>
<input type="submit" id="comment_enter_button" value="Index Page" data-theme="b" onclick="_gotopage( 'http://localhost/test/index.html' );"/>
</div>
<footer data-role="footer" data-theme="d" >
</footer>
</section>
script.js
function gotopage( gotopage )
{
$.mobile.changePage($( gotopage ), { transition: "slide"});
}
function _gotopage( page )
{
$.mobile.changePage( page);
}
Is something like this what you're looking for?:
$(document).on('pageshow', function () {
$('.clearme').val("");
});
Related
I am using phonegap to build my and I am trying to create a function that will refresh certain elements on pages in my app. I have been following another solution I found here
Jquery-Mobile: How to reload/refresh the internal page
The code is working perfectly in my browser but I can't get it to work on my android. I have tried changing to several different versions of both jQuery and jQuery mobile but neither works. I am new to working with phonegap and jQuery so would appreciate any help.
Javascript:
<script type="text/javascript">
$('#page_3').live('pageshow',function(event, ui) {
// refresh specific element
$('#refresh').val('');
});
$('#page_2').live('pageshow',function(event, ui) {
// refresh all elements
var allInputs = $(':input');
allInputs.val('');
});
</script>
HTML:
<body>
<div data-role="page" id="page_1" >
<div data-role="content" name="contentlogin">
Navigate to page 2
Navigate to page 3
Yeah Page 1
</div>
</div>
<div data-role="page" id="page_2" >
<div data-role="content" name="contentlogin">
Navigate to page 1
<!-- Some Form elements are there -->
Hello we are on Page 2<br />Refresh All Elements<br /><br />
<label for="basic1">Text Input 1 (Refresh):</label>
<input type="text" name="name1" id="basic1" value="" />
<label for="refresh1">Text Input 2 (Refresh):</label>
<input type="text" name="name21" id="refresh1" value="" />
<br /> Enter in some values, Navigate to Page 1 and back to Page 2
</div>
</div>
<div data-role="page" id="page_3" >
<div data-role="content" name="contentlogin">
Navigate to page 1
<!-- Some Form elements are there -->
Hello we are on Page 3<br />Refresh Specific Elements<br /><br />
<label for="basic">Text Input 1:</label>
<input type="text" name="name" id="basic" value="" />
<label for="refresh">Text Input 2 (Refresh):</label>
<input type="text" name="name2" id="refresh" value="" />
<br /> Enter in some values, Navigate to Page 1 and back to Page 3
</div>
</div>
</body>
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'm learning jquery and jquery mobile. I try this; when next button is clicked, if input texts are empty, alert will be given. But how can i check all text values in the same method?
And if these are empty how can i stop next button action? Thanks.
<!DOCTYPE html />
<html>
<head>
<title>Ebru Sezal JQuery Mobile</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>
<link rel="stylesheet" type="text/css" href="StyleSheet.css" />
<script type="text/javascript">
$(document).ready(function () {
$(".nextBtn").click(function () {
$('input:text').each(function (i) {
var uText = $(this).val();
if (!uText)
alert("alanlar boş olamaz!")
});
});
});
/*$("#nextBtn").click(function () {
// $('input[type="text"]').attr('required placeholder')
$(function () {
var values = $('input[type="text"]').map(function () {
return this.value
}).get()
})
$('input[type="text[]"]').each(function () {
alert($(this).val());
});*/
</script>
</head>
<body>
<div data-role="page" data-title="pOne" id="mainPage">
<div data-role="header" data-position="fixed">
<h1>Logo</h1>
</div>
<div data-role="popup" id="mainPopup">
<ul data-role="listview" data-inset="true" data-theme='d'>
<li data-icon="plus">New User</li>
<li data-icon="delete"><a href="#" >Exit</a></li>
</ul>
</div>
<div data-role="content">
<label for:"username">Username:</label>
<input type="text" />
<label for:"username">Password:</label>
<input type="password"/>
<div data-role="controlgroup" data-type="horizontal">
<a href="#" data-role="button" data-inline="true" >Sign-in</a>
Log-in
</div>
</div>
<div data-role="footer" data-position="fixed">
footer
</div>
</div>
<div data-role=page id="registerPage1">
<div data-role="header" data-position="fixed"><h1>Registration</h1></div>
<div data-role="content">
<div data-role="fieldcontainer">
<label for:"name">Name:</label>
<input type="text" id="name" required placeholder="Enter your name">
</div>
<div data-role:"fieldcontainer">
<label for:"surname">Surname:</label>
<input type="text" id="surname" required placeholder="Enter your surname">
</div>
<div data-role:"fieldcontainer">
<label for:"email">E-mail:</label>
<input type="email" id="email" required placeholder="Enter your e-mail">
</div>
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li> Back</li>
<li> Next </li>
</ul>
</div>
</div>
</div>
<div data-role="page" id="registerPage2">
<div data-role="header"><h1>Registration</h1></div>
<div data-role="content">
<div data-role="fieldcontainer">
<label for="number">Number:</label>
<input type="number">
<label for="birthDay">Birthday:</label>
<input type="date">
<label for="city">City:</label>
<input list="cities" name="cities" >
<datalist id="cities">
<option value="İzmir"></option>
<option value="İstanbul"></option>
<option value="Ankara"></option>
<option value="Bursa"></option>
<option value="Antalya"></option>
<option value="Denizli"></option>
</datalist>
</div>
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li>Back</li>
<li>Next</li>
</ul>
</div>
</div>
</div>
</body>
</html>
Check the variable before you proceed.
$(document).ready(function () {
$(".nextBtn").click(function () {
var text = $(this).val();
if (text){
//process
}
else{
//failed to process, give alert
}
});
});
What you are doing is correct only. Just try (uText == "") in if condition:
$(document).ready(function () {
$(".nextBtn").click(function () {
$('input:text').each(function (i) {
var uText = $(this).val();
if (uText == "")
alert("alanlar boş olamaz!")
return;
});
});
});
You can do this:
$(".nextBtn").click(function () {
// Get all the empty input textbox
var $inputs = $('input:text').filter(function () {
return $.trim(this.value) === '';
});
// If the number of empty textbox is more then 0
if($inputs.length > 0){
alert("alanlar boş olamaz!");
return false; // stop the next button action
}
return true;
});
Instead of the below code:
if (!uText)
alert("alanlar boş olamaz!")
use the below code:
if (!uText || uText == '') {
alert("alanlar boş olamaz!");
return false;
}
you can use
if(uText.length==0)
I am new to PHP, i started developing application using php, please look into my code
index.php
<?php require_once('./config.php'); ?>
<?php
/*
* Following code will get single product details
* A product is identified by product id (pid)
*/
// array for JSON response
$response = array();
// check for required fields
if (isset($_POST['name'])) {
$title = $_POST['name'];
$company = $_POST['company'];
require_once('./db_connect.php');
// connecting to db
$db = new DB_CONNECT();
// mysql inserting a new row
$result = mysql_query("INSERT INTO user(name,company) VALUES('$title','$company')");
}
?>
<html>
<head>
<link type="text/css" rel="Stylesheet" href="style.css" />
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript">
$(window).load(function () {
var tabContents = $(".tab_content").hide(),
tabs = $("ul.tabs li");
tabs.first().addClass("active").show();
tabContents.first().show();
tabs.click(function() {
var $this = $(this),
activeTab = $this.find('a').attr('href');
if(!$this.hasClass('active')){
$this.addClass('active').siblings().removeClass('active');
tabContents.hide().filter(activeTab).fadeIn();
}
return false;
});
$(".tabbutton").click(function () {
var nextTab = parseInt($("li.active").attr("id"), 10) + 1;
if (nextTab === 4) { nextTab = 1; }
tabs.removeClass("active");
$("#" + nextTab).addClass("active");
tabContents.hide();
$("#tab" + nextTab).fadeIn("slow");
});
});
</script>
<script type="text/javascript" src="https://js.stripe.com/v1/"></script>
<!-- jQuery is used only for this example; it isn't required to use Stripe -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
// this identifies your website in the createToken call below
Stripe.setPublishableKey("<?php echo $stripe['publishable_key']; ?>");
function stripeResponseHandler(status, response) {
if (response.error) {
// re-enable the submit button
$('.submit-button').removeAttr("disabled");
// show the errors on the form
$(".payment-errors").html(response.error.message);
} else {
var form$ = $("#payment-form");
// token contains id, last4, and card type
var token = response['id'];
// insert the token into the form so it gets submitted to the server
form$.append("<input type='hidden' name='stripeToken' value='" + token + "' />");
// and submit
form$.get(0).submit();
}
}
$(document).ready(function() {
$("#payment-form").submit(function(event) {
// disable the submit button to prevent repeated clicks
$('.submit-button').attr("disabled", "disabled");
// createToken returns immediately - the supplied callback submits the form if there are no errors
Stripe.createToken({
number: $('.card-number').val(),
cvc: $('.card-cvc').val(),
exp_month: $('.card-expiry-month').val(),
exp_year: $('.card-expiry-year').val()
}, stripeResponseHandler);
return false; // submit from callback
});
});
Body part
<ul class="tabs clearfix">
<li id="1">Tab1</li>
<li id="2">Tab2</li>
<li id="3">Tab3</li>
</ul>
<div class="tab_container">
<div id="tab1" class="tab_content">
<form method="post">
<p>
<label>Name:</label> <input type="text" name="name">
</p>
<p>
<label>Company:</label> <input type="text" name="company">
</p>
<input type="submit" value="SAVE" class="tabbutton"/>
</form>
</div>
<div id="tab2" class="tab_content">
<form id="payment-form" action="charge.php" method="post">
<h3>Purchase a quote by Oscar Wilde today! Only $535! Limited supply and going fast, buy now!!</h3>
<!-- to display errors returned by createToken -->
<span class="payment-errors"></span>
<form action="charge.php" method="POST" id="payment-form">
<div class="form-row">
<label>Card Number</label>
<input type="text" size="20" autocomplete="off" class="card-number" />
</div>
<div class="form-row">
<label>CVC</label>
<input type="text" size="4" autocomplete="off" class="card-cvc" />
</div>
<div class="form-row">
<label>Expiration (MM/YYYY)</label>
<input type="text" size="2" class="card-expiry-month"/>
<span> / </span>
<input type="text" size="4" class="card-expiry-year"/>
</div>
<button type="submit" class="submit-button">Buy!</button>
</form>
</form>
</div>
<div id="tab1" class="tab_content">
<p>Tab 3 Content Goes Here...</p>
</div>
</div>
</body>
</html>
In Tab1 I'm saving data into database. Whenever user clicks on the save button the data needs to be saved into database and it will go to Tab2. I am successful while saving the data. My problem is it is not going to Tab2 after saving the data. When we click on the save button, the tab2 is just blinking but the page is still showing tab1 content. I want that whenever the user clicks on the save button the data needs to be saved in database and it will go to Tab2 content.
Any suggestions?
try this approach, will solve your issue:
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
$(window).load(function() {
$(".tab_content").hide();
tabs = $("ul.tabs li");
tabs.first().addClass("active").show();
$(".tab_content").first().show();
tabs.click(function() {
var $this = $(this), activeTab = $this.find('a').attr('href');
if (!$this.hasClass('active')) {
$this.addClass('active').siblings().removeClass('active');
$(".tab_content").hide().filter(activeTab).fadeIn();
}
return false;
});
$("#tabbutton").click(function() {
$("#2").addClass('active').siblings().removeClass('active');
$(".tab_content").hide();
$("#tab2").fadeIn();
});
});
</script>
</head>
<body>
<ul class="tabs clearfix">
<li id="1">Tab1</li>
<li id="2">Tab2</li>
<li id="3">Tab3</li>
</ul>
<div class="tab_container">
<div id="tab1" class="tab_content">
<p>Tab 1 Content Goes Here...</p>
<input type="button" id="tabbutton"/>
</div>
<div id="tab2" class="tab_content">
<p>Tab 2 Content Goes Here...</p>
</div>
<div id="tab3" class="tab_content">
<p>Tab 3 Content Goes Here...</p>
</div>
</div>
</body>
</html>
also you have couple of issues in your code.
first, you have added the form tag twice in your tab2 div. Remove one.
<div id="tab2" class="tab_content">
<form id="payment-form" action="charge.php" method="post">
<h3>Purchase a quote by Oscar Wilde today! Only $535! Limited supply and going fast, buy now!!</h3>
<!-- to display errors returned by createToken -->
<span class="payment-errors"></span>
<form action="charge.php" method="POST" id="payment-form">
<div class="form-row">
<label>Card Number</label>
<input type="text" size="20" autocomplete="off" class="card-number" />
</div>
<div class="form-row">
<label>CVC</label>
<input type="text" size="4" autocomplete="off" class="card-cvc" />
</div>
<div class="form-row">
<label>Expiration (MM/YYYY)</label>
<input type="text" size="2" class="card-expiry-month"/>
<span> / </span>
<input type="text" size="4" class="card-expiry-year"/>
</div>
<button type="submit" class="submit-button">Buy!</button>
</form>
</form>
</div>
secondly, your tab3 div has the same id as tab1. i think this is causing the problem.
change it to tab3 and try.
<div id="tab1" class="tab_content">
<p>Tab 3 Content Goes Here...</p>
</div>
I have 2 pages(i.e., page_1 and page_2) in the container page(i.e., page.html).In the first page i have only one button if you click on that then it will navigates to the second page.when you come back from the second page to First page and once again click on the button for navigating to the second page at this time i want to reload/refresh the page. i tried but i am not getting please can anybody help me.
Here the code:
<div data-role="page" id="page_1" >
<div data-role="content" id="contentlogin">
Navigation
</div>
</div>
<div data-role="page" id="page_2" >
<div data-role="content" id="contentlogin">
//Some Form elements are there
</div>
</div>
<script type="text/javascript">
function refresh()
{
$.mobile.changePage($("#page_2"), {transition: "pop",reloadPage: true});
}
</script>
thanks
You could try something like this:
http://jsfiddle.net/sJdfy/4/
JS
$('#page_3').live('pageshow',function(event, ui) {
// refresh specific element
$('#refresh').val('');
});
$('#page_2').live('pageshow',function(event, ui) {
// refresh all elements
var allInputs = $(':input');
allInputs.val('');
});
HTML
<div data-role="page" id="page_1" >
<div data-role="content" name="contentlogin">
Navigate to page 2
Navigate to page 3
Yeah Page 1
</div>
</div>
<div data-role="page" id="page_2" >
<div data-role="content" name="contentlogin">
Navigate to page 1
<!-- Some Form elements are there -->
Hello we are on Page 2<br />Refresh All Elements<br /><br />
<label for="basic1">Text Input 1 (Refresh):</label>
<input type="text" name="name1" id="basic1" value="" />
<label for="refresh1">Text Input 2 (Refresh):</label>
<input type="text" name="name21" id="refresh1" value="" />
<br /> Enter in some values, Navigate to Page 1 and back to Page 2
</div>
</div>
<div data-role="page" id="page_3" >
<div data-role="content" name="contentlogin">
Navigate to page 1
<!-- Some Form elements are there -->
Hello we are on Page 3<br />Refresh Specific Elements<br /><br />
<label for="basic">Text Input 1:</label>
<input type="text" name="name" id="basic" value="" />
<label for="refresh">Text Input 2 (Refresh):</label>
<input type="text" name="name2" id="refresh" value="" />
<br /> Enter in some values, Navigate to Page 1 and back to Page 3
</div>
</div>