User enters their name here as part of a form.
<p>Name <font color="red">(required) </font> <input name="flname" required="required" placeholder="Your Name" </p>
This solution currently provides a way of providing a sample text that can also be edited, and the PHP can run inside it, unlike <textarea>. However, my problem is that unlike <textarea>, I cannot seem to get the <div contenteditable... to submit its information to the email php file I have set up on the server. Anyone have any idea how I'd implement this.
<div contenteditable="true" name="message" required="" placeholder="Your Message" >Dear <?php echo "$mptitle $mpsecondname" ?>, <p> Please support us... </p>
<p> Kind Regards, </p>
<script type="text/javascript"> document.write(document.getElementById('flname').id);</script>
</div>
<div align="center">
# Update 2:
Hi,
Thank you both for your quick resposnes.
I tried to implement your solution here:
<div align="left">
<form action="form.php" method="post" enctype="multipart/form-data">
<p>Name <font color="red">(required) </font> <input name="flname" required="required" placeholder="Your Name" </p>
<p>Email <font color="red">(required) </font> <input name="emailfrom" type="email" required="required" placeholder="Your Email"> </p>
<p>Address <font color="red">(required) </font> <input name="address" type="name" required="required" placeholder="Address"> </p>
<p>City <font color="red">(required) </font> <input name="city" type="name" required="required" placeholder="City"> </p>
<p>Postcode <font color="red">(required) </font> <input name="postcode" type="name" required="required" placeholder="Postcode"> </p>
<p>What is 2+2? <font color="red">(required) </font> <input name="human" required placeholder="Type Here"> </p>
<p> <b> You can edit the text below as much or as little as you wish </b> </p>
<div contenteditable="true" required="" placeholder="Your Message" >Dear <?php echo "$mptitle $mpsecondname" ?>, <p> Please support us... </p> <p> Kind Regards, </p>
</div>
<input type=hidden name=userContent id=userContent>
<script>
var el=document.getElementById('userForm');
el.addEventListener('submit', function() {
var elInput=document.getElementById('userContent');
var elDiv=document.getElementById('divContent');
elInput.value = elDiv.innerHTML;
});
</script>
<div align="center">
<input id="cancel" name="cancel" type="submit" value="Cancel" />
<input id="submit" name="submit" type="submit" value="Submit">
</form>
</div>
</div>
PHP:
<?php
ini_set('display_errors',1); error_reporting(E_ALL);
include('mplookup.php');
$name = $_POST['flname'];
$email = $_POST['emailfrom'];
$message = $_POST['userContent'];
$address = $_POST['address'];
$city = $_POST['city'];
$postcode = $_POST['postcode'];
$human = $_POST['human'];
$to = "";
$body = $message;
$subject = 'From: $email \r\n : Sisi\'s visit to the UK: Sent using EG4DEMUK\'s Tool ';
?>
<?php
if ($_POST['submit']) {
if (mail ($to, $subject, $body, $email))
{
echo '<p>Thank you for your email!</p>';
} else {
echo '<p>Oops! An error occurred. Try sending your message again.</p>';
}
}
?>
However, the emails outputed look like this
From: Hassan Ismail
E-Mail:
Message
Thanks in advance
A <div> is not a form element, so it won't be submitted. You need to implement an event listener on the submit event of the form that picks up the content of the <div> and puts it in a form element. Add a hidden <input> to the form for the purpose.
Here's a simple example:
<div id=divContent style="width:400px; height=200px;overflow:auto" contenteditable>Some content</div>
<form id=userForm>
<input type=hidden name=userContent id=userContent>
<input type=submit name=submit value="Send!">
</form>
<script>
var el=document.getElementById('userForm');
el.addEventListener('submit', function() {
var elInput=document.getElementById('userContent');
var elDiv=document.getElementById('divContent');
elInput.value = elDiv.innerHTML;
});
</script>
var el=document.getElementById('userForm');
el.addEventListener('submit', function() {
var elInput=document.getElementById('userContent');
var elDiv=document.getElementById('divContent');
elInput.value = elDiv.innerHTML;
});
<div id=divContent style="width:400px; height=200px;overflow:auto" contenteditable>Some content</div>
<form id=userForm>
<input type=hidden name=userContent id=userContent>
<input type=submit name=submit value="Send!">
</form>
<script>
getElementById('flname') ... is it clearly written in the name of the method that themethod gets an element by its Id, but not by his name. Use getElementsByName or set an id to you input tag. your input tag is not closed too ... don't use font - it is obsolete. if you want to submit tag content, use ajax, or setup a hidden field somwhere in the code, then use submit handler to set it with the content of the div before the actual submit.
<div id="yourdivid">....</div>
<input id="submitarea" type="hiden" name="submitarea">
$(function() {
$('#yourformid').submit( function() {
$('#submitarea').val($('#yourdivid').html());
});
});
Related
This is my php code of inserting data in mysql and displaying sweetalert after insertion but the sweetalert is not displayed.
<?php
if(isset($_POST['submit']))
{
$fullname=$_POST['txtFullName'];
$email=$_POST['txtEmailId'];
$contact=$_POST['txtContactNumber'];
$msg=$_POST['txtMessage'];
if($fullname!="" && $email!="" && $contact!="" && $contact!="")
{
$qry=mysql_query("insert into Contacts values('0','$fullname','$email','$contact','$msg')");
mysql_query($qry) or die(mysql_error());
echo '<script type="text/javascript">
myFn();
</script>';
}
}
?>
This is the model through which I am inserting the data:
<div id="fancy">
<h2>Request information</h2>
<form action="index.php" method="post" enctype="multipart/form-data" name="frmContact" id="frmContact">
<input type="hidden" name="hdid" id="hdid" value="<?php echo isset($row["ContactId"])?$row["ContactId"]:"" ?>" />
<div class="left">
<fieldset class="name"><input placeholder="Full Name..." required="required" type="text" name="txtFullName" id="txtFullName"></fieldset>
<fieldset class="mail"><input placeholder="Email address..." required="required" type="text" name="txtEmailId" id="txtEmailId"></fieldset>
<fieldset class="name"><input placeholder="Contact Number" required="required" type="text" name="txtContactNumber" id="txtContactNumber"></fieldset>
</div>
<div class="right">
<fieldset class="question"><textarea placeholder="Your Message..." required="required" name="txtMessage" id="txtMessage"></textarea></fieldset>
</div>
<div class="btn-holder">
<button class="btn blue" type="submit" id="submit" name="submit">Send request</button>
</div>
</form>
</div>
This is my function myFn
<script type="text/javascript">
function myFn(){
swal({
title: "Success",
text: "Thank you for contacting us. We will get back to you soon!",
type: "success"
},
function(){
//event to perform on click of ok button of sweetalert
});
}
</script>
please help me to overcome this problem
Actually it's quite easy though, no need to create any function
Just do like this:
echo "<script>
swal({
title: "Success",
text: "Thank you for contacting us. We will get back to you soon!",
type: "success"
});</script>"
Vote my answer plz, I really need a Reputation.
I have a simple HTML form with a name & email address field and a submit button.
After filling in the form and submitting it, I want a message such as "Thank you for your response" to appear on the same page.
I'm looking for a easy clean PHP fix for this. I want all the code to stay on one page (Not separate it into two different files).
I've been searching on Google, but they have much more complex situations.
Your help is greatly appreciated. Thanks.
EDIT: I want the form to disappear after pressing submit and just show the "Thank you for your response" message. I forgot to mention that. Sorry.
<form>
<p><span>Name</span><input class="contact" type="text" name="your_name" value="" /></p>
<p><span>Email Address</span><input class="contact" type="text"
name="your_email" value="" /></p>
<p style="padding-top: 15px"><span> </span><input class="submit"
type="submit" name="contact_submitted" value="submit" /></p>
</form>
Would something like the following help? Essentially, when you hit submit, some special variables are set in the $_POST array, and you can access those. If those variables are set when we're building the page in PHP, then we can do some processing/send an email/show a different response page.
<?php
if (array_key_exists($_POST['your_email'])) /* and other validation */ {
?>
<p>Thanks!</p>
<?php } else { ?>
<form action="POST">
<p><span>Name</span><input class="contact" type="text" name="your_name" value="" /></p>
<p><span>Email Address</span><input class="contact" type="text"
name="your_email" value="" /></p>
<p style="padding-top: 15px"><span> </span><input class="submit"
type="submit" name="contact_submitted" value="submit" /></p>
</form>
<?php } ?>
please try below code.
<?php
if($_POST) {
echo "Thank you for your response";
}
?>
<form name="test" action="" method="post">
<p><span>Name</span><input class="contact" type="text" name="your_name" value="" /></p>
<p><span>Email Address</span><input class="contact" type="text"
name="your_email" value="" /></p>
<p style="padding-top: 15px"><span> </span><input class="submit"
type="submit" name="contact_submitted" value="submit" /></p>
</form>
in you form validate page
header('location: ../page.php?case=Thank you for your response');
in your page
<?php print $_GET['case']; ?>
I am using javascript to check whether username and password are not empty. If one of these is empty, javascript alert is displayed and PHP script should not work, that is username and password validation should not occur and login page should be displayed once again. Is there any simple code to do this?
Nobody need to build whole form. I have already build login form and PHP script for its validation, I just want to know is there any method or function in PHP to stop script on entering empty username/password and submitting
Try This
Php Code :
<p>
<label for="first">User Name:</label>
<input type="text" name="First Name" id="first" />
</p>
<p>
<label for="last">Password:</label>
<input type="text" name="Last Name" id="last" />
</p>
<input type="submit" name="Submit" id="button2" value="Submit" onClick="javascript:verify()"/>
JavaScript Code :
function verify() {
if (document.getElementById('first').value=="") {
alert("Please Enter Your Name");
return false;
}
else if (document.getElementById('last').value=="") {
alert("Please Enter Your Password");
return false;
}
else {
document.form.submit();
}
}
Working Model : http://jsfiddle.net/NWWL4/24/
It took me awhile to get this right. I have my form in my html index
page. On a closed question here, I read this couldn't be done.
This php works VERY well with my form.
It generates a Javascript alert for good and bad results and
links back to the index page in either instance.
If you look at the 2nd echo, you'll see where you can redirect to
another page. I just loaded same page to clear form.
If you want to see the ccs, just ask.
PHP:
<?php
if(isset($_POST['submit'])) {
$to = "admin#blahblah.com";
$name_field = $_POST['name'];
$email_field = $_POST['email'];
$subject_field = $_POST['subject'];
$message = $_POST['message'];
$body = "From: $name_field\n E-Mail: $email_field:\n Subject: $subject_field\n Message: $message\n";
}
if(empty($name_field) || empty($email_field) || empty($subject_field) || empty($message)) {
echo '<script type="text/javascript">alert("There is a problem, please check the fields");window.history.go(-1);</script>';
}
else {
if(mail($to, $subject_field, $body)) {
echo '<script type="text/javascript">alert("Message successfully sent");window.location = "https://www.blahblah.com/";</script>';
}}
exit;
?>
html:
<div class="clear"></div>
<div class="container">
<div class="row">
<div class="col-md-3">
<form role="form" action="php\mailer.php" method="post" id="form">
<div class="form-group">
<input name="name" type="text" class="form-control" id="name" placeholder="Your Name" maxlength="30">
</div>
<div class="form-group">
<input name="email" type="text" class="form-control" id="email" placeholder="Your Email" maxlength="30">
</div>
<div class="form-group">
<input name="subject" type="text" class="form-control" id="subject" placeholder="Your Subject" maxlength="40">
</div>
<div><input type="submit" name="submit" class="btn btn-primary" value="Send Message"></input></div>
</div>
<div class="col-md-9">
<div class="txtarea">
<textarea name="message" rows="10" class="form-control" id="message"></textarea>
</form>
<div class="clear"></div>
<div class="col-lg-12" style="text-align:center">
<a class="btn btn-large btn-contact-link" href="#blahblah_home">Home</a>
Stumped, var-dump($_POST) always returns array[0] {} PHP mail though always succeeds. Variables in html side are what I expect when viewed in the debugger. Fails with both register_globals on and off.
<!-- html code (in contact.php) -->
<form name="hhcform" method="POST" action="sendmail.php" onsubmit="return ValidateForm();" enctype="text/plain">
First Name: <input type="text" name="firstname" value="" size="25">
<span id="firstnameErr" style="color:red">*</span>
<br><br>
Last Name: <input type="text" name="lastname" value="" size="25">
<span id="lastnameErr" style="color:red">*</span>
<br><br>
Email Address: <input type="text" name="emailaddress" value="" size="25">
<span id="emailErr" style="color:red">*</span>
<br><br>
Select a Topic: <span id="topicErr" style="color:red">*</span><br>
<div class="radio-block">
<input type="radio" name="topic" value="Insurance"> Accepted Insurance<br><br>
<input type="radio" name="topic" value="Hours"> Office Hours<br><br>
<input type="radio" name="topic" value="Refills"> Prescription Refills<br><br>
<input type="radio" name="topic" value="Patients"> Accepting New Patients<br><br>
<input type="radio" name="topic" value="Website"> Website Issues<br><br>
<input type="radio" name="topic" value="Other"> Other<br><br>
</div>
Comments: <span id="commentErr" style="color:red">*</span><br>
<textarea name="comments" rows="10" cols="25"></textarea><br><br>
<input type="submit" value="Send">
<input type="reset" value="Reset" onclick="ClearErrors();"><br><br>
</form>
PHP code (in sendmail.php)
<?php
var_dump($_POST);
$firstname = $_POST['firstname'];
$lastname = $_POST['lastname'];
$email = $_POST['emailaddress'];
$topic = $_POST['topic'];
$comments = $_POST['comments'];
$recipient = "emailaddress#domainbame.com";
$mailheader = "From: " . $email . "\r\n";
if(mail($recipient, $topic, $comments, $mailheader))
{
echo "Email Sent, Thank You!" . " -" . "<a href='contact.php'
style='text-decoration:none;color:#ff0099;'> Return to Contact Us Form</a>";
}
else
{
echo "Email failed to send" . "-" . "<a href='contact.php'
style='text-decoration:none;color:#ff0099;'> Return to Contact Us Form</a>";
}
?>
Take out
enctype="text/plain" in the form, this should fix the issue.
The issue might be with your enctype
enctype="text/plain"
Try
enctype="multipart/form-data"
instead, unless you have a good reason for using text/plain.
So I have the JavaScript code which validates the first name field, I am adding more validation once I have worked this out.
So basically if the field is not filled in, return false.
If it is return true and continue to email.php to send the email. Only problem is its not sending the email to the set address. I am confused as to where I have gone wrong.
The JavaScript is working when the field is empty, and when it has an input. Help.
PS: I have removed email address for privacy purposes.
JavaScript on contact.html:
<script>
function validateForm() {
if (document.forms['email'].fname.value == ""){
alert("First name must be filled out");
return false;
}
else{
alert("Thank you! Your message was recieved!");
return true;
}
};
</script>
Html form on contact.html
<form id="email" name="email" onsubmit="return validateForm(this)" action="email.php" method="post" >
<div id="form_fname">
<label for="fname"><img src="images/firstname.png" width="94" height="17" alt="first name" /></label>
<input type="text" name="fname" id="fname" />
</div>
<div id="form_lname">
<label for="lname"><img src="images/lastname.png" width="89" height="17" alt="last name" /></label>
<input type="text" name="lname" id="lname" />
</div>
<div id="form_email">
<label for="email"><img src="images/email.png" width="53" height="17" alt="email" /></label>
<input type="text" name="email" id="email" />
</div>
<div id="form_message">
<label for="Message"><img src="images/message.png" width="77" height="17" alt="message" /></label>
<textarea name="message" id="message" cols="45" rows="5"></textarea>
</div>
<div id="form_submit">
<input type="submit" name="submit" id="submit" value=""/>
</div>
</form>
Php in email.php
<?php
if(isset($_POST['email'])) {
// Email and subject.
$email_to = "emailaddress";
$email_subject = "Mint Makeup & Beauty Enquiry";
$fname = $_POST['fname']; // required
$lname = $_POST['lname']; // required
$message = $_POST['message']; // required
$email_from = $_POST['email']; // required
// create email content
$email_content = "From:"." ".$fname." ".$lname."\n"."Email:"." ".$email_from."\n"."Message:"." ".$message;
//mail
mail($email_to, $email_subject, $email_content);
}
//return to contact page after submit.
header("location:contact.html");
?>
In your form id="email" is conflicting with input id="email"
You can use HTML5 attributes for form validation (in HTML5 supported browsers)
http://www.the-art-of-web.com/html/html5-form-validation/#.UnDpBHMW3eU
Code
<?php
if(isset($_POST['submit'])) {
print_r($_POST);
die;
$email_to = "emailaddress";
$email_subject = "Mint Makeup & Beauty Enquiry";
$fname = $_POST['fname']; // required
$lname = $_POST['lname']; // required
$message = $_POST['message']; // required
$email_from = $_POST['email']; // required
// create email content
$email_content = "From:"." ".$fname." ".$lname."\n"."Email:"." ".$email_from."\n"."Message:"." ".$message;
mail($email_to, $email_subject, $email_content);
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript">
function validateForm() {
var error = false;
var error_string = 'Please correct the following errors:\n\n';
if (document.getElementById('fname').value == ""){
error_string += "--> First name must be filled out.\n";
error = true;
}
if (document.getElementById('lname').value == ""){
error_string += "--> Last name must be filled out.\n";
error = true;
}
if (document.getElementById('email').value == ""){
error_string += "--> Email must be filled out.\n";
error = true;
}
if(error){
alert(error_string);
return false;
} else {
return true;
}
}
</script>
</head>
<body>
<form onsubmit="return validateForm(this)" action="" method="post" >
<div id="form_fname">
<label for="fname"><img src="images/firstname.png" width="94" height="17" alt="first name" /></label>
<input type="text" name="fname" id="fname" />
</div>
<div id="form_lname">
<label for="lname"><img src="images/lastname.png" width="89" height="17" alt="last name" /></label>
<input type="text" name="lname" id="lname" />
</div>
<div id="form_email">
<label for="email"><img src="images/email.png" width="53" height="17" alt="email" /></label>
<input type="text" name="email" id="email" />
</div>
<div id="form_message">
<label for="Message"><img src="images/message.png" width="77" height="17" alt="message" /></label>
<textarea name="message" id="message" cols="45" rows="5"></textarea>
</div>
<div id="form_submit">
<input type="submit" name="submit" id="submit" value="Submit" />
</div>
</form>
</body>
</html>
I just showed you how client side validation works and form is posting correctly.. You should always use server side validation..
Try
document.forms["email"]["fname"].value
instead
document.forms['email'].fname.value
Also you can get field this way:
document.getElementById('fname').value