We Keep Coding

Jquery append and Push not a function

Jquery push and append not working.
I have this code
<form action="">
<input type="text" name="text">
<input type="text" name="textw">
<button type="submit" name="submit">submit</button>
</form>
<p>teasdfas</p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$('form').on('submit', function(e) {
e.preventDefault();
let formata = $('form').serialize();
formata.append('id', '1300');
console.log(formata)
})
</script>
The problem is that when I submit the form the console outputs
pay.php:12 Uncaught TypeError: formata.append is not a function
at HTMLFormElement.<anonymous> (pay.php:12:17)
at HTMLFormElement.dispatch (jquery.min.js:2:43064)
at v.handle (jquery.min.js:2:41048)
saying append is not a function, also did with push and some regular objects and same output. Please how do i go on with this.

Try serializeArray() insteade of serialize() then try to push

Try This codes
<form action="">
<input type="text" id="text" name="text">
<input type="text" id="textw" name="textw">
<button type="submit" class="submitform" name="submit">submit</button>
</form>
<p id="res">teasdfas</p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js" type="text/javascript"></script>
<script>
$(document).on('click', '.submitform', function(e) {
e.preventDefault();
var text=$('#text').val();
var textw=$('#textw').val();
var id='1300';
if (text==''){alert("Enter Text!");return false;}
if (textw==''){alert("Enter Textw!");return false;}
if (id==''){alert("Bad Boy!");return false;}
$.ajax
({
url: 'https://posturl.com/page.php',
data: {"text":text,"textw":textw,"id":id},
type: 'post',
success: function(returnedData){
$('#res').html(returnedData);
console.log(returnedData)
}
});
});
</script>

Submit a form with a file without refresh

Hello guys i don't know to submit a form without page refresh.
This is my code:
My form:
<form method="POST" id="post123" action="" enctype="multipart/form-data">
<input class="form-control input-lg" name="book_name" id="inputLarge" type="text">
<input class="form-control" name="book_price" type="number">
<textarea class="form-control" id="exampleTextarea2"
name="book_description" maxlength="100" rows="7"></textarea>
<textarea class="form-control" name="book_content" id="exampleTextarea4" maxlength="200" rows="7"></textarea>
<input type="file" name="file" id="imgInp44" >
<button type="submit" name='action' id="sendbutton21" value="post1" class="btn btn-primary">
Submit
</button>
</form>
Javascript:
$("#sendbutton21").click(function() {
var url = "http://localhost:5000/magazin_insert"; // the script where you handle the form input.
$.ajax({
type: "POST",
url: url,
data: $("#post123").serialize(), // serializes the form's elements.
success: function(data)
{
alert(data); // show response from the php script.
}
});
return false; // avoid to execute the actual submit of the form.
});
How i can modify my code to submit along with text a file towards the mysql db?

Your first issue is in this line:
<button type="submit" name="action" ... />
You have two possibilities:
change type="submit" to type="button"
use event.preventDefault() in your $("#sendbutton21").click(function() {
After, your ajax call can be changed in order to include the file:
var form = document.getElementById('post123');
var formData = new FormData(form);
$.ajax({
url: url,
data: formData,
type: 'POST',
processData: false,
success: function(data) {
alert(data);
}
});
$("#sendbutton21").click(function() {
var url = "http://localhost:5000/magazin_insert"; // the script where you handle the form input.
// for testing...
url = 'https://api.github.com/repositories';
var form = document.getElementById('post123');
var formData = new FormData(form);
$.ajax({
url: url,
data: formData,
type: 'GET',
processData: false,
success: function (data) {
console.log(data[0].id);
}
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<form method="POST" id="post123" action="" enctype="multipart/form-data">
<input class="form-control input-lg" name="book_name" id="inputLarge" type="text">
<input class="form-control" name="book_price" type="number">
<textarea class="form-control" id="exampleTextarea2"
name="book_description" maxlength="100" rows="7"></textarea>
<textarea class="form-control" name="book_content" id="exampleTextarea4" maxlength="200" rows="7"></textarea>
<input type="file" name="file" id="imgInp44" >
<button type="button" name='action' id="sendbutton21" value="post1" class="btn btn-primary">
Submit
</button>
</form>

Try https://jquery-form.github.io/form/ plugin to easily send form via ajax sample code:
$('#post123').ajaxForm(function() {
// SUCCESS CALLBACK
});

To submit a form without refresh, use event.preventDefault().
$("#sendbutton21").click(function(event) {
event.preventDefault();
var url = "http://localhost:5000/magazin_insert"; // the script where you handle the form input.
$.ajax({
type: "POST",
url: url,
data: $("#post123").serialize(), // serializes the form's elements.
success: function(data)
{
alert(data); // show response from the php script.
}
});
return false; // avoid to execute the actual submit of the form.
});

Instead of
$("#sendbutton21").click(function() {
use
$("#post123").submit(function() {

How can i tell PHP which form is submitted

Is there a way to tell PHP which form has been submitted?
Form 1
<form id="factory" action="bullets.php" method="post">
<input type="submit" value="Kopen">
</form>
And form 2
<form id="localFactory" action="bullets.php" method="post">
<input type="submit" value="Kopen">
</form>
These forms are on one page.
My javascript code:
var url;
$('form').submit(function (event) {
event.preventDefault();
url = $(this).attr('action');
location.hash = url;
$.ajax ({
url: url,
method: 'POST',
data: $(this).serialize()
}).done(function (html) {
$('#content').html(html);
});
});
If i got an input i get a $_POST variable.
So i need to know which of the above forms has been submitted?
Thanks..

This will work:
var url;
$('form').submit(function (event) {
event.preventDefault();
url = $(this).attr('action');
location.hash = url;
var data = $(this).serialize();
data += "&formId=" + encodeURIComponent($(this).attr('id')); // if you have data in the form.
// do this if you don`t have data in the form:
// data = {formId: $(this).attr('id')};
$.ajax ({
url: url,
method: 'POST',
data: data
}).done(function (html) {
$('#content').html(html);
});
});
You can then get the forms Id from $_POST['formId']

Create a submit button with a name:
<form id="factory" action="bullets.php" method="post">
<button type="submit" value="factory" name="submit">Kopen</button>
</form>
This value is now posted:
if (!empty($_POST['submit']) && $_POST['submit'] == 'factory') {
}

By namespacing the input fields, you can easily identify which fields are from which form, and by extension which form was submitted.
<form id="factory" action="bullets.php" method="post">
<input type="text" name="form_1[my_input]">
<input type="submit" value="Kopen">
</form>
<form id="localFactory" action="bullets.php" method="post">
<input type="text" name="form_2[my_input]">
<input type="submit" value="Kopen">
</form>
Then it is as simple as:
if (isset($_POST['form_1'])) {
// This post variable is an array of each field.
}

If you want an html only solution, you could add a hidden input with the form id:
<form id="factory" action="bullets.php" method="post">
<input type="hidden" value="factory" name="formId"/>
<input type="submit" value="Kopen">
</form>
And then test it with:
if (isset($_POST['formId']) && $_POST['formId'] == 'factory') {
//Do what you want here
}

How to include submit button name and values on form Serialize() ajax

I have trouble, my code doesn't work, because my server script side need a name from the submit button. I'm using Ajax method, and I'm using data: serialize, when I have Click on Submit, it doesn't work. Here is my JavaScript code:
$(function(){
$('#buy_product').submit(function(e){
e.preventDefault();
var submitData = $('#buy_product').serialize();
submitData.push({ name: this.name, value: this.value });
$('.loading').html('{{HTML::image('img/ajax-loader.gif')}}');
$.ajax({
type: "POST",
data: submitData,
url: "{{URL::base()}}/products/view/{{$products->id}}/{{Str::slug($products->name_product, '_')}}",
success: function(msg){
$('#qty').val('');
$('.loading').html(msg);
}
});
});
});
If you have clue, please tell me, I'll be glad.
My button is like this:
<input name="update" id="update" type="submit" value="update">
<input name="empty" id="empty" type="submit" value="empty">

I believe you can't do that but you can use a hidden field
<input type="hidden" name="any_name" value="any_value" />

Try this:
Java Script Code:
<script type='text/javascript'>
$(function(){
$('#form').submit(function(e){
e.preventDefault();
var submitData = $('#form').serialize();
var btnName = $('#submit').attr('name');
var btnVal = $('#submit').val();
var btn = '&'+btnName+'='+btnVal;
submitData += btn;
alert(submitData);
});
});
</script>
HTML Code:
<form action="" id="form" type='post'>
<input type="text" name="name" id="name" value='Scott'/>
<input type="submit" name="submit" id="submit" value='POST'/>
</form>
or use:
var submitData = $('#buy_product').serialize();
submitData += '&btnName=' + $('#your_submitbtn_id').attr('name') + '&btnValue='+ $('##your_submitbtn_id').attr('value');

clear form data after submit jquery

How do I clear a form data once the submit succeed in jquery?
$(document).ready(function () {
$('#submit').click(function () {
$.ajax({
type: "POST",
url: 'final.php',
data: "user=" + $('#user').val() + "&comment=" + $('#comment').val(),
success: function (data) {
$('#status').html(data);
}
});
});
});
HTML... I need to clear the form data once the form is submitted....Any help would be appreciated.
<input type="text" name="user" id="user">
<input type="text" name="comment" id="comment">
<input name="submit" type="submit" id="submit">
<div id="status">

$('#formId').trigger('reset');

$('form').find('input[type=text]').val('') should do
Call this in the success callback of your Ajax