I want to simulate a mobile app. I have a login in page. Is it possible to validate the form and send the user to another page. I am using a single html page for my mobile app. I do not want to use PHP. What would be the best method to take ? getElementbyID ?
<form id="login" name="login" action="" method="">
<div data-role="fieldcontain">
<label for="username"></label>
<input type="email" name="username" id="username" value="" placeholder="Username" ``required="required"/><br />
</div>
<div data-role="fieldcontain">
<label for="password"></label>
<input type="password" name="password" id="password" value="" placeholder="Password"/><br />
</div>
<a data-role="button" type="submit" name="loginSubmit" id="loginSubmit" placeholder="Login" />Login</a>
</form>
try this one using javascript
formData = {
username: $("#username").val(),
password: $("#password").val()
}
if ($("#username").val() == '') {
alert("Enter your username");
} else if ($("#password").val() == '') {
alert("Enter your password");
} else {
$.ajax({
type: 'POST',
contentType: 'application/json',
url: "https://www.example.com/login.php",
dataType: "json",
data: formData,
success: function(data) {
//success handler
},
error: function(data) {
//error handler
}
});
}
Related
It used to work fine, and I don't remember changing anything in these files, but now nothing happens when I click on submit form. What may cause the problem?
Snippet:
// And here's the ajax request file *auth_ajax.js*:
$(function() {
$('form').on('submit', function(e) {
e.preventDefault();
$.ajax({
type: 'post',
url: 'check_user.php',
dataType: 'json',
data: $('form').serialize(),
success: function(response) {
if (response['found'] === 'true') {
location.href = 'index.php';
} else {
alert('Incorrect username or password');
}
},
error: function(jqXHR, textStatus, errorThrown) {
alert(errorThrown);
}
});
});
});
<!-- Here's my php file: -->
<h1 id="header">Enter your data here</h1>
<form>
<label for="login">Login</label>
<input type="text" id="login" name="login" placeholder="Enter your login here" required><br>
<label for="password">Password</label>
<input type="password" id="password" name="password" placeholder="Enter your password here" required><br>
<input type="submit" value="Log in">
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
This route work?
url: 'check_user.php',
Try yourDomain/check_user.php, check your directory for a real path
I'm using Formsubmit to send contact us form to my email and so far it's working.
But I would like when user send the form it does not redirect it to the source thank you page instead I'd like to display just thank you text on the same page. I'd like to use my own.
So I followed the documentation and I came up with the following :
Unfortunately when I try validate the form button it does not work
<form id="contactForm" action="https://formsubmit.co/el/myemail" method="POST">
<input type="text" name="name">
<input type="phone" name="phone" inputmode="tel">
<input type="hidden" name="_subject" value="Partenaires">
<input type="email" name="email" >
<input type="text" name="message" >
<button class="btn btn-primary border rounded-0 shadow-lg d-lg-flex justify-content-lg-center"
type="submit" name="sendData">Send</button>
<!-- <input type="hidden" name="_next" value="thanks.html">-->
<script type="text/javascript">
var frm = $('#contactForm');
var msg_res ='';
frm.submit(function (e) {
e.preventDefault();
$.ajax({
type: frm.attr('method'),
method: "POST",
url: "https://formsubmit.co/el/vupawa",
dataType: 'html',
accepts: 'application/json',
data: frm.serialize(),
success: function (response) {
$("#message").html(response);
if(response != msg_res){
msg_res = response; //store new response
alert('New message received');
}
},
error: function (response) {
console.log('An error occurred.');
console.log(response);
}
complete: function(response){
setTimeout(ajax,1000);
}
});
});
});
</script>
Note : that uncommenting this line <input type="hidden" name="_next" value="thanks.html"> will take validate the form and go through another page which is not what I want here.
Any ideas ?
To Prevent Submission You should return false in
frm.submit(function (e) {
return false;
})
Or in form tag
<form onSubmit="return false">
var frm = $('#contactForm');
var msg_res ='';
frm.submit(function (e) {
e.preventDefault();
$.ajax({
type: frm.attr('method'),
method: "POST",
url: "https://formsubmit.co/el/vupawa",
dataType: 'html',
accepts: 'application/json',
data: frm.serialize(),
success: function (response) {
$("#message").html(response);
if(response != msg_res){
msg_res = response; //store new response
alert('New message received');
}
},
error: function (data) {
console.log('An error occurred.');
console.log(data);
}
});
return false; // here a change
});
<form id="contactForm" action="https://formsubmit.co/el/myemail" method="POST">
<input type="text" name="name">
<input type="phone" name="phone" inputmode="tel">
<input type="hidden" name="_subject" value="Partenaires">
<input type="email" name="email" >
<input type="text" name="message" >
<button class="btn btn-primary border rounded-0 shadow-lg d-lg-flex justify-content-lg-center"
type="submit" name="sendData">Send</button>
<!-- <input type="hidden" name="_next" value="thanks.html">-->
I am trying to find a way to prepend our domain name if it is missing or was not typed in.
Below is the code for my form. For the username I would like it to check if domainname\ is there, and if so proceed as normal, but if domainname\is not there, than add it. The end results would be domainname\username. I tried doing $('DOMAIN\').val() + before the username, but that did not work.
$(document).ready(function () {
// Web Proxy request to fetch the configuration
ajaxWrapper({ url: 'Home/Configuration', dataType: 'xml', success: configSuccess });
$('form').submit(function () {
var username = $('#username').val(),
password = $('#password').val();
clearMessage();
if (!username || !password) {
showMessage('Enter a username and a password');
return false;
}
// Web Proxy request to log the user on
ajaxWrapper({
url: 'PostCredentialsAuth/Login',
dataType: 'xml',
success: loginSuccess,
error: loginError,
data: { username: username, password: password }
});
return false;
});
<form>
<fieldset>
<legend>Enter credentials</legend>
<p>
<label for="username">User name:</label>
<input type="text" id="username" name="username" />
</p>
<p>
<label for="password">Password:</label>
<input type="password" id="password" name="password" />
</p>
</fieldset>
<input type="submit" id="login-button" name="login-button" value="Log On" />
</form>
Simple indexOf() check and possible string concatenation will do the trick:
$(document).ready(function () {
// Web Proxy request to fetch the configuration
ajaxWrapper({ url: 'Home/Configuration', dataType: 'xml', success: configSuccess });
$('form').submit(function () {
var username = $('#username').val(),
password = $('#password').val();
clearMessage();
if (!username || !password) {
showMessage('Enter a username and a password');
return false;
}
// Ensure the user name is correct...
// If the username has the domain string at position 0, then
// the username is correct and just use it as normal, but if
// not, username needs to have the domain prepended.
// Because of the backslashes in the strings, they need to be
// escaped with "\\"
username = username.indexOf("domain\\") === 0 ? username : "domain\\" + username;
// Web Proxy request to log the user on
ajaxWrapper({
url: 'PostCredentialsAuth/Login',
dataType: 'xml',
success: loginSuccess,
error: loginError,
data: { username: username, password: password }
});
return false;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<fieldset>
<legend>Enter credentials</legend>
<p>
<label for="username">User name:</label>
<input type="text" id="username" name="username" />
</p>
<p>
<label for="password">Password:</label>
<input type="password" id="password" name="password" />
</p>
</fieldset>
<input type="submit" id="login-button" name="login-button" value="Log On" />
</form>
Explanation :
Here's the situation goes . I'm searching a way to call another Ajax function when the data is success but I'm unable to do due to unknown circumstances.
Code:
---HTML Form :
<form accept-charset="utf-8" id="contactForm1" style="margin-top:;" action="" method="post">
<input class="wf-input wf-req wf-valid__email" type="text" name="email"
data-placeholder="yes" id="email" value="Enter Your Email Here" onfocus="
if (this.value == 'Enter Your Email Here')
{ this.value = ''; }" onblur="if (this.value == '')
{ this.value='Enter Your Email Here';} " style="margin-top:;">
</input>
<br />
<input type="submit" class="wf-button" name="submit1" value=" " style="display: inline !important; margin-top:-10px !important;"></input>
</form>
----Ajax Code :
$(function() {
$('.wf-button').click(function (e) {
e.preventDefault();
var email = $('#email').val();
var frm = this;
$.ajax({
type: 'POST',
dataType: 'JSON',
url: 'check.php',
data: {
email: email
},
success: function (data) {
if (data.status == 'success') {
// Need to place it here
frm.submit();
} else {
alert('The e-mail address entered is not valid.');
}
}
});
});
---Another form with HTML in the same page:-
<form method="post" id ="aweber" class="af-form-wrapper" action="http://www.aweber.com/scripts/addlead.pl" >
<div style="display: none;">
<input type="hidden" name="meta_web_form_id" value="947846900" />
<input type="hidden" name="meta_split_id" value="" />
<input type="hidden" name="listname" value="awlist3599001" />
<input type="hidden" name="redirect" value="http://www.aweber.com/thankyou.htm?m=default" id="redirect_37ecf313df3b6f27b92c34c2c00ef203" />
<input type="hidden" name="meta_adtracking" value="ibb_test" />
<input type="hidden" name="meta_message" value="1" />
<input type="hidden" name="meta_required" value="email" />
<input type="hidden" name="meta_tooltip" value="" />
</div>
<div id="af-form-947846900" class="af-form"><div id="af-body-947846900" class="af-body af-standards">
<div class="af-element">
<label class="previewLabel" for="awf_field-66127140">Email: </label>
<div class="af-textWrap"><input class="text" id="awf_field-66127140" type="text" name="email" value="" />
</div><div class="af-clear"></div>
</div>
<div class="af-element buttonContainer">
<<input name="submitaw" id="submitaw" class="wf-button" type="submit" value="Submit" tabindex="501" />
<div class="af-clear"></div>
</div>
</div>
</div>
<div style="display: none;"><img src="http://forms.aweber.com/form/displays.htm?id=nCzsHCxsnAwM" alt="" /></div>
</form>
Scenarion :
I would when the Ajax trigger when the user click the submit button for the ID ContactForm1.
Before submitting the form , I want the Ajax to send the same value to the other form in the same page and click submit .
How?
try this:
$('#aweber').submit(function (e) {
e.preventDefault();
var email = $('#email').val();
var frm = this;
$.ajax({
type: 'POST',
dataType: 'JSON',
url: 'check.php',
data: {
email: email
},
success: function (data) {alert('first form submitted');
if (data.status == 'success') {
frm.submit();
} else {
alert('The e-mail address entered is not valid.');
}
}
});
});
submit form if success always reload page.
Using ajax post to server.
You can try it:
$.when( $.ajax( "/page1.php" ), $.ajax( "/page2.php" ) ).then( myFunc, myFailure );
http://api.jquery.com/jquery.when/
success in my AJAX call doesn't trigger at all, and I can't figure out why. None of the alerts specified in the AJAX file are popping up.
The form:
<form onsubmit="check_reg();return false;" method="post" name="reg_form" id="reg">
<label class="error" id="reg_error"></label>
<label for="login_reg">Login</label>
<input type="text" name="login" id="login_reg" placeholder="Login">
<label for="email_reg">Email</label>
<input type="text" name="email" id="email_reg" placeholder="Email">
<label for="haslo_reg">Password</label>
<input type="password" name="password" id="pass_reg" placeholder="Password">
<button type="submit">Register</button>
</form>
reg_script.php:
if (!empty($_POST['login']) && !empty($_POST['password']) && !empty($_POST['email'])) {
$login = $mysqli->real_escape_string($_POST['login']);
$password = $mysqli->real_escape_string($_POST['password']);
$email = $mysqli->real_escape_string($_POST['email']);
if ($mysqli->query("INSERT INTO users (login, password, email) VALUES('$login', '$password', '$email')")) {
echo "ok";
}
else {
echo "error";
}
}
else {
echo "empty";
}
AJAX
function check_reg() {
$.ajax({
url: 'reg_script.php',
type: "POST",
data: "login=" + $('#login_reg').val() + "&password=" + $('#pass_reg').val() + "&email=" + $('#email_reg').val(),
success: function(result) {
if (result == 'ok') {
alert('ok');
}
else if (result == 'error') {
alert('error');
}
else if (result == 'empty') {
alert('empty');
}
},
});
}
Any ideas what the problem might be?
EDIT: I should've added that I used this tutorial: http://developertips.net/post/display/web/3/dynamic-login-form-with-ajax-php/ and managed to get the login form working just fine, it's just the registration form that's acting up.
Change
<form onsubmit="check_reg();return false;" method="post" name="reg_form" id="reg">
<label class="error" id="reg_error"></label>
<label for="login_reg">Login</label>
<input type="text" name="login" id="login_reg" placeholder="Login">
<label for="email_reg">Email</label>
<input type="text" name="email" id="email_reg" placeholder="Email">
<label for="haslo_reg">Password</label>
<input type="password" name="password" id="pass_reg" placeholder="Password">
<button type="submit">Register</button>
</form>
to:
<form>
<label class="error" id="reg_error"></label>
<label for="login_reg">Login</label>
<input type="text" name="login" id="login_reg" placeholder="Login">
<label for="email_reg">Email</label>
<input type="text" name="email" id="email_reg" placeholder="Email">
<label for="haslo_reg">Password</label>
<input type="password" name="password" id="pass_reg" placeholder="Password">
<input type="button" onclick="check_reg()">Register</button>
</form>
That way, your HTML file will call your check_reg() which then calls your php-file. You don't need method=post and so on in HTML-file. All this information is already in your function.
Btw, your data-attribute in check_reg() function, I recommend that you change that to serializeArray() instead.
One more thing I just realized:
success: function(result) {
The result-variable contains the error-messages form the serverside (php). so all you have to do is:
success: function(result) {
alert(result);
Here you are using POST request, but sending data as querystring as used for GET request.
Use data in form of object:
data: {'login': $('#login_reg').val() ,'password':$('#pass_reg').val() ,'email':$('#email_reg').val()}
You can also check with print_r($_POST) in your php file, so that you can see, whether data is posted or not.
So use follwing code in ajax:
function check_reg() {
$.ajax({
url: 'reg_script.php',
type: "POST",
data: {'login': $('#login_reg').val() ,'password':$('#pass_reg').val() ,'email':$('#email_reg').val()},
success: function(result) {
if (result == 'ok') {
alert('ok');
}
else if (result == 'error') {
alert('error');
}
else if (result == 'empty') {
alert('empty');
}
},
});
}