Develop Reference

Insert data using ajax, json, and php

Intro I am doing an insert into the database using Ajax, PHP, and SQL.
Error: alert(data) says undefined:first_name.....I thought I defined using $first_name = strtoupper($_POST['first_name']) witin the add.php file.
Index.php
<script type="text/javascript">
$(document).on('click','#update_btn',function (){
$.ajax({
type:'POST',
url:'add.php',
datatype: "json",
data: {
first_name: $("#first_name").val(),
last_name: $("#last_name").val(),
position: $("#position").val(),
updated: $("#updated").val(),
},
success: function(data){
alert(data);
if (data=='ADD_OK') {
location.reload();
} else {
alert('something wrong');
}
}
})
});
<form id="form1" class="form-inline" method="post" action="">
<input type="text" name="first_name" placeholder="First Name" required>
<input type="text" name="last_name" placeholder="Last Name" required>
<select name="position" id="multiple-select-optgroup-default2" class="custom-select">
<option selected>Admin</option>
<option value="Teacher">Teacher</option required>
<option value="Staff">Staff</option>
</select>
<input type="hidden" name="updated" value='<?php echo date("Y-m-d");?>' >
<button class="btn btn-success btn-sm active" type="submit" name="save" id="update_btn"><span class="glyphicon glyphicon-plus-sign"></span> Save</button>
</form>
</script>
Add.php
<?php
$first_name = strtoupper($_POST['first_name']);
$last_name = strtoupper($_POST['last_name']);
$position = strtoupper($_POST['position']);
$updated = $_POST['updated'];
$stmt = $conn->prepare("INSERT INTO employees (first_name, last_name, position, updated) VALUES (?, ?, ?, ?)");
$stmt->bind_param('ssss', $first_name, $last_name, $position, $updated);
$add = $stmt->execute();
if($add) {
echo "ADD_OK";
}
?>

it's undefined:first_name given an error because you don't give indexing in form but you use in jquery. show use HTML code like this and check.
<input type="text" name="first_name" id="first_name" placeholder="First Name" required>
<input type="text" name="last_name" id="last_name" placeholder="Last Name" required>
<select name="position" id="position" class="custom-select">
<option selected>Admin</option>
<option value="Teacher">Teacher</option required>
<option value="Staff">Staff</option>
</select>
<input type="hidden" name="updated" id="updated" value='<?php echo date("Y-m-d");?>' >
and debug with your jquery code.

Here is your piece of code of jQuery:
data: {
first_name: $("#first_name").val(),
last_name: $("#last_name").val(),
position: $("#position").val(),
updated: $("#updated").val(),
},
In this you are trying to get value via id of textbox as you mentioned
$("#first_name").val()
Change your code to this :
data: {
first_name: $('input[name="first_name"]').val(),
last_name: $('input[name="last_name"]').val(),
position: $('input[name="position"]').val(),
updated: $('input[name="updated"]').val(),
},
Hope it will help you.

comment from comment box is overriding, not posting [duplicate]

This question already has answers here:
Create or write/append in text file
(7 answers)
Closed 5 years ago.
when I hit the post button, comment is posting on the page. If I hit it again, it overriding the previous comment. can someone please clarify this? And I'm running java script to display the date. It is showing all the time without any comments also. How can I modify that too?
Thanks in advance!
<h3 id="reply-title" class="comment-reply-title">Leave a Reply </h3>
<form action="" method="post">
<p class="comment-notes"><span id="email-notes">Your email address will not be published.</span> Required fields are marked <span class="required">*</span></p>
<p class="comment-form-comment"><label for="comment">Comment</label> <textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" aria-required="true" required="required"></textarea></p>
<p class="comment-form-author"><label for="author">Name <span class="required">*</span></label> <input id="author" name="author" type="text" value="" size="30" maxlength="245" aria-required="true" required="required"></p>
<p class="comment-form-email"><label for="email">Email <span class="required">*</span></label> <input id="email" name="email" type="email" value="" size="30" maxlength="100" aria-describedby="email-notes" aria-required="true" required="required"></p>
<p class="form-submit"><input name="submit" type="submit" id="submit" class="submit" value="Post Comment"></p>
<div>
<?php
if($_POST) {
$name = $_POST['author'];
$comment = $_POST['comment'];
$email = $_POST['email'];
#echo $name . $comment . $email;
$handle = fopen("comments/get-more-twitter-followers.html", "a");
fwrite($handle, "\n".$name."\n".$comment."\n". $email. "\n");
fclose($handle);
}
?>
<?php
if($_POST) {
$email = $_POST['email'];
$useremail = fopen("useremail.html", "a");
fwrite($useremail, "\n".$email. "\n");
fclose($useremail);
}
?>
</div>
<div>
<div>
<p><strong><h4><u>Comments:</u></h4></strong></p>
</div>
<div>
<div>
<strong><?php
$name = $_POST['author'];
echo $name; ?> </strong> <small><script type="text/javascript">
var d = new Date()
document.write(d.getDate())
document.write("/")
document.write(d.getMonth() + 1)
document.write("/")
document.write(d.getFullYear())
</script>
</small>
</div>
<div>
<p>
<?php
$comment = $_POST['comment'];
echo "\n".$comment."\n"."<hr>";
?>
</p>
</div>
</div>
</div>

Whay do you mean with; 'Your email address will not be published.' You write all 'mail addresses' to a plaintext file for crying out loud. DONT PUT THIS ONLINE.

You're not reading the file back to paint the comments, you are just using the POST data that came in:
<div>
<strong><?php
$name = $_POST['author'];
echo $name; ?> </strong> <small><script type="text/javascript">
var d = new Date()
document.write(d.getDate())
document.write("/")
document.write(d.getMonth() + 1)
document.write("/")
document.write(d.getFullYear())
</script>
</small>
</div>
<div>
<p><?php
$comment = $_POST['comment'];
echo "\n".$comment."\n"."<hr>";
?></p></div>
</div></div>
</div>
$_POST in PHP refers to the body of the POST request that the script is responding to.
You need to replace that with functionality that does three things:
Reads from the file.
Splits the records into different entries with an author and comment.
Iterates over those entries and paints a separate div for each record.
Another gotcha: Your code is printing the current date as the date of the comment. If you are not storing the date of the comments, you probably shouldn't show the date.

<?php
$comment = $_POST['comment'];
$name = $_POST['author'];
$data_post->name = $name;
$data_post->comment = $comment;
if(isset($name, $comment)){
header('Content-type: application/json');
echo(json_encode($data_post));
return;
}
?>
<html>
<head>
<script
src="https://code.jquery.com/jquery-1.12.4.min.js"
integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
crossorigin="anonymous"></script>
<script>
$("document").ready(function(){
$("#comment").on("submit", function(e){
var comment = $('#comment');
e.preventDefault();
$.ajax({
method: "POST",
url: "index.php", // your php file name
data: comment.serialize(),
success: function (data) {
var d = new Date();
var data_comment = "<div><small>"+d.getDate()+"/"+(d.getMonth() + 1)+"/"+d.getFullYear()+"</small></div><strong>"+data.name+"</strong><p>"+data.comment+"</p>"
$("#list_comment").append(data_comment);
comment[0].reset();
console.log(data.name);
},
error: function (data) {
},
})
});
});
</script>
</head>
<body>
<h3 id="reply-title" class="comment-reply-title">Leave a Reply </h3>
<form action="" method="post" id="comment">
<p class="comment-notes"><span id="email-notes">Your email address will not be published.</span> Required fields are marked <span class="required">*</span></p>
<p class="comment-form-comment"><label for="comment">Comment</label> <textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" aria-required="true" required="required"></textarea></p>
<p class="comment-form-author"><label for="author">Name <span class="required">*</span></label> <input id="author" name="author" type="text" value="" size="30" maxlength="245" aria-required="true" required="required"></p>
<p class="comment-form-email"><label for="email">Email <span class="required">*</span></label> <input id="email" name="email" type="email" value="" size="30" maxlength="100" aria-describedby="email-notes" aria-required="true" required="required"></p>
<p class="form-submit"><input name="submit" type="submit" id="submit" class="submit" value="Post Comment"></p>
</form>
<div>
<div>
<p><strong><h4><u>Comments:</u></h4></strong></p>
</div>
<div id="list_comment">
<div>
</div>
</body>
</html>
don't forget to change url in ajax post with your php filename (line 26)

document.getElementsById("...").innerHTML doesnt change h2 tag

After document.getElementsById("occ").innerHTML = "Already registered"; tag <h2 style="color: red" id ="occ"></h2> doesn't change, but page looks like it reloaded.
Code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Ustory - Register</title>
<link href="https://fonts.googleapis.com/css?family=Raleway:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
<link href="CSS_defaults.css" rel="stylesheet">
<script src="Ustory_JS.js"></script>
</head>
<body>
<?php
if($_GET['occupied'] == "true") {
echo($_GET['occupied']);
$occupied = "true";
}
?>
<script>
var occ = <?php echo json_encode($occupied); ?>;
alert(typeof(occ));
if(occ == "true") {
alert("done");
document.getElementsById("occ").innerHTML = "Already registered";
}
</script>
<div id="reg_in" class="reg" style="color:#FF4D50;">
<form class="reg" name="register" action="U_story_reg.php" method="post" onsubmit="return register_()">
<input type="text" name="firstname" id="firstname" placeholder="Meno" required> <b>*</b><br>
<input type="text" name="lastname" id="lastname" placeholder="Priezvisko" required> <b>*</b><br>
<input type="text" name="nick" id="nick" placeholder="Prezívka"> <br>
<input type="email" name="mail" id="mail" placeholder="E-mail" required> <b>*</b><br>
<input type="password" name="pass" id="pass" placeholder="Heslo" required> <b>*</b><br>
<input type="password" name="pass_again" id="pass_again" placeholder="Heslo znovu" required> <b>*</b><br>
<input type="submit" value="Submit">
<h2 style="color: red" id ="occ"></h2>
</form>
</div>
<h2 style="color: red" id ="occ"></h2>
</body>
</html>
Do you have any idea why document.getElementsById("occ").innerHTML = "Already registered"; doesn't work ?

The code is executing before the DOM element has loaded & you have a typo in getElementsById should be getElementById. You have to either move the code below the html element you are trying to change or wrap it in a $(document).ready function. Like this:
$(document).ready(function() {
var occ = <?php echo json_encode($occupied); ?>;
alert(typeof(occ));
if(occ == "true") {
alert("done");
document.getElementById("occ").innerHTML = "Already registered";
}
});

In addition, make sure you reference the jQuery library in order to use the document.ready() method. Check out the link below for further information..
https://www.w3schools.com/jquery/event_ready.asp

Access POST values sent by Ajax in PHP

I'm using Ajax to get POST values from a form. However, when I try to insert the form values in a database on submit, it doesn't get inserted. I still have no idea why it does not work.
Here is my HTML
<form method="post" action="" id="home-sign-up-form">
<input type="text" name="suFirstName" placeholder="First Name" class="text-input-minor" id="sign-up-first-name-text-input">
<input type="text" name="suLastName" placeholder="Last Name" class="text-input-minor" id="sign-up-last-name-text-input">
<input type="text" name="suEmail" placeholder="Email" class="text-input-minor" id="sign-up-email-text-input">
<input type="password" name="suPassword" placeholder="Password" class="text-input-minor" id="sign-up-password-text-input">
<input type="password" name="suConfirmPassword" placeholder="Confirm Password" class="text-input-minor" id="sign-up-confirm-password-text-input">
<input type="text" name="suDisplayName" placeholder="Display Name (you can change this later)" class="text-input-minor" id="sign-up-display-name-text-input">
<br><font class="text-error" id="sign-up-error-text"></font><br>
<label><input type="checkbox" name="suRememberMe" value="yes" id="sign-up-remember-me-checkbox"><font id="sign-up-remember-me-text">Remember me</font></label>
<input name="signUp" type="submit" value="Sign Up" id="sign-up-submit">
</form>
My JS (the first console.log does go through and work):
if (validForm)
{
console.log("valid form");
console.log(JSON.stringify($('#home-sign-up-form')[0].seriaize()));
$.ajax(
{
type:'POST',
url:'form-submit.php',
data:$('#home-sign-up-form')[0].serialize(),
success:function(response)
{
$suForm.hide();
$tosppText.hide();
$mailSentIcon.show();
$emailSentText.show();
$emailSentTextEmail.text($suEmail);
$suBox.css("padding-left", "10px");
$suBox.css("padding-right", "10px");
}
});
}
And my PHP/MySQL:
<?php require 'dbconnect.php'; ?>
if (isset($_POST['suEmail']))
{
echo "<script type='text/javascript'>alert('got');</script>";
$suFirstName = mysqli_real_escape_string($_POST['suFirstName']);
$suLastName = mysqli_real_escape_string($_POST['suLastName']);
$suEmail = mysqli_real_escape_string($_POST['suEmail']);
$suPassword = mysqli_real_escape_string($_POST['suPassword']);
$suDisplayName = mysqli_real_escape_string($_POST['suDisplayName']);
$code = substr(md5(mt_rand()),0,15);
$query = $connection->query("INSERT INTO users (firstName,lastName,email,password,displayName,confirmCode,verified)Values('{$suFirstName}','{$suLastName}','{$suEmail}','{$suPassword}','{$suDisplayName}','{$confirmCode},'{$verified}')");
}
The alert in the PHP code so I would assume that it isn't getting the 'signUp' POST variable. Thanks so much! Any help is appreciated! :D

$("#home-sign-up-form").submit(function(event) {
alert("Handler for .submit() called.");
event.preventDefault();
$.ajax({
type: 'POST',
url: 'form-submit.php',
data: $('#home-sign-up-form').serialize(),
success: function(response) {
console.log(response);
var data = JSON.parse(response);
$suForm.hide();
$tosppText.hide();
$mailSentIcon.show();
$emailSentText.show();
//$emailSentTextEmail.text($suEmail);
$emailSentTextEmail.text(data.suEmail);
$suBox.css("padding-left", "10px");
$suBox.css("padding-right", "10px");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<form method="post" action="" id="home-sign-up-form">
<input type="text" name="suFirstName" placeholder="First Name" class="text-input-minor" id="sign-up-first-name-text-input">
<input type="text" name="suLastName" placeholder="Last Name" class="text-input-minor" id="sign-up-last-name-text-input">
<input type="text" name="suEmail" placeholder="Email" class="text-input-minor" id="sign-up-email-text-input">
<input type="password" name="suPassword" placeholder="Password" class="text-input-minor" id="sign-up-password-text-input">
<input type="password" name="suConfirmPassword" placeholder="Confirm Password" class="text-input-minor" id="sign-up-confirm-password-text-input">
<input type="text" name="suDisplayName" placeholder="Display Name (you can change this later)" class="text-input-minor" id="sign-up-display-name-text-input">
<br><font class="text-error" id="sign-up-error-text"></font>
<br>
<label>
<input type="checkbox" name="suRememberMe" value="yes" id="sign-up-remember-me-checkbox"><font id="sign-up-remember-me-text">Remember me</font>
</label>
<input name="signUp" type="submit" value="Sign Up" id="sign-up-submit">
</form>
<?php
if (isset($_POST['suEmail']))
{
$con=mysqli_connect("localhost","root","cakpep","backoffice");
// Check connection
if (mysqli_connect_errno()) {
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
$suFirstName = mysqli_real_escape_string($con,$_POST['suFirstName']);
$suLastName = mysqli_real_escape_string($con,$_POST['suLastName']);
$suEmail = mysqli_real_escape_string($con,$_POST['suEmail']);
$suPassword = mysqli_real_escape_string($con,$_POST['suPassword']);
$suDisplayName = mysqli_real_escape_string($con,$_POST['suDisplayName']);
$code = substr(md5(mt_rand()),0,15);
$query = $connection->query("INSERT INTO users (firstName,lastName,email,password,displayName,confirmCode,verified)Values('{$suFirstName}','{$suLastName}','{$suEmail}','{$suPassword}','{$suDisplayName}','{$confirmCode},'{$verified}')");
echo json_encode($_POST);
}
?>
add this to trigger when submit form
$("#home-sign-up-form").submit(function(event) {
and then on php return the response with json string
echo json_encode($_POST);
and then in the response ajax parse json text to object like this
var data = JSON.parse(response);
$emailSentTextEmail.text(data.suEmail);
i hope this what you want..

How to Save the optins in a text file without disturbing the email notif

I am using a custom optin page with a form , I want to tweak it a little bit,
I want to save all the optins on a txt file on the server without
disturbing the other functions of the form.
2nd thing I want is to show a custom Page after the optin form is
submitted.
Currently the form works like this
USER SUBMITS > PAGE REFRESHES FOR HIM > I GET AN EMAIL WITH THE SUBMITTED DATA.
Here is the form code
<div class="form fix ">
<p class="form-text">Fill This Out and See Your <br>Timeshare Report</p>
<form name="contactform" action="mail-script.php" method="POST">
<label for="fname">First Name:
<input type="text" name="fname" id="fname" />
</label><br>
<label for="lname">Last Name:
<input type="text" name="lname" id="lname" />
</label><br>
<label for="email">Email Address:
<input type="text" name="email" id="email" />
</label><br>
<label for="phone">Phone Number:
<input type="text" name="phone" id="phone" />
</label><br>
<label for="phone">Alternate Phone:
<input type="text" name="phone" id="aphone" />
</label><br>
<label for="resort">Resort Name:
<input type="text" name="resort" id="resort" />
</label><br>
<label for="amount">Amount Owed? $:
<input type="number" name="amount" id="amount" />
<p style="font-size: 12px !important;margin-top: -14px;padding-right: 30px;text-align:right;">
If Paid Off Leave Zero, Else Put Amount</p>
</label><br>
<div class="checkbox">
<div class="check-text fix">
<p>I'm Considering To</p>
</div>
<div class="check-one fix">
<input type="checkbox" name="call" id="" value="sell"/> Sell It <br>
<input type="checkbox" name="call" id="" value="buy"/> Buy It <br>
<input type="checkbox" name="call" id="" value="rent "/> Rent It
</div>
<div class="check-two fix">
<input type="checkbox" name="call" id="" value="cancel"/> Cancel Mortgage <br>
<input type="checkbox" name="call" id="" value="ownership"/> End Ownership <br>
<input type="checkbox" name="call" id="" value="give"/> Give It Back
</div>
</div>
<p class="captcha">
<img src="captcha_code_file.php?rand=<?php echo rand(); ?>" id='captchaimg' ><br>
<label for='message'>Enter the code above here :</label><br>
<input id="6_letters_code" name="6_letters_code" type="text"><br>
<small>Can't read the image? click <a href='javascript: refreshCaptcha();'>here</a> to refresh</small>
</p>
<input id="submit" type="submit" value="" />
<p class="submit-text">Ensure all fields are completed and correct, allowing you more benefits, while preventing abuse of our data.</p>
</form>
</div>
</div>
This is the mail script which sends me the email
<?php
/* Set e-mail recipient */
$myemail = "**MYEMAIL**";
/* Check all form inputs using check_input function */
$fname = check_input($_POST['fname'], "Enter your first name");
$lname = check_input($_POST['lname'], "Enter your last name");
$email = check_input($_POST['email']);
$phone = check_input($_POST['phone']);
$resort = check_input($_POST['resort']);
$amount = check_input($_POST['amount']);
$call = check_input($_POST['call']);
/* If e-mail is not valid show error message */
if (!preg_match("/([\w\-]+\#[\w\-]+\.[\w\-]+)/", $email))
{
show_error("E-mail address not valid");
}
/* If URL is not valid set $website to empty */
if (!preg_match("/^(https?:\/\/+[\w\-]+\.[\w\-]+)/i", $website))
{
$website = '';
}
/* Let's prepare the message for the e-mail */
$message = "Hello!
Your contact form has been submitted by:
First Name : $fname
Last Name : $lname
E-mail: $email
Phone : $phone
Resort: $resort
Amount: $amount
Call : $call
End of message
";
/* Send the message using mail() function */
mail($myemail, $subject, $message);
/* Redirect visitor to the thank you page */
header('Location: index.html');
exit();
/* Functions we used */
function check_input($data, $problem='')
{
$data = trim($data);
$data = stripslashes($data);
$data = htmlspecialchars($data);
if ($problem && strlen($data) == 0)
{
show_error($problem);
}
return $data;
}
function show_error($myError)
{
?>
if (strtolower($_POST['code']) != 'mycode') {die('Wrong access code');}
<html>
<body>
<b>Please correct the following error:</b><br />
<?php echo $myError; ?>
</body>
</html>
<?php
exit();
}
?>
Here is the online url of the page http://timesharesgroup.com/sell/index.html

you can add this code to your script after all the validation is done:
$text = "$fname\n$lname\n$email\n$phone\n$resort\n$amount\n$call\n\n";
file_put_contents('file.txt', $text, FILE_APPEND);
OR even better csv file:
$fields = array($fname,$lname,$email,$phone,$resort,$amount,$call);
$fp = fopen('file.csv', 'a');
fputcsv($fp, $fields);
fclose($fp);