I currently have a file element, and a button that allows a user to add more file elements so that if they wanted to, they could select multiple at once. I want to be able to loop through them and need some assistance as to what direction I should take or if there is a correct syntax to do this. Form, php, and JS code below.
Form:
<form action="<?php echo htmlspecialchars($_SERVER['PHP']);?>" method="post" enctype="multipart/form-data" name="upload_form" id="upload_form">
<br />
<input type="file" name="file[]" id="file"/>
<input id="addbutton" type="button" onclick = 'javascript: add()' value="ADD ANOTHER FILE" />
<br />
<input type="submit" id="submit" name="submit" value="SUBMIT" />
</form>
PHP:
if($_POST['submit'] == "SUBMIT")
{
$count = count($_FILES[ "file" ][ "tmp_name" ]);
echo $count;
for($i = 0; $i < $count; ++$i)
{
if($_FILES && $_FILES['file']['name'])
{
//code that does some stuff here
}
}
}
JS:
<script>
function add()
{
var form = document.getElementById("upload_form");
var addButton = document.getElementById('addbutton');
var br = document.createElement("br");
form.insertBefore(br, addButton);
form = document.getElementById("upload_form");
input = document.createElement("input");
input.type="file";
input.name="file[]";
form.insertBefore(input, addButton);
}
every thing is looks ok, u just need to add index to access particully uploaded file like
<?php
// ...
for($i = 0; $i < $count; ++$i)
{
echo $_FILES['file']['tmp_name'][$i];
// ...
Looks perfect, but you can just use this for multiple selection:
<input type="file" name="file[]" id="file" multiple="multiple" />
You won't need that javascript...
Related
I had a form like this :
<form action="assets/php/test.php" method="post" enctype="multipart/form-data">
<input type="hidden" name="MAX_FILE_SIZE" value="1000000" />
<div id="imgcont" hov="url('../data/img.svg')" >
<input type="file" name="clue" value=" " id="img" accept=".png,.jpg,.jpeg">
</div>
<input type="text" name="message" id="message">
<input type="submit" name="submit" value="" id="send">
</form>
And I don't know why but he always return an empty Array like this :
Array ( [clue] => Array ( [name] => [type] => [tmp_name] => [error] => 4 [size] => 0 ) ) 0
-The name of the input file is good
-Here is no other iteartion of this name in my code
I rewrite the code to delete all unusefull things
<form action="assets/php/Send_Message.php" method="post" enctype="multipart/form-data">
Select image to upload:
<input type="file" name="clue" id="fileToUpload" value=" " id="img" accept=".png,.jpg,.jpeg" >
<input type="text" name="message" id="message">
<input type="submit" value="" name="submit">
</form>
<?php
print_r($_POST);
echo '</br>';
print_r($_FILES);
?>
-The file is here because I use JS to show a preview of this image
function updateImageDisplay() {
var curFiles = input.files;
if(curFiles.length === 0) {
preview.style.backgroundColor = "#ff4c42";
} else {
for(var i = 0; i < curFiles.length; i++) {
if(validFileType(curFiles[i])) {
var image = document.createElement('img');
image.src = window.URL.createObjectURL(curFiles[i]);
} else {
console.log("File Type Not Valid");
}
preview.style.backgroundImage = "url("+image.src+")"
preview.innerHTML += '<span onclick="Reinit()" class="delete" id="cl" >X</span>' ;
}
}
}
var fileTypes = [
'image/jpeg',
'image/pjpeg',
'image/png'
]
function validFileType(file) {
for(var i = 0; i < fileTypes.length; i++) {
if(file.type === fileTypes[i]) {
return true;
}
}
return false;
}
the problem comes from this two lines in my js
var image = document.createElement('img');
image.src = window.URL.createObjectURL(curFiles[i]);
It's like my js just take the imlage and not copying it.
Make sure the php.ini directives upload_max_filesize, post_max_size are larger than the file you are trying to upload. Also make sure that file_uploads isset to 1 and max_file_uploads to something larger than 0.
This error may also occur if you have nested multiple forms inside each other.
function check_uncheck(truefalse) {
var boxes = document.forms[0].chkboxarray.length;
var form = document.getElementById('checkForm');
for (var i = 0; i < boxes; i++) {
if (truefalse) {
form.chkboxarray[i].checked = true;
} else {
form.chkboxarray[i].checked = false;
}
}
}
<form name="checkForm" id="checkForm" method="post" action="checkboxes1.php">
<input type="checkbox" name="chkboxarray" value="1" /><br />
<input type="checkbox" name="chkboxarray" value="2" /><br />
<input type="button" name="CheckAll" value="Check All Boxes" onclick="check_uncheck(true)" />
<input type="button" name="UncheckAll" value="Uncheck All Boxes" onclick="check_uncheck(false)" />
<input type="submit" value="Save">
</form>
The snippet shows how it works without connection to a database
I am trying to save the data that is sent from the checklist to a database but i'm stuck. I was thinking of using a foreach but I don't know what to put in it.
I though of putting it as:
foreach($_POST['id'] as $add){
insert into database...
}
How do I do this?
If I do this as Fred-ii and xjstratedgebx suggested where I just change name="chkboxarray" to name="chkboxarray[]" then the javascript code would stop working.
<?php
include '../conec.php';
mysql_select_db("test",$conec)or die('Database does not exist.') or die(mysql_error());
$sql = mysql_query("SELECT * FROM user WHERE state='Not Signed Up'");
?>
<form name="checkForm" id="checkForm" method="post" action="checkboxes1.php">
<?php
while($row = mysql_fetch_array($sql)){
$id = $row['id'];
$name = $row['name'];
$lName= $row['lName'];
$concate = $name.' '.$lName;
echo '<input type="checkbox" name="chkboxarray" value="'.$id.'" />'.$concate.'<br />';
}
?>
<!--<input type="checkbox" name="chkboxarray" value="1" /><br />
<input type="checkbox" name="chkboxarray" value="2" /><br />-->
<input type="button" name="CheckAll" value="Check All Boxes" onclick="check_uncheck(true)" />
<input type="button" name="UncheckAll" value="Uncheck All Boxes" onclick="check_uncheck(false)" />
<input type="submit" value="Save">
</form>
<script type="application/javascript">
function check_uncheck(truefalse){
var boxes = document.forms[0].chkboxarray.length;
var form = document.getElementById('checkForm');
for(var i=0;i < boxes;i++){
if (truefalse) {
form.chkboxarray[i].checked=true;
} else {
form.chkboxarray[i].checked=false;
}
}
}
</script>
If you change the name of your checkbox from "chkboxarray" to "chkboxarray[]", then any boxes that are checked when the form is submitted will pass their values as an array to the server under the key of "chkboxarray".
Basically, change this line:
echo '<input type="checkbox" name="chkboxarray" value="'.$id.'" />'.$concate.'<br />';
To:
echo '<input type="checkbox" name="chkboxarray[]" value="'.$id.'" />'.$concate.'<br />';
As a result, if you var_dump the $_POST super global, you should see something like:
array(1) {
[chkboxarray]=>
array(2) {
[0]=>
string(1) "3"
[1]=>
string(1) "4"
}
}
In the example above, the checkboxes for id's 3 and 4 were checked, so they were sent to the server.
Once you have that array, inserting it into your database depends heavily on what you're trying to accomplish and your database's schema.
Hope that helps.
Also, in fairness, this is exactly what #Fred meant in his comment.
Edit 1
To make the javascript work with the change of the input name, you'll need to update all the places in your javascript where you were referencing the name of the input to the new name (chkboxarray[]).
The resulting code should look like this:
<script type="application/javascript">
function check_uncheck(truefalse) {
var boxes = document.forms[0]["chkboxarray[]"].length;
var form = document.getElementById('checkForm');
for (var i = 0; i < boxes; i++) {
if (truefalse) {
form["chkboxarray[]"][i].checked = true;
} else {
form["chkboxarray[]"][i].checked = false;
}
}
}
</script>
I've created a fiddle to show this works for checking/unchecking all the boxes: https://jsfiddle.net/solvomedia/3Ln468u3/
im noob at php but my question is this:
im having a while loop which presents to me all the products from the db
im trying to add a + and - quantity buttons next to the buy now button that will increase and decrease by pressing them (just display the number not affect the db)
but the problem is that the quantity number won't pass the number 2. Can anyone lend me some brains with this one?
$value = 1; //to be displayed
if(isset($_POST['incqty'])){
$value= $value +1;
echo $value;
}
if(isset($_POST['decqty'])){
$value = $value -1;
echo $value;
}
<form method='post'>
<input type='hidden' name='item'/>
<td><button name='incqty'>+</button><input type='text' size='1' name='item' value='$value'/><button name='decqty'>-</button></td>
</form>
I already tried to do it with js
<form name="f1"> <input type='text' name='qty' id='qty' />
<input type='button' name='add' onclick='javascript:document.getElementById("qty").value++;' value='+'/>
<input type='button' name='subtract' onclick='javascript: document.getElementById("qty").value--;' value='-'/>
</form>
but the buttons were unclickable...
I'm guessing you're learning PHP and because of that not doing this with javascript. Below code should work for you:
<?php
$value = isset($_POST['item']) ? $_POST['item'] : 1; //to be displayed
if(isset($_POST['incqty'])){
$value += 1;
}
if(isset($_POST['decqty'])){
$value -= 1;
}
?>
<form method='post' action='<?= $_SERVER['PHP_SELF']; ?>'>
<!--<input type='hidden' name='item'/> Why do you need this?-->
<td>
<button name='incqty'>+</button>
<input type='text' size='1' name='item' value='<?= $value; ?>'/>
<button name='decqty'>-</button>
</td>
</form>
If I understood the question, you need to show the values of the items in the cart and modify it by pressing + and - button.
I think you shoud use javascript for this (as you are saying that no affects database)
I'm writing some code in jQuery to show an example of the plus button
$('button[name="incqty"]').bind('click', funcion(){
var actual = $('input[name="intem"]').val();
if (actual <= 1) {
actual = actual +1;
}
$('input[name="intem"]').val(actual);
});
Of course is better not to hardcode values in the code and use constants or variables (for the 1 limit) but I hope this example help you.
I tried your javascript snippet and it worked perfectly.
That being said, is there a reason you are not using the HTML number input?
<input type="number" name="quantity" min="1" max="99">
Edit: I used the code from Daan's answer as the template but...
<?php
$value = isset($_POST['item']) ? $_POST['item'] : 1; //to be displayed
?>
<form method='post' action='<?= $_SERVER['PHP_SELF']; ?>'>
<!--<input type='hidden' name='item'/> Why do you need this?-->
<td>
<input type="number" name="item" min="1" max="99" value="<?= $value; ?>">
</td>
</form>
<input type="button" value = "-" onclick="minusbot()" />
<input type="number" name="kgcount" id = "kilohere" value = "1" >
<input type="button" value = "+" onclick="plusbot()" />
<script>
function minusbot()
{
document.getElementById('kilohere').value = parseInt(document.getElementById('kilohere').value) - 1;
var checknumifzero = parseInt(document.getElementById('kilohere').value);
if(checknumifzero < 1) //preventing to get negative value
{
document.getElementById('kilohere').value = 1;
}
}
function plusbot()
{
document.getElementById('kilohere').value = parseInt(document.getElementById('kilohere').value) + 1;
var checknumiffifty = parseInt(document.getElementById('kilohere').value);
if(checknumiffifty > 50) //just a limit
{
document.getElementById('kilohere').value = 50;
}
}
</script>
Am hoping to ask another question here since the main one was answered on this thread:
How fill form data from Dropdown?
Though its abit of a continuation.
I am attempting to use javascript and an onChange() function to scroll through the files and then display them in the text input and text area fields on the form however I would appreciate any help in resolving my javascript. As it stands right now I can pull the file into the dropdown menu, but when I select one from the dropdown menu, nothing happens or populates on the form.
edited to update All errors seem to be resolved however nothing gets moved into the text boxes when selecting a file from the dropdown menu.
Javascript:
<script>
function CodeChange() {
var filesContentJS = "$filesContents"
var index = filesContentJS.selectedIndex;
var e = document.getElementById("CodeList");
var strUser = e.options[e.selectedIndex].value;
strUser = "0";
integer document.getElementById("CodeId").value = 0;
document.getElementById("CodeName").value = "";
document.getElementById("CodeValue").value = "";
}
</script>
updated javascript
And the form html and php itself for reference:
<input type="hidden" name="Action" value="EDIT" /><input type="hidden" name="Selection" id="Selection" value="-1"><div>Below is the list of your saved codes. To edit your codes, select it from the list.</div>
<select size="1" name="CodeList" id="CodeList" onchange="CodeChange();"><option value="0">(Add New Code)</option>
<?php
$directory = $directory = 'users/' . $_SESSION['username'];
$filesContents = Array();
$files = scandir( $directory ) ;
foreach( $files as $file )
{
if ( ! is_dir( $file ) )
{
$filesContents[$file] = file_get_contents($directory , $file);
echo "<option>" . $file . "</option>";
}
}
?>
</select>
<h3>Saved Codes</h3>
<form method="post" action="/evo/avsaveprocess.php">
<input type="hidden" name="Action" value="SAVE" />
<input type="hidden" name="CodeId" id="CodeId" value="0" />
<table width="100%" border="0">
<tr>
<td>Description:</td>
<td><input type="text" name="CodeDescription" size="40" maxlength="50" id="CodeName" value="" /></td>
</tr>
<tr>
<td valign="top">Code:</td>
<td>
<textarea rows="10" style="width:99%" name="Code" id="CodeValue"></textarea>
</td>
</tr>
</table>
<input type="submit" value="Save" />
</form>
Your PHP array is still an array. You have to convert it to JS.
So, after you did all the $filesContents[$file] = file_get_contents($directory , $file);, then you need JS:
<script>
var filesContentJS = <?=json_encode($filesContents) ?>;
function CodeChange() {
var e = document.getElementById("CodeList"); // getting dropdown element
if (e.selectedIndex<=0) { // nothing selected - clean form
document.getElementById("CodeId").value = 0;
document.getElementById("CodeName").value = "";
document.getElementById("CodeValue").value = "";
} else {
var eStr = e.options[e.selectedIndex].value; // getting current element value
// fill the form with data
document.getElementById("CodeId").value = 0;// not sure what CodeId is - but this is the place to fill it
document.getElementById("CodeName").value = eStr;
document.getElementById("CodeValue").value = filesContentJS[eStr];
}
</script>
Try with
var e = document.getElementById("CodeList");
var strUser = e.options[e.selectedIndex].value;
I am new in programming. Here I have given description of my problem
I have one pair of two text box. One text box is for URL and other is for instruction but all text-boxes created dynamically depending on what value comes from database.
For example $testing_type_id=2 so I get total two pair of text boxes, let it called bundle. $i is used to identify textbox uniquely.
<input type = "text" size="33" class="uploadtxt1 url" name="txturl_<?php echo $testing_type_id ; ?>" id = "txturl_<?php echo $testing_type_id; ?>_<?php echo $i ; ?>" value="" />
<input type = "text" class="uploadtxt2" size="33" name="txtinstruction_<?php echo $testing_type_id ; ?>" id = "txtinstruction_<?php echo $testing_type_id; ?>_<?php echo $i ; ?>" value="" /> <br/>
<input type="submit" name="checkout" id="checkout" class="graybtn1 ptr button_float_left_checkout" disabled="disabled" value="Proceed To Checkout" />
Here what I wanted to do that if all bundle has value, either in one textbox or both textbox so and so enable submit button. If I removed value so disable submit button using jQuery.
I think this will work
$(document).ready(function(){
$("input[class^='uploadtxt']").keyup(function(e){
var alltxt=$("input[class^='uploadtxt']").length;
var empty=true;
$("input[class^='uploadtxt']").each(function(i){
if($(this).val()=='')
{
empty=true;
$('#checkout').prop('disabled', true);
return false;
}
else
{
empty=false;
}
});
if(!empty) $('#checkout').prop('disabled', false);
});
});
An example is here.
if($('.uploadtxt1').val() !='' && $('.uploadtxt2').val() !='')
{
$('#checkout').hide();
}
else
{
$('#checkout').show();
}
So assuming you want to show/ enable the button if the textareas / inputs have values. You could do something like this using jQuery.
$(window).ready(function(){
if( $('input, textarea').val().length >=0 ){
//run function to enable button
}
else if ( $('input, textarea').val().length <=0 ){
//run function to disable button
}
});
I think this is what you are sort of looking for. Let me know if I am way off or not understanding you correctly.
I am going to suggest a minor markup changes so that will be easy to handle the traversing.
Wrap the elements in a <div>
<div class="item">
<input type = "text" size="33" class="uploadtxt1 url" name="txturl_<?php echo $testing_type_id ; ?>" id = "txturl_<?php echo $testing_type_id; ?>_<?php echo $i ; ?>" value="" />
<input type = "text" class="uploadtxt2" size="33" name="txtinstruction_<?php echo $testing_type_id ; ?>" id = "txtinstruction_<?php echo $testing_type_id; ?>_<?php echo $i ; ?>" value="" /> <br/>
<input type="submit" name="checkout" id="checkout" class="graybtn1 ptr button_float_left_checkout" disabled="disabled" value="Proceed To Checkout" />
</div>
Then, Attach a snippet on the change event
$("input[type=text]", $(".item")).change(function() {
var allField = true;
$(this).closest(".item").find("input[type=text]").each(function() {
allField = allField && ($(this).val().length > 0)
});
if(allField) {
$(this).closest(".item").find("input[type=submit]").prop('disabled', false);
}
});
Demo of Working Solution