I use LiveValidation on a submission form that involves 1-4 upload fields for images.
What the clients are impatient about is that once they click on submit, the form starts to upload the images, and it takes time according to the size of those images.
What I was trying to achieve is that once the user submits the form, and the LiveValidation passes, a Fancybox popup appears which has a loading image and some text. I do not want the loading progress bar as the client's hosting does not have the PECL upload progress extension or APC, and I don't want to use AJAX for compatibility reasons.
I just want a loading image to be rotating on the screen so the user knows that they have to wait.
I tried to create a function for it and set it to be executed on the events of "onSubmit" and "onClick", but in either case, the pop up appears even though there are errors in the form that are being pointed out by LiveValidation.
Also, i am assuming that once the images get uploaded and the form gets submitted the page will automatically redirect to the confirmation.
I am not good with javascript, and hence was unable to manipulate the scripts to achieve the desired results.
Any help on this will be greatly appreciated. Also if anyone has a better solution, that too will be great!
Thank you :)
for live validation, I'm using the script directly from the website: http://livevalidation.com/
Here is the livevalidation and fancybox initiation:
<script type="text/javascript">
$(document).ready(function () {
$(".form-validate-label").validate();
$(".form-validate-p").validate({errorElement: "p"});
$(".popup").fancybox();
});
</script>
The form itself is pretty big, but here is the fields area:
<form name="frmsubmission" id="frmsubmission" method="post" class="form-validate-p" enctype="multipart/form-data" action="">
...
...
<div class="regrow1">
<div>
<label class="label-large"><span class="required">*</span>Headshot Image File:</label>
<input class="required" name="head_shot" id="head_shot" size="40" type="file" />
</div>
</div>
<div class="regrow2">
<div>
<label class="label-large">Attach Resume:</label>
<input name="txtcv" id="txtcv" size="40" type="file" />
</div>
</div>
<div class="regrow1">
<div>
<label class="label-large">Full body shot Image File:</label>
<input id="body_shot" name="body_shot" size="40" type="file" />
</div>
</div>
<div class="regrow2">
<div>
<label class="label-large">Sanpshot Image File:</label>
<input id="snap_shot" name="snap_shot" size="40" type="file" />
</div>
</div>
<br /><br />
<div id="submitrow">
<button id="submit" name="submit" value="Submit" type="submit">Submit</button>
</div>
</form>
instead of using fancybox and others approach. if you use plupload, i think that it will nice uload interface and upload status feature. below is the link.please see this may help you.
http://www.plupload.com/example_queuewidget.php
instead of show fancybox, i added one div with its loadingId. initially it will be hidden when you click, submit button it show the div, inside this div, you rotating image path. here is complete code.
i am using jquery for hide show. if you do not want to use jquery, you can use javascript also for hide and show.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.5.1.min.js" type="text/javascript"></script>
<script src="Js/LiveValidation.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".form-validate-label").validate();
$(".form-validate-p").validate({ errorElement: "p" });
$(".popup").fancybox();
});
function showloading() {
$("#loadingId").show();
}
</script>
</head>
<body>
<form name="frmsubmission" id="frmsubmission" method="post" class="form-validate-p"
enctype="multipart/form-data" action="">
<div class="regrow1">
<div id="loadingId" style="display:none;">Loading....</div>
<div>
<label class="label-large">
<span class="required">*</span>Headshot Image File:</label>
<input class="required" name="head_shot" id="head_shot" size="40" type="file" />
</div>
</div>
<div class="regrow2">
<div>
<label class="label-large">
Attach Resume:</label>
<input name="txtcv" id="txtcv" size="40" type="file" />
</div>
</div>
<div class="regrow1">
<div>
<label class="label-large">
Full body shot Image File:</label>
<input id="body_shot" name="body_shot" size="40" type="file" />
</div>
</div>
<div class="regrow2">
<div>
<label class="label-large">
Sanpshot Image File:</label>
<input id="snap_shot" name="snap_shot" size="40" type="file" />
</div>
</div>
<br />
<br />
<div id="submitrow">
<button id="submit" name="submit" value="Submit" type="submit" onclick="showloading();">Submit</button>
</div>
</form>
</body>
</html>
Related
I'll make this short and quick. :)
I'm trying to implement a button on my website, which redirects me to a URL I specify + what the user is looking for.
I have this little piece of code here:
<html>
<div class="search">
<form role="search" method="get" id="search">
<div>
<input type="text" value="" name="tag_search" id="tag_search" />
<input type="button" value="Cerca" onclick="window.location.href='https://mywebsite.com/'" />
</div>
</form>
</div>
</html>
that is almost working.
The only thing is that if the User inputs "Hello" in the Search Box, it will always search for the following URL once you press the "Submit" button: https://mywebsite.com/
How can I append what the User has written into the Search Box, so that the Button will redirect me to: https://mywebsite.com/Hello ?
Thank you all!
Add the value of the input to the link
<html>
<div class="search">
<form role="search" method="get" id="search">
<div>
<input type="text" value="" name="tag_search" id="tag_search" />
<input type="button" value="Cerca"
onclick="window.location.href='https://mywebsite.com/' +
document.getElementById('tag_search').value" />
</div>
</form>
</div>
</html>
Add the following Javascript to help
<script>
function goToSearch() {
window.location.href= 'https://mywebsite.com/' + encodeURI(document.getElementById("tag_search").value)
}
</script>
Then your HTML should look like this
<html>
<div class="search">
<form role="search" method="get" id="search">
<div>
<input type="text" value="" name="tag_search" id="tag_search" />
<input type="button" value="Cerca" onclick="goToSearch()" />
</div>
</form>
</div>
</html>
Does anyone know how to change the name of the button 'Select file' and 'No file selected' that appears in the following image?
It seems that it is a button that comes by default from googleapis.com. I cannot change the name to English, could you help me? Thank you.
Is there the same button but in English?
This is the code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
<body>
<form method="post" enctype="multipart/form-data">
<div align="center">
<label class="selectCSV">Select the CSV file:</label>
<input type="file" name="file" />
<br/><br/>
<input type="submit" name="submit_exercises" value="Import" class="btn btn-info" />
</div>
</form>
</body>
</html>
If I'm correct, the text on and next to the button depends on the language of the browser and the browser itself. The text cannot be changed.
However, by utilising JS and some CSS, you can hide the original button, add your own and 'redirect' the click on the fake button to the actual file input.
The snippet below utilizes vanilla JavaScript and does not show the name of the file.
document.getElementById('fakeButton').addEventListener('click', redirectToFileInput);
function redirectToFileInput () {
document.getElementById('fileInput').click();
}
#fileInput {
display:none;
}
<input type="file" id="fileInput" name="file">
<input type="button" id="fakeButton" value="YourText">
The snippet below utilizes jQuery and shows the filename after selecting it in the upload window.
$(document).on('click', '#fakeButton', function(event) {
event.preventDefault();
$("#fileInput").click();
});
$("#fileInput").change(function(){
$("#fileName").text(" " + $('input[type=file]')[0].files[0].name);
});
#fileInput {
display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="file" id="fileInput" name="file">
<input type="button" id="fakeButton" value="YourText"><span id="fileName"> No file uploaded.</span>
Edit: Cleaner solution for the vanilla javascript answer.
#fileInput {
display:none;
}
<input type="file" id="fileInput" name="file">
<input type="button" id="fakeButton" value="YourText" onclick="document.getElementById('fileInput').click();">
I have a div with dynamic repeating form to change image of a repeating div based on respective id, when a div image is clicked i want to trigger file input for clicked div.
contents are loaded into div(image-container) with jquery post request.
HTML
<div id="image-container"></div>
//repating dynamic form
<?php while($row=mysqli_fetch_assoc($result)):?>
<div class="image">
<form name="image_change">
<img src=".." class="image_change"/>
<input name="image" type="file" />
<input name="id" type="hidden" />
<input name="edit" type="submit" />
</form>
</div>
<?php endwhile;?>
jQuery
$('#image-container').on('click', 'form[name=image_change] .image_change', function(){
$(this).find('input[name=image]').trigger('click');
return false;
});
This works only when form is not repeating, how can i make it work with repeating form.
Please see and suggest any possible way to do this.
Thanks.
This is because you have multiple forms with the same name and only the first one is recognized.
Remove name attribute from the form:
<div class="image">
<form>
<img src=".." class="image_change"/>
<input name="image" type="file" />
<input name="id" type="hidden" />
<input name="edit" type="submit" />
</form>
</div>
and modify the js code to the following
$(document).on('click', 'form .image_change', function(){
$(this).parent().find('input[name=image]').trigger('click');
return false;
});
if you need to differentiate the form add ids to the forms.
I have a 3 page registration page. After the user selects an option on the first page and clicks submit, the form transforms into the next form using jquery's animate method, meaning it stays on the same page. The question I have is how to get the data from the first form because the content of the 2nd forms is dependent on that information. Here's my html:
<div id="Registration" style="display:none;">
<div class="box">
<form id="frmtype1" action="#" name="frmtype1" method="post">
<header>Registration Options</header><br/>
<label for="Reg_type1"><input type="radio" name="Reg_type" id="Reg_type1" value="1"/> Option 1</label> <br/><br/>
<label for="Reg_type2"><input type="radio" name="Reg_type" id="Reg_type2" value="2"/> Option 2</label><br/><br/>
<label for="Reg_type3"><input type="radio" name="Reg_type" id="Reg_type3" value="3"/> Option 3</label><br/><br/>
<p id="error_message" style="display:none">Please choose an option</p><input type="submit" class="button" name="Submit" value="Submit"/>
</form>
<form name="everything" id="everything" action="#" method="post">
<header>Registration Information</header><br/>
<label>First Name<font color="red">*</font>: <input type="text" name="fname" id="fname" /> </label><br/>
Last Name*: <input type="text" name="lname" id="lname" /> <br/>
Address*: <input type="text" name="address" id="address" /> <br/>
</form>
</div>
</div>
So once an option is selected, the first form disappears and the next one appears. So how do I get the data of which option they selected? Thanks
Since they depend on information on one form, the "pages" should really be the same form. You use the jQuery/JavaScript to show/hide the "current page". This will allow you to submit all the data in one go.
Wrap all the input elements in one html form tag
For each form "segment" you will need to use your js to hide/show the wrapping HTML container. The default being "page 1" of the form and the rest hidden.
Change your submit button to just a button and have a on click event on it. When the user clicks the button the input is validated and then the jQuery unhides "page 2".
On your last "page" have a normal submit button and then all the form data is posted in one.
For example, the html might look like this:
<script type="text/javascript">
$(document).ready(function{
$(".next-page").click(function(){
$(".box-wrapper").hide();
$("#page-" + $(this).data("page")).show();
});
});
</script>
<div class="registration">
<form name="regform" action="" method="post">
<!-- Page 1 -->
<div class="box-wrapper" id="page-1">
<div class="box">
<!-- form inputs go here -->
<input type="button" name="next-page" class="next-page" value="Continue" data-page="2"/>
</div>
</div>
<!-- Page 2 -->
<div class="box-wrapper" id="page-2" style="display: none;">
<div class="box">
<!-- form inputs go here -->
<input type="button" name="next-page" class="next-page" value="Continue" data-page="3"/>
</div>
</div>
<!-- Page 3 -->
<div class="box-wrapper" id="page-3" style="display: none;">
<div class="box">
<!-- form inputs go here -->
<input type="submit" name="submit" class="submit" value="Complete Registration"/>
</div>
</div>
</form>
</div>
Using jquery --- $('input[name=Reg_type]:checked').val() this will give you the selected value.
I have a form, like this
<form id="picuploadform" enctype="multipart/form-data" method="post" action="">
<div class="row">
<label for="fileToUpload">Select a File to Upload</label><br />
<input type="file" name="fileToUpload" id="fileToUpload" />
<input type="hidden" id = "picssn" name="picssn" value="qweweqwq">
</div>
<div class="row" style="width:150px;">
<input type="submit" value="Upload" />
</div>
</form>
Which when I click the submit button I have PHP on this page to process it just fine. $_FILES for receiving file and $_POST for reading picssn that came with the hidden input. But due to problem with Jquery mobile I can't use submit or .submit() now. So I want to use
$.post('myphpfile.php', {picssn:$('#picssn').value(), file: $('#fileToUpload').xxxxxxxxxxxxxxxxx });
instead. But I have no idea how to grab the file out of that form and send it this way. Is there some method that can replace xxxxxxxxxxxxxx ? Thanks!
On your form element, you need to disable the ajax submit, and then fix your other code.
Try this:
<form id="picuploadform" enctype="multipart/form-data" method="post" action="#" data-ajax="false">
<div class="row">
<label for="fileToUpload">Select a File to Upload</label><br />
<input type="file" name="fileToUpload" id="fileToUpload" />
<input type="hidden" id = "picssn" name="picssn" value="qweweqwq">
</div>
<div class="row" style="width:150px;">
<input type="submit" value="Upload" />
</div>
</form>
You cant upload directly via ajax. Check this perhaps:
http://blueimp.github.com/jQuery-File-Upload/ or uploadify.com