We Keep Coding

PHP Stop Form Reload Show Error Js

I want to show my error if 'fileToUpload' is empty (show error with js) and stop reloading page if 'fileToUpload' is empty
<form method="post" enctype="multipart/form-data">
Select image to upload:
<input type="file" name="fileToUpload" id="fileToUpload">
<input class='new_post' type="submit" value="Upload Image" name="submit">
</form>
$('.new_post').click(function() {
var get_photo = $('#fileToUpload').get(0).files.length;
// If 0 file show error
if (get_photo == 0) {
openandclose('.error_box' , 'emptyyyy.', 1700);
$('.error_box').focus();
return false;
}
});

Add an id to your form like this <form method="post" enctype="multipart/form-data" id="myform"> and in your javascript attach the checking function as callback to the form submit event rather than button click event like $('#myform').submit().
$('#myform').submit(function() {
var get_photo = $('#fileToUpload').get(0).files.length;
// If 0 file show error
if (get_photo == 0) {
/*
openandclose('.error_box', 'emptyyyy.', 1700);
$('.error_box').focus();
*/
alert("EMPTY!!");
return false;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" enctype="multipart/form-data" id="myform">
Select image to upload:
<input type="file" name="fileToUpload" id="fileToUpload">
<input class='new_post' type="submit" value="Upload Image" name="submit">
</form>

This code might help you out.Upon clicking the button it checks for whether file is selected or not , and return True/False Accordingly.
<form method="post" enctype="multipart/form-data" onsubmit="return funccheck();">
Select image to upload:
<input type="file" name="fileToUpload" id="fileToUpload">
<input class='new_post' type="submit" value="Upload Image" name="submit"> </form>
<script>
function funccheck() {
var get_photo = $('#fileToUpload').get(0).files.length;
// If 0 file show error
if (get_photo == 0) {
openandclose('.error_box' , 'emptyyyy.', 1700);
$('.error_box').focus();
return false; //stops page loading
}
return true; // initiates page loading
});
</script>

Try this:
$('.new_post').click(function(e) { var get_photo = $('#fileToUpload').get(0).files.length; // If 0 file show error if (get_photo == 0) { openandclose('.error_box' , 'emptyyyy.', 1700); $('.error_box').focus();
e.preventDefault();
return false; } });
The variable e is the event, the function preventDefault will stop the form from submitting if there is no file.

Do nothing on empty input - combinate with dynamic action on form

What i want is when you type something in input, depending what button you click, he will change path of action in form. I am at half way to achieve this (i think)....check out what i make till now
function OnSubmitForm() {
if(document.pressed == 'Log As')
{
document.myform.action ="log-as.html";
}
else
if(document.pressed == 'Log As Int')
{
document.myform.action ="log-as-int.html";
}
return true;
};
<form name="account" onsubmit="return onsubmitform();">
<input type="text" name="user" id="user">
<input type="submit" name="account" onclick="document.pressed=this.value" value="Log As" />
<input type="submit" name="account" onclick="document.pressed=this.value" value="Log As Int" />
</form>
And maybe i found solution for this, but i don't know how to combinate those two...
$('#search-form').submit(function(e) {
if (!$('#user').val()) {
e.preventDefault();
}
});

This can be easily done using JQuery like so:
$("input[type='submit']").click(function(){
var name = $(this).val();
if(name=="Log As"){
$("#myform").attr('action', 'log-as.html');
}
if(name=="Log As Int"){
$("#myform").attr('action', 'log-as-int.html');
}
});
JSFiddle demo here
I would also like to point out that you are submitting to a HTML page and not a PHP page. So do keep that in mind when trying to retrieve the values later.

You can do the same thing by using this code:
First of all name attribute of your form and input type submit are
same. They must be unique.
<form name="account" id="account" action="">
<input type="text" name="user" id="user">
<input type="submit" name="account_submit1" onclick="document.pressed=this.value" value="Log As" />
<input type="submit" name="account_submit2" onclick="document.pressed=this.value" value="Log As Int" />
</form>
and
$(document).ready(function () {
$("#account").submit(function(e){
alert($.trim($("#account [type='submit']:focus").val()))
if($.trim($("#account [type='submit']:focus").val()) == "Log As"){
$("#account").attr('action',"log-as.html");
}else{
$("#account").attr('action',"log-as-int.html");
}
});
});
Updated code according to the discussion:
$(document).ready(function () {
$("#account").submit(function(e){
if (!$('#user').val()) {
e.preventDefault();
}
if($.trim($("#account [type='submit']:focus").val()) == "Log As"){
$("#account").attr('action',"log-as.html");
}else{
$("#account").attr('action',"log-as-int.html");
}
});
});

Validating form element in JS in a page which has many forms

JS prints incoming form names correctly however I'm getting error message below when validating form element. Form names are generated dynamically in a loop.
Thanks
ERROR
TypeError: document.form_name is undefined
JS
function validate_update(form_id)
{
var form_name = 'form_bottom_update_' + form_id;
//alert (form_name); //Prints form name correctly as form_1, form_2, form_3
var bg_name = (document.form_name.bg_name.value).replace(/ /gi, "");
if (bg_name == '')
{
alert('Enter a Name');
return false;
}
return true;
}
HTML
<form name="form_1" action="update.php" method="POST" onsubmit="return validate_update(1);">
<input type="text" name="bg_name" value="" />
<input type="submit" name="submit" value="Update" />
</form>
<form name="form_2" action="update.php" method="POST" onsubmit="return validate_update(2);">
<input type="text" name="bg_name" value="" />
<input type="submit" name="submit" value="Update" />
</form>
<form name="form_3" action="update.php" method="POST" onsubmit="return validate_update(3);">
<input type="text" name="bg_name" value="" />
<input type="submit" name="submit" value="Update" />
</form>

Shoudn't that:
var bg_name = (document.form_name.bg_name.value).replace(/ /gi, "");
be:
var bg_name = (form_name.bg_name.value).replace(/ /gi, "");
You print the form_name variable, but later you use document.form_name which is a different object.
Either use the later, or when assigning the bg_name, use the document:
document.form_name = 'form_bottom_update_' + form_id;

Changes approach to solve the problem. Form name remain same, text name becomes dynamic.
function validate_update(form_id)
{
var element_name = 'bg_name_' + form_id;
var bg_name = (document.getElementsByName(element_name)[0].value).replace(/ /gi, "");
if (bg_name == '')
{
alert('Enter a Name');
return false;
}
return true;
}
<form name="form" action="update.php" method="POST" onsubmit="return validate_update(2);">
<input type="text" name="bg_name_2" value="" />
<input type="submit" name="submit" value="Update" />
</form>

you haven't used form_id anywhere in your html so how could you call it in javascript

Return Bool From Event Listener

So right now I am submitting a form, onSubmit I am disappearing the form (display none) and showing a link. What I want to do is return true to the form (so it can submit) when a user clicks on the link, so I want to return from the event listener. But the eventlistener is always true since it will always attach. Anybody have suggestions on the best way to do this?
<form name="request" action="http://testurl.com" method="POST" onSubmit="return test()">
<input type="text" name="Name" size="10" />
<input type="submit" name="submit" value="Submit" />
</form>
<div id="link">
Download
</div>
-JS-
function test(){
document.request.style.display = "none";
document.getElementById('link').style.display = "block";
return false;
}

Use JQuery... Here is some changings..
<form name="request">
<input type="text" name="Name" size="10" />
<input type="button" id="submit" value="Submit" />
</form>
<div id="link">
Download
</div>​
Here is your Javascript code...
function test(){
document.request.style.display = "none";
document.getElementById('link').style.display = "block";
return true;
}
$("#submit").on('click', function (){
$.ajax({
url: 'http://www.youractionsite.com',
type: 'POST',
data: 'name='+$("input[name='Name']").val(),
success: function(){
test();
}
});
});
​
It is tested... code is working...

In the onClick of your link, you can do $("#formId").submit(); Is that what you're after?

Hide the upload submit button if field "file" is empty

With this simple example
<form action="" method="post" enctype="multipart/form-data">
Upload images: <input type="file" name="images[]" multiple="multiple"> <input type="submit" name="submitImgs" value="Upload"/>
</form>
How can I hide the submit button until somthing's in the file field, I've tried to make a php script that look if the $_FILES['error'] == 4 or is_file_uploaded, etc and that don't work. So I want to simply hide the button until something is selected in the file field.
The answer could be in javascript, jQuery... I don't care :D
Thanks

The <input type="file"> element has a files property.
Simply check files.length.
jQuery example, which modifies the submit button on the fly:
// Select the <input type="file"> element
$('input[type=file][name="images[]"]').change(function(){
var hasNoFiles = this.files.length == 0;
$(this).closest('form') /* Select the form element */
.find('input[type=submit]') /* Get the submit button */
.prop('disabled', hasNoFiles); /* Disable the button. */
});

Use this. Attach the code on the change event of the file field.
$(function() {
$("input:file").change(function() {
var fileName = $(this).val();
if(filename != "") { $("#submitButtonId").show(); } //show the button
});
});

The default state of the submit should be hidden (CSS display: none)
And on change event of the file field, you show that submit button
Her's the code
<script>
$(function() {
$("#myfileinput").change(function() {
if($(this)).val() != "") $("submit").show();
});
});
</script/>
<form action="" method="post" enctype="multipart/form-data">
Upload images: <input id="myfileinput" type="file" name="images[]" multiple="multiple">
<input type="submit" name="submitImgs" value="Upload" style="display:none"/>
</form>

<script>
function checkFile() {
var myFSO = new ActiveXObject("Scripting.FileSystemObject");
var filepath = document.upload.file.value;
var thefile = myFSO.getFile(filepath);
var size = thefile.size;
if(size > 0) {
document.getElementById('submit').style.display='block';
}
}
</script>
<form action="" method="post" enctype="multipart/form-data">
Upload images: <input type="file" onChange="checkFile()" name="images[]" multiple="multiple"> <input type="submit" style="display:none;" name="submitImgs" value="Upload" id="submit" />
</form>