I have the following form within the body of a bootstrap modal:
<form id="contact" class="contact" name="contact">
<fieldset>
<!-- Form Name -->
<legend>Free Contact</legend>
<!-- Text input-->
<div class="control-group">
<label class="control-label" for="To">To</label>
<div class="controls">
<input id="To" name="To" placeholder="placeholder" class="input-xlarge" required="" type="text">
</div>
</div>
<!-- Textarea -->
<div class="control-group">
<label class="control-label" for="Message">Message</label>
<div class="controls">
<textarea id="Message" name="Message"></textarea>
</div>
</div>
<!--Button (Double)-->
<div class="control-group">
<label class="control-label" for="Send"></label>
<div class="controls">
<button id="Send" name="Send" class="btn btn-success">Send</button>
<button id="Cancel" name="Cancel" class="btn btn-danger">Cancel</button>
</div>
</div>
</fieldset>
</form>
<script>
$("input#Send").click(function(e){
e.preventDefault();
$.ajax({
type: "POST",
url: "Update/contact", //process to mail
data: $('form.contact').serialize(),
success: function(msg){
console.log($('form.contact').serialize);
},
error: function(){
alert("failure");
}
});
});
</script>
The form is submitting but not to the correct codeigniter controller and function. it appears to take the URL from the codeigniter view that the modal is within and tack on the serialized form values, ignoring my jquery post request. What am I doing wrong?
try to change your ajax
$("#Send").click(function(e){
e.preventDefault();
$.ajax({
type: "POST",
dataType: "html"
url: "Update/contact", //process to mail
data: $('form.contact').serialize(),
success: function(data){
console.log($('form.contact').serialize();
},
error: function(){
alert("failure");
}
});
});
You forgot the ( on your serialize.
Your click event need to be add in the document.ready like so :
$(document).ready(function () {
$("input#Send").click(function(e){
e.preventDefault();
$.ajax({
type: "POST",
url: "Update/contact", //process to mail
data: $('form.contact').serialize(),
success: function(msg){
console.log($('form.contact').serialize);
},
error: function(){
alert("failure");
}
});
});
});
Related
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"
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?
On button click, i want to post the contents of the email text box. When i click the login button nothing happens.
My File dir:
Model/ <-- configuration.php is inside Model dir.
View/
Controller/
index.php <-- calls the header, body, and footer php classes that are in the view dir
<!-- Modal body -->
<div class="modal-body" style="padding:40px 50px;">
<form>
<div class="form-group">
<label for="usrname"><span class="glyphicon glyphicon-user"></span> Username</label>
<input type="text" class="form-control" name="email" id="email" placeholder="Enter email">
</div>
<div class="form-group">
<label for="psw"><span class="glyphicon glyphicon-eye-open"></span> Password</label>
<input type="text" class="form-control" id="password" placeholder="Enter password">
</div>
<div class="checkbox">
<label><input type="checkbox" value="" checked>Remember me</label>
</div>
<button type="button" name="loginButton" id="loginButton" name="loginButton" class="btn btn-success btn-block">Login</button>
</form>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<p>Not a member? Sign Up</p>
</div>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function() {
$("#loginButton").click(function() {
$.ajax({
type: "POST",
url: "Model/configuration.php?action=login",
data: "email=" + $("#email").val(),
success: function (result) {
alert("result");
}
})
})
})
</script>
PHP file
<?php
if($_GET['action'] == "login") {
print_r($_POST);
}
?>
The problem seems to be that your if condition had an extra parentheses.
Try this:
<?php
if($_GET['action'] == "login") {
print_r($_POST);
}
?>
$("#loginButton").click(function() {
$.ajax({
type: "POST",
url: "Model/configuration.php?action=login",
data: {email:$("#email").val()},
success: function (result) {
alert("result");
}
})
})
You should serialize your form and pass to data.
data: $("#FormId").serialize()
See also https://api.jquery.com/serialize/
I am trying to send a form using Ajax.
Therefore, thanks to stackoverflow, i am preventing the form from normally sending using event.preventDefault(); but this will not help, because i am always getting redirected to my sendMail.php File.
Here's my code:
$(document).on('submit', '.mailForm', function(e) {
{
e.preventDefault();
$.ajax({
url: $(this).attr('action'),
type: $(this).attr('method'),
data: $(this).serialize(),
success: function()
{
$("#sendBox").show('slow');
}
});
return false;
});
Edit: Here is my form:
<form role="form" class="mailForm" action="sendmail.php" method="post">
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><i class="fa fa-user"></i></div>
<input class="form-control" type="text" id="fName" placeholder="<? LangText("Name", "Nom", "Name"); ?>" required="required">
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><i class="fa fa-envelope-o"></i></div>
<input class="form-control" type="email" id="fMail" placeholder="<? LangText("E-Mail Adresse", "Adresse électronique", "email adress"); ?>" required="required">
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><i class="fa fa-users"></i></div>
<input class="form-control" type="text" id="fCompany" placeholder="<? LangText("Firma", "Entreprise", "Company"); ?>" required="required">
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><i class="fa fa-file-text-o"></i></div>
<textarea class="form-control" rows="5" id="fText" required="required"></textarea>
</div>
</div>
<button type="submit" class="btn btn-default" id="submitMail"><? LangText("Absenden", "Envoyer", "Send"); ?></button>
</form>
Instead of:
$(document).on('submit', '.mailForm', function(e) {
Try:
$(".mailForm").submit(function(){
$.ajax({
url: $(this).attr('action'),
type: $(this).attr('method'),
data: $(this).serialize(),
success: function()
{
$("#sendBox").show('slow');
}
});
return false;
});
Try using the .submit() instead.
$(".mailForm").submit(function(e)
{
$.ajax({
url: $(this).attr('action'),
type: $(this).attr('method'),
data: $(this).serialize(),
success: function()
{
$("#sendBox").show('slow');
}
});
return false;
});
You need to bind an event on form's 'Send' button.
$('.trigger_buttton').on('click', function(e) {
{
e.preventDefault();
$.ajax({
url: $('.mailForm').attr('action'),
type: $('.mailForm').attr('method'),
data: $('.mailForm').serialize(),
success: function()
{
$("#sendBox").show('slow');
}
});
});