We Keep Coding

How do I detect submitted button with ajax and php?

I have a form on my front-end and when the submit button is clicked I want to send the details to my get-emp.php file without page reload.
The code looks like this:
index.html
<form class="form-emp-details hide" action="">
<div class="form-group">
<label for="">First name:</label>
<input type="text" class="form-control input-emp-firstname" name="input_emp_firstname">
</div>
<div class="form-group">
<label for="">Last name:</label>
<input type="text" class="form-control input-emp-lastname" name="input_emp_lastname">
</div>
<div class="form-group">
<label></label>
<button type="submit" class="btn btn-default btn-submit-1" name="submit_emp_details">Save</button>
</div>
</form>
custom.js
$(".form-emp-details").("submit", function(e) {
var input_first_name = $(".input-emp-firstname").val();
$.ajax({
type: "POST",
url: "get-emp.php",
data: {
input_emp_firstname:input_first_name,
},
success: function(data) {
console.log(data)
},
error: function(xhr,status,error) {
console.log(error);
}
});
});
get-emp.php
if(isset($_POST['submit_emp_details'])) {
$firstname = $_POST['input_emp_firstname'];
echo $firstname;
}
I want to display the submitted form data on get-emp.php file but it seems that I am not able to detect the submitted button and echo the form data on.
My goal is to capture all form data with a single request variable or identifier $_POST['submit_emp_details']
Any help is greatly appreciated. Thanks

$("#MyformId").submit(function(e) {
e.preventDefault();
var form = $(this);
var url = form.attr('action');
$.ajax({
type: "POST",
url: url,
data: form.serialize(),
success: function(data)
{
// success..
}
});
});

You passing the POST data of firstname and lastname by:
input_emp_firstname
input_emp_lastname
so, you need to change the $_POST['submit_emp_details'] to $_POST['input_emp_firstname'] on file get-emp.php to
<?php
if(isset($_POST['input_emp_firstname'])) {
$firstname = $_POST['input_emp_firstname'];
echo $firstname;
}
Edit 2:
$.ajax({
type: "POST",
url: "get-emp.php",
cache: false,
data: {
submit_emp_details: {
input_emp_firstname:input_first_name,
input_emp_lastname:input_last_name
}
},
success: function(data) {
console.log(data)
},
error: function(xhr,status,error) {
console.log(error);
}
});

jquery ajax form submit with edit values

I have a datatable where I have the detail column with an edit button. When the user clicks on the edit am passing the id as a parameter. I am fetching all the values for that id and displaying in the form. Now when I edit the values and submit the form using PUT method it is getting inserted in the table, the values are passing as a parameter and it shows the empty form. How to solve this issue.
HTML:
<form class="container" id="myform" name="myform" novalidate>
<div class="form-group row">
<label for="position" class="col-sm-2 col-form-label fw-6">Position</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="position" name="position" placeholder="Position" required>
</div>
</div>
<div class="form-group row">
<label for="location" class="col-sm-2 col-form-label fw-6">Location</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="location" name="location" placeholder="Location" required>
</div>
</div>
<div class="form-group row">
<div class="col-sm-10">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</form>
PUT Method Script:
<script type='text/javascript'>
$(document).ready(function(){
$("#myform").submit(function(e) {
var parms = {
position : $("#position").val(),
location : $("#location").val()
};
var par_val;
var param_id = new window.URLSearchParams(window.location.search);
par_val = param_id.get('id');
console.log(par_val);
var par_url = par_val;
$.ajax({
url: "http://localhost:3000/joblists/"+par_val,
method: 'PUT',
async: false,
dataType : "json",
contentType: "application/json; charset=utf-8",
data: JSON.stringify(parms),
success: function(data){
console.log('Submission was successful.');
console.log(data);
},
error: function (data) {
console.log('An error occurred.');
console.log(data);
},
})
});
});
</script>
GET method script:
<script type="text/javascript">
$(document).ready(function(){
var id_val;
var params = new window.URLSearchParams(window.location.search);
id_val = params.get('id');
console.log(id_val);
var url1=id_val;
$.ajax({
url: "http://localhost:3000/joblists/"+id_val,
type: "GET",
dataType: "json",
success: function (data) {
// alert(JSON.stringify(data));
console.log(typeof(data));
$("#position").val(data.position);
$("#location").val(data.location);
},
error: function(data) {
console.log(data);
}
});
});
</script>
After submitting the form the page should remain the same with edit form values. only the edited values should be inserted. How to achieve this.

$('#myform').on('submit', function (e) {
e.preventDefault();
..........

I have checked your code in my editor. There are some changes which i made in ajax request, and it now works for me. here is the code. Try it
<script type='text/javascript'>
$(document).ready(function(){
$("#myform").submit(function(e) {
e.preventDefault();
var parms = {
position : $("#position").val(),
location : $("#location").val()
};
var par_val;
var param_id = new window.URLSearchParams(window.location.search);
par_val = param_id.get('id');
console.log(par_val);
var par_url = par_val;
$.ajax({
url: "http://localhost:3000/joblists/"+id_val,
method: 'POST', //or you can use GET
dataType : "json", //REMOVED CONTENT TYPE AND ASYNC
data: {send_obj:JSON.stringify(parms)}, //ADDED OBJECT FOR DATA
success: function(data){
console.log('Submission was successful.');
console.log(data);
},
error: function (data) {
console.log('An error occurred.');
console.log(data);
},
})
});
});
</script>

Adding prevent default in form submit handle is enough. You're handling the post request by ajax call.
e.preventDefault();

There are 2 changes in your code.
This code will prevent your page from reloading and also you are not sending the data in proper format.
$("#myform").submit(function(e) {
e.preventDefault(); // 1. Dont reload the page
var parms = {
position : $("#position").val(),
location : $("#location").val()
};
var par_val;
var param_id = new window.URLSearchParams(window.location.search);
par_val = param_id.get('id');
console.log(par_val);
var par_url = par_val;
$.ajax({
url: "http://localhost:3000/joblists/"+par_val,
method: 'PUT',
async: false,
dataType : "json",
contentType: "application/json; charset=utf-8",
data: parms, // 2. Just send the parms object bcoz you already defined the dataType as json so it will automatically convert it into string.
success: function(data){
console.log('Submission was successful.');
console.log(data);
},
error: function (data) {
console.log('An error occurred.');
console.log(data);
},
})
});

Displaying all data from loop

I am able to fetch all my data from database successfully but only the last item in the array displays. What am I doing wrong?
HTML
#foreach($groups as $group)
<button type ="button" value="{!! $group->id !!}" id="btn" name="btn">{!!$group->name!!}</button>
<div class="panel">
<label for="myvalue"><input type="checkbox" id="myvalue" /> <span>Label text x</span></label>
</div>
#endforeach
JavaScript
$.ajax({
type: "GET",
url: "/dashboard/ajax=?id=" +id,
data: {
id: $(this).val(),
access_token: $("#access_token").val()
},
success: function (result) {
$.each(result, function (i, fb) {
$("label[for='myvalue']").text(fb.name);
});
}
);

This way you are replacing the label text, not creating labels. What you are looking for would be something like:
<div class="panel" id="labels_cotainer">
<label for="myvalue">
<input type="checkbox" id="myvalue" />
<span>Label text x</span></label>
</div>
$.ajax({
type: "GET",
url: "/dashboard/ajax=?id=" +id,
data:{
id: $(this).val(),
access_token: $("#access_token").val()
},
success:function(result) {
$.each(result, function (i, fb) {
$("#labels_cotainer").append('<label>'+fb.name+'</label>');
}
}
});
This code will append every label to your panel

You have to dynamically create new labels and add fb.name to it otherwise you will replace all values until the last value
success:function(result) {
$.each(result, function (i, fb) {
$("#outerDiv").append('<label>'+fb.name+'</label>');
});
}

TypeError: 'append' called on an object that does not implement interface FormData with processData and contentType false both

first all, scuse me my english. I'm trying to submit a form with ajax, my js code is the next:
$("#formPublicidad").on('submit', function(event) {
event.preventDefault();
var dataForm = new FormData(document.getElementById('formPublicidad'));
if(dataForm.get('url') == '' || dataForm.get('texto') == '' || dataForm.get('imagen') == '') {
$("#formMsg").text('Debe rellenar todos los campos');
$("#formMsg").css('display', 'block');
}else {
$("#formMsg").text('Cargando...');
$(".btn-form-pub").attr('disabled', true);
$.ajax({
url: 'publicidad.ajax.php',
method: 'POST',
data: dataForm,
pocessData: false,
contentType: false,
cache: false,
dataType: 'json',
success: function(response) {
var msg = JSON.stringify(response.msg).replace(/\"/g, "");
$(".btn-form-pub").attr('disabled', false);
if(msg != 'success') {
document.getElementById('formMsg').textContent = msg;
document.getElementById('formMsg').style = 'display: block;';
}else {
$("#formModal").modal('hide');
}
}
});
}
});
and here is my HTML code:
<form method="post" id="formPublicidad">
<div class="modal-body">
<span id="formMsg"></span>
<input type="hidden" name="posicion" id="pubPos">
<label for="publiUrl">URL</label>
<input type="text" name="url" id="publiUrl" placeholder="Ej.: www.google.com.uy" class="form-control">
<label for="publiText">Texto</label>
<input type="text" name="texto" id="publiText" placeholder="Ej.: Google" class="form-control">
<label for="publiImg">Imagen</label>
<input type="file" name="imagen" id="publiImagen">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default btn-form-pub" data-dismiss="modal">Cancelar</button>
<button type="submit" class="btn btn-primary btn-form-pub" id="btn-add-pub">Guardar cambios</button>
</div>
</form>
when I try to submit via ajax in the console I have the next error:
TypeError: 'append' called on an object that does not implement interface FormData.
I has maked this anothers times but now don't work.
Please somebody can help? Thank you a lot!!

I really solved the problem, I copy and paste the code from another similar implementation and change the name variable of FormData to data
$.ajax({
url: 'publicidad.ajax.php',
type: 'POST',
data: data,
contentType: false,
processData: false,
cache: false,
dataType: 'json',
success: function(data) {
// response
}
});

You misspelled processData in the original Ajax call (as pocessData). That could be why it started to work when you copy-pasted from another source without making any substantial changes.

Trying to insert text into textboxes automatically upon option value selection

I am trying to pull text from another page (ajaxuseradd.psp) which is in JSON format. I am then trying to insert this text into several text boxes and/or select lists. For right now, I am merely trying to do the text boxes.
Here's my code, a good deal of which was given to me, because I am not all that familiar with jQuery:
<script type="text/javascript" src="jquery-1.7.min.js"></script>
<script type="text/javascript">
$('#username').change(function() {
var userName = $(this).val();
$.ajax({
type: 'GET',
url: 'ajaxuseradd.php',
data: {
uname: userName
},
success: function(data, status, xhr) {
$.each(data, function(key, value) {
$('#' + key).val(value);
});
},
dataType: 'json'
})
});
</script>
<form action="adduser.psp" method="get">
<fieldset>
<label for="uname">Username:</label>
<select name="uname" id="useruname" onchange="updateAdduser();">
<%
Random Python Code That Isn't Important But Generates Option Values
%>
<%= options %>
</select>
</fieldset>
<fieldset>
<label for="fname">First Name:</label>
<input type="text" name="fname" />
</fieldset>
<fieldset>
<label for="lname">Last Name:</label>
<input type="text" name="lname" />
</fieldset>
<fieldset>
<label for="email">Email:</label>
<input type="text" name="email">
</fieldset>
Output from ajaxuser.psp should be as follows, or some variation thereof. This will be displayed on the page ajaxuser.psp when the argument ?uname=neverland is used, for example:
{"fname" : Neverland, "lname" : Conference Room, "email" : nobody#mediaG.com, "deptid" : deptid, "active" : active, "sentient" : sentient}
So my code should look like this?
<script type="text/javascript" src="jquery-1.7.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#username').change(function() {
var userName = $(this).val();
$.ajax({
type: 'GET',
url: 'ajaxuseradd.php',
data: {
uname: userName
},
success: function(data, status, xhr) {
$("#fname").val(data.fname);
});
},
dataType: 'json'
})
});
});
</script>
EDIT: This is still not working - I select a drop down value, and NO CHANGE for any of the fields.

The first thing I see is that you need to wrap the onchange handler in this:
$(document).ready(function () {
});
So it looks like this:
$(document).ready(function () {
$('#username').change(function() {
var userName = $(this).val();
$.ajax({
type: 'GET',
url: 'ajaxuseradd.php',
data: {
uname: userName
},
success: function(data, status, xhr) {
$.each(data, function(key, value) {
$('#' + key).val(value);
});
},
dataType: 'json'
})
});
});
Also, this:
$.each(data, function(key, value) {
$('#' + key).val(value);
});
Is not going to work like you think. You get back ONE object with the properties, so more like this:
success: function(data, status, xhr) {
$("#fname").val(data.fname);
....
},