SUBMIT form using post method without ajax (jquery mobile) - javascript

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

Related

How to switch between 2 forms using javascript?

I've made a login screen. There's 2 forms inside one div. One containing login box, the other is for registration which is hidden in css by using display:none;. Below the login button there's a paragraph with a tag to click to register. How can I make it so when you click the a tag it just switches from login form to register form?
Im at the very begining stage if it comes to javascript.
<div class="login-page">
<div class="form">
<form class="register-form">
<input type="text" placeholder="login"/>
<input type="password" placeholder="password"/>
<input type="text" placeholder="e-mail"/>
<button>create</button>
<p class="message">Already have an account? Sign in!</p>
</form>
<form class="login-form">
<input type="text" placeholder="login"/>
<input type="password" placeholder="password"/>
<button>Sign in</button>
<p class="message">Need an account? Register!</p>
</form>
</div>
</div>
So here's what I've found on codepen but I can't get it to work on my website:
<script> $('.message a').click(function(){$('form').animate({height: "toggle", opacity: "toggle"}, "slow");}); </script>
One reason that your script may not work is if you included it within the <head>...</head> of the document instead of just before the closing </body> tag.
The reason the script would have failed in this case is due to the <body>...</body> not being loaded when your script runs. Check for any errors in your browser's console.
Another reason is perhaps you loaded jQuery after your custom script. For example:
<script>...</script>
<script src="code.jquery.com/jquery-3.3.1.min.js"></script>
instead of:
<script src="code.jquery.com/jquery-3.3.1.min.js"></script>
<script>...</script>
Add some css to hide the login form.
$('.message a').click(
function() {
$('form').animate({height: "toggle", opacity: "toggle"}, "slow");
}
);
.login-form {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="login-page">
<div class="form">
<form class="register-form">
<input type="text" placeholder="login"/>
<input type="password" placeholder="password"/>
<input type="text" placeholder="e-mail"/>
<button>create</button>
<p class="message">Already have an account? Sign in!</p>
</form>
<form class="login-form">
<input type="text" placeholder="login"/>
<input type="password" placeholder="password"/>
<button>Sign in</button>
<p class="message">Need an account? Register!</p>
</form>
</div>
</div>

toggle html login/register form when clicking button

Im making a website which requires uers to login or register if they dont have an account.
I have the following code so far for the login page
<span href="#" class="button" id="toggle-login">Log in</span>
<div id="login">
<h1>Log in</h1>
<form>
<input type="userID" placeholder="UserID" />
<input type="password" placeholder="Password" />
<input type="submit" value="Log in" />
</form>
</div>
and i have Javascript (below) that should hide the login form when clicking on the log in button at the top
however it doesnt seem to hide the login form.
$('#toggle-login').click(function(){
$('#login').toggle();
});
I was wondering if anyone could help me to toggle-hide and unhide the form and if theres a way to have two forms on one page where the user can either hide the login form and display the register form and vice versa
My whole page looks like this:
<!DOCTYPE html>
<head>
<title>Login Form</title>
</head>
<body>
<span href="#" class="btn btn-default" id="toggle-login">Log in</span>
<div id="login">
<h1>Log in</h1>
<form>
<input type="userID" placeholder="UserID" />
<input type="password" placeholder="Password" />
<input type="submit" value="Log in" />
</form>
</div>
<script>
$('#toggle-login').click(function(){
$('#login').toggle();
});
</script>
</body>
</html>
Thanks
You have to include the jQuery library if you are going to use it. Add this to your head section and you should be fine.
<script type="text/javascript" src="//code.jquery.com/jquery-2.1.3.min.js"></script>
<div id="toggle-login">
<form>
<!-- FORM ELEMTNS -->
<input typre="text">
</form>
</div>
<input type="button" id="btn" value="toggle login" >
Jquery:
$("#btn").click(function(){
$("#toggle-login").toggle();
});
Also include the jquery library at head session.
<script type="text/javascript" src="//code.jquery.com/jquery-2.1.3.min.js"></script>

Loading icon keeps loading when submit is pressed

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

Store and send form data to localStorage and webserver with jQuery mobile and PhoneGap

I'm developing an app with jQuery mobile and PhoneGap (Android) on Eclipse. I'm testing the app (index.html) with my chrome browser.
I want to build a login-system, so I've two pages: login and registration, both with html forms. Now I want to store the form data from registration in the localStorage (E-Mail and logged in flag) and send the data (E-Mail and Password) also to my node.js webserver (not implemented yet, because don't know how).
I've tried to do this, but it doesn't work. I've opend the registration form in my Browser (Chrome) and called the JavaScript Console (Resources -> Local Storage), but there is no data.
Then I want to show the data in the login page, but that doesn't work too.
That's my code:
http://jsbin.com/IBEgoyIf/2/edit?html,js,output
or here:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<script src="js/jquery.validate.js"></script>
<script src="js/matchPassword.js"></script>
<script type="text/javascript" charset="utf-8" src="js/cordova.js"></script>
</head>
<body>
<div data-role="page" id="login">
<div data-role="content">
<form action="http://foo.com/login.js" method="POST">
<div data-role="fieldcontain">
<label for="url">E-Mail</label>
<input name="uid" id="email" placeholder="" value="" type="email" class="required">
</div>
<div data-role="fieldcontain">
<label for="url">Password</label>
<input name="upwd" id="pwd" placeholder="" value="" type="password" class="required">
</div>
<input type="submit" data-theme="b" value="Login">
</form>
<p id="myResults">myResults: </p>
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
<div data-role="navbar" data-iconpos="top">
<ul>
<li>Register</li>
</ul>
</div>
</div>
<script type="text/javascript" charset="utf-8">
$('#login').on("pagecreate", function() {
// Wait for device API libraries to load
//document.addEventListener("deviceready", onDeviceReady, false);
// device APIs are available
//function onDeviceReady() {
var userEmail = window.localStorage.getItem("localEmail");
var userFlag = window.localStorage.getItem("localLoggedIn");
document.getElementById("myResults").innerHTML = userEmail;
//}
//}
});
</script>
</div>
<div data-role="page" id="registration">
<div data-role="content">
<form action="#" method="post" id="registerForm">
<fieldset data-role="fieldcontain">
<label for="email">E-Mail:</label>
<input type="email" name="email" id="email" class="required email" minlength="5">
</fieldset>
<fieldset data-role="fieldcontain">
<label for="password">Password:</label>
<input type="password" name="password" id="password" class="required" minlength="5">
</fieldset>
<fieldset data-role="fieldcontain">
<label for="password2">Repeat Password:</label>
<input type="password" name="password2" id="password2" class="required passmatch" minlength="5">
</fieldset>
<input type="submit" data-theme="b" value="Register" onclick="store()">
</form>
</div>
<script type="text/javascript">
function store(){
// Wait for device API libraries to load
//document.addEventListener("deviceready", onDeviceReady, false);
// device APIs are available
//function onDeviceReady() {
var inputEmail = document.getElementById("email");
localStorage.setItem("localEmail", inputEmail.value);
localStorage.setItem("localLoggedIn", true);
window.location="#login";
//}
}
</script>
</div>
</body>
</html>

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.

Categories