I have a relatively simple sounding question that hopefully entails a simple answer. I am currently developing a website that is a scroll-down type; everything is on one page, you know the one. My 'contact' section is at the very bottom of the page, and I am of course doing form validation with PHP. The validation part works, I have no trouble with that. However, if validation fails, the browser takes me back all the way back to the top of the page; this is inconvenient for obvious reasons.
I am aware of the 'header()' function, which I can use to keep me at the bottom of the page if an error occurs. As an example, at the top of my HTML page before the DOCTYPE, I can write:
if ($errors) {
header(Location: 'somelocation.php#contact');
}
This works, but for some reason it prevents my PHP embedded in my html to work. If some errors occur, I want to display them using PHP on the page:
<h2>Contact</h2>
<?php if($errors) { ?>
<p class="warning">Please fix the errors</p>
<?php } ?>
'Please fix the errors' does not appear. It does appear however, if I remove the header function from the page, so I know the problem is related. So basically, if I remove the header() function, the page goes back to the top, and the errors show; if I keep the header() function, the page correctly stays where it is, but no errors show.
Alternatively, this question also can be asked in the case of, what happens when the form is validated correctly, the 'header' function is called, and I want to stay at the bottom of the page and display some HTML saying 'Thanks, your form has been submitted'? (I don't want to go to a 'thank-you' page or anything, just stay in the same spot and give a 'thanks' on the page) I assume I'd run into the same problem. Is there a solution to this?
Thanks in advance!
Specifying a location in the header will cause the browser to redirect to that URI. This is being called before any output is sent to the browser.
When the page is reset, $errors == false, so the paragraph isn't displayed.
It sounds like you need to integrate AJAX, or a mixture of server- and client-side code here.
A very simple and efficient way to validation of a form is using jquery, A perfect example of this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://jzaefferer.github.com/jquery-validation/jquery.validate.js"></script>
<style type="text/css">
* { font-family: Verdana; font-size: 96%; }
label { width: 10em; float: left; }
label.error { float: none; color: red; padding-left: .5em; vertical-align: top; }
p { clear: both; }
.submit { margin-left: 12em; }
em { font-weight: bold; padding-right: 1em; vertical-align: top; }
</style>
<script>
$(document).ready(function(){
$("#commentForm").validate();
});
</script>
</head>
<body>
<form class="cmxform" id="commentForm" method="get" action="">
<fieldset>
<legend>A simple comment form with submit validation and default messages</legend>
<p>
<label for="cname">Name</label>
<em>*</em><input id="cname" name="name" size="25" class="required" minlength="2" />
</p>
<p>
<label for="cemail">E-Mail</label>
<em>*</em><input id="cemail" name="email" size="25" class="required email" />
</p>
<p>
<label for="curl">URL</label>
<em> </em><input id="curl" name="url" size="25" class="url" value="" />
</p>
<p>
<label for="ccomment">Your comment</label>
<em>*</em><textarea id="ccomment" name="comment" cols="22" class="required"></textarea>
</p>
<p>
<input class="submit" type="submit" value="Submit"/>
</p>
</fieldset>
</form>
</body>
</html>
Happy Coding.!!!
Related
I am very new to html and php and need a little help. This is actually my first post on stackoverflow so I apologize if the content isn't done right.
I am asking for a username and password from a user and then I want to take that information and use it in a script that is run on the server via PHP.
The problem I'm having is that the first time a user goes to the html and fills out the form, the $_POST in the php file doesn't receive anything. I know that because I echoed the variables in the php file. But after the user presses the 'Back' button on the php page and returns back to the html, when going through it again, everything works fine.
So the code works, it just doesn't work the first time. Any ideas?
HTML:
<body>
<div class="loader" id="container" style="visibility:hidden;"></div>
<form method="post" action="Login_Page.php">
<b>Username:</b><input type="text" placeholder="University ID" name="userid" autofocus/>
<b>Password:</b><input type="password" placeholder="Password" name="pswrd"/>
<input type="submit" class="button" value="Submit" onclick="showDiv()"/>
</form>
</div>
</body>
CSS:
.loader {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url('https://cdn.shopify.com/s/files/1/1247/2733/t/4/assets/loading.gif?11916921113420493983') 50% 50% no-repeat rgba(255, 255, 255, 0.3);
filter: alpha(opacity=60);
}
Script:
<script type="text/javascript">
showDiv = function() {
document.getElementById("container").style.visibility="visible";
}
</script>
PHP:
<?php
$username = $_POST["userid"];
$pswrd = $_POST["pswrd"];
echo $username;
echo $pswrd;
$cmd = "path/to/script.sh $username $pswrd";
exec($cmd, $output, $return);
if ($return != "0") {
echo '<h1><b>Login was unsuccessful. Please try again.</b></h1>';
echo '<form>';
echo '<input type="button" value="Back" onClick="history.go(-1);return true;"/>';
echo '</form>';
} else {
echo '<h1><b>Login was Successful.</b></h1>';
}
?>
Could be the same problem as there: Onclick javascript stops form submit in Chrome.
It's caused by your onclick function at form submit.
So it ended up being a security certificate issue. I was trying to open up my website on an iPad and I didn't have the correct security certificate download on the iPad. This might sound weird but it has been consistently working after I did that. Thank you, everyone, for all of your helpful comments and assistance.
I have a WYSIWYG tool where I can create a content. At the bottom, I have a form where I can submit a value (from an input text) to a database. That works fine. Now, I am trying to submit the content that has been created in the WYSIWYG in the database.
I am thinking of using a value in the input as shown below:
<input name="videoLink" type="text" value="John" required/>
and use javascript to make the value dynamic. But there must be an easier way. To make the form submit the content of a div instead of having to type anything in the input box.
My code is shown below:
angular.module("textAngularTest", ['textAngular']);
function wysiwygeditor($scope) {
$scope.orightml = '<h2>Put Your Text Here</h2>';
$scope.htmlcontent = $scope.orightml;
$scope.disabled = false;
};
.ta-editor {
min-height: 80px;
height: auto;
overflow: auto;
font-family: inherit;
font-size: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular-sanitize.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/textAngular/1.1.2/textAngular.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.1/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.min.css" rel="stylesheet" />
<div ng-app="textAngularTest" ng-controller="wysiwygeditor" class="container app">
<h3>WYSIWYG Editor</h3>
<div text-angular="text-angular" name="htmlcontent" ng-model="htmlcontent" ta-disabled='disabled'></div>
<!--<h3>Raw HTML in a text area</h3>
<textarea ng-model="htmlcontent" style="width: 100%"></textarea>-->
<h3>Preview</h3>
<div ng-bind-html="htmlcontent"></div>
<!--<h3>Bound with ta-bind, our internal html-binding directive</h3>
<div ta-bind="text" ng-model="htmlcontent" ta-readonly='disabled'></div>-->
<button type="button" ng-click="htmlcontent = orightml">Reset</button>
<form action="Insert.php" method='POST' enctype='multipart/form-data'>
<label><input name="videoLink" type="text" required/></label>
<input id="button" type="submit" name="log">
</form>
</div>
Use placeholder instead of value.
Set value =" " but the placeholder="Put text here" ... otherwise you could get a lot of Johns.. I presume that's what you want to avoid? I don't think you can avoid php/ passing values to php from html [using javascript] to enter values into a database.
Your form isn't that big. You don't need that amount of js unless your site is using angular/is included in all pages of the CMS. So if the question is really how to pass variables to php with minimal javascript, then comment.
You should still use placeholder instead of value. Otherwise if people don't change the text / maybe just press enter/submit.. your required error message won't fire. That's a lot of Johns in the db! :)
Hope this helps
I'm having a very hard time trying to get a php code integrated into a form I've created on wordpress. I've trying 3 different php plugins to no avail. Here is the html and css. Does anyone have any idea where I should be putting the php on wordpress and how I should properly call it through the "action" in the form?
css:
<style>
input[type=text], input[type=number], select[name=province]{ font-family: arial; width:100%;
border: 1px solid #E5E5E5; padding: 10px 20px;}
input[name=ffirstname] {width:49%; margin-right:1%; }
input[name=lastname] {width:49%; margin-left:1%; }
input[name=address] {width:65.6667%; margin-right:1%; }
input[name=unit] {width:32.3337%; margin-left:1%; }
input[name=city] {width:49%; margin-right:1%; }
select[name=province] {width:24%; margin-left:1%;}
input[name=postal] {width:24%; margin-left:1%; }
input[name=email] {width:49%; margin-right:1%; }
input[name=phone] {width:49%; margin-left:1%;}
input[class=submit] {
background-color: #f05a28;
color: white;
padding: 8px 20px;
margin-left: 85%;
border-radius: 4px;
border: none; !important;
outline: none; !important ;
cursor: pointer;
box-shadow: none; !important;
}
</style>
html:
<form name"infoform" method="post" action="form-to-email.php" >
<br><input type="text" name="ffirstname" placeholder="First Name"/><input type="text" name="lastname" placeholder="Last Name"/>
<br><br><input type="text" name="address" placeholder="Address"/><input type="text" name="unit" placeholder="Unit"/></br>
<br><input type="text" name="city" placeholder="City"/><select name="province" form="form1">
<option value="ab">AB</option>
<option value="BC">BC</option>
<option value="BC">MB</option>
<option value="NB">NB</option>
<option value="NL">NL</option>
<option value="NS">NS</option>
<option value="ON">ON</option>
<option value="PE">PE</option>
<option value="QC">QC</option>
<option value="SK">SK</option>
</select><input type="text" name="postal" placeholder="Postal Code"/></br>
<br><input type="text" name="country" placeholder="Country"/></br>
<Br><input type="text" name="email" placeholder="Email"/><input type="number" name="phone" placeholder="Phone#"/></br>
<br> <br><input type="submit" value="Next"/>
php:
<?php
$name = $_POST['ffirstname'];
$email = $_POST['lastname'];
$message = $_POST['address'];
$to = "joeblow#hotmail.com";
$subject = "My contact form";
$body = " You have received a new";
mail($to,$subject,$body);
?>
Usually I use footer.php to add JS and PHP code, just before the closing tag of the body. But if that does not work try using header.php. Maybe your code needs to be included before the end.
The HTML part you can put inside a page or post without a problem.
If you want to use a plug-in, you can easily do that with Contact form 7.
Check here and here for tutorials.
UPDATE - to add PHP code into Wordpress:
You can add the code between <?php tags, so open your header.php, footer.php or page.php and write your code inside the tag
<?php
//PHP Code here
?>
This way you will see this code in every Wordpress page on your site.
Header and footer are always included on all pages.
If you only need it in post or page use page.php or post.php
If you want control over the placement of php within a Wordpress page then have a look at page templates. You could create a form page template that had the form and the necessary php to deal with it, and then apply that to a given url e.g. /sign-up. That way you wouldn't have to have the form code cluttering up the header.php or footer.php of every page.
With the form itself, you could just have it post to itself, and then check to see whether the form variables are set when the page is loaded using isset($_POST['field_name']). If they're present then you can assume the form was posted, and you need to therefore send the email, otherwise if they're not present then you can assume you need to display the form.
e.g.
<?php if(isset($_POST['ffirstname'])){
// Do some appropriate sanitization for your use case
$ffirstname = htmlspecialchars(trim($_POST['ffirstname']));
//.. repeat for other fields, and then send email
// could drop out of php here and show a thank you message
?>
<p>Thank you for submitting the form</p>
<?php
} else {
// $_POST['ffirstname'] not set, so show form ?>
<form method="post" action="">
<input type="text" name="ffirstname" />
<input type="submit" value="Submit" />
</form>
<?php } ?>
If you want to hook into Wordpress for this, then one way to do it is to add a hidden input called action and set its value to the name of a function in your functions.php file. You'll also need to add some javascript to make an ajax submission to the function that could then do the logic and email sending:
e.g.
// Form Page
<form method="post" action="" id="emailForm">
<input type="text" name="ffirstname" />
<input type="hidden" name="action" value="sendEmail" />
<input type="submit" value="Submit" />
</form>
// Somewhere further down the same page as the form
<script type="text/javascript">
jQuery('#emailForm').on('submit', function() {
e.preventDefault();
jQuery.ajax({
type: 'POST',
url: '/wp-admin/admin-ajax.php',
data: jQuery('#emailForm').serialize(),
success: function(data) {
// Perhaps some UI update here to let the user know
// the submission was successful
},
error: function(error) {
// Do something with the error
}
});
});
</script>
Then in your themes functions.php file:
// Functions.php
function sendEmail(){
// Do some appropriate sanitization for your use case
$ffirstname = htmlspecialchars(trim($_POST['ffirstname']));
//.. repeat for other fields as necessary, and then send email
return wp_mail($recipient, $subject, $body, $headers);
}
add_action('wp_ajax_sendEmail', 'sendEmail');
I am a customer service assistant and I wanted to make a simple form to check the price of products on the webpage, without having to load the whole homepage.
The website is www.homebase.co.uk, and the search URL is http://www.homebase.co.uk/en/homebaseuk/searchterm/.
I want to make a form where it will add the text entered in the form after /searchterm/ without the question mark.
EG if I type in 775199 and press submit/search it will navigate to http://www.homebase.co.uk/en/homebaseuk/searchterm/775199.
Thanks so much for your help all :)
I really appreciate it!
Assuming you are using PHP. I think what you want to do is this:
<?php
//THIS IS THE SAME PAGE WHERE YOUR SEARCH FORM EXISTS
$searchPage = "http://www.homebase.co.uk/en/homebaseuk/searchterm/";
$formAction = "./"; //FORM IS SUBMITTED BACK TO ITSELF...
if(isset($_POST['search_term']){
//BUILD THE REDIRECTION LINK BASED ON THE DEFAULT SEARCH PAGE: $searchPage . $_POST['search_term'])
//AND THEN REDIRECT TO THE REDIRECTION LINK
header("location: " . $searchPage . htmlspecialchars(trim($_POST['search_term'])) );
exit;
}
Your HTML Form might look something like this:
<form method="POST" action="<?php echo $formAction; ?>" >
<input type="text" name="search_term" id="search_term" value="" class="search_term" />
<input type="submit" name"submit" id="submit" class="submit" value="Search" />
</form>
Okay, so I solved the problem:
<style type="text/css">
.biga {
font-family: Arial, Helvetica, sans-serif;
font-size: 36px;
color: #F90;
background-color: #FFF;
border: medium solid #000;
}
}
.centerpoint {
text-align: center;
}
</style>
<title>Product Search</title>
<p>
<div class="centerpoint"> <span class="centerpoint">
<input name="prog_site" type="text" class="biga" id="prog_site" value="" />
<a href="http://"
onclick="this.href=(
'http://www.homebase.co.uk/en/homebaseuk/searchterm/' + document.getElementById('prog_site').value)"
target="_blank">
<input name="so_link" type="button" class="biga" value="Search Product">
</a>
</p>
</span></div>
This is the code I used. Thanks for all of your help!
I am trying to incorporate an invisible CAPTCHA into my contact form, however I am not sure if it works.
My code is as follows...
HTML
<span class="test-field"><label for="test">Please leave blank</label>
<input type="text" name="test" id="test"/></span>
CSS
.test-field {Display: none}
PHP
<?php
if($_POST["test"]!=""){
header("Location: {$_SERVER[HTTP_REFERER]}");exit;
}
// Get Data
$f_name = strip_tags($_POST['f_name']);
$f_email = strip_tags($_POST['f_email']);
$f_message = strip_tags($_POST['f_msg']);
// Send Message
mail( "me#website.com", "Website Contact",
"Name: $f_name\nEmail: $f_email\nMessage: $f_message\n",
"From: My Website" );
?>
To test it, I did a few tests changing the...
f($_POST["test"]!="")
...to...
f($_POST["test"]="")
My PHP is not very good, but I am guessing this should not send the form through if the field is blank, but it does come through. Is there anything wrong with my PHP?
Thanks in advance.
As far as your specific question it doesn't make any sense. A user CAPTCHA is absolutely useless if it's hidden.
The term CAPTCHA stands for ...
Completely Automatic Public Turing Test to Tell Computers and Humans Apart
Notice it says humans ...
How can we test for human interaction if they can't see the CAPTCHA challenge? You Can't. Never-the-less .... here's a quick mock up of your code ... the CAPTCHA I left out since it make no sense. Take it from here ...
<?php
if ($_POST['test'] == "") {
header("Location: {$_SERVER['HTTP_REFERER']}");
} else {
// Get Data
$f_name = strip_tags($_POST['f_name']);
$f_email = strip_tags($_POST['f_email']);
$f_message = strip_tags($_POST['f_msg']);
}
?>
<html>
<head>
<style type="text/css">
#demo {
width: 250px;
height: 250px;
}
.test-field {
display: none;
width: 200px;
height: 200px;
}
#form label {
width: 50px;
float: left;
}
#form input {
width: 150px;
float: right;
}
</style>
</head>
<body>
<div id="demo">
<form name="form" id="form" action="<?php $_SERVER['PHP_SELF'] ?>" method="post">
<label for="test">Empty </label><input type="text" name="test" id="test"/><br/>
<label for="f_name">Name</label><input type="text" name="f_name" id="f_name"/><br/>
<label for="f_email">Email</label><input type="text" name="f_email" id="f_email"/><br/>
<label for="f_msg">Message</label><textarea rows="15" cols="30" name="f_msg" id="f_msg"></textarea>
<input type="submit" id="submit">
<div class="test-field"></div>
</form>
</div>
</body>
</html>
<?php var_dump($_POST) ?>
Try changing
if($_POST["test"]!=""){
to
if(isset($_POST["test"]) && $_POST["test"]){