I want to know if it's possible to have a 'switch system' on the enctype of a form I explain : I have a form with a no required $_Files.. If I have an uploader file, everything is working but if I've not, I' receive an empty mail but with the good headers. I think its because of the enctype and I'don't know how to have an action on.
For many of our every day UI problems, jQuery can be one handy solution...
I have prepared this simple html form:
<form id="myform" method="POST" action="myActionFile.php">
<div>First Name <span>*</span><input class="form-control" type="text" id="firstname" name="firstname"></div>
<div>Last Name <span>*</span><input class="form-control" type="text" id="lastname" name="lastname"></div>
<div>Your File: <input class="form-control" type="file" id="myfile" name="myfile"></div>
<div><button class="btn pull-right" id="submit">SEND</button></div>
</form>
As you can see in the "form" tag the 'enctype' is not included. That will be taken care of by javascript (jQuery actually):
$('#submit').on('click', function(e){
e.preventDefault();
if($('#firstname').val().length < 1){$('#firstname').css('background-color', '#ffc9c9').prop('placeholder', 'Required');}
if($('#lastname').val().length < 1){$('#lastname').css('background-color', '#ffc9c9').prop('placeholder', 'Required');}else{
var fileData = $('#myfile').val();
if(fileData != ""){ //if file has been selected:
$('#myform').prop('enctype', 'multipart/form-data').submit();
}else{ //if NO file selected:
$('#myform').prop('enctype', 'text/plain').submit();
}
}
});
The above code
checks if the required fields (firstname, lastname) are not blank
checks the "file" input -if it is blank or not- and assigns the form the proper "enctype"
and finally, submits the form
Here is the fiddle: http://jsfiddle.net/8y2y5z4s/
Related
I have written a HTML form and script to validate the form. The issue is that whenever I go to submit the form I get redirected to a page that tells me "Your file was not found".
Is there a specific way I have to call the script? or any way I can force it to run without redirecting me?
<form id="bioform" action="/action_page.php">
<label>Biography</label><br>
<textarea placeholder="Enter bio here" name="bio" rows="10" cols="50"></textarea><br><br>
<label>Update Biography Picture</label><br><br>
<input type="file" name="bioimage"><br><br>
<button type="submit" onclick="function()">Update</button><br>
</form>
<script>
$(document).ready(function () {
$('#bioform').validate({
rules: {
bio {
required: true,
minlength: 5,
},
}
messages: {
bio {
required: 'Please enter a biography.',
minlength: 'Please enter a valid biography.',
},
}
});
});
</script>
Add enctype="multipart/form-data" to form tag
<form id="bioform" action="/action_page.php" enctype="multipart/form-data">
<label>Biography</label><br>
<textarea placeholder="Enter bio here" name="bio" rows="10" cols="50">
</textarea><br><br>
<label>Update Biography Picture</label><br><br>
<input type="file" name="bioimage"><br><br>
<button type="submit" onclick="function()">Update</button><br>
</form>
Is the forward slash when specifying where it sends to necessary? For instance:
<form id="bioform" action="/action_page.php">
Should be replaced with:
<form id="bioform" action="action_page.php">
Since you're using jQuery, try using this:
e.preventDefault()
The e.preventDefault() method stops the default action of an
element from happening. For example: Prevent a submit button from
submitting a form. Prevent a link from following the URL.
Also, you need to add method attribute inside the <form> tag with value POST and also the enctype="multipart/form-data" since you're dealing with file upload.
Go to this fiddle and check if it works for you: https://jsfiddle.net/z0db4vq0/1/
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've been tasked with adding validation to stop spam on a simple contact form. The only problem here is that all the form processing happens on salesforce.com's side. I don't have the file that processes the form so I can't just add simple form validation.
The form's action goes to salesforce as so:
<form action="https://www.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8" method="POST">
I tried doing some javascript validation, but the form still submits no matter what. I have a feeling I need to change the form's action to a new php page I create. I can do the validation there, then if it passes I need to tell it to somehow go to this form action and finish the form processing?
I tried doing the hidden form field idea with jQuery, where you put in a hidden form field that only a bot would somehow fill out. So if that field has a value, then do an alert that it is spam, but this wouldn't work! The form just kept submitting.
Ugh, not sure, please help thanks!
=====EDIT====
What is wrong here?
my button
<input type="button" id="submit" value="Submit">
my jquery
jQuery(document).ready(function() {
jQuery('#submit').click(function() {
var human = $("#human").val();
if(human == 4 ){
$('#form_submit').submit();
}
else {
alert('Please answer the validation question correctly.');
}
});
});
my form action:
<form id="form_submit" action="https://www.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8" method="POST">
and my "human" field:
<input id="human" maxlength="20" name="human" size="30" type="text" />
something like this should work:
Working Example
you want to prevent the default event that happens on form submission.
SO when they click enter, or submit, you want to preventDefault(), then you are free to do what you want. I did ajax as example, because ajax is awesome.
<form id="form_submit" method="POST">
<input type="text" name="email" value="" placeholder="for humans" id="email">
<input type="text" name="robots" value="" placeholder="for robots" id="human">
<input type="submit" value="GO!">
<script>
$("#form_submit").submit(function(e){
// when the form is submitted:
// if the value of #human isn't empty, its a robot
if ($("#human").val() !== "") {
alert('robot!');
return false;
}
// other form validation you may want:
if ($("#email").val() == ""){
alert('missing email');
return false;
}
// STOP THE FORM FROM SUBMITTING ON ITS OWN
e.preventDefault();
// do whatever else you have to do.
$.ajax({
url:"https://www.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8",
data:"field1=value1&field2=value2", // this depends on what your server-side wants
type:"POST",
beforeSend:function(){console.log('sending..');},
error:function(response){console.log('error: ' + response);},
success:function(response){console.log('success!');},
complete:function(){console.log('finished.');}
});
});
</script>
Change your submit button to a normal button. In jQuery add a click method to perform your spam logic. When you really want to submit you can submit the page through jQuery.
Example:
<form id="form_submit" action="https://www.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8" method=" POST">
$("#submit").click(function() {
if(!spam){
$('#form_submit').submit();
}
});
When i click my login button, it just reloads the page for some reason. it should alert the string i echo from my php page.
This is my login.js code:
$(document).ready(function(){
$('#login').click(function(){
$('#msgLoginStatus').show();
$('#msgLoginStatus').html("processing...");
$.post('login.php',{username:"bob",password:"pass"}, function(data){
alert(data);
});
});
});
my login.php:
<?php
echo "message";
?>
and my form:
<form id="loginForm" action="" method="post">
<fieldset id="body">
<fieldset>
<label for="username">Username</label>
<input type="text" name="username" id="username" />
</fieldset>
<fieldset>
<label for="password">Password</label>
<input type="password" name="password" id="password" />
</fieldset>
<button id="login">login</button>
<label for="checkbox"><input type="checkbox" id="checkbox" />Remember me</label>
<br />
<p id="msgLoginStatus" style="display:none"></p>
</fieldset>
<span>Forgot your password?</span>
</form>
There are no errors in browser console. I tried this also using $.ajax, it returned an error, i tried putting the error variable in an alert, but when it alerted, it was an empty string. Anyone have an idea whats wrong?
Your login button has an ambiguous action - add type="submit" like this:
<button id="login" type="submit">Login</button>
Now if you really want to execute an explicit POST with JavaScript, call e.preventDefault so the browser's automatic "submit" action will be suppressed.
e.preventDefault();
$.post(...);
But it will probably be better to let the form submit itself. To do this specify the correct action="login.php" attribute in the form:
<form id="loginForm" action="/login.php" method="post">
Keep your existing "click" handler on the login button, just remove the "$.post" part and let the browser handle the posting. You'll still get the nice "processing..." text.
Even better, handle the "submit" event on the form instead of the "click" event on the button:
$('#loginForm').submit(function(e) {
$('#msgLoginStatus').show();
$('#msgLoginStatus').html("processing...");
});
This way you'll get the nice updates whether the user submits the form using the button or by pressing "enter" on the keyboard.
Try:
$('#login').click(function(e){
e.preventDefault();
$('#msgLoginStatus').show();
$('#msgLoginStatus').html("processing...");
$.post('login.php',{username:"bob",password:"pass"}, function(data){
alert(data);
});
});
That prevents a "normal" submit from happening (which, I take, is why you are not getting any errors).
See http://api.jquery.com/event.preventDefault/
Add e.preventDefault(); to the clck handler (and grab the event object in the handler as e).
Or you can Just set the button type = 'Button' and not Submit. THis will also run your code
<button id="login" type="button">Login</button>
In this way you don't have to halt the browser's event
I want to submit this form through PHP. with validation for required field and validation for phone number and email field also
<form action="" method="" id="get-protected">
<div class="row requiredRow">
<label for="txt_FirstName">
First Name</label>
<input id="txt_FirstName" type="text" class="required" title="First Name. This is a required field" />
</div>
<div class="row">
<label for="txt_LastName">
Last Name</label>
<input id="txt_LastName" type="text" title="First Name. This is a required field" />
</div>
<div class="row">
<label for="txt_Phone">
Phone</label>
<input id="txt_Phone" type="text" title="First Name. This is a required field" />
</div>
<div class="row requiredRow">
<label for="txt_Email">
Email</label>
<input id="txt_Email" type="text" class="required" title="Email. This is a required field" />
</div>
<div class="row">
<input type="submit" value="" class="button" />
</div>
</form>
In your method attribute inside your form, you need to declare either post or get.
Since your action attribute is "" it will submit to the page itself rather than redirecting to another page, so you can have your code that checks for validation in the same PHP file. First validation that is often checked is if the variable has a value by using isset:
if(isset($_POST['txt_Phone'])) { ... }
This just checks that the Phone number field does not contain empty data. I strongly suggest you perform other validation checks on the POST array so you do not have any users posting malicious code.
You can use functions like htmlspecialchars to prevent user-supplied text depending on what you plan to do with the values
Here are some references to help you along the way in the order they should be viewed.
Form Validation using PHP - PHP and MySQL Tutorial
PHP Advance Form Validation Tutorial
PHP Tutorial Part 2: Form Validation
Your form tag needs a target in the action field and a method in the method field (either GET or POST). So make the action your PHP script.
<form name="input" action="form_submit.php" method="get">
As for field validation, you will either have to parse that inside of the PHP and return a response or use Javascript in the browser to check on the fly.
Here is the shcema of such a script:
if ($_SERVER['REQUEST_METHOD']=='POST') {
//data validation:
$err="";
if (valid_phone($_POST['phone'])) $err="Wrong phone no";
if (!$err) {
//record data:
$sql="...";
query($sql);
Header("Location: ".$_SERVER['REQUEST_URI']); //redirect and exit
exit;
}
}
?>
<html>
<head></head>
<body>
<? if ($err) ?> <font color=red><b><?=$err?></b></font>
<form method="POST" id="get-protected">
here goes your form
Okay, firstly, I like to set the form action to <?=$_SERVER['REQUEST_URI']?> to submit it back to the current page, but leaving it as you have it will work fine too.
Secondly, you need to give all your <input>s a name attribute. This is the variable name that PHP will see.
When your users get an error (something doesn't validate correctly) you don't want all the data they entered to disappear. That means you have to set the value attributes of each input to what they had previously entered. Thus, your form starts to look like this:
<form action="<?=$_SERVER['REQUEST_URI']?>" method="" id="get-protected">
<div class="row requiredRow">
<label for="txt_FirstName">
First Name</label>
<input id="txt_FirstName" type="text" class="required" title="First Name. This is a required field" name="first_name" value="<?=htmlspecialchars($_POST['first_name'])?>" />
</div>
...
<div class="row">
<input type="submit" name="submit" value="" class="button" />
</div>
</form>
If you didn't know <?= is a basically a shortcut for <?php echo but it will only work if your server has short tags enabled. Some people prefer to type it out the long way (in case they want to switch servers later, or for future-compatibility, or because they're nutbars), but I say screw them, I'm lazy.
This page that has the form on it, has to saved with a .php extension (well, technically it doesn't have to, but that's another story). Then you need to handle you form validation. You have to code that up yourself. It might look something like this (put it above your form somewhere)
<?php
if($_POST['submit']) {
$errors = array()
if(empty($_POST['first_name'])) $errors[] = 'please enter your first name';
if(empty($errors)) {
// save the data to database or do whatever you want with it
header('redirect:succcess.php');
} else {
foreach($errors as $e) {
echo $e;
}
}
}
?>
It's been a while since I've coded in PHP so forgive me if there are syntax errors. That's the jist of it anyway, I'm sure you can find validation libraries out there if you Google. Might take some of the grunt work out of trying to validate email addresses and such.
Using Javascript you can do the validation for this form.For each condition you can use return true and return false,based on the condition.Then you can submit the value.
Using action attribute in form tag the values will be submitted to that file.