Develop Reference

Form input field not recognized in jquery

I have this search form to post using jQuery:
<form id="search-article-form" method="post">
<input type="hidden" name="token" value="LSN71T8CeWr">
<input id="searcharticle" type="text" placeholder="search..."
name="searcharticle">
</form>
jQuery snippet:
$(function () {
$('#searcharticle').keyup(function() {
var form = $('#search-article-form');
console.log('form:', form.serialize());
$.ajax({
type: "POST",
url: "/search/article/",
data: form.serialize(),
success: searchSuccess,
dataType: 'html'
});
});
});
function searchSuccess(data, textStatus, jqXHR) {
console.log('data:', data);
$('#search-results').html(data);
}
The problem is that the form does not seem to be serialized properly, so on keyup I see only this in the console:
form: token=LSN71T8CeWr
Also on the server side, the received post parameters is empty.
So wondering what is wrong here and how to fix it?

Works fine in the attached snippet
$(function () {
$('#searcharticle').keyup(function() {
var form = $('#search-article-form');
console.log('form:', form.serialize());
});
});
function searchSuccess(data, textStatus, jqXHR) {
console.log('data:', data);
$('#search-results').html(data);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="search-article-form" method="post">
<input type="hidden" name="token" value="LSN71T8CeWr">
<input id="searcharticle" type="text" placeholder="search..."
name="searcharticle">
</form>

Why ajax request not sending?

I have sample function for create event for any inputs of html form.
Function code:
function event(form, element) {
var timer;
$(element).keyup(function () {
clearTimeout(timer);
if ($(element).val()) {
timer = setTimeout(function() {
form.submit(function (e) {
e.preventDefault();
$.ajax({
url : form.attr('action'),
type : form.attr('method'),
data : form.serialize(),
dataType: 'json',
success : function (json)
{
console.log(json);
},
error: function(error)
{
console.log(error);
}
});
});
$(element).css("border-color","green");
setTimeout(function() {
$(element).css("border-color", "#ccddea");
}, 3000);
}, 5000);
}
});
}
Usage:
var form = $('#form');
event(form, '#name');
event(form, '#lastname');
HTML form code:
<form action="http://localhost/app/form.php" method="POST" enctype="multipart/form-data" id="form">
<div class="row bottom-mrg">
<div class="col-md-6 col-sm-6">
<div class="input-group">
<input type="text" class="form-control" name="name" placeholder="Name" id="name">
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class="input-group">
<input type="text" class="form-control" name="lastname" placeholder="Last Name" id="lastname">
</div>
</div>
</div>
<button type="submit">Send</button>
</form>
My form.php code:
<?php
$name = $_POST['name'] ?? null;
if(isset($name)) {
echo $name;
}
But after timeout form not sending. When I use only form.submit() it's work but with ajax() request not working. How to send ajax request in my situation?

I found a solution and answer for my question! You can look, test and leave your opinion about the solution found.
Javascript code:
var form = $('#form');
function event(form, element) {
var timer;
$(element).on('keyup', function () {
clearTimeout(timer);
timer = setTimeout(function () {
axios({
method: form.attr('method'),
url: form.attr('action'),
data: form.serialize(),
config: { headers: {'Content-Type': 'multipart/form-data' }}
})
.then(function (response) {
console.log(response.data);
})
.catch(function (response) {
console.log(response);
});
$(element).css("border-color","green");
setTimeout(function() {
$(element).css("border-color", "#ccddea");
}, 3000);
}, 5000);
});
$(element).on('keydown', function () {
clearTimeout(timer);
});
}
event(form, "#name");
event(form, "#lastname");
I used axios but using ajax also possible.

AJAX function is not firing

Hello everyone I want to parse array to Codeigniter controller but my code is not working can you please tell me where is a mistake in this code. I am a new in jQuery I know it is a very basic mistake.
jQuery Code:
$("#add_state").click(function(){
var addstate = {
State: $.trim($('#statename').val()
}
$.ajax({
type: "POST",
url: "<?php echo base_url()?>/index.php/geo/add_state",
data: addstate,
success: function(response){
alert(response);
}
});
event.preventDefault();
});
HTML Code:
<form role="form">
<div class="form-group">
<label for="exampleInputEmail1">State Name</label>
<input type="text" name="State" class="form-control" id="statename" placeholder="Enter State Name">
</div>
<button type="submit" class="btn btn-info" id="add_state">Submit</button>
</form>

trim is not closed properly
it suppose to be like this
$("#add_state").click(function(){
var addstate = {
State: $.trim($('#statename').val())
}
$.ajax({
type: "POST",
url: "<?php echo base_url()?>/index.php/geo/add_state",
data: addstate,
success: function(response){
alert(response);
}
});
event.preventDefault();
});

Missing ) in State: $.trim($('#statename').val(). Change it to State: $.trim($('#statename').val()).
Use $(document).on('click', '#add_state', function() { instead$("#add_state").click(function(){. Because first solution will work, if you add script before dom element was created.
Check url, maybe it's incorrect.

Show success message on form submission

I'm trying to have this form submitted and it works. However, i can't get to show a "success" message after clicking submit button.
function signup() {
var postData={ "service" :$('input[name=service]').val(), "ent_id": $('input[name=ent_id]').val(), "name": $('input[name=name]').val(), "mail_address" : $('input[name=mail_address]').val(), "password": $('input[name=password]').val()};
postData = JSON.stringify(postData);
$.ajax({
url: 'http://domain.com/api?service=security&action=signup&request=' + postData,
type: 'GET',
});
return false;
}
Here's the form:
<form onsubmit="return signup()">
Name:<input type="text" name="name">
Email:<input type="text" name="mail_address">
Password: <input type="password" name="password" >
<input type="submit" name="submit" value="Submit">
<input type="hidden" name="service" value="wf" />
<input type="hidden" name="ent_id" value="null" />
</form>
Could someone here help me out with the codes?

This should do what you want it to do. All you need to do is use the success / error callbacks that come with jQuery.
function signup() {
var postData={
"service": $('input[name=service]').val(),
"ent_id": $('input[name=ent_id]').val(),
"name": $('input[name=name]').val(),
"mail_address" : $('input[name=mail_address]').val(),
"password": $('input[name=password]').val()
};
postData = JSON.stringify(postData);
$.ajax({
url: 'http://domain.com/api?service=security&action=signup&request=' + postData,
type: 'GET',
success: function() {
alert('successfully submitted');
},
error: function() {
alert('an error has occurred.');
}
});
return false;
}

$("form[name='myForm']").submit(function(e) {
var postData={ "service" :$('input[name=service]').val(), "ent_id": $('input[name=ent_id]').val(), "name": $('input[name=name]').val(), "mail_address" : $('input[name=mail_address]').val(), "password": $('input[name=password]').val()};
postData = JSON.stringify(postData);
$.ajax({
url: 'http://domain.com/api?service=security&action=signup&request=' + postData,
type: 'GET',
success: function(data){
//alert(data);
alert("success message");
}
});
return false;
}
<form id="myForm" name="myForm" accept-charset="utf-8">

POST via Ajax does not work correctly

I looked now through a various number of StackOverflow pages and other websites - but can't find the correct solution for my problem. I try to post two values over to a php page via Post:
loginframe.php:
<form class="signin">
<input type="username" id="inputUsername" class="control" placeholder="Username" required autofocus>
<input type="password" id="inputPassword" class="control" placeholder="Password" required>
<div id="remember" class="checkbox">
<label>
<input type="checkbox" value="remember-me">Remember me
</label>
</div>
<button class="btn-login" type="submit" value="login" id="btn-login">Sign in</button>
</form>
My js:
$(document).ready(function(){
$("#btn-login").click(function(){
var username = $("#inputUsername").val();
var password = $("#inputPassword").val();
$.ajax(
{
type: "POST",
url: 'login.php',
data: {
user: username,
pass: password
},
success: function(result)
{
$("#result").html(result);
}
});
});
});
My login.php
<?php
if(isset($_POST['user']) && isset($_POST['pass']))
{
echo $_POST['user'];
echo $_POST['pass'];
} else {
include 'loginframe.php';
}
This login.php is just to check now if the data is passed. That is absolutely not the case. It always opens loginframe.php...
I can't find the error - I appreciate your help! Thank you a lot.

Use prevent default method.
$(document).ready(function(){
$("#btn-login").click(function(event){
event.preventDefault(); // this one prevents the default submission of the form
var username = $("#inputUsername").val();
var password = $("#inputPassword").val();
$.ajax(
{
type: "POST",
url: 'login.php',
data: {
user: username,
pass: password
},
success: function(result)
{
$("#result").html(result);
}
});
});
});