Loading icon keeps loading when submit is pressed - javascript

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();
});
});

Related

Using SendGrid with PHP and jQuery Mobile

Ok so I'm stuck here. I've been trying to put up a web form so that I can be notified of users who sign up for my mobile app via e-mail. I want to override ajax's default behavior because EVENTUALLY(as in not at the moment) I want the submission not to be handled for the first few pages.
My goal is to have the user submit the jQuery Mobile form, have ajax send the form data to my php script which will e-mail the user data to me using the SendGrid api. But right now it's not working for me.
The page is hosted on a google compute engine instance running Linux, PHP is correctly installed, the form appears and even refreshes when the SEND button is clicked but no e-mail ='(
BTW SendGrid works fine from my server when launched from the command line using Postfix
The link to the tutorial is here: Sending E-mails with SendGrid using Compute Instance
Help please?
mailer.php followed by postScript.js followed by web-form-complete.php
<?php
$action = $_POST['subscribePage'];
$formData = json_decode($_POST['formData']);
$fname = $formData->{'fname'};
$lname = $formData->{'lname'};
$busname = $formData->{'busname'};
$bustype = $formData->{'bustype'};
$selectmenu = $formData->{'selectmenu'};
$sendgrid = new SendGrid("[-----API-KEY-----]");
$email = new SendGrid\Email();
{ $body = "{$fname} {$lname} \n{$busname} \n{$bustype} \n{$selectmenu}"; }
$email->addTo("admin#my-privatedomain.com")
->setFrom("admin#my-privatedomain.com") // for testing purposes
->setSubject("Verification Request")
->setHtml($body);
$sendgrid->send($email);
?>
$(document).on('pageinit', '#subscribePage', function(){
$(document).on('click', '#submit', function() { // catch the form's submit event
if($('#fname').val().length > 0 && $('#lname').val().length && $('#busname').val().length > 0){
$.ajax({url: 'mailer.php',
data: {action : 'subscribePage', formData : $('#subscribeContent').serialize()},
type: 'post',
async: 'true',
dataType: 'JSON',
beforeSend: function() {
},
complete: function() {
},
success: function (result) {
} else {
alert('Submission Unsuccessful!');
}
},
error: function (request,error) {
alert('Network error has occurred');
}
});
} else {
alert('Please fill all necessary fields');
}
return false;
});
});
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Verification</title>
<link href="style.css" rel="stylesheet" type="text/css">
<!--For JQuery mobile UI widgets -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
</head>
<body>
<div data-role="page" id="subscribePage">
<div data-role="header">
<h1>Verification</h1>
</div><!-- /header -->
<!-- Start Here: Web Form tutorial -->
<div role="main" class="ui-content" id="subscribeBox">
<h2><span class="thin">Create A Verified</span> XXXX <span class="thin">Account</span></h2>
<p>Please fill out the following information to receive our verification. Verification should take less than 24 hours.</p>
<form id="subscribeContent" class="subscribeForm" data-ajax="false" >
<!-- name fields here -->
<div data-role="fieldcontain">
<input id="fname" type="text" placeholder="First Name*" Name="First Name" required><br>
</div>
<div data-role="fieldcontain">
<input id="lname" type="text" placeholder="Last Name*" name="Last Name" required><br>
</div>
<div data-role="fieldcontain">
<input id="busname" type="text" placeholder="Business/Organization Name*" name="Business/Organization Name" required><br>
<div data-role="fieldcontain">
<!-- Other form fields here.... -->
<!-- radio buttons here -->
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>Option</legend>
<input type="radio" class="bustype" name="bustype" id="radio1" value="Local Business/Organization" />
<label for="local">Local Business/Organization</label>
<input type="radio" class="bustype" name="bustype" id="radio2" value="Worldwide Brand" />
<label for="worldwide">Worldwide Brand</label>
</fieldset>
</div>
<!-- dynamic fields here -->
<div data-role="fieldcontain">
<label for="selectmenu" class="select">Options:</label>
<select name="selectmenu" id="selectmenu">
<option value="bank">Bank</option>
<option value="car_dealer">Car Dealer</option>
<option value="car_rental">Car Rental</option>
<option value="car_repair">Car Repair</option>
<!-- Other SelectMenu options here -->
</select>
</div>
<!-- submit button here -->
<input id="submit" type="submit" value="Send">
</form>
<div data-role="footer">
<h4>XXXX App</h4>
</div> <!-- /main -->
</div> <!-- /header -->
</div> <!-- /page -->
<script src="postScript.js"></script>
</body>
</html>
There are issues in your all scripts. Try this:
web-form-complete.php
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Verification</title>
<link href="style.css" rel="stylesheet" type="text/css">
<!--For JQuery mobile UI widgets -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
</head>
<body>
<div data-role="page" id="subscribePage">
<div data-role="header">
<h1>Verification</h1>
</div><!-- /header -->
<!-- Start Here: Web Form tutorial -->
<div role="main" class="ui-content" id="subscribeBox">
<h2><span class="thin">Create A Verified</span> XXXX <span class="thin">Account</span></h2>
<p>Please fill out the following information to receive our verification. Verification should take less than 24 hours.</p>
<form id="subscribeContent" class="subscribeForm" data-ajax="false" >
<!-- name fields here -->
<div data-role="fieldcontain">
<input id="fname" type="text" placeholder="First Name*" Name="fname" required><br>
</div>
<div data-role="fieldcontain">
<input id="lname" type="text" placeholder="Last Name*" name="lname" required><br>
</div>
<div data-role="fieldcontain">
<input id="busname" name="busname" placeholder="Business/Organization Name*" required><br>
<div data-role="fieldcontain">
<!-- Other form fields here.... -->
<!-- radio buttons here -->
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>Option</legend>
<input type="radio" class="bustype" name="bustype" id="radio1" value="Local Business/Organization" />
<label for="local">Local Business/Organization</label>
<input type="radio" class="bustype" name="bustype" id="radio2" value="Worldwide Brand" />
<label for="worldwide">Worldwide Brand</label>
</fieldset>
</div>
<!-- dynamic fields here -->
<div data-role="fieldcontain">
<label for="selectmenu" class="select">Options:</label>
<select name="selectmenu" id="selectmenu">
<option value="bank">Bank</option>
<option value="car_dealer">Car Dealer</option>
<option value="car_rental">Car Rental</option>
<option value="car_repair">Car Repair</option>
<!-- Other SelectMenu options here -->
</select>
</div>
<!-- submit button here -->
<input id="submit" type="submit" value="Send">
</form>
<div data-role="footer">
<h4>XXXX App</h4>
</div> <!-- /main -->
</div> <!-- /header -->
</div> <!-- /page -->
<script src="postScript.js"></script>
</body>
</html>
postScript.js
$(document).ready(function(){
$(document).on('click', '#submit', function(e) { // catch the form's submit event
if($('#fname').val().length > 0 && $('#lname').val().length && $('#busname').val().length > 0){
console.log("in...");
var data = $('#subscribeContent').serialize();
$.ajax({url: 'mailer.php',
data: data,
type: 'post',
async: 'true',
dataType: 'JSON',
beforeSend: function() {
},
complete: function() {
},
success: function (result) {
//write your proper condtion
console.log(result);
},
error: function (request,error) {
alert('Network error has occurred');
console.log(error);
}
});
} else {
alert('Please fill all necessary fields');
}
return false;
});
});
mailer.php
<?php
//$action = $_POST['action'];
$fname = $_POST['fname'];
$lname = $_POST['lname'];
$busname = $_POST['busname'];
$bustype = $_POST['bustype'];
$selectmenu = $_POST['selectmenu'];
$sendgrid = new SendGrid("[-----API-KEY-----]");
$email = new SendGrid\Email();
{ $body = "{$fname} {$lname} \n{$busname} \n{$bustype} \n{$selectmenu}"; }
$email->addTo("admin#my-privatedomain.com")
->setFrom("admin#my-privatedomain.com") // for testing purposes
->setSubject("Verification Request")
->setHtml($body);
$sendgrid->send($email);
?>
Also make sure you have included SendGrid library in your file and also you have set valid API-KEY.

Multiplying two input values and showing the result in third box in Jquery Mobile form

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;

Phonegap simple javascript not running (onClick issue?) - Both Android and iOS

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");

problem with my drop down login box?

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.

SUBMIT form using post method without ajax (jquery mobile)

I'm doing login form which looks like:
<head>
<script src="http://code.jquery.com/jquery-1.5.min.js"></script>
<script src="../sp/jqm/jquery.mobile.js"></script>
<script type="text/javascript">
$(document).bind("mobileinit", function(){
$.extend( $.mobile , {
ajaxFormsEnabled: false,
ajaxEnabled: true
});
});
</script>
<link rel="stylesheet" href="../sp/jqm/jquery.mobile.min.css" />
</head>
<body>
<div data-role="page" data-theme="b">
<div data-role="header">
<h1>Login</h1>
</div>
<div data-role="content">
<form action="login_act.asp" method="POST" id="frm_prijava" name="frm_prijava">
<div data-role="fieldcontain">
<label for="username"> User name:</label>
<input type="text" name="username" id="username" value="" />
<label for="pass">Password:</label>
<input type="password" name="pass" id="pass" value="" />
<input type="submit" name="sbm" id="sbm" data-role="button" value="Enter" />
</div>
</form>
</div>
</div>
</body>
When i try to submit form, dialog pops up and nothing happens... it just loads the page...
how can I submit this form without ajax?
Try executing your mobileinit event before jQuery Mobile is loaded
The mobileinit event is triggered immediately upon execution, you'll need to bind your event handler before jQuery Mobile is loaded.
Cheers

Categories