Develop Reference

I want to pass the content i get in a variable inside a javascript function to another php page

My form which contains the summernote editor:
<form class="form-group" action="upload.php" style="width: 700px;" method="post" enctype="multipart/form-data">
<label> Title: </label>
<input name="title" class="form-control" type="text" required placeholder="Title"/><br><br>
<label> Header Image: </label>
<input class="form-control" type="file" name="file" id="file"><br><br>
<label> Body: </label><div id="summernote"></div>
<button class="btn btn-primary" onclick="getContent()" name="submit"> Submit </button>
</form>
script to get the content of the editor:
<script>
$(document).ready(function()
{
$('#summernote').summernote();
});
function getContent(){$(document).ready(function()
{
var content = $('#summernote').summernote('code');
content=document.getElementById('content').value;});
}
Php code to save the content of the summernote:
$uname= $_SESSION['id'];
$title=$_POST['title'];
$path= "uploads/".$name;
$body= ;
I am trying to save the content of the summernote in the variable $body which is in another file called upload.php

Instead of div use text area .
<textarea name="content" id="summernote"></textarea>
Form.
<form class="form-group" action="upload.php" style="width: 700px;" method="post" enctype="multipart/form-data">
<label> Title: </label>
<input name="title" class="form-control" type="text" required placeholder="Title"/><br><br>
<label> Header Image: </label>
<input class="form-control" type="file" name="file" id="file"><br><br>
<label> Body: </label>
<!--Instead of div use text area .-->
<textarea name="content" id="summernote"></textarea>
<button type="submit" class="btn btn-primary" name="submit"> Submit </button>
</form>
Then no need use getContent. only call summernote for editor.
<script>
$(document).ready(function()
{
$('#summernote').summernote();
});
</script>
in upload.php you can get the content by $_POST['content']
<?php
$title=$_POST['title'];
$path= "uploads/".$name;
echo $body=$_POST['content'];
?>

I am not really a professional when it comes to this but I would add a hidden input to the form and put the content (getContent) in that field.
<form class="form-group" id="theForm" action="upload.php" style="width: 700px;" method="post" enctype="multipart/form-data">
<label> Title: </label>
<input name="title" class="form-control" type="text" required placeholder="Title"/><br><br>
<label> Header Image: </label>
<input class="form-control" type="file" name="file" id="file"><br><br>
<label> Body: </label><div id="summernote"></div>
<input id="content-catcher" type="hidden" name="contentOfEditor" />
<button class="btn btn-primary" onclick="getContent()" name="submit"> Submit </button>
</form>
Script:
function getContent(){$(document).ready(function()
{
var content = $('#summernote').summernote('code');
content=document.getElementById('content').value;});
$('#content-catcher').val(content);
$('#theForm').submit();
}
PHP:
$body= $_POST['contentOfEditor'];

Can't add spaces, form to email handler

Good morning,
I'm trying to add spaces to the words on my form. Here's an example:
Sample pic
For example, the "Referralname" and "Phonenumber" should be "Referral Name" and "Phone Number".
Here's the form:
<div class="container">
<div class="row" style="margin-top: -10px;">
<div class="col-md-6 col-md-offset-3">
<h2>Referral Form <a style="font-size: 10px;" href="../index.php">Back to homepage</a></h2>
<p> Send your referrals using the form below and we will get back to you as early as possible. </p>
<form role="form" method="post" id="reused_form" enctype="multipart/form-data" >
<div class="form-group">
<label for="name"> Your Name:</label>
<input type="text" class="form-control" id="name" name="name" required maxlength="50">
</div>
<div class="form-group">
<label for="email"> Referral's Name:</label>
<input type="text" class="form-control" id="email" name="referralname" required maxlength="50">
</div>
<div class="form-group">
<label for="email"> Referral's Email:</label>
<input type="email" class="form-control" id="email" name="email" required maxlength="50">
</div>
<div class="form-group">
<label for="email"> Referral's Phone Number:</label>
<input type="text" class="form-control" id="email" name="phonenumber" required maxlength="50">
</div>
<div class="form-group">
<label for="name"> Message:</label>
<textarea class="form-control" type="textarea" name="message" id="message" placeholder="Your Message Here" maxlength="6000" rows="7"></textarea>
</div>
<div class="form-group">
<label for="name"> Upload Resumé:</label>
<input type="file" class="form-control" id="image" name="image" required>
</div>
<button type="submit" class="btn btn-lg btn-success pull-right" id="btnContactUs">Send! →</button>
</form>
<div id="success_message" style="width:100%; height:100%; display:none; "> <h3>Sent your message successfully!</h3> </div>
<div id="error_message" style="width:100%; height:100%; display:none; "> <h3>Error</h3> Sorry there was an error sending your form. </div>
</div>
</div>
</div>
And here's the php code:
<?php
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);
/*
Tested working with PHP5.4 and above (including PHP 7 )
*/
require_once './vendor/autoload.php';
use FormGuide\Handlx\FormHandler;
$pp = new FormHandler();
$validator = $pp->getValidator();
$validator->fields(['name', 'referralname', 'email', 'phonenumber'])->areRequired()->maxLength(50);
$validator->field('email')->isEmail();
$validator->field('message')->maxLength(6000);
$pp->attachFiles(['image']);
$pp->sendEmailTo('angela.sales#teamspan.com', 'marjorie.bugayon#teamspan.com'); // ← Your email here
echo $pp->process($_POST);
private function compose_mail($post)
{
$content = "Form submission: \n\n";
foreach($post as $name=>$value)
{
$content .= ucwords($name).":\n";
$content .= "$value\n\n";
}
$this->mailer->Body = $content;
}
Sorry if my question isn't good, trying my best to make a good question.

You could do something like this
private function compose_mail($post)
{
$content = "Form submission: \n\n";
foreach($post as $name=>$value)
{
$content .= ucwords($name).":\n";
$content .= "$value\n\n";
}
$content = str_replace("Referralname", "Referral Name", $content);
$content = str_replace("Phonenumber", "Phone number", $content);
$this->mailer->Body = $content;
}

"Referral's Name" is a label. It's only good for user interaction. Your PHP code never sees it.
"referralname" is the name of an INPUT control of type "text". This is what your code uses.
You can't (or at least shoudn't) add spaces and punctuation to a field name. There's no need for them to be identical.

I think that you want that space in the body of the e-mail. So try this adding these 2 lines in php:
$content = str_ireplace('Referralname', 'Referral Name', $content);
$content = str_ireplace('Phonenumber', 'Phone Number', $content);
//right before this line:
$this->mailer->Body = $content;
Php function str_ireplace will replace the first string with the second, but only in the body of e-mail.
Str_ireplace or str_replace should be the same for you. The former is case-insensitive, the latter is case-sensitive.

Onsubmit not working

I have this form and I tried to make a "onsubmit" that when I click submit it checks if the "email" is = to "cemail" and if username was taken before or not i got this so far
<form class="form-horizontal" action="#" method="post" onsubmit="return ValidationEvent()">
<fieldset>
<legend>SIGN UP! <i class="fa fa-pencil pull-right"></i></legend>
<div class="form-group">
<div class="col-sm-6">
<input type="text" id="firstName" placeholder="First Name" class="form-control" name="firstname" autofocus required>
</div>
<div class="col-sm-6">
<input type="text" id="lastname" placeholder="Last Name" class="form-control" name="lastname" autofocus required>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<input type="email" id="email" placeholder="Email" name="email" class="form-control" required>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<input type="email" id="cemail" placeholder=" Re-enter Email" name="cemail" class="form-control" required>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<input type="text" id="username" placeholder=" Username" name="username" class="form-control" required>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<input type="password" id="password" placeholder="Password" name="password" class="form-control" required>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<input type="text" id="datepicker" placeholder= "DOB" name="birthday" class="form-control" required>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-1"></label>
<div class="col-sm-8">
<div class="row">
<label class="radio-inline">
<input type="radio" id="radio" value="Female" name= "gender" required>Female
</label>
<label class="radio-inline">
<input type="radio" id="radio" value="Male" name= "gender">Male
</label>
</div>
</div>
</div> <!-- /.form-group -->
<div class="form-group">
<div class="col-sm-4 col-sm-offset-3">
<button type="submit" class="btn btn-primary btn-block">Register</button>
</div>
</div>
</form>
Javascript code:
<script>
function ValidationEvent() {
var email = document.getElementById("email").value;
var username = document.getElementById("username").value;
var cemail = document.getElementById("cemail").value;
// Conditions
if (email.match != cemail.match) {
alert("Your email doesn't match!");
}
if(mysqli_num_rows($result) != 0)
{
alert("Username already taken!");
}
else {
alert("Thank you");
}
}
</script>
Am I approaching the function in the wrong way is there another easier way and is it okay i put an sql statement in my java script ?

First, don't use inline HTML event handling attributes (like "onsubmit") as they create "spaghetti code", anonymous global event handling wrapper functions and don't conform to the modern W3C DOM Event handling standard.
Second, your .php results have to be gotten from somewhere. You'll need to put a call into that file for its results before you can use them.
Next, you were using the .match() string method incorrectly to compare the emails against each other. All you really need to do is compare the values entered into the email fields (it's also a good idea to call .trim() on form values to strip out any leading or trailing spaces that might have been inadvertently added).
Once you restructure your code to use standards, the JavaScript will change as follows (FYI: This won't work in the Stack Overflow snippet environment because form submissions are blocked, so you can see a working version here):
// When the DOM is loaded:
window.addEventListener("DOMContentLoaded", function(){
// Get references to the DOM elements you will need:
var frm = document.getElementById("frm");
// Don't set variables to the values of DOM elements,
// set them to the DOM elements themselves so you can
// go back and get whatever properties you like without
// having to scan the DOM for them again
var email = document.getElementById("email");
var username = document.getElementById("username");
var cemail = document.getElementById("cemail");
// Set up a submit event handler for the form
frm.addEventListener("submit", validationEvent);
// All DOM event handling funcitons receive an argument
// that references the event they are responding to.
// We need that reference if we want to cancel the event
function validationEvent(evt) {
// Conditions
if (email.value.trim() !== cemail.value.trim()) {
alert("Your email doesn't match!");
// Cancel the form submit event
evt.preventDefault();
evt.stopPropagation();
return;
}
// You need to have already gotten the "mysqli_num_rows($result)" value
// from your .php file and saved it to a variable that you can then check
// here against "!=0"
if(mysqli_num_rows($result) != 0) {
alert("Username already taken!");
// Cancel the form submit event
evt.preventDefault();
evt.stopPropagation();
} else {
alert("Thank you");
}
}
});
<form class="form-horizontal" id="frm" action="#" method="post">
<fieldset>
<legend>SIGN UP! <i class="fa fa-pencil pull-right"></i></legend>
<div class="form-group">
<div class="col-sm-6">
<input type="text" id="firstName" placeholder="First Name" class="form-control" name="firstname" autofocus required>
</div>
<div class="col-sm-6">
<input type="text" id="lastname" placeholder="Last Name" class="form-control" name="lastname" autofocus required>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<input type="email" id="email" placeholder="Email" name="email" class="form-control" required>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<input type="email" id="cemail" placeholder=" Re-enter Email" name="cemail" class="form-control" required>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<input type="text" id="username" placeholder=" Username" name="username" class="form-control" required>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<input type="password" id="password" placeholder="Password" name="password" class="form-control" required>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<input type="text" id="datepicker" placeholder= "DOB" name="birthday" class="form-control" required>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-1"></label>
<div class="col-sm-8">
<div class="row">
<label class="radio-inline">
<input type="radio" id="radio" value="Female" name= "gender" required>Female
</label>
<label class="radio-inline">
<input type="radio" id="radio" value="Male" name= "gender">Male
</label>
</div>
</div>
</div> <!-- /.form-group -->
<div class="form-group">
<div class="col-sm-4 col-sm-offset-3">
<button type="submit" class="btn btn-primary btn-block">Register</button>
</div>
</div>
</form>

For checking the emails with email & cemail use
email.localeCompare(cemail)
This will check the string comparison betwwen two emails
And for mysqli_num_rows , is not defined any where in javascript, so we will get the undefined error in console, so need to write a different funnction with that name.

First give a name and an action to your form
<form class="form-horizontal" id="myform" action="chkValues.php" method="post" >
....
<div class="form-group">
<div class="col-sm-12">
<input type="email" id="email" placeholder="Email" name="email" class="form-control" required>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<input type="email" id="cemail" placeholder=" Re-enter Email" name="cemail" class="form-control" required>
</div>
</div>
....
</form>
Then put this script at the bottom
<script>
$('#myForm').on("sumbit", function(){
// cancel the original sending
event.preventDefault();
$.ajax({
var form = $(this);
var action = form.attr("action"),
method = form.attr("method"),
data = form.serialize();
})
.done: function(data) // is called wehn the call was okay
{
if( data.substr(0, 5) == "Error"){
alert(data); // sent the sting of the "error message" begining with "Error"
}else{
top.location.href = data; // sent the sting of the "success page" when all was okay and data are saved in the database
}
}
.fail(function() {
alert( "Error: Getting data from Server" );
})
});
</script>
in the php file check the values an return an error if something went wrong.
<?php
if(!isset($_POST['email']) || !isset($_POST['cemail'])){
die("Error: Please fill out both email fields.");
if($_POST['email'] != $_POST['cemail'] ){
die("Error: The Email adresses do not match.");
}
here do what you want to do with the data.
when finish just send the new url
echo "success.html";
}
?>

Pass form Variables to $_SESSION by AJAX in wordpress

I have several forms on my site that manipulate the data that is held in $_SESSION. I am looking to AJAXify all of these. The main example is below.
FORM:
<form class="form-inline" id="addExerciseForm" role="form" method="post" action=" ">
<div class="form-group">
<input class="hidden" name="ExerciseID" type="text" class="form-control" value="29">
</div>
<div class="form-group lightboxFormText">
<label class="lightboxFromElementLabels" for="exerciseDescription">Description</label>
<textarea class="form-control" name="Description" rows="3"><?php echo the_content(); ?></textarea>
</div>
<br />
<br />
<div class="form-group lightboxFormElements">
<label class="lightboxFromElementLabels" for="exerciseSets">Sets</label>
<input type="text" name="Sets" class="form-control" placeholder="Sets">
</div>
<div class="form-group lightboxFormElements">
<label class="lightboxFromElementLabels" for="exerciseReps">Reps</label>
<input type="text" name="Reps" class="form-control" placeholder="Reps">
</div>
<div class="form-group lightboxFormElements">
<label class="lightboxFromElementLabels" for="exerciseReps">Load</label>
<input type="text" name="Load" class="form-control" placeholder="Load">
</div>
<div class="form-group lightboxFormElements">
<label class="lightboxFromElementLabels" for="exerciseReps">Rest</label>
<input type="text" name="Rest" class="form-control" placeholder="Rest">
</div>
<div class="form-group lightboxFormElements">
<label class="lightboxFromElementLabels" for="exerciseReps">Tempo</label>
<input type="text" name="Tempo" class="form-control" placeholder="Tempo">
</div>
<br />
<br />
<div class="modal-footer">
<div class="form-group">
<input type="hidden" name="action" value="addExercise">
<input type="submit" class="btn btn-success">Add to Collection</input>
</div>
</div>
</form>
Javascript:
jQuery('#addExerciseForm').submit(addExercise);
function addExercise(){
var newExercise = jQuery(this).serialize();
jQuery.ajax({
type:"POST",
url: "/wp-admin/admin-ajax.php",
data: addExerciseForm,
success:function(data){
jQuery("#feedback").html(data);
}
});
return false;
}
Function:
function addExercise(){
global $post;
echo $description;
$_SESSION['collection'][$_POST['ExerciseID']] = array(
$description => $_POST['Description'],
$sets => $_POST['Sets'],
$reps => $_POST['Reps'],
$load => $_POST['Load'],
$rest => $_POST['Rest'],
$tempo => $_POST['Tempo']);
$description = $_SESSION['collection'][$exid]['Description'];
$sets = $_SESSION['collection'][$exid]['Sets'];
$reps = $_SESSION['collection'][$exid]['Reps'];
$rest = $_SESSION['collection'][$exid]['Rest'];
$load = $_SESSION['collection'][$exid]['Load'];
$tempo = $_SESSION['collection'][$exid]['Tempo'];
die();
}
add_action('wp_ajax_addExercise', 'addExercise');
add_action('wp_ajax_nopriv_addExercise', 'addExercise');
I understand that I can go straight from jQuery VAR -> session Var however this code is cobbled together from my original $_POST Submit button. The AJAX side of things has got me confused, and throwing in the mix the different way that Wordpress handles things, any assistance will be appreciated.

Using $_SESSION in WordPress isn't the same as a standard php script approach. You have to do things like factoring in when in the sequence of WordPress loading, does the session get set, created, etc.
Have you seen the WP Session Manager? It makes working with sessions in WordPress much more pain-free. Check out https://wordpress.org/plugins/wp-session-manager/

xhtml required contact form fields?

I have HTML form fields on a contact page which then send the data to a php page.
I would like to make the form fields required and show a red (*) next to the label if the user does not enter a value.
How can I do this?
<form id="contact_form" method="post" action="contact.php">
<p style="margin-top:20px">
<label for="title">Title</label><br/>
<input id="your_name" name="your_name" type="text" style="width:94%"/>
</p>
<p style="margin-top:20px">
<label for="initial">Initial</label><br/>
<input id="initial" name="initial" type="text" style="width:94%"/>
</p>
<p style="margin-top:20px">
<label for="surname">Surname</label><br/>
<input id="surname" name="surname" type="text" style="width:94%"/>
</p>
<p style="margin-top:20px">
<label for="tel_number">Tel number</label><br/>
<input id="tel_number" name="tel_number" type="text" style="width:94%"/>
</p>
<p style="margin-top:20px">
<label for="email">Email</label><br/>
<input id="email" name="email" type="text" style="width:94%"/>
</p>
<p style="margin-top:20px">
<label for="enquiry">Enquiry</label><br/>
<textarea id="enquiry" name="enquiry" rows="7" cols="10" style="width:94%"></textarea>
</p>
<p style="margin-top:50px">
<input type="submit" value="Send Message"/><br/>
</p>
</form>

You will have to put the form in a php file (or .phtml recommended*). Add a css class like .input-error.
.input-error { color: red; }
In your form you'll need something like this for each field:
if (empty($postData['field']) {
echo "<span class=\"input-error\">*</span>";
}
To give a clear-cut example:
<p style="margin-top:20px">
<?php if (empty($postData['your_name']): ?>
<span class="input-error">*</span>
<?php endif; ?>
<label for="title">Title</label><br/>
<input id="your_name" name="your_name" type="text" style="width:94%"/>
</p>
The form will have to submit to a php file that will process the form and bring you back to this page. In that file you'd need a line like this:
$postData = $_POST;
Or, if that script redirects to another page then you'll need to store the post data in the session. like:
$_SESSION['postData'] = $_POST;
In which case, at the top of your form or somewhere in the controller (if there is one), retrieve that data like so:
$postData = $_SESSION['postData'];