Develop Reference

PHP Submitting a form without refreshing the page and call a function

We have created a feedback form and once a user submits the feedback, we want to run the function that submits it to Airtable and then show the Next button.
Problem: The jQuery is working, showing the button after submit, but the function in (isset($_POST['submit']) isn't saving at all.
I've read through many posts but can't find the answer. Any help would be great!
Here is our current code
public function airtable_function() {
?>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("#nameFrm").submit(function (e) {
e.preventDefault();
var frm = jQuery('#nameFrm');
var outPut = jQuery('#results');
var loadButton = jQuery('#loadingImage');
var comments = jQuery('#comments').val();
var reason = jQuery('#reason').val();
jQuery.ajax({
type: 'POST',
data:'action=submitForm&comments='+comments+'&reason='+reason,
url: 'requests.php',
beforeSend: function(){
loadButton.show();
},
complete: function(data){
loadButton.show();
frm.hide();
},
success: function(data) {
frm.hide();
outPut.html(data);
}
});
});
});
</script>
<div>
<form action="requests.php" id="nameFrm" name="frmName" method="POST" >
<p>Please give us feedback</p>
<select id="reason" name="reason" required>
<option value="Choose a reason">Choose a reason</option>
<option value="Reason1">Reason1</option>
<option value="Reason2">Reason2</option>
<option value="Reason3">Reason2</option>
<option value="Other">Other</option>
</select>
<input id="comments" type='text' name='comments' required />
<input type="submit" value="submit" name="subbtn" >
</form>
<div id="loadingImage" style="display:none; text-align:center;">
Yes, Cancel Account
</div>
</div>
<div id="results"></div>
</div>
<?php
if (isset($_POST['submit'])){
$reason = $_POST['reason'];
$comments = $_POST['comments'];
save($reason, $comments);
}
?>
<?php
}

I assume you want to transfer the entries "reason" and "comment" to the page "requests.php". Then you don't need the second post request because you use ajax:
<?php
function airtable_function() {
?>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("#nameFrm").submit(function (e) {
e.preventDefault();
var frm = jQuery('#nameFrm');
var outPut = jQuery('#results');
var loadButton = jQuery('#loadingImage');
var comments = jQuery('#comments').val();
var reason = jQuery('#reason').val();
jQuery.ajax({
type: 'get',
data: { 'result' : comments +'*'+reason, 'feedback' : 'true' },
url: 'requests.php',
beforeSend: function(){
loadButton.show();
},
complete: function(data){
loadButton.show();
frm.hide();
},
success: function(data) {
frm.hide();
outPut.html(data);
}
});
});
});
</script>
<div>
<form action="requests.php" id="nameFrm" name="frmName" method="POST" >
<p>Please give us feedback</p>
<select id="reason" name="reason" required>
<option value="Choose a reason">Choose a reason</option>
<option value="Reason1">Reason1</option>
<option value="Reason2">Reason2</option>
<option value="Reason3">Reason3</option>
<option value="Other">Other</option>
</select>
<input id="comments" type='text' name='comments' required />
<input type="submit" value="submit" name="subbtn" >
</form>
<div id="loadingImage" style="display:none; text-align:center;">
Yes, Cancel Account
</div>
</div>
<div id="results"></div>
</div>
<?php
}
The "request.php" looks like this:
<?php
if(isset($_GET['feedback']))
{
$result = $_GET['result'];
$parts = explode("*", $result);
print "reason: ".$parts[1]."<br>";
print "comments: ".$parts[0]."<br>";
}
?>

What I can see from the snippet is that:
if (isset($_POST['submit'])){
While the submit button is:
<input type="submit" value="submit" name="subbtn" >
Just fix this line:
isset($_POST['submit'] to isset($_POST['subbtn']
Hope this helps.

Select show hide div after specific values input

I'm basically trying to
Show upload div when status input valued="Tidak aktif"
Hide upload div when status input valued ="Aktif"
This is my code
<h2>EDIT STATUS PEGAWAI</h2>
<?php
$ambildata = $koneksi -> query ("SELECT * FROM diniyah WHERE ID ='$_GET[id]'");
$pecahdata = $ambildata -> fetch_assoc();
echo "<pre>" ;
print_r($pecahdata);
echo "</pre>";
?>
<h2>GANTI STATUS PEGAWAI : </h2>
<form method="post" enctype="multipart/form-data">
<select class="form-control form-control-lg" name="STATUS" id="STATUS">
<option value="Aktif">AKTIF</option>
<option value="Tidak Aktif">TIDAK AKTIF</option>
<div class="form-group" style="display:none;">
<input type="file" name="uploaddiniyah" class="form-control">
<button class="btn btn-primary" name="ubah">Konfirmasi</button>
</div>
</form>
<?php
if (isset($_POST['Tidak Aktif'])){
include'upload.php';
}else{
include'home.php';
}
?>
<?php
if (isset($_POST['ubah'])) {
$uploaddiniyah = true;
$namafoto = $_FILES ['uploaddiniyah']['name'];
$lokasifoto = $_FILES ['uploaddiniyah']['tmp_name'];
move_uploaded_file($lokasifoto, "../fotodokumen/".$namafoto);
//jk foto dirubah
$koneksi->query("UPDATE diniyah SET status='$_POST[STATUS]' WHERE ID='$_GET[id]'");
$update_gambar=mysqli_query($koneksi,"UPDATE diniyah SET uploaddiniyah='$namafoto' WHERE ID='$_GET[id]'");
echo "<div class='alert alert-info'> Data Tersimpan</div>";
}
?>
Is there a mistake on my code?

You can use basic js for do that like:
let status = document.getElementById('STATUS');
let upload = document.getElementById('upload');
status.onchange = function()
{
if(this.value === "Tidak Aktif"){
upload.style.display = 'block';
}else{
upload.style.display = 'none';
}
}
<select class="form-control form-control-lg" name="STATUS" id="STATUS">
<option value="Aktif">AKTIF</option>
<option value="Tidak Aktif">TIDAK AKTIF</option>
</select>
<div class="form-group" id='upload' style="display:none;">
<input type="file" name="uploaddiniyah" class="form-control">
</div>

Jquery Ajax form submit to PHP returns empty response

I'm trying to submit a form to PHP with Ajax so I don't have to reload the page. But when I click the Submit button, PHP post array is empty and I can't get any values when accessing values like: $google_recaptcha = $_POST['recaptcha'] ?? '';
Any suggestions?
$(document).ready(() => {
$("#appointment-form").on('submit', e => {
e.preventDefault();
console.log('Event triggered!');
const name = $("#name").val();
const email = $("#email").val();
const phone = $("#phone").val();
const company = $("#company").val();
const service = $("#service").val();
const country = $("#country").val();
const day = $("#day").val();
const timing = $("#timing").val();
const message = $("#message").val();
const csrfToken = $('input[name="csrf_token"]').val();
$.ajax({
type: 'post',
url: 'private/shared/appointment_process.php',
data: {
name: name,
email: email,
phone: phone,
company: company,
service: service,
country: country,
day: day,
timing: timing,
message: message,
csrfToken: csrfToken,
recaptcha: grecaptcha.getResponse()
},
success: (result) => {
console.log('Got response back');
console.log(result);
if (result === "Success") {
$("#form-success").html('Message has been sent!');
$("#form-success").show();
} else {
$("#form-error").html(result);
$("#form-error").show();
}
}
});
});
});
PHP Code
<?php
require_once('../initialize.php');
$google_recaptcha = $_POST['recaptcha'] ?? '';
$name = h($_POST['name'] ?? '');
...
Form code
<form action="" method="post" id="appointment-form" class="login-form sign-in-form" data-toggle="validator">
<div class="text_box row">
<div class="col-lg-6">
<input type="text" name="name" id="name" placeholder="Your Name *">
</div>
<div class="col-lg-6">
<input type="email" name="email" id="email" placeholder="Your Email">
</div>
</div>
<div class="text_box row">
<div class="col-lg-6">
<input type="text" name="phone" id="phone" placeholder="Mobile Number *">
</div>
<div class="col-lg-6">
<input type="text" name="company" id="company" placeholder="Company">
</div>
</div>
<div class="text_box row col-13">
<select name="service" id="service" class="selectpickers col-12 col-lg-6 col-md-6 col-sm-6" style="margin: 5px;">
<option value="">Select Service</option>
<?php for ($i = 0; $i < count($services); $i++) { ?>
<option value="<?php echo $i; ?>"><?php echo $services[$i]; ?></option>
<?php } ?>
</select>
<select name="country" id="country" class="selectpickers col-12 col-lg-6 col-md-6 col-sm-6">
<option value="">Select Country</option>
<?php for ($j = 0; $j < count($countries); $j++) { ?>
<option value="<?php echo $j; ?>"><?php echo $countries[$j]; ?></option>
<?php } ?>
</select>
</div>
<div class="text_box row col-13">
<select name="day" id="day" class="selectpickers col-12 col-lg-6 col-md-6 col-sm-6" style="margin: 5px;">
<option value="">Select a day</option>
<?php for ($k = 0; $k < count($days); $k++) { ?>
<option value="<?php echo $k; ?>"><?php echo $days[$k]; ?></option>
<?php } ?>
</select>
<div class="help-block with-errors text-danger mt-2"></div>
<select name="timing" id="timing" class="selectpickers col-12 col-lg-6 col-md-6 col-sm-6">
<option value="">Select a time</option>
<?php for ($h = 0; $h < count($timings); $h++) { ?>
<option value="<?php echo $h; ?>"><?php echo $timings[$h]; ?></option>
<?php } ?>
</select>
</div>
<div class="form-group text_box">
<textarea name="message" id="message" placeholder="Description..."></textarea>
</div>
<?php echo csrf_token_tag(); ?>
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
<div class="g-recaptcha" data-sitekey="6Lf2c6gZAAAAABMI2STA9ciP9_kYr6dNV_uDeoD_"></div>
<div class="d-flex justify-content-between align-items-center">
<button type="submit" id="btn-submit" class="btn_three mt-4">Send Now</button>
</div>
</form>

During a lengthy chat with the OP it was determined that they are using mod-rewrite to hide the .php extensions on each file.
This is happening due to removing the PHP extensions from the URL I guess
with the url rewriting in the htaccess
Given that is the case the change in the AJAX call should be focused on the URL. Change this:
url: 'private/shared/appointment_process.php',
to this:
url: 'private/shared/appointment_process',
And your AJAX should work properly.

Isn't the data field supposed to be formatted like this with type POST..
I thought query strings were only used with GET...
$.ajax({
type: 'post',
url: 'private/shared/appointment_process.php',
data: {
"name" : name,
"email" : email,
"phone" : phone,
"company" : company
},
success: (result) => {
console.log('Got response back');
console.log(result);
if (result === "Success") {
$("#form-success").html('Message has been sent!');
$("#form-success").show();
} else {
$("#form-error").html(result);
$("#form-error").show();
}
}
});

You need to pass the data in a different way Like,
$.ajax({
url: 'URL',
type: 'POST',
data: { Parameter1: "Value", Parameter2: "Value"} ,
success: function (response) {
alert(response.status);
},
error: function () {
alert("error");
}
});
In Your PHP if you try the code
<?php
echo $_POST['Parameter1'];
?>
Will return the Value of the Parameter1 Send form the ajax request

You need to use data: {recaptcha: grecaptcha.getResponse()} to POST it correctly.
Here you go:
$(document).ready(() => {
$("#appointment-form").on('submit', e => {
e.preventDefault();
console.log('Event triggered!');
var name = $("#name").val();
var email = $("#email").val();
var phone = $("#phone").val();
var company = $("#company").val();
var service = $("#service").val();
var country = $("#country").val();
var day = $("#day").val();
var timing = $("#timing").val();
var message = $("#message").val();
var csrfToken = $('input[name="csrf_token"]').val();
$.ajax({
type: 'post',
url: 'private/shared/appointment_process.php',
data: {"name": name, "email": email, "phone": phone, "company": company, "service": service, "country": country, "day": day, "timing": timing, "message": message, "csrfToken": csrfToken, "recaptcha": grecaptcha.getResponse()},
success: (result) => {
console.log('Got response back');
console.log(result);
if (result === "Success") {
$("#form-success").html('Message has been sent!');
$("#form-success").show();
} else {
$("#form-error").html(result);
$("#form-error").show();
}
}
});
});
});

Form Validation in Codeigniter on ajax form Submission

I am new to codeigniter & javascript, I have been working with the form submission through ajax in codeigniter. I need to use form validation on the text field & other inputs in the form. I searched the web & couldn't find any resources or references. Currently my form submission is working fine, I just need to validate my inputs using Jquery or ajax.
Here is my Model
class test_model extends CI_Model {
function save_data()
{
$name = $this->input->post('Name');
$email = $this->input->post('Email');
$contact = $this->input->post('Contact');
$sex = $this->input->post('Sex');
$country = $this->input->post('Country');
$data = array(
'Name' => $name,
'Email' => $email,
'Contact' => $contact,
'Sex' => $sex,
'Country' => $country);
$result = $this->db->insert('test2',$data);
return $result;
}
}
My Controller just forwards the data to Model
class test extends CI_Controller {
function __construct() {
parent::__construct();
$this->load->model('test_model');
$this->load->helper('url');
}
function index() {
$this->load->view('test_index');
}
function save() {
$data = $this->test_model->save_data();
echo json_encode($data);
}
}
Here is my View
<form>
<div class="container" style="padding-top: 80px;">
<div class="form-group">
<label for="Name">First Name :</label>
<div class="col-md-4">
<input type="text" name="Name" id="Name" class="form-control" placeholder="Your Name..">
</div>
</div>
<div class="form-group">
<label for="Contact">Contact :</label>
<div class="col-md-4">
<input type="text" class="form-control" id="Contact" name="Contact" placeholder="Your Contact No..">
</div>
</div>
<div class="form-group">
<label for="Sex" class="col-md-1">Gender :</label>
<div class="form-check form-check-inline">
<label >
<input type="radio" class="form-check-input" name="Sex" id="Sex" value="Male">Male </label><span style="padding-right: 10px;"></span>
<label>
<input type="radio" class="form-check-input" name="Sex" id="Sex" value="Female">Female </label>
</div>
</div>
<div class="form-group">
<select class="form-control custom-select col-md-4" id="Country" name="Country">
<option value="">Select Country</option>
<option value="Europe">Europe</option>
<option value="United Stated of America">United States of America</option>
<option value="India">India</option>
</select>
</div>
<div class="form-group">
<button type="button" type="submit" id="btn_save" class="btn btn-primary" >
<span class="spinner-border spinner-border-sm"></span>Create</button>
<button type="button" class="btn btn-secondary" >Close</button>
</div>
</div>
</form>
My JS code is below :
$('#btn_save').on('click',function() {
var Name = $('#Name').val();
var Email = $('#Email').val();
var Contact = $('#Contact').val();
var Sex = $('input[name="Sex"]:checked').val();
var Country = $('#Country').find(":selected").val();
$.ajax({
type : "POST",
url : "https://localhost/newCrud/test/save",
dataType : "JSON",
data: {"Name":Name, "Email":Email, "Contact":Contact, "Sex":Sex, "Country":Country},
success : function (data) {
if(data == 1) {
$('[name = "Name"]').val("");
$('[name = "Email"]').val("");
$('[name = "Contact"]').val("");
$('[name = "Sex"]').val("");
$('[name = "Country"]').val();
alert("Data Inserted"); }
}
});
return false;
});
});
Guys, my above code works just fine, I need your help to know how can i validate my form using ajax, as it is already passing data to the model from here. As far I've known that Codeigniter form_validate method can't be used in ajax form submission. Really need your help guys. Thanks for your time & suggestions.

Why not????
You can use CI validation as it is a built in server side validation method and you are hitting your server through AJAX
You need to alter your code a bit
$.ajax({
type : "POST",
url : "https://localhost/newCrud/test/save",
dataType : "JSON",
data: {"Name":Name, "Email":Email, "Contact":Contact, "Sex":Sex, "Country":Country},
success : function (data) {
if(data == 1) {
$('.form-group').removeClass('has-error');
$('[name = "Name"]').val("");
$('[name = "Email"]').val("");
$('[name = "Contact"]').val("");
$('[name = "Sex"]').val("");
$('[name = "Country"]').val();
alert("Data Inserted");
}
},
error : function (error) {
if(error.status == 500){
var response = error.responseJSON.validation;
$('.form-group').removeClass('has-error');
$.each(response, function(index, item) {
$('[name='+index+']').closest('.form-group').addClass('has-error');
});
}
}
});
Update your controller as like this
public function save() {
// add this if not loaded earlier
$this->load->library('form_validation');
$this->form_validation->set_rules('Name','Name', 'required');
$this->form_validation->set_rules('Contact','Contact', 'required');
$this->form_validation->set_rules('Email','Email Address','required|valid_email');
if ($this->form_validation->run() == FALSE) {
$validation = $this->form_validation->error_array();
return $this->output
->set_content_type('application/json')
->set_status_header(500)
->set_output( json_encode(array(
'validation' => $validation,
'message' => 'validation error !!!'
)) );
}
$data = $this->test_model->save_data();
echo json_encode($data);
}
Here i did validation for 3 fields name, email and contact. Also i used bootstrap error class 'has-error' to highlight failed elements.

Simply use the jQuery Validate plugin (https://jqueryvalidation.org/).
jQuery:
$(document).ready(function () {
$('#myform').validate({ // initialize the plugin
rules: {
field1: {
required: true,
email: true
},
field2: {
required: true,
minlength: 5
}
}
});
});
HTML:
<form id="myform">
<input type="text" name="field1" />
<input type="text" name="field2" />
<input type="submit" />
</form>

Using AJAX to populate a form with data pulled from mysql database

I'm trying to populate a form with data automatically when a gymnast is selected from a dropdown box. I understand that I need to use AJAX, and have tried - however my Javascript is terrible so low and behold; my code is abysmal.
ajax_populate_gymnasts.php:
<?php
require('../includes/dbconnect.php');
$gymnastid = $_POST['gymnast'];
$sql = "SELECT * FROM gymnasts WHERE id='$gymnastid'";
$result = mysqli_query($GLOBALS['link'], $sql);
$msg ='';
if (mysqli_num_rows($result) > 0){
foreach($result as $row)
{
//Change to populate fields on form with data.
echo ($row);
}
}
else{
$msg .="<option>No Gymnasts were found!</option>";
echo ($msg);
}
mysqli_close($GLOBALS['link']);
?>
function getGymnasts(val){
$.ajax({
type:"POST",
url:"ajax_populate_gymnasts.php",
data: 'gymnast='+val,
success: function(data){
$("#dob").value(data['dob']);
$("#gender").value(data['gender']);
$("#parent").value(data['parent']);
$("#email").value(data['email']);
$("#phone").value(data['phone']);
$("#address").value(data['address']);
$("#status").value(data['status']);
}
});
}
<?php require('adminheader.php');
?>
<script>
</script>
<h1>Edit Gymnast</h1>
<form method="post">
<label for="gymnast">Gymnast:</label>
<select id="gymnast" name="gymnast" onChange="getGymnasts(this.value)" required/>
<option value="0">None yet</option>
<?php
$gymnasts = mysqli_query($GLOBALS['link'], "SELECT * FROM gymnasts;");
foreach($gymnasts as $gymnast){
echo("<option value=".$gymnast['id'].">".$gymnast['name']."</option>");
}
?>
</select><br>
<label for="dob">Date of Birth:</label>
<input type="date" id="dob" name="dob" required/>
<label for="gender">Gender:</label>
<select id="gender" name="gender" required />
<option value="F">Female</option>
<option value="M">Male</option>
</select><br>
<label for="parent">Parent's Name:</label>
<input type="text" id="parent" name="parent" required /> <br>
<label for="email">Contact Email:</label>
<input type="text" id="email" name="email" required /> <br>
<label for="phone">Contact Phone:</label>
<input type="text" id="phone" name="phone" required /> <br>
<label for="parent">Contact Addres:</label>
<textarea id="address" name="address" required /></textarea><br>
<select id="status" name="status" required />
<option value="0"></option>
<input type="submit" id="saveChanges" name="saveChanges" />
</form>

Your AJAX function needs to be like
function getGymnasts(val){
$.ajax({
type:"POST",
url:"ajax_populate_gymnasts.php",
data: 'gymnast='+val,
success: function(response){
var result = JSON.parse(response);
if (result.response == true) {
var data = result.rows;
$("#dob").val(data[0].dob);
$("#gender").val(data[0].gender);
$("#parent").val(data[0].parent);
$("#email").val(data[0].email);
$("#phone").val(data[0].phone);
$("#address").val(data[0].address);
$("#status").val(data[0].status);
}else if (result.response == false) {
$('#gymnast').append('<option>No Gymnasts were found!</option>');
}
}
});
}
and your ajax_populate_gymnasts.php
<?php
require('../includes/dbconnect.php');
$sql = "SELECT * FROM gymnasts WHERE id='$gymnastid'";
$result = mysqli_query($gym, $sql);
if (mysqli_num_rows($result) > 0) {
$data = mysqli_fetch_all($result, MYSQLI_ASSOC);
echo json_encode(['rows' => $data, 'response' => true]);
} else {
echo json_encode(['response' => false]);
}
mysqli_close($GLOBALS['link']);
exit();
?>
}

To set the value of an element with jQuery you need to use .val() http://api.jquery.com/val/
So all of those lines need to change from value to val, e.g.
$("#dob").val(data['dob']);