The AJAX form does not want to work, it throws an error. I need it to work when a button is clicked and all data is refreshed.
<form name="form" id="form" class="form">
<div class="field">
<label for="input-kitId" class="label is-size-7 has-text-weight-light has-text-left">Order ID</label>
<div class="field">
<div class="control is-expanded">
<input type="text" id="input-kitId" class="home-form__input input is-danger" name="number" value="" placeholder="Order ID"/>
</div>
</div>
</div>
<div class="field">
<label for="input-firstName" class="label is-size-7 has-text-weight-light has-text-left">Email</label>
<div class="field"><div class="control is-expanded">
<input type="text" id="input-firstName" class="home-form__input input" name="email" value="" placeholder="Email"/>
</div>
</div>
</div>
<button type="submit" class="button is-midnightBlue">Generate Booking Reference</button>
</form>
<script type="text/javascript">
$("#form").submit(function(e) {
e.preventDefault();
var form = $(this);
var url = form.attr('action');
$.ajax({
crossDomain: true,
type: "POST",
url: 'https://www.harleymedic.co.uk/qrcodes/form.php',
data: form.serialize(),
success: function(data)
{
alert(data);
}
});
});
</script>
Try to add a form method. Get or Post method
Ex: form method="post"
Related
I have created an application in the php, I am using the bootstrap model to update user details using AJAX. Now there are two forms: first updates the user's details and adds comments to another user. When I try to submit a form to AJAX and I try to submit a form, it does not work, when i use ajaxComplete function then my form data has been submitted successfully, but at the time it submits the form multiple times at the same time.
$(document).ajaxComplete(function() {
$("#add-remarks").on('submit', (function(e) {
e.preventDefault();
$.ajax({
type: "POST",
url: $("#add-remarks").attr("action"),
cache: false,
context: this,
data: $("#add-remarks").serialize(), //only input
success: function(data) {
var obj = JSON.parse(data);
$("#add-remarks")[0].reset();
if (obj['msg'] == 'isuccess') {
notification('insert');
} else {
notification('error');
}
}
});
}));
<div class="modal-body">
<div class="row">
<div class="col-md-12">
<div class="card-group-control card-group-control-right" id="accordion-model">
<div class="card">
<form method="post" name="update-user-details" id="update-user-details" action="">
<div class="row">
<div class="col-md-4">
<div class="form-group form-group-float">
<label class="d-block font-weight-semibold">First Name</label>
<input type="text" class="form-control" placeholder="First Name" name="customer_name" id="customer_name">
</div>
</div>
<div class="col-md-4">
<div class="form-group form-group-float">
<label class="d-block font-weight-semibold">Mobile</label>
<input type="text" class="form-control" placeholder="Mobile" name="mobile_number" id="mobile_number">
</div>
</div>
<button type="submit" class="btn bg-blue">Save Changes</button>
</div>
</form>
<form method="post" name="remarks" id="remarks" action="">
<div class="row">
<div class="col-md-4">
<div class="form-group form-group-float">
<label class="d-block font-weight-semibold">Remarks</label>
<input type="text" class="form-control" placeholder="Remarks" name="remarks" id="remarks">
</div>
</div>
<button type="submit" class="btn bg-blue">Save Changes</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
Move this piece of code outside of your ajaxComplete() function. You are probably somehow triggering the ajaxComplete function multiple times, causing multiple event listeners for the form submit.
$("#add-remarks").on('submit', (function(e) {
e.preventDefault();
$.ajax({
type: "POST",
url: $("#add-remarks").attr("action"),
cache: false,
context: this,
data: $("#add-remarks").serialize(), //only input
success: function(data) {
var obj = JSON.parse(data);
$("#add-remarks")[0].reset();
if (obj['msg'] == 'isuccess') {
notification('insert');
} else {
notification('error');
}
}
});
}));
I am trying to run a simple contact form with html and javascript. I am trying to get filled out a contact form and then post the data to api. Upon page load I immediately get an error for Unhandled promise rejection.
HTML is:
<form id="contact-form"method="post" class="form-horizontal contact-form" action="#">
<!-- Honeypot SPAM Protection -->
<input type="text" name="cf[honeypot]" style="display: none">
<!-- END Honeypot SPAM Protection -->
<div class="form-group">
<div class="col-md-6">
<input type="text" name="cf[name]" class="form-control required" placeholder="İsim">
</div>
<div class="col-md-6">
<input type="email" name="cf[email]" class="form-control required email" placeholder="Email">
</div>
</div>
<div class="form-group">
<div class="col-md-6">
<input type="url" name="cf[url]" class="form-control url" placeholder="URL">
</div>
<div class="col-md-6">
<input type="text" name="cf[subject]" class="form-control required" placeholder="Konu">
</div>
</div>
<div class="form-group">
<div class="col-md-12">
<textarea name="cf[message]" rows="6" class="form-control required" placeholder="Mesaj"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-md-12">
<input type="submit" value="Gönder" class="btn btn-sm btn-block btn-primary">
</div>
</div>
</form>
<script type="text/javascript" src="assets/js/signup.js"></script>
And the javascript code is:
$(document).ready(function() {
$("contact-form").submit(function(e){
e.preventDefault();
var form=this;
var URL = "https://v9jg33e7pa.execute-api.us-east-1.amazonaws.com/beta/sendemail/";
var data = {
name: $(form).find("#cf[name]").val(),
email: $(form).find("#cf[email]").val(),
urlContact: $(form).find("#cf[url]").val(),
subject: $(form).find("#cf[subject]").val(),
message: $(form).find("#cf[message]").val()
};
console.log(data);
if (""===$(form).find("#cf[honeypot]").val()){
$.ajax({
type: "POST",
url: URL,
dataType: "json",
contentType: "application/json",
data: JSON.stringify(data),
success: function () {
// clear form and show a success message
alert("yay");
},
error: function () {
// show an error message
alert("boo");
},
});
}
});
});
But when loading the page I get the following error:
Could not figure out what I am doing wrong?
this is my form in form.html,I have to do an ajax call type post
<div class= "container " >
<div class="form-group ">
<label for="id">Id</label>
<input type="text" class="form-control" id="id" >
</div>
<div class="form-group">
<label for="name">Nome</label>
<input type="text" class="form-control" id="name">
</div>
<div class="form-group">
<label for="pwd">Prezzo</label>
<input type="text" class="form-control" id="prezzo">
</div>
<input type="submit" value="invia dati" class="btn btn-primary" id="button" />
</div>
I solved it in this way
var $id = $('#id');
var $name = $('#name');
var $prezzo = $('#prezzo');
$(function(){
$('#button').click(function(e){
e.preventDefault();
console.log('select_link clicked');
var object = {
id:$id.val(),
name:$name.val(),
prezzo: $prezzo.val()
};
$.ajax({
type: 'POST',
data: JSON.stringify(object),
contentType: 'application/json',
url: 'http://localhost:3000/router/newProducts',
success: function(data) {
console.log('success');
console.log(JSON.stringify(object));
}
});
});
});
In the HTML, the forms look identical, just the form ID is changed. I use this JS file to submit the forms using AJAX:
$("#change-password").submit(function(e) {
var url = "http://domain/actions";
$.ajax({
type: "POST",
url: url,
data: $("#change-password").serialize(),
success: function(data) {
$("div.change-password-response").html(data);
}
});
e.preventDefault();
});
$("#change-email").submit(function(e) {
var url = "http://domain/actions";
$.ajax({
type: "POST",
url: url,
data: $("#change-email").serialize(),
success: function(data) {
$("div.change-email-response").html(data);
}
});
e.preventDefault();
});
HTML Part
<div class="col-md-6 col-sm-6 add_bottom_30">
<h4>Schimbare parola</h4>
<form id="change-password" method="post">
<div class="form-group">
<label>Parola veche</label>
<input class="form-control" name="old_password" id="old_password" type="password" autocomplete="off">
</div>
<div class="form-group">
<label>Parola noua</label>
<input class="form-control" name="new_password" id="new_password" type="password" autocomplete="off">
</div>
<div class="form-group">
<label>Confirma parola noua</label>
<input class="form-control" name="confirm_new_password" id="confirm_new_password" type="password" autocomplete="off">
</div>
<input type="hidden" name="action" value="change-password">
<button type="submit" class="btn_1 green">Actualizeaza parola</button>
<div class="change-password-response form-response"></div>
</form>
</div>
<div class="col-md-6 col-sm-6 add_bottom_30">
<h4>Schimbare adresa email</h4>
<form id="change-email" method="post">
<div class="form-group">
<label>Email vechi</label>
<input class="form-control" name="old_email" id="old_email" type="text" autocomplete="off">
</div>
<div class="form-group">
<label>Email nou</label>
<input class="form-control" name="new_email" id="new_email" type="text" autocomplete="off">
</div>
<div class="form-group">
<label>Confirma email nou</label>
<input class="form-control" name="confirm_new_email" id="confirm_new_email" type="password" autocomplete="off">
</div>
<input type="hidden" name="action" value="change-email">
<button type="submit" class="btn_1 green">Actualizeaza Email</button>
<div class="change-email-response form-response"></div>
</form>
</div>
Now, my problem is that Form 1 is working, Form 2 is not triggering the AJAX and works as normal form. What am I doing wrong?
Check if #change-email has other binded events.
In Firebug, inspect #change-email element and go to Event tab.
In Chrome, inspect that element and go to Event Listeners tab.
You will see all binded events and corresponded callback functions.
If it will not help, try to submit a form manually from Console
Inspect a form, then run
$($0).submit();
If it will work, looks like you have some events on you button.
Here there are form data with image. I need to send whole image data through json object. Below I have mentioned the code. under the below method I could get whole data except logo. I need to send whole data at once
<form class="form-horizontal" id="companyData">
<fieldset>
<legend>Add Company</legend>
<div class="control-group">
<label class="control-label" for="code">Code</label>
<div class="controls">
<input id="code" name="code" type="text" placeholder="code" class="input-large">
</div>
</div>
<div class="control-group">
<label class="control-label" for="name">Name</label>
<div class="controls">
<input id="name" name="name" type="text" placeholder="Name" class="input-xlarge">
</div>
</div>
<div class="control-group">
<label class="control-label" for="logo">Logo</label>
<div class="controls">
<input id="logo" name="logo" class="input-file" type="file">
</div>
</div>
<div class="control-group">
<label class="control-label" for="username">Admin Username</label>
<div class="controls">
<input id="username" name="username" type="text" placeholder="" class="input-xlarge">
</div>
</div>
<div class="control-group">
<label class="control-label" for="AdminPassword">Admin Password</label>
<div class="controls">
<input id="AdminPassword" name="AdminPassword" type="text" placeholder="" class="input-xlarge">
</div>
</div>
<div class="control-group">
<label class="control-label" for="submit"></label>
<div class="controls">
<button id="submit" name="submit" class="btn btn-primary">Save</button>
</div>
</div>
</fieldset>
</form>
here is my script
<script type="text/javascript">
$(document).ready(function () {
$("#submit").click(function (e) {
e.preventDefault();
var formData = JSON.parse(JSON.stringify(jQuery('#companyData').serializeArray()));
$.ajax({
type: "POST",
url: "",
data: formData,
cache: false,
success: function (data) {
}
});
});
});
</script>
image is a problem while using json.stringify.Send the formdata object and append all the items into it. Try this
var imgFile = document.getElementById('logo');
var imgfileList = imgFile.files;
var formdata = new FormData();
if (imgfileList && imgfileList != null && imgfileList.length > 0) {
formdata.append(imgfileList[0].name, imgfileList[0]); or add the name
formdata.append('logofilename', imgfileList[0]);
}
var other_data = $('#companyData :input').serializeArray();
$.each(other_data, function (key, input) {
formdata.append(input.name, input.value);
});
$.ajax({
url: UrlRoot.SaveTeamInfo,
data: formdata,
processData: false,
contentType: false,
type: 'POST',
success: function () {
}
});
Please remeber to add process data and content type to false as specified in the ajax call above.
try this is formdata is undefined'
if(typeof FormData == "undefined"){
var data = [];
data.push(imgfileList[0].name, imgfileList[0]);
}
else{
var data = new FormData();
data.append('data', JSON.stringify(inputData));
}
Use .push instead of .append for array