I have a file upload form that checks the extension of the uploaded file, it works ok until I add a javascript that shows a "LOADING...." message, which always makes the error of wrong extension comes up, even though it is an allowed one.
form.html
<form id="loader" action="uploadfile.php" method="post" enctype="multipart/form-data" onsubmit="return loading();" />
<label>Upload file:</label>
<input type="file" name="file" id="file" />
<input name="upload" type="submit" />
<input name="action" type="hidden" value="upload" />
</form>
<script>
function loading() {
document.getElementById("loader").innerHTML = "<div style='color: red;'>LOADING....</div>";
}
</script>
uploadfile.php
<?php
$allowedExts = array("txt", "TXT");
$temp = explode(".", $_FILES["file"]["name"]);
$extension = end($temp);
if (in_array($extension, $allowedExts))
{
if ($_FILES["file"]["error"] > 0)
{echo $_FILES["file"]["error"]; }
else
{
move_uploaded_file($_FILES["file"]["tmp_name"],
"upfiles/thefile.txt");
?>
Thanks to #Teemu's answer I could achieve the expected behaviour, I just moved the id from the form element to a div and that did it, here's the new code:
<form action="uploadfile.php" method="post" enctype="multipart/form-data" onsubmit="return loading();" />
<label>Upload file:</label>
<input type="file" name="file" id="file" />
<input name="upload" type="submit" />
<input name="action" type="hidden" value="upload" />
<div id="loader"></div></form>
<script>
function loading() {
document.getElementById("loader").innerHTML = "<div style='color: red;'>LOADING....</div>";
}
</script>
Related
I need to load 2 actions with 1 button. The first action uploads a file to the server and the second action loads some customer data.
HTML
<p class="text-center font-big"><u>Load Photometric Data (.ies File)</u></p>
<form id= "form1" method="post" action="<?php echo $_SERVER["PHP_SELF"]; ?>" enctype="multipart/form-data">
<input type="file" name="file" id="file">
<input type="hidden" name="upload_file" />
</form>
<form id= "form2" method="post" action="/roadlite_main.php">
<input type="hidden" name="new_data" />
</form>
<input type="button" value="Click Me!" onclick="submitForms()" />
js
<script language="javascript">
submitForms = function()
{
document.getElementById("form1").submit();
document.getElementById("form2").submit();
}
</script>
The second form (or maybe the last) always loads OK ... the first form fails to load and does not upload the file.
Any ideas!
Why i cant access second file chooser. first file chooser work well.
This is HTML part
<form action="<?php url("image/uploadImg"); ?>" method="post" enctype="multipart/form-data">
<div class="imgLine">
<div class="line">
<img id="previewImg" src="<?php echo BURL.'assets/img/addImg.svg'; ?>" alt="Placeholder">
</div>
<div class="line">
<!-- <input type="file" name="file" onchange="previewFile(this);" required> -->
<label class="addFile"> Select File
<input type="file" name="file" size="60" onchange="previewFile(this);" required>
</label>
</div>
<div class="line">
<input class="submitBtn" type="submit" name="submit" value="Save">
</div>
</div>
</form>
<form action="<?php url("image/uploadImg"); ?>" method="post" enctype="multipart/form-data">
<div class="imgLine">
<div class="line">
<img id="previewImg" src="<?php echo BURL.'assets/img/addImg.svg'; ?>" alt="Placeholder">
</div>
<div class="line">
<!-- <input type="file" name="file" onchange="previewFile(this);" required> -->
<label class="addFile"> Select File
<input type="file" name="file" size="60" onchange="previewFile(this);" required>
</label>
</div>
<div class="line">
<input class="submitBtn" type="submit" name="submit" value="Save">
</div>
</div>
This is jquery part
<script>
function previewFile(input){
//console.log(input);
var file = $("input[type=file]").get(0).files[0];
//console.log(file);
if(file){
var reader = new FileReader();
reader.onload = function(){
$("#previewImg").attr("src", reader.result);
}
reader.readAsDataURL(file);
}
}
What I am getting is upon uploading the second file. The function call. parameter values also pass. but
var file = $("input[type=file]").get(0).files[0] this file varible does not create.Please help
Just change
<img id="previewImg"
To some classes in both form
<img class="previewImg"
Probably it's require changes in javascript code.
Change a way how you create a function. Do not run javascript function inside html code, remove it
onchange="previewFile(this);"
instead of this catch the action i.e
function previewFile() {
$('.previewImg').on('change', function() {
// use $(this) to catch clicked element only
... your code goes here
});
}
I will find some result. It works well. THankz who helps me
function previewFile(input) {
console.log(input);
var file = input.files[0];
console.log(file);
if(file){
var reader = new FileReader();
reader.onload = function(){
$(input).closest('.imgLine').find('#previewImg').attr("src", reader.result);
}
reader.readAsDataURL(file);
}
}
My form which contains the summernote editor:
<form class="form-group" action="upload.php" style="width: 700px;" method="post" enctype="multipart/form-data">
<label> Title: </label>
<input name="title" class="form-control" type="text" required placeholder="Title"/><br><br>
<label> Header Image: </label>
<input class="form-control" type="file" name="file" id="file"><br><br>
<label> Body: </label><div id="summernote"></div>
<button class="btn btn-primary" onclick="getContent()" name="submit"> Submit </button>
</form>
script to get the content of the editor:
<script>
$(document).ready(function()
{
$('#summernote').summernote();
});
function getContent(){$(document).ready(function()
{
var content = $('#summernote').summernote('code');
content=document.getElementById('content').value;});
}
Php code to save the content of the summernote:
$uname= $_SESSION['id'];
$title=$_POST['title'];
$path= "uploads/".$name;
$body= ;
I am trying to save the content of the summernote in the variable $body which is in another file called upload.php
Instead of div use text area .
<textarea name="content" id="summernote"></textarea>
Form.
<form class="form-group" action="upload.php" style="width: 700px;" method="post" enctype="multipart/form-data">
<label> Title: </label>
<input name="title" class="form-control" type="text" required placeholder="Title"/><br><br>
<label> Header Image: </label>
<input class="form-control" type="file" name="file" id="file"><br><br>
<label> Body: </label>
<!--Instead of div use text area .-->
<textarea name="content" id="summernote"></textarea>
<button type="submit" class="btn btn-primary" name="submit"> Submit </button>
</form>
Then no need use getContent. only call summernote for editor.
<script>
$(document).ready(function()
{
$('#summernote').summernote();
});
</script>
in upload.php you can get the content by $_POST['content']
<?php
$title=$_POST['title'];
$path= "uploads/".$name;
echo $body=$_POST['content'];
?>
I am not really a professional when it comes to this but I would add a hidden input to the form and put the content (getContent) in that field.
<form class="form-group" id="theForm" action="upload.php" style="width: 700px;" method="post" enctype="multipart/form-data">
<label> Title: </label>
<input name="title" class="form-control" type="text" required placeholder="Title"/><br><br>
<label> Header Image: </label>
<input class="form-control" type="file" name="file" id="file"><br><br>
<label> Body: </label><div id="summernote"></div>
<input id="content-catcher" type="hidden" name="contentOfEditor" />
<button class="btn btn-primary" onclick="getContent()" name="submit"> Submit </button>
</form>
Script:
function getContent(){$(document).ready(function()
{
var content = $('#summernote').summernote('code');
content=document.getElementById('content').value;});
$('#content-catcher').val(content);
$('#theForm').submit();
}
PHP:
$body= $_POST['contentOfEditor'];
I have this code:
HTML:
<form method="post" action="<?php echo $this->serverUrl().str_replace('public','',$this->basePath()).'/user/sendmessagetoinbox/'; ?>">
<fieldset>
<label>Subject</label>
<input type="text" name="inbox_subject" />
</fieldset>
<fieldset>
<label>Message</label>
<textarea name="inbox_message"></textarea>
</fieldset>
<fieldset>
<button type="submit" class="btn btn-primary btn-save send-btn">Send message to inbox</button>
<!-- <input type="submit" class="btn btn-submit" value="Send message to inbox" /> -->
</fieldset>
<input type="hidden" value="" name="patient-id" />
</form>
JS:
$('#inMail').on('show.bs.modal', function (event) {
var url='<?php echo $this->serverUrl().str_replace('public','',$this->basePath()).'/user/sendmessagetoinbox/'; ?>';
console.log(url);
var pId = $(event.relatedTarget).data('patientId')
console.log(pId); //UNDEFINED
$(".modal-body").find('form').attr("action",url+pId);
})
I wish to send patient ID in action the following form. How to do this?
try adding id="patient-id" in put tag:
<input type="hidden" value="" id="patient-id" name="patient-id" />
also
var pId = $('#patient-id').val();
Can you please check for this
var pId = $(event.relatedTarget).data('patientId');
Try replacing with
var pId = $(event.relatedTarget).data('patient-id');
I think its all about form name property
I am developing website using php.I need to call php function using HTML Onclick event. How to do? Here I have given my code.
<?php
function insert() {
echo "in insert ";
$servername = "localhost";
$username = "shwetharao";
$password = "shwetha";
$dbname = "semilab";
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$uname = $_POST['usernameu'];
$upass = $_POST['passwordu'];
echo $uname;
$sql = "INSERT INTO login (id, username, password)VALUES ('id','$uname','$upass')";
if ($conn->query($sql) === TRUE) {
echo "New record created successfully";
} else {
echo "Error: " . $sql . "<br>" . $conn->error;
}
$conn->close();
}
?>
<!DOCTYPE HTML>
<head>
<title></title>
</head>
<body>
<div id="main">
<div id="login">
<h2>Create User Account</h2>
<form action="" method="post">
<br><br><br>
<label>UserName :</label>
<br><br>
<input id="name" name="usernameu" placeholder="username" type="text">
<br><br><br>
<label>Password :</label>
<br><br>
<input id="password" name="passwordu" placeholder="**********" type="password">
<br><br><br>
<input name="button" type="button" value=" Create user " onclick="insert();">
</form>
</div>
</div>
</body>
</html>
I need to call function insert()[which is php function] on clicking button.How to achieve this?
Try this
<?php if(isset($_POST['submit'])){
insert();
}
?>
<!DOCTYPE HTML>
<head>
<title></title>
</head>
<body>
<div id="main">
<div id="login">
<h2>Create User Account</h2>
<form action="" method="post">
<br><br><br>
<label>UserName :</label>
<br><br>
<input id="name" name="usernameu" placeholder="username" type="text">
<br><br><br>
<label>Password :</label>
<br><br>
<input id="password" name="passwordu" placeholder="**********" type="password">
<br><br><br>
<input name="submit" type="submit" value=" Create user" >
</div>
</div>
</body>
</html>
you did two mistake first one is php tag at above, you wrote only "?" please change it to '<form action="" method="post">
inside of form you don't write action page name ..for example action = "myFile.php"
PHP: Is only run by the server and responds to requests like clicking on a link (GET) or submitting a form (POST).
HTML & Javascript: Is only run in someone's browser
I'm assuming your file looks something like:
<?php
function insert() {
echo 'I just ran a php function';
}
if(isset($_POST['submit'])){
insert();
}
?>
<!DOCTYPE HTML>
<head>
<title></title>
</head>
<body>
<div id="main">
<div id="login">
<h2>Create User Account</h2>
<form action="" method="post">
<br><br><br>
<label>UserName :</label>
<br><br>
<input id="name" name="usernameu" placeholder="username" type="text">
<br><br><br>
<label>Password :</label>
<br><br>
<input id="password" name="passwordu" placeholder="**********" type="password">
<br><br><br>
<input name="submit" type="submit" value=" Create user" >
</div>
</div>
</body>
</html>
Just change
<input name="button" type="button" value="Create user" onclick="insert();">
to
<input name="button" type="submit" value="Create user">
And paste your php code inside this
<?php if(isset($_POST['submit'])){
//paste you php code here
}
?>
<?php
if($_GET){
if(isset($_GET['insert'])){
insert();
}elseif(isset($_GET['select'])){
select();
}
}
function select()
{
echo "The select function is called.";
}
function insert()
{
echo "The insert function is called.";
}
?>
<input type="submit" class="button" name="insert" value="insert" />
<input type="submit" class="button" name="select" value="select" />
===============================================
<?php
if($_GET['button1']){fun1();}
if($_GET['button2']){fun2();}
function fun1()
{
//This function will update some column in database to 1
}
function fun2()
{
//This function will update some column in database to 2
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
</head>
<body>
<button id="btnfun1" name="btnfun1" onClick='location.href="?button1=1"'>Update to 1</button>
<button id="btnfun2" name="btnfun2" onClick='location.href="?button2=1"'>Update to 2</button>
</body>
</html>
I did it using this code. Hope this helps.