Here is the HTML:
<form id="login_form" data-ajax="false">
<label for="username" class="ui-hidden-accessible">Username:</label>
<input type="text" name="username" id="username" value="" placeholder="Username"/>
<label for="password" class="ui-hidden-accessible">Password:</label>
<input type="password" name="password" id="password" value="" placeholder="Password"/>
<button data-theme="b" id="submit" type="submit">Login</button>
</form>
Here is the js:
$('#login_form').on('submit', function (e) {
var $this = $(this);
e.preventDefault();
//some validation here
if (formValid)
{
$.mobile.showPageLoadingMsg();
$.post(loginURL, $this.serialize(), function (response) {
$.mobile.hidePageLoadingMsg();
//response handling here
}, 'jsonp');
}
return false;
});
So the problem is:
The form still sends the GET query.
What is wrong here?
PS: testing on ripple emulator if it matters
Related
I have this form here I am trying to send data to the controller using Ajax but something keeps failing and ajax is not working at all. I am trying to insert a question and sending the quiz id through the form and to the controller
<div id="form_two" class="container col-sm-8">
<div class="row card border-secondary align-items-center">
<div class="form-group col-sm-7">
<br><br>
<form id="report">
#csrf
<input type="hidden" name="quizTest" value="{{ \Illuminate\Support\Facades\Session::get('testID') }}">
<input class="form-control" id="question" type="text" name="question" placeholder="Question" size="40" required><br>
<input class="form-control" id="answerA" type="text" name="answerA" placeholder="Option A" size="40" required><br>
<input class="form-control" id="answerB" type="text" name="answerB" placeholder="Option B" size="40" required><br>
<input class="form-control" id="answerC" type="text" name="answerC" placeholder="Option C" size="40" required><br>
<input class="form-control" id="answerD" type="text" name="answerD" placeholder="Option D" size="40" required><br>
<input class="form-control" id="correct_answer" type="text" name="correct_answer" placeholder="Correct Answer" size="40" required><br>
<button class="btn btn-primary" id="registraion-form" >ADD A QUESTION </button>
</form>
</div>
</div>
</div>
Here is my ajax code that I am trying to send data to the /test endpoint, but when I am submitting the form nothing is printing on the console.log and nothing is being returned from the response from the controller which leads to the conclusion that ajax is not working. When I am pressing the submit button only the URL is changing, what I am doing wrong?
$('#registraion-form').click(function (e) {
e.preventDefault();
let question = $("input[name=question]").val();
let answerA = $("input[name=answerA]").val();
let answerB = $("input[name=answerB]").val();
let answerC = $("input[name=answerC]").val();
let answerD = $("input[name=answerD]").val();
let quizTest = $("input[name=quizTest]").val();
let correct_answer = $("input[name=correct_answer]").val();
$.ajax({
type: "POST",
url: "/test",
data : {
quizTest: quizTest,
question : question,
answerA:answerA,
answerB:answerB,
answerC:answerC,
answerD:answerD,
correct_answer : correct_answer
},
success: function(response) {
console.log(response);
console.log(response.message);
$("#report")[0].reset();
},
error : function (error) {
console.log(error);
}
})
})
just because you have added #csrf to your form, doesn't mean that you're ok on everything.
Since AJAX is submitting a POST request, also that request should have with it the csrf token, otherwise it won't work.
Check for example this question.
<input type="email" class="form-control" id="email" placeholder="Enter
email" name="email" onblur="validation()">
<input type="text" name="war-email" id="war-email" value=""
class="error" readonly hidden/><br>
<input type="password" class="form-control" id="pwd"
placeholder="Enter password" name="pwd" onblur="validation()">
<input type="text" name="war-pas" id="war-pas" value="" class="error"
readonly hidden/><br>
<input type="cpassword" class="form-control" id="cpwd"
placeholder="Enter password" name="cpwd" onblur="validation()">
<input type="text" name="war-cpas" id="war-cpas" value=""
class="error" readonly hidden/><br>
<script>
function validation(){
if(document.getElementById("email").value==""){
$("#war-email").show();
document.getElementById("war-email").value="this is invalid email";
document.getElementById("war-email").style.color="red";
}else{
document.getElementById("war-email").value="this is valid email";
document.getElementById("war-email").style.color="green";
}
if(document.getElementById("pwd").value==""){
$("#war-pas").show();
document.getElementById("war-pass").value="Short password";
document.getElementById("war-pas").style.color="red";
}else{
document.getElementById("war-pas").value="Strong password";
document.getElementById("war-pas").style.color="green";
}
var len=document.getElementById("cpwd").value;
if(document.getElementById("pwd").value!=
document.getElementById("cpwd").value==)
{
$("#war-cpas").show();
document.getElementById("war-cpass").value="Both password should
matched";
document.getElementById("war-cpas").style.color="red";
}else{
document.getElementById("war-cpas").value="matched..!!";
document.getElementById("war-cpas").style.color="green";
}
}
</script>
First of all, put your code in a snippet so it will be easier for us to understand. Anyway, I'll tell how to attach blur event using jQuery.
$("input#name").on("blur", function()
{
if(!this.value)
{
alert("Please fill out the name");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form id="myForm">
<label>Your Name</label>
<input type="text" id="name">
</form>
If you need any other help, just let me know :-)
I am trying to apply ajax with my spring mvc, but couldn't find where I make thing wrong. I try to follow several tutorials but couldn't customize mine to work. It always falls to error state.
So this is my ajax call
function doAjax() {
var username = $('#username').val();
var email = $('#email').val();
var password = $('#password').val();
var json = {
"username" : useranme,
"email" : email,
"password" : password
}
//alert("username: " + username + " email: " + email + " password: " + password);
$.ajax({
type: "POST",
url: $('form').attr('action'),
data: JSON.stringify(json),
dataType: "JSON",
success: function(data) {
},
error:function(data, status, err) {
alert("error");
}
});
};
And this is my form:
<div class="form">
<spring:url var="registerUrl" value="http://localhost:9004/Project/register" htmlEscape="true" />
<form method="post" action="${registerUrl}">
<div class="form_field">
<label for="username">Username</label><br/>
<input class="field" id="username" type="text" name="userName" autocomplete="off"/>
</div>
<div class="form_field">
<label for="email">Email</label><br/>
<input class="field" id="email" type="email" name="email" autocomplete="off" />
</div>
<div class="form_field">
<label for="password">Password</label><br/>
<input class="field" id="password" type="password" name="password" />
</div>
<div class="form_field prefix_clear">
<input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}" />
<input id="submit" class="action_button" type="submit" value="Register"/>
</div>
</form>
Click me
</div>
So if I submit the form using the input, it works perfectly. But it doesn's work when I try to submit it using anchor tag. Please help.
To make your ajax call work exactly as a form submit, you should, instead of using the JSON, just replace your data:JSON.stringify to
data:$("form").serialize();
If you have to make a request with JSON data, than you'll have to edit your question with the mapping method and command object to get help, but one thing that is obviously wrong with your code, is that you're not including the _csrf parameters in your ajax request
Received http://examle.com/ajax/login.html:
<form method="post" action="/login.html" name="formLogin" data-ng-model="formLogin" data-ng-submit="submitLogin($event)" novalidate="novalidate" >
<input type="hidden" csrf="csrf" data-ng-model="formLogin.csrf" value="" name="LoginForm[csrf]">
<input type="text" data-ng-minlength="2" data-ng-required data-ng-model="formLogin.email" placeholder="e-mail" autofocus="autofocus" name="LoginForm[email]"></div>
<span class="error" ng-show="formLogin['LoginForm[email]'].$error.required">Required!</span>
<input type="text" data-ng-minlength="2" data-ng-required data-ng-model="formLogin.password" placeholder="password" autofocus="autofocus" name="LoginForm[password]"></div>
<span class="error" ng-show="formLogin['LoginForm[password]'].$error.required">Required!</span>
<button ng-disabled="formLogin.submitted" name="login-button" class="btn btn-primary" type="submit">OK</button>
</form>
The directive code looks as below:
app.directive('formLogin', function(){
return {
require: 'ngModel',
link: function(scope, element, attrs, ngModelCtrl) {
var inputs = element[0].querySelectorAll('input');
}
};
});
In a classic example, if specify the name of the form, the form controller will be published into related scope, under this name. Is it possible to do for AJAX-loaded form, something like?
The problem is in the validation inputs after loading form.
Hi make one html from which submitting without refresh by jquery. Problem is that I am beginner and I dont know how to add validation for html form. I need changes in script so first form will validate by jquery or ajax then it will submit by jquery witout page refresh.. have look in my code. Please provide me working solution in that first form validate by ajax jquery then submit by jquery without refresh.. Thanks in advance
JQUERY:
<script type="text/javascript">
$(document).ready(function(){
$("form#form").submit(function() {
// we want to store the values from the form input box, then send via ajax below
var uno = $("#uno").val();
var name = $("#name").val();
var licence = $("#licence").val();
var email = $("#email").val();
var phone = $("#phone").val();
var dataString = 'uno=' + uno + '&name=' + name + '&licence=' + licence + '&email=' + email + '&phone=' + phone;
$.ajax({
type: "POST",
url: "addd.php",
data: dataString,
success: function(){
$('form#form').hide(function(){$('div.success').fadeIn();});
}
});
return false;
});
});
</script>
HTML FORM:
<form id="form" method="post" name="form" action="">
<fieldset id="opt">
<legend>Driver Information</legend>
<label for="choice">Name : </label>
<input type="text" id="name" name="name" value=""> <br />
<label for="choice">Licence No : </label>
<input type="text" id="licence" name="licence" value=""> <br />
<label for="choice">Email : </label>
<input type="text" id="email" name="email" value=""> <br />
<label for="choice">Phone : </label>
<input type="text" id="phone" name="phone" value=""> <br />
<input type="hidden" name="uno" id="uno" value="" />
<br />
</fieldset>
<div align="center">
<input id="button2" type="submit" value="Add Driver" />
<input id="button2" type="reset" />
</div>
</form>
I found multiple errors/mistakes on your HTML form too. some of them I want to mention..
for attribute of label have same value of the next input/select id, read:
http://www.w3schools.com/tags/att_label_for.asp
Dont assign name for name and id attribute, it's misleading.( good practice)
Don't write value ="", if you there is no initial value of any input box.
If u want to validate a hidden field then write some value for that on form intialization, otherwise it wud be always empty and your validation never works.
If u want to validate all input field together for emptyness then use :input selector ,read :
http://api.jquery.com/input-selector/
Don't forget to validate email address
If you want to post a form via ajax then there is no need to write method and action attribute in your form
Your reset button shoud have some value, otherwise its takes default value.
A very useful and handy article for newbie for jquery ajax validation
http://jorenrapini.com/blog/css/jquery-validation-contact-form-with-modal-slide-in-transition
OR you can use jquery validator plugin :
http://bassistance.de/jquery-plugins/jquery-plugin-validation/
here is your neat and clean form
<form id="driverForm" name="driverForm">
<fieldset id="opt">
<legend>Driver Information</legend>
<label for="lname">Name : </label>
<input type="text" id="lname" name="lname" > <br />
<label for="licence">Licence No : </label>
<input type="text" id="licence" name="licence" ><br />
<label for="email">Email : </label>
<input type="text" id="email" name="email" ><br />
<label for="phone">Phone : </label>
<input type="text" id="phone" name="phone" > <br />
<input type="hidden" name="uno" id="uno" /><br />
</fieldset>
<div align="center">
<input type="submit" id="submitForm" name="submitForm" value="Add Driver" />
<input type="reset" value="clear" />
</div>
</form>
Hope this will be useful for you.
UPDATE
put it insdie submit() and before ajax like this
$("form").submit(function() {
if($('#lname').val() == '')
return false;
});
$.ajax({
NOTE: dont create dataString Manually there is inbuilt function in jQuery.
serialize
Please note that ,this is not matter that your form is submitting or not. most thing is it a valid form or not.
Happy to help :)