hi i want to upload multiple images and insert into mysql db using a single form with php, mysql and javascript. i'm applying coding. php upload will works fine. but javascript code for multiple select not working. i'm setting + and _ symbol for add or delete multiple select boxes for selection and upload in a single submit. the upload and insert db works fine.but the incement(+) symbol not working. i'm able to upload only one image at a time. i'm displayed the code below. please help me.
index.php:
<html>
<head>
<title>Multiple Upload</title>
</head>
<script language="javascript">
function fncCreateElement(){
var mySpan = document.getElementById('mySpan');
var myLine = document.getElementById('hdnLine');
myLine.value++;
// Create input text
var myElement1 = document.createElement('input');
myElement1.setAttribute('type',"text");
myElement1.setAttribute('name',"txtGalleryName"+myLine.value);
myElement1.setAttribute('id',"txt"+myLine.value);
mySpan.appendChild(myElement1);
// Create input file
var myElement2 = document.createElement('input');
myElement2.setAttribute('type',"file");
myElement2.setAttribute('name',"fileUpload"+myLine.value);
myElement2.setAttribute('id',"fil"+myLine.value);
mySpan.appendChild(myElement2);
// Create <br>
var myElement3 = document.createElement('<br>');
myElement3.setAttribute('id',"br"+myLine.value);
mySpan.appendChild(myElement3);
}
function fncDeleteElement(){
var mySpan = document.getElementById('mySpan');
var myLine = document.getElementById('hdnLine');
if(myLine.value > 1 )
{
// Remove input text
var deleteFile = document.getElementById("txt"+myLine.value);
mySpan.removeChild(deleteFile);
// Remove input file
var deleteFile = document.getElementById("fil"+myLine.value);
mySpan.removeChild(deleteFile);
// Remove <br>
var deleteBr = document.getElementById("br"+myLine.value);
mySpan.removeChild(deleteBr);
myLine.value--;
}
}
</script>
<body>
<form action="upload.php" method="post" name="form1" enctype="multipart/form-data">
<input type="text" name="txtGalleryName1"><input type="file" name="fileUpload1">
<input name="btnCreate" type="button" value="+" onClick="JavaScript:fncCreateElement();">
<input name="btnDelete" type="button" value="-" onClick="JavaScript:fncDeleteElement();"><br>
<span id="mySpan"></span>
<input name="hdnLine" type="hidden" value="1">
<input name="btnSubmit" type="submit" value="Submit">
</form>
</body>
</html>
upload.php:
<?php
include("config.php");
for($i=1;$i<=(int)($_POST["hdnLine"]);$i++)
{
if($_FILES["fileUpload".$i]["name"] != "")
{
if(copy($_FILES["fileUpload".$i]["tmp_name"],"shotdev/".$_FILES["fileUpload".$i]["name"]))
{
$strSQL = "INSERT INTO gallery ";
$strSQL .="(GalleryName,Picture) VALUES ('".$_POST["txtGalleryName".$i]."','".$_FILES["fileUpload".$i]["name"]."')";
mysql_query($strSQL);
echo "Copy/Upload ".$_FILES["fileUpload".$i]["name"]." completed.<br>";
}
}
}
echo "<br><a href='view.php'>View file</a>";
mysql_close();
?>
Change this line:
<input name="hdnLine" type="hidden" value="1">
into:
<input id="hdnLine" type="hidden" value=1>
Related
I designed a form in form.php with a file input. When I press +input button, a new file input object should be generated and save them to my mysql server.
My code here,
form.php
<div id="enterReplyReferenceList">
<div class="enterReplyRefInputContainer">
<div class="enterReplyRefInput">
<form action="submit.php" method="POST" enctype="multipart/form-data">
<input type="hidden" value="<?php echo $userID; ?>" name="userID">
<input type="submit" value="SEND"/>
<input type="file" name="enterRefFile[]" multiple class="enterRefFile" accept="application/pdf,image/jpeg, image/png, image/jpg"/>
</form>
</div>
</div>
</div>
<button onclick="appendRef()">+input</button>
form.js
function appendRef(){
var inputclass = document.getElementsByClassName('enterReplyRefInputContainer')[0];
var inputclassChild = document.createElement('div');
inputclassChild.innerHTML = inputclass.innerHTML;
var newClass = document.getElementById("enterReplyReferenceList").appendChild(inputclassChild);
newClass.className = "enterReplyRefInputContainer";
submit.php
for($i=0; $i<count($_FILES['enterRefFile']['name']); $i++) {
$tmpFilePath = $_FILES['enterRefFile']['tmp_name'][$i];
if ($tmpFilePath != ""){
$fileData = addslashes(file_get_contents($_FILES['enterRefFile']['tmp_name'][$i]));
$fileName = addslashes($_FILES['enterRefFile']['name'][$i]);
$fileType = $_FILES['enterRefFile']['type'][$i];
if($fileData != null){
if($fileType == "application/pdf" || $fileType == "image/png" || $fileType == "image/jpeg" || $fileType == "image/jpg"){
mysql_query("INSERT INTO attachment (attachData, dataType, attachName, userID) VALUES('$fileData','$fileType','$fileName', '$userID')");
}
}
}
}
When I pressed the +input button, a new input file object is generated with the same look with the original and I can select the files. However, only a single file can be uploaded to my mysql db after I clicked the submit button. Can somebody tell me why the new file input cannot be uploaded? Is the new objects will not be sent?
The problem is that your input button is cloning your whole div, which has the form, so when you click "Submit" you're uploading one form with one file element. Here's an updated version (all in one file, you can separate to your liking):
<button onclick="appendRef()">+input</button><br><hr>
<form action="submit.php" method="POST" enctype="multipart/form-data">
<input type="hidden" value="<?php echo $userID; ?>" name="userID">
<div id="enterReplyReferenceList">
<div class="enterReplyRefInputContainer">
<div class="enterReplyRefInput">
<input type="file" name="enterRefFile[]" multiple class="enterRefFile" accept="application/pdf,image/jpeg, image/png, image/jpg"/>
</div>
</div>
</div>
<hr>
<input type="submit" value="SEND"/>
</form>
<script>
function appendRef(){
var inputclass = document.getElementsByClassName('enterReplyRefInputContainer')[0];
var inputclassChild = document.createElement('div');
inputclassChild.innerHTML = inputclass.innerHTML;
var newClass = document.getElementById("enterReplyReferenceList").appendChild(inputclassChild);
newClass.className = "enterReplyRefInputContainer";
}
</script>
Button click is outside of the form so you don't do a submit action on it (unless you want to use a blocking action like jQuery preventDefault(), and you only need one submit for the whole form.
I've done this so often before on different websites, but can't get it to work now.
I've got a simple form that posts perfectly well using a submit button, but for a specific reason I actually need it to submit via a url link instead. I'm using submit(). The form submits, but the data isn't posting.
What am I missing?
<html>
<body>
<?
if(isset($_POST['bar'])) { echo 'testing button<br>'; }
if(isset($_POST['information'])) {
echo $_POST['information'];
echo '</br>Info successfully posted.';
}
?>
<form action="test.php" method="post" id="fooform">
Hello World.<br>
Select checkbox: <input type="checkbox" id="information" name="information" value="yes">
<input type="submit" name="bar" value="Send"><br>
Confirm and Post<br>
Post Directly
</form>
<script type="text/javascript">
function SubmitForm(formId) {
var oForm = document.getElementById(formId);
alert("Submitting");
if (oForm) { oForm.submit(); }
else { alert("DEBUG - could not find element " + formId); }
}
</script>
</body>
</html>
The form starts to submit, then the href of the link is followed, and this cancels the form submission.
If you are using old-style onclick attributes, then return false; at the end to prevent the default action.
You would, however, be better off using a submit button (you are submitting a form). You can use CSS to change its appearance.
Try this code :
<html>
<body>
<?php
if (isset($_POST['bar'])) {
echo 'testing button<br>';
}
if (isset($_POST['information'])) {
echo $_POST['information'];
echo '</br>Info successfully posted.';
}
?>
<form action="test.php" method="post" id="fooform">
Hello World.<br>
Select checkbox: <input type="checkbox" id="information" name="information" value="yes">
<input type="submit" name="bar" value="Send"><br>
Confirm and Post<br>
Post Directly
</form>
<script type="text/javascript">
function SubmitForm(formId) {
var oForm = document.getElementById(formId);
alert("Submitting");
if (oForm) {
oForm.submit();
}
else {
alert("DEBUG - could not find element " + formId);
}
}
</script>
</body>
</html>
try to submit form with form id in jquery
<a class="submit">Post Directly </a>
$('a.submit').click(function(){
$('#fooform').submit();
})
I am using ckeditor in order to edit the text seen in the screen. The information is taken from database and written to the screen in a div element and it is possible to edit the information by double clicking. However, after edited i couldn't get the edited information. Here is my code, i tried to add a form which includes the div element, but it did not work.
<form method="post">
<p>
Double-click any of the following <code><div></code> elements to transform them into
editor instances.</p>
<?php
$makeleSql = 'SELECT * FROM makale';
$makaleRs = $con->func_query($makeleSql);
while ($makaleRow = mysql_fetch_array($makaleRs)) {
?>
<div class = "editable" id = <?php echo "content".$makaleRow['id'];?> style="display:none">
<?php
$contentSql = 'SELECT * FROM content WHERE makale_id ='.$makaleRow['id'];
$contentRs = $con->func_query($contentSql);
while ($contentRow = mysql_fetch_array($contentRs)) {
echo $contentRow['icerik'].$makaleRow['id'];
}
?>
</div>
<?php }
?>
<button type="submit" value="Submit" onclick="getDiv();"/>
</form>
What should i do in order to take the information in the div element? Moreover, i am using this example.
http://nightly.ckeditor.com/7484/_samples/divreplace.html
Thanks.
For save form's data you need store information in input/select/textarea. Div and other not form's element not will be stored.
You have to store your data in hidden fields:
<form method="post">
<p>
Double-click any of the following <code><div></code> elements to transform them into
editor instances.</p>
<?php
$makeleSql = 'SELECT * FROM makale';
$makaleRs = $con->func_query($makeleSql);
while ($makaleRow = mysql_fetch_array($makaleRs)) {
?>
<div class="editable" id="<?php echo "content".$makaleRow['id'];?>">
<?php
$contentSql = 'SELECT * FROM content WHERE makale_id ='.$makaleRow['id'];
$contentRs = $con->func_query($contentSql);
while ($contentRow = mysql_fetch_array($contentRs)) {
echo $contentRow['icerik'].$makaleRow['id'];
// store original text
echo '<input type="hidden" name="'.$makaleRow['id'].'" value="'.htmlspecialchars($contentRow['icerik'].$makaleRow['id']).'">;
}
?>
</div>
<?php }
?>
<button type="submit" value="Submit" onclick="getDiv(this);"/>
</form>
<script>
var getDiv = function(btn) {
for(var el in btn.form.elements) {
var d = document.getElementById(btn.form.elements[el].name);
btn.form.elements[el].value = d.innerHTML;
}
return true;
}
</script>
Generically adds <input type="hidden"> to any <div> with the attribute addToForm, copies content into them (see notes below):
<form method="post" id="f">
<div id="txt" addToForm="1" contenteditable spellcheck="true" style="height:100px;width:300px;font-family:arial,sans serif;border:1px solid black;font-weight:normal;overflow-y:auto;"
</div><br />
<input type="button" value="Go" id="btnGo">
</form>
<script type="text/javascript">
$(document).ready(function(){
$("#btnGo").click(function(){
$("div[addToForm]").each(function(){
var tId=$(this).prop("id");
$(this).after("<input type='hidden' name='"+tId+"' id='hdn"+tId+"'>");
$("#hdn"+tId).val($(this).html());
});
$("#f").submit();
});
});
</script>
Note 1) if you want to strip out the HTML formatting of the content, use <textarea> instead of <input>
Note 2) be sure validation is successfully complete first or you will end up with multiple hidden inputs with the same name
I am using the following loop to send/attach multiple attachments to my email message.
foreach(array_keys($_FILES['attachment']['name']) as $key) {
$source = $_FILES['attachment']['tmp_name'][$key];
$filename = $_FILES['attachment']['name'][$key]; // original filename from the client
$mail->AddAttachment($source, $filename);
}
But only the first attachment i made is sended.
The form code is
<form method="POST" action="<?php $PHP_SELF ?>" enctype="multipart/form-data">
<input type="file" name="attachment[]" id="attachment" size="30"
onchange="document.getElementById('moreUploadsLink').style.display = 'block';" />
<div id="moreUploads"></div>
<div id="moreUploadsLink" style="display:none;">
Attach another File</div>
<input name="submit" type="submit" value="submit" />
</form>
When one click on Attach another file, another File Upload button is shown, through a JavaScript function:
<script type="text/javascript">
var upload_number = 1;
var attachmentlimit = 5;
function addFileInput() {
var d = document.createElement("div");
var file = document.createElement("input");
file.setAttribute("type", "file");
file.setAttribute("name", "attachment"+upload_number);
d.appendChild(file);
document.getElementById("moreUploads").appendChild(d);
upload_number++;
if(upload_number == attachmentlimit) {
document.getElementById('moreUploadsLink').style.display='none';
}
}
</script>
Only the file attached through the first FileUpload Button is attached and sended, not the others.
Help.
The problem is that you are setting the name attribute of your new input element to attachment1, attachment2, etc. You should be setting this name to attachment[], just like the original input you created.
If you still don't get all your attachments, you can try a var_dump($_FILES) in your PHP script to ensure that you are getting all the files the way you expect them.
i make a dynamic textbox through javascript now i want to post the data of all dynamically generated textboxes to php script and then insert into a table.
how can i do this...
<head>
<title>Dynamic Form</title>
<script language="javascript">
function changeIt()
{
var i = 1;
my_div.innerHTML = my_div.innerHTML +"<br><input type='text' name='mytext'+ i>"
}
</script>
</head>
<body>
<form name="form" action="post" method="">
<input type="button" value="add another textbox" onClick="changeIt()">
<div id="my_div">
<input type="submit" value="save">
</body>
HI, whenever you post your form at that time all the fields are posted on the php script, where you can get array of that textbox variable by using for loop.
ex:
$textboxarr = array();
for($i = 0;$i<count($_POST['mytext']);$i++){
$textboxarr = $_POST['mytext'][$i];
}
now you having your all text boxes in the $textboxarr.try this.
Thanks.
Use it like this
<head>
<title>Dynamic Form</title>
<script language="javascript">
function changeIt()
{
my_div.innerHTML = my_div.innerHTML +"<br><input type='text' name='mytext[]'>"
}
</script>
</head>
<body>
<form name="form" action="post" method="">
<input type="button" value="add another textbox" onClick="changeIt()">
<div id="my_div">
<input type="submit" value="save">
</body>
In php you will be able to use it as an array like
$_POST['mytext'][0], $_POST['mytext'][1] etc... or you can use a foreach loop for $_POST['mytext']