I have one form for validating a user, now I'm testing and need give 2 clicks for send, I read in many forums but can not find the solution to my problem.
This is the script code:
<script>
$(function () {
$('#enviar').click( function() {
if($('#correo').val().length > 0 && $('#pwd').val().length > 0){
var pwd2 = MD5($('#pwd').val());
var myData = "correo="+$('#correo').val()+"&pwd="+pwd2;
$.ajax({
type: "POST",
url:"http://myurlthatisworkingfine/registro/login",
data: myData,
dataType: 'json', // Notice! JSONP <-- P (lowercase)
success: function(data) {
alert(data.message);
}
},
error:function(){
alert("Error");
}
});
} else {
alert('Por favor, rellena los dos campos');
}
return false;
});
});
</script>
The form:
<form id="check-user" data-ajax="false">
<fieldset>
<div data-role="fieldcontain">
<label> Usuario </label>
<input type="text" id="correo" name="correo">
</div>
<div data-role="fieldcontain">
<label> Contraseña </label>
<input type="password" id="pwd" name="pwd" >
</div>
<input type="submit" data-role="button" value="Acceder" name="enviar" id="enviar">
He olvidado mi contraseña
</fieldset>
</form>
All works very fine the only problem it´s with submit , i need 2 times for send the form finally. How can I fix this?
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<input type="radio" name="" id="inputID1" value="" />
<label for="inputID1">LabelText...</label>
<input type="radio" name="" id="inputID2" value="" />
<label for="inputIDd">LabelText2...</label>
<!-- .. more inputs maybe ..-->
</fieldset>
</div>
I am pretty sure your div data-role="fieldcontain" && fieldset data-role="controlgroup" is the wrong way around. Try to do your html part as shown in my example above. So dont give every input a data-role="fieldcontain" itself..
Jquery mobile has some problem to get the clicks on a inputs especially radio buttons. But if you mark it this way, it should work just fine. ( it did on my project )
Hope that helped...
Related
I have a form that includes a checkbox:
<form action="tienda3.php">
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control" id="email" name="email" placeholder="Enter your email to confirm the order">
</div>
<div class="form-group">
<div class="checkbox">
<label><input type="checkbox" id="TOS" value="This"> I certify that I am of legal age and I have read and agree to the
Terms of use and
Privacy Policy of Sdocks LLC</label>
</div>
</div>
<button type="submit" onclick="validate()" class="btn btn-primary">Submit</button>
</form>
I need to verify that the user checks the checkbox to post the form to tienda3.php.
I am using this script to validate that the user has checked the checkbox or not:
<script type=text/javascript>
function validate(){
if (document.getElementById('TOS').checked){
alert("checked") ;
}else{
alert("You didn't check it! Let me check it for you.");
return true;
}
}
</script>
If the checkbox is checked then the form is posted to tienda3.php, else an alert must be shown to inform the user that it is mandatory to check the checkbox to continue the process.
In my case, the form is always posted to tienda3.php. The script detects if the checkbox is checked or not, but in both cases, the form always opens file tienda3.php
I suggest you make this changes:
/* replace this:
* <form action="tienda3.php"> */
<form action="tienda3.php" onsubmit="return validate(event)" >
/* replace this:
* <button type="submit" onclick="validate()" class="btn btn-primary">Submit</button> */
<button type="submit" class="btn btn-primary">Submit</button>
/* and replace the validate() function with: */
function validate(event){
if (document.getElementById('TOS').checked){
alert("checked") ;
return true;
} else {
event.preventDefault();
alert("You didn't check it! Let me check it for you.");
return false;
}
}
Let me know if it worked as expected.
You can also find solutions by searching Stackoverflow How to prevent form from being submitted - inline javascript
I prefer to use ajax request instead of form action
HTML
<form>
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control" id="email" name="email" placeholder="Enter your email to confirm the order">
</div>
<div class="form-group">
<div class="checkbox">
<label><input type="checkbox" id="TOS" value="This"> I certify that I am of legal age and I have read and agree to the
Terms of use and
Privacy Policy of Sdocks LLC</label>
</div>
</div>
<button type="button" onclick="SubmitRequest()" class="btn btn-primary">Submit</button>
</form>
js
function SubmitRequest() {
if (document.getElementById('TOS').checked){
var postObj = {
email: $('#email').val(),
};
$.ajax({
url: "/tienda3.php",
data: JSON.stringify(postObj),
type: "POST",
contentType: "application/json;charset=utf-8",
dataType: "json",
success: function (result) {
console.log(result)
},
error: function (errormessage) {
console.log(errormessage);
}
});
}
});
Hi I'm trying to post my form data via ajax.
But I still want to make use of the default validation and to show the default messages from html form. So the form shows the default error messages of the form but when the form is correctly filled it does a regular form submut instead of executing the preventDefault and then my ajax method. How come it doesn't stop from submiting ? I don't understand, can anybody help me out, that would be great.
my html form:
<form id="add_address">
<div class="form-group">
<input class="form-control" type="text" name="address_address_name" required placeholder="Naam adres*" />
</div>
<div class="form-group">
<input class="form-control" type="text" name="address_address" required placeholder="Straat + Nr*" />
</div>
<div class="form-group">
<input class="form-control" type="text" name="address_zipcode" required placeholder="Postcode*" />
</div>
<div class="form-group">
<input class="form-control" type="text" name="address_city" required placeholder="Plaats*" />
</div>
<div class="form-group">
<input class="form-control" type="text" name="address_phone" placeholder="Telefoon" />
</div>
<div class="form-group">
<input class="form-control" type="text" name="address_email" required placeholder="Email*" />
</div>
<button type="submit" class="btn btn-default right">Save</button>
</form>
my javascript:
$('#add_address button').on('click',submit_form_address);
function submit_form_address(event){
form = $('#add_address');
console.log("yes here:"+ $(form)[0].checkValidity());
if( $(form)[0].checkValidity() != false){
event.preventDefault();
add_address(form);
}
}
function add_address(p_Form){
var url = '/addresses';
data = new FormData($(p_Form)[0]);
$.ajax({
url:url,
method:'POST',
data:data,
cache: false,
contentType: false,
processData: false,
success:success_add_address,
error:error
});
}
Solution for me: I now using this way and this way is working for me to use default validation of the html form and do a custom submit through ajax.
$(document).on('submit', '#add_address', function(e){
add_address($(this));
e.preventDefault();
});
if( $(form)[0].checkValidity() != false){
add_address(form);
event.preventDefault();
}
// OR
if( $(form)[0].checkValidity() != false){
add_address(form);
return false;
}
I am very new to jQuery.I have done a simple task that validation form data using jQuery validation plugin.
I have created a simple form
<html>
<head>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="js/jquery.validate.js"></script>
<script src="js/form-validate.js"></script>
</head>
<body>
<form class="cmxform" id="commentForm" method="get" action="">
<fieldset>
<legend>Please provide your name, email address (won't be published) and a comment</legend>
<p>
<label for="cname">Name (required, at least 2 characters)</label>
<input id="cname" name="name" minlength="2" type="text" class =" requiredFieldCheck ">
</p>
<p>
<label for="cemail">E-Mail (required)</label>
<input id="cemail" type="email" name="email" required>
</p>
<p>
<label for="curl">URL (optional)</label>
<input id="curl" type="url" name="url">
</p>
<p>
<label for="ccomment">Your comment (required)</label>
<textarea id="ccomment" name="comment" required></textarea>
</p>
<p>
<input class="submit" type="submit" value="Submit">
</p>
</fieldset>
</form>
<script>
//$("#commentForm").validate();
$(function(){
$('#commentForm').ajaxForm({
beforeSend:function(){
alert('before send');
$('#commentForm').validate();
},
success:function(){
alert("when success");
},
error:function(){
alert('when unsuccess');
}
});
$('#commentForm').ajaxSubmit();
// return false to prevent normal browser submit and page navigation
return false;
});
</script>
</body>
</html>
$.validator.addMethod("requiredFieldCheck", function (value, element) {
alert("working method requiredFieldCheck "+value);
var result;
if(value.length > 3){
result = true ;
}
else{
result = false ;
}
return result;
}, '****This content must be greater than 3 characters****');
And also in the browser console it is caught by an error Uncaught TypeError: undefined is not a function
Can anyone give me some suggestions to do form validation before sending data and essesntially using jquery validation plugin?
Thanks in Advance
you need to register adapter, for example:
jQuery.validator.unobtrusive.adapters.addSingleVal("requiredFieldCheck", "other");
I have a HTML form with various different types of fields. Input, select, hidden and textarea. I have tried attaching all the form data to the ajax request but the POST data isn't sending. The reason for getting all form data rather than just naming the individual fields is the user can add more fields if the need to.
function saveProductEdits(f){
var url = 'func/editProduct.php?func=saveEdits';
$.ajax({
url:url,
data:$('#edit_form').serialize(),
type:'POST',
beforeSend:function(){
},
success:function(e){
alert(e);
}
});
}
PHP:
if(isset($_GET['func'])){
if($_GET['func'] == 'saveEdits'){
if(!empty($_POST)){
}else{
echo 'Post data not sent';
}
}else{
echo 'unknown function';
}
print_r($_POST); //shows empty array
}else{
}
HTML:
<form id="edit_form">
//various inputs generated at run time
<input type="button" value="Save Changes" onclick="saveProductEdits(this)" /> //button to submit
</form>
I keep getting 'Post data not sent'.
UPDATE:
screen shot of network tab
Im entirly sure but I presume by that the data isn't sending.
UPDATE FORM
<p>
<label for="product_name">Product Name: </label>
<input id="product_name" type="text" placeholder="Product Name" class="basic_field" value="Product Name PHP" />
</p>
<label for="main_cat">Main Catagory: </label>
<select id="main_cat">
php generated options
</select>
<div id="cats_list">
<p>
<label for="sub_cat_1">Sub Catagory 1: </label>
php generated options
</select>
</p>
</div>
<br/>
<a onclick="newCatField('2','Hair Pieces','6')">Add another Catagory</a>
<input type="hidden" id="count_cats" value="2" />
<div id="sizes">
<p>
<label>Size: </label>
<input type="text" id="size_1" value="1" />
<label>Quantity: </label>
<input type="number" id="quant_1" value="100" />
</p>
</div>
<a onclick="newSizeField('1')">Add another Size</a>
<input type="hidden" id="size_count" value="1" />
<p>
<label for="keywords">Keywords: </label>
Link a catagory:
<select onChange="addCatToKeywords(this,'keywords')" class="basic_field">
<option>Add...</option>
php generated options
</select>
<textarea id="keywords" class="basic_field">php content</textarea>
</p>
<p>
<label for="desc">Description: </label>
<textarea id="desc" style="">php content</textarea>
</p>
example of adding fields at runtime:
this does work and adds 1 to the id of each on and to a hidden value that counts the added fields.
function newCatField(c,u,m){
$.ajax({
url:'func/getCats.php',
type:'POST',
data:{used:u},
success:function(e){
if(count === parseInt(m)){
}else{
document.getElementById('cats_list').innerHTML += '<p><label for="sub_cat_'+count+'">Sub Catagory '+count+': </label><select id="sub_cat_'+count+'"><option>Please Select</option>'+e+'</select></p>';
count++;
document.getElementById('count_cats').value = parseInt($('#count_cats').val()) + 1;
}
}
});
}
$.serialize()
Probably this function is what you're looking for.
$( "form" ).on( "submit", function( event ) {
event.preventDefault();
console.log( $( this ).serialize() );
});
I am submitting a form without leaving my page through a post call Using JQuery.
After I submit I want to replace the div with the form in it with a thank you message. The problem is the message is showing before I submit and not replacing, below is my code.
$(document).ready(function() {
//When the form with id="myform" is submitted...
$("#myform").submit(function() {
//Send the serialized data to mailer.php.
$.post("mailer.php", $("#myform").serialize(),
//Take our repsonse, and replace whatever is in the "formResponse"
//div with it.
function(data) {
$("#formResponse").html(data);
}
);
return false;
});
});
and the HTML
<div data-role="content">
<form id="myform">
<div data-role="fieldcontain">
<label for="name">Name:</label>
<input type="text" name="name" id="name" value="" />
</div>
<div data-role="fieldcontain">
<label for="email">Email:</label>
<input type="email" name="email" id="email" value="" />
</div>
<div data-role="fieldcontain">
<label for="company">Company Name:</label>
<input type="text" name="company" id="company" value="" />
</div>
<input type="submit" name="submit" value="Submit" data-icon="star" data-theme="b" />
</form>
</div>
<div data-role="content" div id="formResponse">
thank you, your quote has been received and you will hear back from us shortly.
</div>
Try replacing your following code:
<div data-role="content" div id="formResponse">
for this one:
<div data-role="content" style="display:none" id="formResponse">
and then replace your following javascript function:
function(data) {
$("#formResponse").html(data);
}
for this one:
function(data) {
$("#myForm").html( $("#formResponse").html() );
}
UPDATE:
If you just want to show the result obtained from the ajax call, instead of showing the content of the #formResponse div, just remove the #formResponse div at all, and just do the following:
function(data) {
$("#myForm").html( data );
}
UPDATE 2:
You can also hide the form div and show the "thank you" div, like this:
function(data) {
$("#myForm").hide('slide', function() {$("#formResponse").show('slide');});
}
use success(data) A callback function that is executed if the request succeeds.