This question already exists:
PHP form validation not working as expected [duplicate]
Closed 3 years ago.
I'm a bit new to php and I was going over a tutorial where they are making validation form, but when I try and replicate what they do I don't get the same as them, when they run the code, the input box shows up red because the user hasn't placed anything in the input box. When I try it, nothing happens, the input box doesn't show me any errors.
But when I try and submit my form with data it just sends me to the next page, and if I dont type anything I just stay in the same page.
All this code is inside index.php
if(($_POST['email']) != "")
{
header('Location:final.php');
}
else{
$emailError = "validation";
}
<form method="post" action="index.php" >
<!--Get warning here when no input is placed-->
<div class="<?=$emailError?>">
<label>E-mail Address:</label>
<input type="text" name="email">
</div>
The red border is the following code:
.validation {
border: 1px solid red;
}
You can include it with your code like this
<style>
.validation {
border: 1px solid red;
}
</style>
<form method="post" action="index.php" >
<!--Get warning here when no input is placed-->
<div class="<?=$emailError?>">
<label>E-mail Address:</label>
<input type="text" name="email">
</div>
Related
How can I integrate an HTML form with a PHP script to update a value in mySQL?
How should I place the scripts for them to work together? Any guidelines for best practice?
I am failing to integrate the work. I tried everything I could think of but I am not able to make it work here is a list of what I tried so far:
Writing the script in functions.php which caused a fatal error.
Creating a new file named index1.php, still not integrating with the HTML form.
Putting index1.php in the form action, but still didn't work.
Something weird, as shown in the image, but still didn't work.
Form:
<div style="width:100%; margin:0 auto;background-color: #f8f8f8;">
<form action="index1.php" method="post">
<fieldset>
<div style="padding 10px;text-align:left;"> <textarea name="value" value="12"
placeholder="meow" style="padding: 5px;background-color: #f8f8f8"></textarea></div>
<div style="padding: 10px; text-align: right;">
<input type="submit" name="ins" value="Update" style="padding: 8px; background-color: #328269">
</div>
</fieldset>
</form>
</div>
PHP Script:
<?php
if (isset($_POST['ins'])) {
global $wpdb;
$data_array = array(
'value' => $_POST['value']
);
$table_name = 'P100';
$rowResult = $wpdb->update($table_name, $data_array);
if ($rowResult > 0) {
echo "Data Added Successfully!";
} else {
echo 'Error Occurred. Please try again.';
}
$wpdb->flush();
}
?>
My aim is to embed the form in a popup so that I can allow quick editing of the front end from the Popup when I display all my text in shortcodes retrieved from the database.
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 trying to submit file inside a form to Laravel backend. It posts all the other text fields but not file (when I dd($request->all()))
<form class="form-horizontal" role="form" method="POST" action="" enctype="multipart/form-data">
<input id="item_price" type="item_price" class="form-control" name="item_price" value="">
<!-- other inputs -->
<input type="file" id="product_image" name="product_image" onchange="previewImage(this);"/>
<img id="previewing" src="{{asset('noImage.gif')}}" style="width: 100%; height: 100%" />
</form>
item_price seems on dd($request->all()) and also other fields are seen, but no file input
When I display the image with jQuery (previewImage) before submitting the form, it shows the photo. But after I submit the form, on Laravel side it shows all the other fields and values but not any for file (when I use dd($request->all()).
On php.ini, max-post-size is 100M.
jQuery('#previewing').click(function() {
uploadImageClicked();
});
function uploadImageClicked() {
jQuery('#product_image').click();
}
dd($request->hasFile('product_image') returns false
In Laravel (which should be tagged in your question) it's not part of the Request class with the other form values, it's in the file method.
See https://laravel.com/docs/5.3/requests#retrieving-uploaded-files
$file = $request->file("image"); is what you're looking for.
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.!!!