I have html step form I need to submit the form after the form passes validation and all fields are filled.I have a action controller register.php but in my html form I also have action="javascript:void(0);" so how to i submit my form action.
<div class="form-bottom">
<div class="row">
<div class="form-group col-xl-4 col-lg-4 col-md-12 col-sm-12 col-12">
<input type="text" class="form-control" placeholder="addres 1" id="add1" name="" value="" |>
</div>
<div class="form-group col-xl-4 col-lg-4 col-md-12 col-sm-12 col-12">
<input type="text" class="form-control" placeholder="address 2" id="add2" name="" value="">
</div>
<div class="form-group col-xl-4 col-lg-4 col-md-12 col-sm-12 col-12">
<input type="text" class="form-control" placeholder="city" id="city" name="" value="" |>
</div>
</div>
<div class="row">
<div class="form-group col-xl-4 col-lg-4 col-md-12 col-sm-12 col-12">
<input type="text" class="form-control" placeholder="Home Phone" id="contact_number" name="" value="">
</div>
</div>
<div class="form-group col-xl-4 col-lg-4 col-md-12 col-sm-12 col-12">
<input type="checkbox" name="vehicle" value="Car" checked> I Agree<br>
</div>
<button type="button" class="btn btn-previous">Previous</button>
<button type="submit" class="btn">Submit</button>
</div>
You can use ajax query to send data to php script.
That code insert in onsubmit function:
var formData = $(form_selector).serialize(); //Getting data from form
$.ajax({
type: "POST",
url: URL to php script,
data: formData,
success: function(data) {
//Action if data successfully sended, it's not nessesary
}
});
You can learn more about jQuery ajax on https://api.jquery.com/Jquery.ajax
Related
I have successfully integrated dropzone with my form using jquery. However, I have an issue with validation of the other form inputs. It seems the other form inputs do not respect the validation such as "required". I also tried using parsley for validation but does not work. when I remove the dropzone field, the validation works well.
Here is the form.
<form class="form-vertical"
id="createPropertyForm"
enctype="multipart/form-data"
method="POST"
>
<div class="col-md-12 col-lg-12 col-sm-12" >
<div class="col-md-6">
<div class="form-group">
<label class=" control-
label">Country</label>
<div class="inputGroupContainer">
<input id="country"
name="country" placeholder="Country" class="form-control" required
value="" type="text">
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="control-
label">County</label>
<div
class="inputGroupContainer">
<input id="county"
name="county" placeholder="County" class="form-control" required value=""
type="text">
</div>
</div>
</div>
</div>
<div class="col-md-12 col-lg-12 col-sm-12" >
<div class="col-md-6">
<div class="form-group">
<label class=" control-
label">Town</label>
<div class=" inputGroupContainer">
<input id="town" name="town"
placeholder="Town" class="form-control" required value="" type="text">
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="control-
label">Postcode</label>
<div class="inputGroupContainer">
<input id="postcode"
name="postcode" placeholder="Postcode" class="form-control" required
value=""
type="text">
</div>
</div>
</div>
</div>
<div class="col-md-12 col-lg-12 col-sm-12" >
<div class="col-md-6">
<div class="form-group">
<label class=" control-
label">Description</label>
<div class=" inputGroupContainer">
<textarea id="description"
name="description" placeholder="Description" class="form-control"
required="true" value="" type="text"></textarea>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="control-
label">Address</label>
<div class="inputGroupContainer">
<input id="address" name="address"
placeholder="Address" class="form-control" required value="" type="text">
</div>
</div>
</div>
</div>
<div class="col-md-12 col-lg-12 col-sm-12" >
<div class="col-md-6">
<div class="form-group">
<label class=" control-
label">Bedrooms</label>
<div class=" inputGroupContainer">
<select class=" form-control"
name="bedrooms" id="bedrooms" required>
</select>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="control-label
">Bathrooms</label>
<div class=" inputGroupContainer">
<select
class="selectpicker bathrooms form-control" name="bathrooms"
id="bathrooms"
required>
</select>
</div>
</div>
</div>
</div>
<div class="col-md-12 col-lg-12 col-sm-12" >
<div class="col-md-6">
<div class="form-group">
<label class=" control-
label">Price</label>
<div class="inputGroupContainer">
<input id="price" name="price"
placeholder="Price" class="form-control" required value="" type="number">
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="control-
label">Property Type</label>
<div class=" inputGroupContainer">
<select
class="selectpicker form-control" name="propertyType" id="propertyType">
<option
value="">Choose type</option>
<?php
foreach
($propertyTypes as $propertyType) {
?>
<option value="<?=
$propertyType->id ?>"><?= $propertyType->title ?></option>
<?php
}
?>
</select>
</div>
</div>
</div>
</div>
<div class="col-md-12 col-lg-12 col-sm-12" >
<div class="col-md-6">
<div class="form-group">
<label class=" control-
label">Type</label>
<div class="col-md-12">
<div class="col-md-6 ">
<label><input type="radio"
name="type" class="form-control type" required>Sale</label>
</div>
<div class="col-md-6">
<label><input type="radio"
name="type" class="form-control type" required>Rent</label>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="control-
label">Upload Image</label>
<div class=" inputGroupContainer">
<div class="dropzone"
id="create-dropzone" >
<div class="fallback">
<input name="file"
type="file" required/>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-sm-6">
<div class="dropzone-previews"></div>
</div>
</div>
<div class="col-md-6 col-sm-6">
<button class="btn btn-success btn-lg"
type="submit" id="submitCreateForm"> Submit </button>
</div>
</form>.
Here is the jquery code:
// Parsley for form validation
$('#createPropertyForm').parsley();
$('#editPropertyForm').parsley();
Dropzone.options.createDropzone = {
url: `${baseUrl}administrator/properties`,
autoProcessQueue: false,
parallelUploads: 1,
maxFiles: 1,
maxFileSize:2048,
uploadMultiple: false,
acceptedFiles: "image/*",
init: function () {
var submitButton = document.querySelector("#submitCreateForm");
var wrapperThis = this;
submitButton.addEventListener("click", function (e) {
e.preventDefault();
if (wrapperThis.files.length) {
wrapperThis.processQueue();
} else {
wrapperThis.submit();
}
});
this.on("addedfile", function (file) {
var removeButton = Dropzone.createElement("<button class='btn btn-block btn-danger'><i class='fa-times fa'></button>");
removeButton.addEventListener("click", function (e) {
e.preventDefault();
e.stopPropagation();
wrapperThis.removeFile(file);
});
file.previewElement.appendChild(removeButton);
});
this.on('sending', function (data, xhr, formData) {
formData.append("country", $("#country").val());
formData.append("county", $("#county").val());
formData.append("town", $("#town").val());
formData.append("postcode", $("#postcode").val());
formData.append("description", $("#description").val());
formData.append("address", $("#address").val());
formData.append("bathrooms", $("#bathrooms").val());
formData.append("price", $("#price").val());
formData.append("bedrooms", $("#bedrooms").val());
formData.append("propertyTypeId", $("#propertyType").val());
formData.append("type", $(".type").val());
});
this.on('success', function (files, response) {
toastr.success(response.message);
setTimeout(function () {
location.reload();
}, 1000);
});
this.on('error', function (file, error, xhr) {
file.status = 'queued';
if (xhr.status === 422){
toastr.error('An error occurred, please confirm that you have filled all inputs and try again');
}else{
toastr.error('An error occurred');
}
});
this.on("maxfilesexceeded", function(file) {
wrapperThis.removeFile(file);
});
}
};
I have an application with multiple tabs/form that will be submitted. Instead of having separate submit function for each form I want to design one dynamic function that will submit any form with submitFrm class. Here is an example of my current code:
$('.frmSubmit').on('submit', submitFrm);
function submitFrm(e) {
e.preventDefault(); // Prevnts default form submit.
var frmID = $(this).prop("id"),
formData = $('#' + frmID).serialize(), //or this way $(this).serialize()
submitBtn = $(this).find(':submit');
if (formData) {
$('#' + frmID).find(':submit').prop('disabled', true); // Disable submit button
// or this submitBtn.prop('disabled', true);
/*
Here is AJAX call.
*/
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="frmTab1" id="frmTab1" class="frmSubmit" autocomplete="off">
<div class="form-group">
<label class="control-label" for="activ"><span class="label label-primary">Active:</span></label>
<select class="form-control" name="frmTab1_active" id="frmTab1_active" required>
<option value="0">No</option>
<option value="1">Yes</option>
</select>
</div>
<div class="form-group">
<label class="control-label" for="code"><span class="label label-primary">Code:</span></label>
<input type="text" class="form-control" name="frmTab1_code" id="frmTab1_code" maxlength="4" required>
</div>
<div class="row">
<div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-12">
<button type="submit" name="frmTab1_submit" id="frmTab1_submit" class="btn btn-primary">Submit</button>
</div>
<div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div id="message" class="alert message-submit"></div>
</div>
</div>
</form>
I'm debating should I use $(this) object to find(), serialize() form data or I should use form id? Is there any difference? I'm also wondering if I use this function from multiple forms to submit data is that good practice? If anyone has any suggestions please let me know.
You could use simply $(this).serialize() like :
$('.frmSubmit').on('submit', submitFrm);
function submitFrm(e) {
e.preventDefault();
var formData = $(this).serialize();
var submitBtn = $(this).find(':submit');
if (formData) {
submitBtn.prop('disabled', true);
}
return false;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="frmTab1" id="frmTab1" class="frmSubmit" autocomplete="off">
<div class="form-group">
<label class="control-label" for="activ"><span class="label label-primary">Active:</span></label>
<select class="form-control" name="frmTab1_active" id="frmTab1_active" required>
<option value="0">No</option>
<option value="1">Yes</option>
</select>
</div>
<div class="form-group">
<label class="control-label" for="code"><span class="label label-primary">Code:</span></label>
<input type="text" class="form-control" name="frmTab1_code" id="frmTab1_code" maxlength="4" required>
</div>
<div class="row">
<div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-12">
<button type="submit" name="frmTab1_submit" id="frmTab1_submit" class="btn btn-primary">Submit</button>
</div>
<div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div id="message" class="alert message-submit"></div>
</div>
</div>
</form>
Can someone help me. sorry i'm new in PHP and jquery. i was thinking if the user change the select tag. the details from the database will be print on the textbox without refreshing the page using ajax. i don't have ajax code right now. because i don't know what im going to do.
<div class="row">
<div class="col-md-6 col-sm-12 col-xs-12">
<p>Full Name</p>
<select class="form-control" name="FullName" id="FullName" onchange="">
<option value="undefine">Select</option>
<?php
$query = mysql_query('SELECT tbluserdetail.FirstName,
tbluserdetail.MiddleName,
tbluserdetail.LastName,
tblchurchs.ChurchName,
tblchurchs.Address,
useraccounts.AccountID,
useraccounts.AccountNo
FROM useraccounts
INNER JOIN tbluserdetail
ON tbluserdetail.UserID = useraccounts.UserID
INNER JOIN tblchurchs
ON tblchurchs.AChurchID = tbluserdetail.AChurchID
');
while($get_info = mysql_fetch_array($query)){
$FName = specialchar($get_info['FirstName']);
$MName = specialchar($get_info['MiddleName']);
$LName = specialchar($get_info['LastName']);
$CName = specialchar($get_info['ChurchName']);
$CAdd = specialchar($get_info['Address']);
$AN = specialchar($get_info['AccountNo']);
$AI = specialchar($get_info['AccountID']);
echo '<option value="'.$AI.'">'.$FName." ".$MName." ".$LName." (".$CName."-".$CAdd.")".'</option>';
}
?>
</select>
</div>
<div class="col-md-6 col-sm-12 col-xs-12 ">
<p>Account No</p>
<input type="text" class="form-control" name="AccountNo" value=""Placeholder="000000" readonly>
</div>
</div>
<div class="row">
<div class="col-md-6 col-sm-12 col-xs-12 ">
<p>Address</p>
<input type="text" class="form-control" name="Address" readonly>
</div>
<div class="col-md-6 col-sm-12 col-xs-12 ">
<p>Contact No</p>
<input type="text" class="form-control" name="ContactNo" readonly>
</div>
</div>
<div class="row">
<div class="col-md-6 col-sm-12 col-xs-12 ">
<p>Gender</p>
<input type="text" class="form-control" name="Gender" readonly>
</div>
<div class="col-md-6 col-sm-12 col-xs-12 ">
<p>Age</p>
<input type="text" class="form-control" name="Age" readonly>
</div>
</div>
This link might answer our question. It is live filtering.
http://www.jqueryscript.net/demo/Create-Basic-Product-Filters-using-jQuery/
I am developing an application in which I send form data using ajax. After success function data add into the database but it does not display any messages and complete form data appends to url.
In this I am using "POST" method.
Why this data appends to form and not showing any messages to result field.
This is my html code
<form class="form-horizontal form-label-left" id="myForm" novalidate>
<span class="section">Personal Info</span>
<div class="item form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12" for="fname"> First Name <span class="required">*</span>
</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<input id="fname" class="form-control col-md-7 col-xs-12" data-validate-length-range="6" data-validate-words="1" name="fname" placeholder="First Name" required="required" type="text">
</div>
</div>
<div class="item form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12" for="lname"> Last Name <span class="required">*</span>
</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<input id="lname" class="form-control col-md-7 col-xs-12" data-validate-length-range="6" data-validate-words="1" name="lname" placeholder="Last Name" required="required" type="text">
</div>
</div>
<div class="item form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12" for="username"> Username <span class="required">*</span>
</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<input id="username" class="form-control col-md-7 col-xs-12" data-validate-length-range="0,25" data-validate-words="1" name="username" placeholder="Username" required="required" type="text">
</div>
</div>
<div class="item form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12" for="email">Email <span class="required">*</span>
</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<input type="email" id="email" name="email" required="required" class="form-control col-md-7 col-xs-12" placeholder="abc#gmail.com">
</div>
</div>
<div class="item form-group">
<label for="password" class="control-label col-md-3">Password <span class="required">*</span></label>
<div class="col-md-6 col-sm-6 col-xs-12">
<input id="password" type="password" name="password" data-validate-length="6,8" class="form-control col-md-7 col-xs-12" required="required">
</div>
</div>
<div class="item form-group">
<label for="password2" class="control-label col-md-3 col-sm-3 col-xs-12">Repeat Password</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<input id="password2" type="password" name="password2" data-validate-linked="password" class="form-control col-md-7 col-xs-12" required="required">
</div>
</div>
<div class="item form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12" for="telephone">Telephone <span class="required">*</span>
</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<input type="tel" id="telephone" name="telephone" required="required" data-validate-length-range="8,20" class="form-control col-md-7 col-xs-12">
</div>
</div>
<div class="item form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12" for="status">Status</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<select id="status" name="status" class="form-control col-md-7 col-xs-12">
<option>Select Status</option>
<option value="ACTIVE" >Active</option>
<option value="INACTIVE">Inactive</option>
<option value="VACATION">Vacation</option>
</select>
</div>
</div>
<div class="item form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12" for="role">Role</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<select id="role" name="role" class="form-control col-md-7 col-xs-12">
<option value="ACTIVE" >Select Role Name</option>
<option value="Manager" >Manager</option>
<option value="Operator">Operator</option>
<option value="Admin">Admin</option>
</select>
</div>
</div>
<div class="ln_solid"></div>
<div class="form-group">
<div class="col-md-6 col-md-offset-3">
<button type="reset" id="reset" class="btn btn-primary">Cancel</button>
<button id="send" type="submit" class="btn btn-success">Submit</button>
</div>
</div>
<div id="result"></div>
</form>
After submit I call js file in which I am using ajax.
ajax function
function processForm( e ){
alert(e);
$.ajax({
url: 'add_user_check.php',
dataType: 'text',
type: 'post',
contentType: 'application/x-www-form-urlencoded',
data: $(this).serialize(),
success: function( data, textStatus, jQxhr )
{
alert(data);
var split = data.split(',');
var display = split[0];
var msg = split[1];
$('#result').html( msg );
},
error: function( jqXhr, textStatus, errorThrown ){
$('#result').html( "Connection error :"+errorThrown);
}
});
e.preventDefault();
}
$('#myForm').submit( processForm );
If data is submitted successfully it returns success message and will display to result field. But message is not display and complete data appends to the url. As shown in fig.
Why this happens? and why it does not display proper message to result field.
Thanks in advance.
In short because there is no real error. PHP is not processing your request and so goes about its normal business. The URL has the POST data stuck in there as it normally would, only it isnt being flushed out since it isnt being redirected.
This is because you haven't actually specified a method for the form.
You need to use
<form method="post" ....
use method="post" in html form .
please help me to know what is wrong with this code !!
I searched much but it looks like I have no errors , even that it works when I try less inputs
this is the script code
$(document).ready(function(){
$("#patient-form").validate({
rules:{
pfname:{
required:true
},
plname:{
required:true
},
pemail:{
required:true,
email:true
},
ppass:{
required:true,
minLength:6
},
pcpass:{
minLength:6,
equalTo:"#ppass"
},
pcity:{
required:true
},
pbirthdate:{
required:true,
dateFormat: true
}
}
});
});
And this is the html code
I use some bootstrap classes but sure they aren't the reason for stopping the validation , I removed the input file and plname and pcity and it was working well , I don't know why it doesn't work really .
I hope somebody help me I need that because I'm working on my graduation project ,I'll be thankful really.
<form id="patient-form" method="post" action="" enctype="multipart/form-data" class="form-horizontal">
<div class="form-group">
<label class="col-md-2 col-md-offset-2 col-sm-3" for="pfname">First Name</label>
<div class="col-md-6 col-sm-9">
<input type="text" class="form-control sel" name="pfname" id="pfname" placeholder="Enter First Name">
</div>
</div>
<div class="form-group">
<label class="col-md-2 col-md-offset-2 col-sm-3" for="plname">Last Name</label>
<div class="col-md-6 col-sm-9">
<input type="text" class="form-control" name="plname" id="plname" placeholder="Enter Last Name">
</div>
</div>
<div class="form-group">
<label class="col-md-2 col-md-offset-2 col-sm-3" for="pemail">Email</label>
<div class="col-md-6 col-sm-9">
<input type="text" class="form-control" name="pemail" id="pemail" placeholder="Enter Email">
</div>
</div>
<div class="form-group">
<label class="col-md-2 col-md-offset-2 col-sm-3" for="ppass">Password</label>
<div class="col-md-6 col-sm-9">
<input type="password" class="form-control" name="ppass" id="ppass" placeholder="Enter Password">
</div>
</div>
<div class="form-group">
<label class="col-md-2 col-md-offset-2 col-sm-3" for="pcpass">Confirm Password</label>
<div class="col-md-6 col-sm-9">
<input type="password" class="form-control" name="pcpass" id="pcpass" placeholder="Re-enter Password">
</div>
</div>
<div class="form-group">
<label class="col-md-2 col-md-offset-2 col-sm-3" for="pcity">City</label>
<div class="col-md-6 col-sm-9">
<input type="text" class="form-control" name="pcity" id="pcity" placeholder="Enter Your City">
</div>
</div>
<div class="form-group">
<label class="col-md-2 col-md-offset-2 col-sm-3" for="pbirthdate">Birth Date</label>
<div class="col-md-6 col-sm-9 form-inline">
<input type="date" name="pbirthdate" id="pbirthdate" class="form-control">
</div>
</div>
<div class="form-group">
<div class="col-md-2 col-md-offset-2 col-sm-4 col-sm-offset-4 col-xs-4 col-xs-offset-4">
<input type="submit" class="form-control" value="Sign Up">
<input type="hidden" name="sign-up-check" value="1">
</div>
</div>
</form>
minlength rule is not supposed to be spelled minLength.
....
ppass: {
required: true,
minLength: 6 // <- spelled 'minlength' wrong
},
....
Otherwise, it's working: http://jsfiddle.net/psmdogsn/