Submit form using PHP - javascript

please forgive me for my ignorance but I am completely new to PHP. I downloaded a website template and it has a form that I want to send to my email address when someone clicks the submit button. How do I do that? The existing code is copied below:
function rsvpFormSubmit() {
// this is the id of the form
var formID = $("#js-form");
// submits form with ajax method
formID.on("submit", function() {
$.ajax({
url: "mailer.php",
type: "POST",
data: formID.serialize(), // serializes the form's elements.
success: function(data) {
$(".js-display")
.addClass("message-panel")
.html(data); // show response from the php script.
}
});
return true; // avoid to execute the actual submit of the form.
});
// Show/Hide RSVP Menu selection on accept/decline
$(".decline").on("click", function(){
$(".rsvp-meal-choice").fadeOut();
});
$(".accept").on("click", function(){
$(".rsvp-meal-choice").fadeIn();
});
}
rsvpFormSubmit();
Here is the form HTML code:
<div id="section-6" class="js-form">
<div class="section-title-container">
<h2 class="section-title">Rsvp</h2>
<span class="hearts"></span>
</div>
<div class="small-12 large-10 large-centered columns">
<form data-abide method="POST" action="#" class="rsvp-form custom" id="js-form">
<fieldset class="rsvp-details">
<!-- Displays a global alert if required fields are missing -->
<div class="js-display"></div>
<legend>
Kindly respond by <strong>March 14, 2014</strong>. We look forward to celebrating with you!
</legend>
<div class="row">
<div class="large-6 columns">
<label for="firstname">First Name</label>
<input type="text" class="input-field" id="firstname" name="firstname" value="" placeholder="Your first name is required" required>
<small class="error">First Name is required.</small>
</div>
<div class="large-6 columns">
<label for="lastname">Last Name</label>
<input type="text" class="input-field" id="lastname" name="lastname" value="" placeholder="Your last name is required" required>
<small class="error">Last Name is required.</small>
</div>
</div>
<div class="row">
<div class="large-6 columns">
<label for="email">Email</label>
<input type="email" class="input-field" id="email" name="email" value="" placeholder="name#yourdomain.com" required>
<small class="error">Valid Email is required.</small>
</div>
<div class="large-6 columns">
<label for="phone">Phone</label>
<input type="tel" class="input-field" id="phone" name="phone" value="" placeholder="A phone number is optional">
</div>
</div>
</fieldset>
<fieldset class="rsvp-attendance">
<legend>Will you be attending?</legend>
<div class="large-6 columns">
<label for="radio1">
<input name="radio" type="radio" id="radio1" style="display:none;" value="Accepts with Pleasure!" required>
<span class="custom radio accept"></span>
<span class="radio-label">Accepts with Pleasure!</span>
</label>
</div>
<div class="large-6 columns">
<label for="radio2">
<input name="radio" type="radio" id="radio2" style="display:none;" value="Declines with Regret." required>
<span class="custom radio decline"></span>
<span class="radio-label">Declines with Regret.</span>
</label>
</div>
</fieldset>
<fieldset class="rsvp-meal-choice">
<legend>
Please select your meal choices
</legend>
<div class="row">
<div class="large-6 columns">
<label for="main-course">Main</label>
<select id="main-course" name="main-course">
<option selected>None</option>
<option>Chicken</option>
<option>Beef</option>
<option>Vegetarian</option>
</select>
</div>
<div class="large-6 columns">
<label for="dessert">Dessert</label>
<select id="dessert" name="dessert">
<option selected>None</option>
<option>Chocolate Cake</option>
<option>Lemon Cheesecake</option>
<option>Key Lime Pie</option>
</select>
</div>
</div>
</fieldset>
<button type="submit" class="button radius" id="js-submit-btn">
<i class="fa fa-envelope"></i>
<span class="btn-label">Send</span>
</button>
</form>

<form id="js-form" onsubmit="rsvpFormSubmit()">
Call this function and all PHP code added in mailer.php

After You Create a Mailer.php Function Please Code these code into it
<?php
if(isset($_POST['submit'])){
$to = "email#example.com"; // this is your Email address
$from = $_POST['email']; // this is the sender's Email address
$first_name = $_POST['first_name'];
$last_name = $_POST['last_name'];
$subject = "Form submission";
$subject2 = "Copy of your form submission";
$message = $first_name . " " . $last_name . " wrote the following:" . "\n\n" . $_POST['message'];
$message2 = "Here is a copy of your message " . $first_name . "\n\n" . $_POST['message'];
$headers = "From:" . $from;
$headers2 = "From:" . $to;
mail($to,$subject,$message,$headers);
mail($from,$subject2,$message2,$headers2); // sends a copy of the message to the sender
echo "Mail has been Sent. Thank you " . $first_name . ", we will contact you shortly.";
}
?>
Dont put any spaces before [at the end].
I hope the code works fine... please let me know any problem exists
have a nice day
thank you

Related

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.

php doesn't add a div, it changes the page completely

I am trying to make a contact form in PHP and HTML. The code works but the problem is that is completely changes the page simply ruining the process of having only a single change: the div that goes on the bottom of the form. Here is my php file:
<?php
if (isset($_POST["submit"])) {
$name = $_POST['name'];
$title = $_POST['title'];
$phone = $_POST['phone'];
$email = $_POST['email'];
$url = $_POST['url'];
$message = $_POST['message'];
$human = intval($_POST['human']);
$from = 'Partner from Website';
$to = 'jordanwhite916#gmail.com';
$subject = 'VetConnexx Partner Inquiry';
$body = "From: $name\n E-Mail: $email\n Phone: $phone\n Message:\n $message";
// Check if name has been entered
if (!$_POST['name']) {
$errName = 'Please enter your name';
}
if (!$_POST['title']) {
$errTitle = 'Please enter your title';
}
if (!$_POST['phone']) {
$errPhone = 'Please enter your phone';
}
// Check if email has been entered and is valid
if (!$_POST['email'] || !filter_var($_POST['email'], FILTER_VALIDATE_EMAIL)) {
$errEmail = 'Please enter a valid email address';
}
if (!$_POST['url'] || !filter_var($_POST['url'], FILTER_VALIDATE_URL)) {
$errURL = 'Please enter a valid website';
}
//Check if message has been entered
if (!$_POST['message']) {
$errMessage = 'Please enter your message';
}
//Check if simple anti-bot test is correct
if ($human !== 5) {
$errHuman = 'Your anti-spam is incorrect';
}
// If there are no errors, send the email
if (!$errName && !$errEmail && !$errMessage && !$errHuman && !$errTitle && !$errPhone && !$errURL) {
if (mail ($to, $subject, $body, $from)) {
$result='<div class="success">Thank You! I will be in touch</div>';
} else {
$result='<div class="danger">Sorry there was an error sending your message. Please try again later</div>';
}
}
}
?>
<div class="panel panel-default">
<div class="panel-body">
<p>Become a VetConnexx Business Partner.</p>
<br />
<br />
<p>VetConnexx brings the mission focused discipline, integrity, and motivation of the US Armed Forces
to your customers. VetConnexx has been tested by the best and exceeds the standards expected of
Fortune 100 companies and their privately held peers.</p>
<br />
<br />
<p>We can bring the same level of service to your business. To discuss our client services, please
contact us at VetPartners#VetConnexx.com</p>
<br />
<br />
<form class="form-horizontal" role="form" method="post" action="businesspartners.php">
<div class="form-group">
<label for="name" class="col-sm-2 control-label">Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="name" name="name" placeholder="First & Last Name" value="<?php echo htmlspecialchars($_POST['name']); ?>">
<?php echo "<p class='text-danger'>$errName</p>";?>
</div>
</div>
<div class="form-group">
<label for="title" class="col-sm-2 control-label">Title</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="title" name="title" placeholder="Title" value="<?php echo htmlspecialchars($_POST['title']); ?>">
<?php echo "<p class='text-danger'>$errTitle</p>";?>
</div>
</div>
<div class="form-group">
<label for="phone" class="col-sm-2 control-label">Phone</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="phone" name="phone" placeholder="Phone" value="<?php echo htmlspecialchars($_POST['phone']); ?>">
<?php echo "<p class='text-danger'>$errPhone</p>";?>
</div>
</div>
<div class="form-group">
<label for="email" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="email" name="email" placeholder="example#domain.com" value="<?php echo htmlspecialchars($_POST['email']); ?>">
<?php echo "<p class='text-danger'>$errEmail</p>";?>
</div>
</div>
<div class="form-group">
<label for="url" class="col-sm-2 control-label">URL</label>
<div class="col-sm-10">
<input type="url" class="form-control" id="url" name="url" placeholder="www.examplewebsite.com" value="<?php echo htmlspecialchars($_POST['url']); ?>">
<?php echo "<p class='text-danger'>$errURL</p>";?>
</div>
</div>
<div class="form-group">
<label for="message" class="col-sm-2 control-label">Message</label>
<div class="col-sm-10">
<textarea class="form-control" rows="4" name="message" placeholder="How may we help you?"><?php echo htmlspecialchars($_POST['message']);?></textarea>
<?php echo "<p class='text-danger'>$errMessage</p>";?>
</div>
</div>
<div class="form-group">
<label for="human" class="col-sm-2 control-label">2 + 3 = ?</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="human" name="human" placeholder="Your Answer">
<?php echo "<p class='text-danger'>$errHuman</p>";?>
</div>
</div>
<div class="form-group">
<div class="col-sm-10 col-sm-offset-2">
<input id="submit" name="submit" type="submit" value="Send" class="btn btn-primary">
</div>
</div>
<div class="form-group">
<div class="col-sm-10 col-sm-offset-2">
<?php echo $result; ?>
</div>
</div>
</form>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
The link to the website I am trying to develop is located here: Go to Business Partners, and fill out the information in the contact form to see what may be wrong. I only want the div on the bottom to show after the Send button is click, not for a completely white page with black text and forms to come up that has the same content. Here's the link to the website:
http://www.sampsonvision.com/VetConnexxWebsite
I suggest you want to use AJAX call to your PHP file instead of a simple submission. Because after form submission, the only content appears on a page is that one which was generated by the script. Your script outputs only one div.

Populating input forms with json data on another page

I am trying to populate a form on a button click, so for example a user clicks a button and then it populates the inputs with the button id's information from a json page. I have added what I need in the jquery belo
Here's my javascript, which doesn't have an onclick, which I need it to, but need it t
jquery script
(i need an on click perform this action)
$.get('<?php echo Config::get('URL'); ?>dashboard/employment_json/(i need this to be the value of the button)',function(d){
$("input[name='json_name']").val(d.name);
$("input[name='json_country']").val(d.country);
$("input[name='json_start']").val(d.date_start);
$("input[name='json_end']").val(d.date_end);
$("input[name='json_duration']").val(d.duration);
$("input[name='json_description']").val(d.description);
},'json');
Here's sample data of the inputs:
<div class="col-md-6">
<div class="form-group">
<label for="field-1" class="control-label">
<?php echo System::translate("Employment name"); ?>
</label>
<input type="text" disabled name="json_name" class="form-control" id="field-1">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="field-2" class="control-label">
<?php echo System::translate("Employment Country"); ?>
</label>
<input type="text" disabled name="json_country" class="form-control" id="field-2">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="field-2" class="control-label">
<?php echo System::translate("Start Date"); ?>
</label>
<input type="text" disabled name="json_start" class="form-control" id="field-2">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="field-2" class="control-label">
<?php echo System::translate("End date"); ?>
</label>
<input type="text" disabled name="json_end" class="form-control" id="field-2">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="field-2" class="control-label">
<?php echo System::translate("Employment Duration"); ?>
</label>
<input type="text" disabled name="json_duration" class="form-control" id="field-2">
</div>
</div>
And lastly, but not least,
Json sample
{"employment":{"name":"test","duration":"12","date_end":"2015-07-01","date_start":"2014-07-07","country":"America","description":"This is just a test description of no important value. Have a nice day."}}
Maybe something like this ?
$('.myButtonClass').on('click', function(e){
var url = '<?php echo Config::get('URL'); ?>dashboard/employment_json/' + e.target.id;
$.get(url,function(d){
$("input[name='json_name']").val(d.name);
$("input[name='json_country']").val(d.country);
$("input[name='json_start']").val(d.date_start);
$("input[name='json_end']").val(d.date_end);
$("input[name='json_duration']").val(d.duration);
$("input[name='json_description']").val(d.description);
},'json');
});
Obviously you have to change
$('.myButtonClass')
here you have to use the class or id of the button you want to bind the action to.

RSVP Form submitting after each response- Need All responses submitted together for family

This is for a private wedding website. Invitations are sent to guests, which could be individuals or entire families. Those invitations include a special Passcode that lets them access the website. Once inside, in the RSVP section we have returned the names of the guests invited.
The goal is to allow whichever guest that has logged in to respond to the RSVP by clicking a box that says "Yes" I'll be in attendance or "No" I won't be attending.
The question is available to all of the people in the group. Then the person can enter other info + offer a song suggestion for the wedding. I'd like at that point for the entire form to be submitted altogether.
PROBLEM: As soon as a guest clicks on (Yes) or (No) the form automatically submits, and then refreshes the page. At that point you can't see what selection was made any longer. How do I change this code so that my guests can click all of the yes's and no's and then entire the other information, where then they can see all of their responses before clicking Submit which submits() the whole form?
Ex:
John (Yes)
(No)
Emily (Yes)
(No)
Louis (Yes)
(No)
Mailing Address (form field)
Email Address (form field)
Phone number (form field)
Song Title (form field)
Artist (form field)
Button (Submit)
<!-- FORM -->
<div class="row">
<div id="result" class="col-md-12"> <!-- Show Message --> </div>
<div class="col-md-6">
<div id="events" class="form-group">
<?php
global $wpdb;
$guestname = $wpdb->get_results("SELECT * FROM `wp_password_a` where pwd_a_id='" . $_SESSION['admin_id'] . "' ");
$guest = $guestname[0]->name_guest;
$id_res = $guestname[0]->wp_response_id;
$myrows = $wpdb->get_results("SELECT * FROM `wp_pwd_a_response` where guestname='" . $guest . "' ");
//echo "<pre>";print_r($myrows);
$i = 1;
foreach ($myrows as $pro_data) {
?>
<form method="post" id="formName<?php echo $pro_data->wp_response_id; ?>" >
<div class="col-md-12">
<div class="col-md-4" style="margin:10px 0px;">
<?php echo $pro_data->member; ?>
</div>
<div class="col-md-4">
<div class="checkbox">
<label><input type="checkbox" class="checkbox" onchange="document.getElementById('formName<?php echo $pro_data->wp_response_id; ?>').submit()" name="response" value="YES">Will be in Attendance</label>
</div>
</div>
<div class="col-md-4">
<div class="checkbox">
<label><input type="checkbox" class="checkbox" onchange="document.getElementById('formName<?php echo $pro_data->wp_response_id; ?>').submit()" name="response" value="NO">Regretfully Declines</label>
<input type="hidden" name="res_id" value="<?php echo $pro_data->wp_response_id; ?>">
</div>
</div>
</div>
</form>
<?php } ?>
<form method="post">
<div id="fullname" class="form-group">
<label for="inputname"><i><b>Mailing Address</b></i></label>
<input type="text" name="address" class="form-control" id="inputname" placeholder="">
</div>
<div class="form-group">
<label for="inputname"><i><b>E-mail Address</b></i></label>
<input type="text" name="phone" class="form-control" id="inputname" placeholder="">
</div>
<div class="form-group">
<label for="inputname"><i><b>Phone Number</b></i></label>
<input type="text" name="phone" class="form-control" id="inputname" placeholder="">
</div>
</div>
</div>
<div class="col-md-6">
<div class="col-md-12">
<i></br></br>In celebration of the bride and groom’s special day, I would like to dedicate the following song:</i>
</div>
<div id="fullname" class="form-group">
<label for="inputname"></br></br><i><b>Song Title</b></i></label>
<input type="text" name="song" class="form-control" id="inputname" placeholder="">
</div>
<div class="form-group">
<label for="inputname"><i><b>Artist</b></i></label>
<input type="text" name="artist" class="form-control" id="inputname" placeholder="">
</div>
</div>
<div class="col-md-12 text-center text-danger"></br></br>
<div><b><i>Please provide a response by August 1, 2015.</i></b></div>
</div>
<div class="col-md-12 text-center">
<div class="form-group">
<input type="submit" id="submitButton" name="submitresponse" class="btn btn-default btn-lg" value="Submit">
</div>
</div>
<form>
</div>
</div>
</section><!--END of RSVP SECTION-->
Based on the code sample you provided, it appears you are creating a new form for each checkbox, which is separate from the form containing the other information. Furthermore, in the generated checkbox forms, you have the code:
onchange="document.getElementById('formNamewp_response_id; ?>').submit()"
This explains the behavior you are seeing when the checkbox is clicked and the page refreshes. The onchange event fires, and the form submits.
To achieve the behavior you are looking for, render each your checkbox inputs into the lower form, and remove the 'onchange' handler on each checkbox input. Then when you submit the form, all fields will be submitted at once. Just make sure that the endpoint you are POSTing to properly handles the new fields.

Ajax not posting form data

I recently asked a question about executing a Send Mail script without a page reload and worked out what my problem was with my AJAX, that's all resolved. I now have an issue with the following:
When my form posts to my AJAX the script is executed, however the post data doesn't seem to be come through to the PHP script.
The link to my question is: Contact Form same page success.
Here is my PHP:
<?php
$name = ($_POST['name']);
$email = ($_POST['email']);
$fsubject = ($_POST['subject']);
$message = ("Name: ". $name . "\nEmail Address: " . $email . "\n\nMessage: " . $_POST['message']);
// Set Mail
$to = "emailaddress#fakeone.com";
$header = 'From: contactus#fakeone.com' . "\r\n" .
'Reply-To: website#fakeone.com';
$subject = "{$fsubject}";
$body = "{$message}";
// Send Mail
if (mail($to, $subject, $body, $header))
{
echo("<p>Message successfully sent!</p>");
}
else
{
echo("<p>Message delivery failed...</p>");
}
?>
My HTML
<div id="success" style="color:red;"></div>
<form action="" id="contactform" method="post">
<div class="row">
<div class="form-group">
<div class="col-md-6">
<label>Your name *</label>
<input type="text" value="" data-msg-required="Please enter your name." maxlength="100" class="form-control" name="name" id="name">
</div>
<div class="col-md-6">
<label>Your email address *</label>
<input type="email" value="" data-msg-required="Please enter your email address." data-msg-email="Please enter a valid email address." maxlength="100" class="form-control" name="email" id="email">
</div>
</div>
</div>
<div class="row">
<div class="form-group">
<div class="col-md-12">
<label>Subject</label>
<input type="text" value="" data-msg-required="Please enter the subject." maxlength="100" class="form-control" name="subject" id="subject">
</div>
</div>
</div>
<div class="row">
<div class="form-group">
<div class="col-md-12">
<label>Message *</label>
<textarea maxlength="5000" data-msg-required="Please enter your message." rows="10" class="form-control" name="message" id="message"></textarea>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<input type="submit" id="submit" value="Send Message" class="btn btn-info btn-lg" data-loading-text="Loading...">
</div>
</form>
My AJAX
<script>
$(document).ready(function () {
$('#submit').click(function () {
$.post("sendmail.php", $("#contactform").serialize(), function (response) {
$('#success').html(response);
});
return false;
});
});
</script>
When I fill out the forms, nothing comes back it sends an empty email.
Any idea's why the post isn't working on this would be greatly appreciated. If I am breaking any rules by posting another question please let me know!
Regards,
Dan
I think the problem is in your PHP code. You've got a variable named $headers, but in your mail function you're using $header. A typo.
Change the following lines from this -
$subject = "{$fsubject}";
$body = "{$message}";
to this -
$subject = $fsubject;
$body = $message;

Categories

Resources