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();">
Related
Actually when i create dynamically a new input field whose type is file using jquery and submit it it don't send any thing on the receiving side. Please help me in this
This is jQuery code
$(document).ready(function(){
$('#add').click(function(){
var str = '<input type="file" name="file[]">';
$('#file').append(str);
});
});
This is HTML code
<button type="button" id="add">Add</button>
<form id="" action="test.php" method="POST" enctype="multipart/form-data">
<div id="file">
<input type="file" name="file[]">
</div>
<button type="submit">Submit</button>
</form>
This is PHP code
var_dump($_FILES);
var_dump($_POST);
And this is php out put
output
Basically I have a textbox and i want when people paste/write a website inside, and press the button, to be redirected to the site with an extra parameter ("/play/bonus")
<input name="website" id="website" type="text" />
<form method="POST" action=document.getElementById('website') & "/play/bonus">
<input name="pn" value="bonus" type="hidden">
<button id="bonus" class="btn btn-default navbar-element pull-center">
<b>50</b>
Satoshis
</button>
I would use Javascript to do this manually in code rather than making the form POST.
Here's an example for you:
<html>
<head>
<title>JavaScript Form Redirection Example</title>
<script type="text/javascript">
function goToWebsite()
{
var url = document.getElementById("inputWebsite").value;
if (url != null)
{
url += "/play/bonus";
window.location.replace(url);
}
}
</script>
</head>
<body>
<form>
<input type="text" id="inputWebsite" placeholder="Website address"/>
<input type="button" value="Go!" onClick="goToWebsite()"/>
</form>
</body>
</html>
Very simply, what this does is make it so when the button is clicked, it runs the goToWebsite function.
The goToWebsite function:
Gets the value of the URL in the text box
Checks to make sure that the URL is not null
Adds /play/bonus to the end of it
Makes the web browser redirect to that page.
document.getElementById('website')
Will give the object of that element. You need to use .value.
document.getElementById('website').value
To get the value of element.
And there is no need to use the javascript, I think so. If you are using PHP
then use header function of PHP to redirect.
Your HTML:
<form method="POST" action="demo.php">
<input name="website" id="website" type="text" />
<input name="pn" value="bonus" type="hidden">
<input id="bonus" type="submit" class="btn btn-default navbar-element pull-center" Value="50 Satoshis">
</form>
And your demo.php file will be like this:
<?php
$redirect = $_POST['website'];
header("location:".$redirect."/play/bonus");
I am unable to load external file while using AJAX jQuery. I want to use jQuery AJAX to pop up form then validate, enter data in MySQL. but starting from a simple AJAX function. Kindly let me know where I am going wrong
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="test_style.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script>
<script>
$(document).ready(function(){
$("#ajax-contact-form").submit(function(){
var str = $(this).serialize();
$.ajax({
type: "POST",
url:"contact.php",
data: str,
success:function(result) {
$("#div1").html(result);
}
});
});
});
</script>
</head>
<body>
<div id="contact_form">
<form id="ajax-contact-form" name="contact" action="">
<fieldset>
<label for="name" id="name_label">Name</label>
<input type="text" name="name" id="name" size="30" value="" class="text-input"/>
<label class="error" for="name" id="name_error">This field is required.</label>
<input class="button" type="submit" name="submit" value="Send Message">
</fieldset>
</form>
</div>
</body>
</html>
and contact.php file is
<?php
echo "Hello";
?>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="test_style.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function() {
$(".button").click(function() {
$.ajax({url:"contact.php",success:function(result){
$("#div1").html(result);
}});
return false;
});
});
</script>
</head>
<body>
<div id="contact_form">
<form name="contact" action="">
<fieldset>
<label for="name" id="name_label">Name</label>
<input type="text" name="name" id="name" size="30" value="" class="text-input" />
<label class="error" for="name" id="name_error">This field is required.</label>
<input type="submit" name="submit" class="button" id="submit_btn" value="Send" />
</fieldset>
</form>
</div>
<div id="div1">
</div>
</body>
</html>
Try that:
What needed to be fixed:
1) You'd duplicated the onReady function,
2) you can use a submit form button, but since it's default action is to submit the form, the result wouldn't have been visible.
3) There was no #div1 for the result to be displayed in.
Hopefully, this has been helpful... Happy Coding!
Try with type button type
<input type="button" name="submit" class="button" id="submit_btn" value="Send" />
And also your both scripts are same use either DOM ready or $(function) like
<script>
$(document).ready(function(){
$(".button").click(function(){
$.ajax({url:"contact.php",success:function(result){
$("#div1").html(result);
}});
});
});
</script>
button is your class name so that it will represented like .button And create an div with id div1 at your html page
$("#div1").html(result);
Use one div which id is div1 inside your page which you want to show the result.
<div id="div1"></div>
How to submit this form without using submit button. I want to submit it in loading this form,
<form name="frm1" id="frm1" action="../somePage" method="post">
Please Waite...
<input type="hidden" name="uname" id="uname" value="<?php echo $uname;?>" />
<input type="hidden" name="price" id="price" value="<?php echo $price;?>" />
</form>
You don't need Jquery here!
The simplest solution here is (based on the answer from charles):
<html>
<body onload="document.frm1.submit()">
<form action="http://www.google.com" name="frm1">
<input type="hidden" name="q" value="Hello world" />
</form>
</body>
</html>
You can try also using below script
<html>
<head>
<script>
function load()
{
document.frm1.submit()
}
</script>
</head>
<body onload="load()">
<form action="http://www.google.com" id="frm1" name="frm1">
<input type="text" value="" />
</form>
</body>
</html>
Do this :
$(document).ready(function(){
$("#frm1").submit();
});
You can do it by using simple one line JavaScript code and also be careful that if JavaScript is turned off it will not work. The below code will do it's job if JavaScript is turned off.
Turn off JavaScript and run the code on you own file to know it's full function.(If you turn off JavaScript here, the below Code Snippet will not work)
.noscript-error {
color: red;
}
<body onload="document.getElementById('payment-form').submit();">
<div align="center">
<h1>
Please Waite... You Will be Redirected Shortly<br/>
Don't Refresh or Press Back
</h1>
</div>
<form method='post' action='acction.php' id='payment-form'>
<input type='hidden' name='field-name' value='field-value'>
<input type='hidden' name='field-name2' value='field-value2'>
<noscript>
<div align="center" class="noscript-error">Sorry, your browser does not support JavaScript!.
<br>Kindly submit it manually
<input type='submit' value='Submit Now' />
</div>
</noscript>
</form>
</body>
using javascript
<form id="frm1" action="file.php"></form>
<script>document.getElementById('frm1').submit();</script>
You missed the closing tag for the input fields, and you can choose any one of the events, ex: onload, onclick etc.
(a) Onload event:
<script type="text/javascript">
$(document).ready(function(){
$('#frm1').submit();
});
</script>
(b) Onclick Event:
<form name="frm1" id="frm1" action="../somePage" method="post">
Please Waite...
<input type="hidden" name="uname" id="uname" value=<?php echo $uname;?> />
<input type="hidden" name="price" id="price" value=<?php echo $price;?> />
<input type="text" name="submit" id="submit" value="submit">
</form>
<script type="text/javascript">
$('#submit').click(function(){
$('#frm1').submit();
});
</script>
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>