Develop Reference

Ajax form with post method

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"

AJAX POST data not being sent

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/

How I can send data from html Form, to a nodejs Server using Javascript only

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));
}
});
});
});

Prevent default not working in ajax form submit

I tried my level best in implementing this ajax. I dont what the form's default action to happen.I give prevent default but its not working. My page form is getting submitted without ajax. When i tried on click instead of on submit the captcha validation is not working.Can someone tell whats the mistake here. Thanks in advance.
$(document).ready(function() {
$("#login").submit(function(e) {
e.preventDefault();
$.ajax({
type: "POST",
url: "login.php",
data: $('#login').serialize(),
success: function(data) {
alert(data);
if (data == 'success') {
location.reload();
} else {
$('#loginmsg').html(data).fadeIn('slow');
}
}
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<form action="<?php echo $root ?>login.php" id="login" method="post">
<div id="loginmsg"></div>
<div class="form-group">
<label for="login_email" class="sr-only">Email address</label>
<input name="email" type="email" class="form-control" id="login_email" placeholder="Email address">
</div>
<div class="form-group">
<label for="login_password" class="sr-only">Password</label>
<input name="password" type="password" class="form-control" id="login_password" placeholder="Password">
</div>
<div class="form-group">
<img src="common/captcha/captcha.php" id="captcha" height="50" />
<i class="fa fa-refresh refresh-sec"></i>
<div class="form-item inline">
<div class="captcha-block">
<p class="comment-form-captcha"><input name="captcha" type="text" id="captcha-form" autocomplete="off" class="form-text contact-captcha" maxlength="6" required="required" /></p>
</div>
</div>
</div>
<div class="text-center">
<button type="submit" class="theme_button color1">
Log in
</button>
</div>
</form>

you should use
<button type="button" class="theme_button color1">Log in</button>
instead of
<button type="submit" class="theme_button color1">Log in</button>
and change the form submit to
$(document).on("click",".theme_button ", function(){
});
you have two id in your html
<a class="topline-button" id="login" data-target="#" href="./" data-toggle="dropdown" aria-haspopup="true" role="button" aria-expanded="false">
<i class="fa fa-lock" aria-hidden="true"></i> Login
</a>
<form role="form" action="login.php" id="login" method="post">
</form>

You can try this
$(document).ready(function() {
$(document).on('click','#login' ,function(e) {
e.preventDefault();
$.ajax({
type: "POST",
url: "login.php",
data: $('#login').serialize(),
success: function(data) {
alert(data);
if (data == 'success') {
location.reload();
} else {
$('#loginmsg').html(data).fadeIn('slow');
}
}
});
});
});

How to submit bootstrap form from a modal

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");
}
});
});
});