Clear Text Box on Selection and Delete Button appear on Selection - php

I have a form that users use to save information to text files, then a drop-down list that pulls the names of their files and displays that information back into the text fields, however I am trying to figure out how I can clear the text fields when selecting one value. I have an < option value="0" >(Add New Code) aside from my php that is simply as a placeholder so they can use the form to save data. What I am trying to figure out is how to clear the text-boxes whenever they select that particular drop down. I would also like to add a delete button that appears whenever a file selection is made from the drop-down list. Below is my relevant coding.
thank you for the help on the display issue and css button am trying to figure out now the php script for the delete button to delete the currently selected file.
<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>
<script>
$(document).ready(function(){
// apply a change event
$('#CodeList').change(function() {
// update input box with the currently selected value
$('#CodeName').val($(this).val());
$.get( '<? echo $directory ?>' + '/' + $('#CodeName').val(), function( data ) {
$( "#CodeValue" ).text( data );
});
});
});


< option value="0" >(Add New Code)< /option >
I do not understand the purpose of value="0"
When an <option> is selected you retrieve the .selectedIndex from the <select id="id">
Then you use the selectedIndex to access the selected option with .options[selectedIndex].text
I do not do jQuery, but you can easily translate.
I am assuming you want to clear or change the option text.
This is the code to clear text in a Select Option:
add text to the empty string to change text value.
var ndx = document.getElementById('id').selectedIndex;
document.getElementById('id').options[ndx].text='';
jQuery (not mine)
(from get index of selected option with jQuery)
$("#id option:selected").index()
(from jQuery get specific option tag text)
$("#id[ndx]").text();
Delete Button HTML:
<button type="button" id="b1" class="hide">Delete</button>
Delete Button CSS:
.hide{display:none;}
Delete Button JS
document.getElementById('b1').style.display='block';
This worked:
<!DOCTYPE html>
<html lang="en"><head><title>Unhide Delete</title>
<style type="text/css">
.hide{display:none;}
</style></head><body>
<button type="button" id="b1" class="hide">Delete</button>
<script type="text/javascript">
//<![CDATA[
document.getElementById('b1').style.display='block';
//]]>
</script></body></html>
This one toggles the Delete Button
<!DOCTYPE html>
<html lang="en"><head><title>Unhide Delete</title>
<style type="text/css">
.hide{display:none;}
</style></head><body>
<button type="button" onclick="hideShow()">Show Hide Delete</button><br/> <br/>
<button type="button" id="b1" class="hide">Delete</button>
<script type="text/javascript">
//<![CDATA[
var toggle = new Array();
toggle['none'] = 'block';
toggle['block'] = 'none';
var del = document.getElementById('b1');
del.style.display='block';
function hideShow(){
del.style.display=toggle[del.style.display];
}
//]]>
</script></body></html>
My version of your page:
And I filtered the files to include only those with an extension of .php for my testing
if(pathinfo($file,PATHINFO_EXTENSION) == 'php' ){
Problems and solutions:
Contents of file could not be stored in variable.
Converted newlines to preg_replace('/\n/','',$contents);
converted < to < preg_replace('/</','<',$contents);
converted > to > preg_replace('/>/','>',$contents);');
Then when setting the text to the contents of the contents array the >,> and had to be converted back to their original characters.
var temp = contents[ndx].replace(/</g,'<');
temp = temp.replace(/>/g,'>');
txt.value= temp.replace(/<br>/g,"\\n");
textarea needed to be resized to show contents
added scrollbars
CSS:overflow:scroll;
set to height of content
txt.style.height= txt.scrollHeight;
When content very large textarea was too big.
Limited textarea height to fit in Browser window.
var maxHeight = (window.innerHeight - txt.offsetTop) - 40;
var h = txt.scrollHeight;
if(h > maxHeight){h = maxHeight;}
txt.style.height = h + 'px';
The + 'px' is important
When smaller file followed lage file the text area height had to be reduced
txt.style.height = '100px';
First option need to be blank other wise first option could not easily be selected because there would be no change event.
Made first array element blank
\ncontents[0] = '';\n
set $ndx = 1 rather than zero
file needed directory for file_get_contents without adding directory to options
Changed comma to dot
file_get_contents($directory , $file);
file_get_contents($directory . $file);
Now I am fairly satisfied with this page:
<?php ob_start("ob_gzhandler");
header('Content-Type: text/html; charset=utf-8');
header('Connection: Keep-Alive');
header('Keep-Alive: timeout=5, max=100');
header('Cache-Control: max-age=120');
echo <<<EOT
<!DOCTYPE html>
<html lang="en"><head><title>Code</title>
<style type="text/css">
#CodeValue{width:50%;background:#eff; width:80%;font:400 1em "Courier New", Courier, monospace;overflow:scroll;}
.btn{width:50%;margin:0 0 .5em 0;border-radius: 3px 3px 3px 3px;font: 700 1.2em Arial,Helvetica,Calibri,sans-serif;overflow: visible;border:1px solid #00f;color: #fff;padding: .1em;
background-image: -o-linear-gradient(bottom, #2ef 0%, #02f 100%);
background-image: -moz-linear-gradient(bottom, #2ef 0%, #02f 100%);
background-image: -webkit-linear-gradient(bottom, #2ef 0%, #02f 100%);
background-image: -ms-linear-gradient(bottom, #2ef 0%, #02f 100%);
background-image: linear-gradient(to bottom, #2ef 0%, #02f 100%);}
</style>
</head><body>
EOT;
ob_flush();
$ndx = 1;
$js = "var contents=new Array();\ncontents[0] = '';\n";
$directory = 'users/';
$files = scandir($directory) ;
$options = "<option></option>\n";
foreach( $files as $file ){
if ( !is_dir($file) ){
if(pathinfo($file,PATHINFO_EXTENSION) == 'php' ){
$options .= "<option>$file</option>\n";
$contents = file_get_contents($directory . $file);
$contents = preg_replace('/</','<',$contents);
$contents = preg_replace('/>/','>',$contents);
$contents = preg_replace('/\n/','<br>',$contents);
$contents = addslashes( $contents);
$js .= "contents[$ndx] = \"$contents\"\n";
$ndx++;
}
}
}
echo <<<EOT
<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();">
$options
</select>
<h3>Saved Codes</h3>
<form method="post" action="/evo/avsaveprocess.php"><div>
<input type="hidden" name="Action" value="SAVE" />
<input type="hidden" name="CodeId" id="CodeId" value="0" />
<label>Description:</label>
<input type="text" name="CodeDescription" size="40" maxlength="50" id="CodeName" value="" /><br/>
<textarea rows="10" name="Code" id="CodeValue" onload="resize()">
</textarea><br/>
<input class="btn" type="submit" value="Save" />
</div></form>
<script type="text/javascript">
//<![CDATA[
$js
sel = document.getElementById('CodeList');
txt = document.getElementById('CodeValue');
var maxHeight = (window.innerHeight - txt.offsetTop) - 40;
function CodeChange(){
txt.style.height = '100px';
var ndx = sel.selectedIndex;
var temp = contents[ndx].replace(/</g,'<');
temp = temp.replace(/>/g,'>');
txt.value= temp.replace(/<br>/g,"\\n");
var h = txt.scrollHeight;
if(h > maxHeight){h = maxHeight;}
txt.style.height = h + 'px';
}
//]]>
</script></body></html>
EOT;
ob_end_flush();

Related

form textarea instead of input

I got this code and I want to modify it a bit. It is a form that shows the number of words in a text. I want to change the input (
I have tried many things to use a textarea but either there is no output or the original text disappears. Changing the name into id didn't work, same for the 'normal way of using a textarea'.
Is there a way of doing of replacing the input with textarea? One thing that has to stay is that after a submit the text in the textarea needs to be visible.
I appreciate any help.
<?php
error_reporting(0);
$inputtext = $_POST['ipt'];
if ($_POST['clear']) {
$inputtext = "";
$output1 = "";
}
if ($_POST['send']) {
$output1 = "Number of words in this text: " . str_word_count($inputtext);
}
?>
<html>
<head>
<style>
body {
font-family:arial;
font-size:12px
}
.bigtextarea {
width:100%;
height:40%;
min-height:200px
}
textarea {
font-family:monospace;
border-color:#a9a9a9
}
</style>
</head>
<title>Form results on one page after submit</title>
<body>
<form action="" method="POST">
<h1>Form results on one page after submit</h1>
<h3>Copy and Paste text:</h3>
<input class="bigtextarea" wrap="hard" type= textarea name=ipt value="<?php echo $inputtext;?>" height="100px" size="100%">
<input type="submit" name="send" value="Ok" title="Click here to display values.">
<input type="submit" name="clear" value="Clear" title="Click here to clear text boxes.">
</form>
<?php
echo "<br><br>";
echo "<font size='4'>";
echo $output1;
echo "</font>";
?>
</body>
</html>

<input class="bigtextarea" wrap="hard" type= textarea name=ipt
value="<?php echo $inputtext;?>" height="100px" size="100%">
Replace with
<textarea name="ipt" class="bigtextarea" wrap="hard"><?php echo $inputtext ?></textarea>

JSON causes memory error

I have two file. One is index.php and the other is display.php.
Index.php contains a form and after submitting, it generates a json value and displays that in a textarea, so I might edit before I press the "generate" button and it redirects me to the display.php where a for loop generates a html template according to the posted son data. It works perfectly with up to 3 item, but if I use 4 or more, it drops me a fatal error with memory limit. As I still got errors after increasing the limit, I tried the following on the display.php:
ini_set('memory_limit', '-1');
set_time_limit(0);
After this, it drops me an error 503 - service unavailable.
I don't know what to do, I am asking your help.
index.php:
<meta charset="utf-8">
<style>
pre, textarea { background-color:#31495D;min-height:300px;color:white;margin-bottom:50px;padding:25px;width:100%;display:block;border-bottom:5px solid #A058B3; }
.submit { padding:15px;background-color:green;color:white;border:none;font-size:12px;width:150px;margin:0 auto;margin-top:15px;margin-bottom:15px }
</style>
<?php
$json = json_encode($_POST, JSON_PRETTY_PRINT, JSON_UNESCAPED_UNICODE);
echo "
<h2>JSON for template</h2>
<form action='display.php' method='post'>
<textarea name='json'>$json</textarea>
<input class='submit' type='submit' value='Generate Template'>
</form>
";
$json = json_decode($json, true);
?>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(document).ready(function() {
var max_fields = 10; //maximum input boxes allowed
var wrapper = $(".input_fields_wrap"); //Fields wrapper
var add_button = $(".add_field_button"); //Add button ID
var x = 1; //initlal text box count
$(add_button).click(function(e){ //on add input button click
e.preventDefault();
if(x < max_fields){ //max input box allowed
x++; //text box increment
$(wrapper).append('<div><input type="text" name="url[]" placeholder="http://www.example.com/"/><input type="text" name="name[]" placeholder="Name"/><input type="text" name="subtext[]" placeholder="Subtext"/><input type="text" name="image[]" placeholder="Image URL"/>Remove</div>'); //add input box
}
});
$(wrapper).on("click",".remove_field", function(e){ //user click on remove text
e.preventDefault(); $(this).parent('div').remove(); x--;
})
});
</script>
<form action="<?php echo $_SERVER['PHP_SELF'];?>" method="post">
<label>Title of Block <input type="text" name="title"></label><br>
<label>Heading of Block <input type="text" name="heading"></label><br><br>
<div class="input_fields_wrap">
<button class="add_field_button">Add More Fields</button>
<div><input type="text" name="url[]" placeholder="http://www.example.com/"/><input type="text" name="name[]" placeholder="Name"/><input type="text" name="subtext[]" placeholder="Subtext"/><input type="text" name="image[]" placeholder="Image URL"/></div>
</div>
<br><br>
<input type="submit" value="Generate Code">
</form>
And the display.php
<?php
$json = json_decode($_POST['json'], true);
$c = count($json);
$i = 0;
$rows = 3;
$content = "<table>";
for($i=0; $i < count($json["name"]); $i++) {
$content .=
'<td width="226" valign="top" style="padding:5px;padding-bottom:20px;" class="m-stack m-pad-b">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="font-family:Helvetica Neue,Helvetica,Arial,sans-serif;font-size:22px;padding-bottom:5px; mso-line-height-rule:exactly; line-height: 18px; padding-top: 8px;">
<a href="'.$json['url'][$i].'" target="_blank" style="text-decoration:none;color:#0896ff; display:block;">
'.$json['name'][$i].'<br><span style="color: #7d90a6; font-size: 14px;">'.$json['subtext'][$i].'</span>
</a>
</td>
</tr>
<tr>
<td background="'.$json['image'][$i].'" width="226" height="226" valign="top" style="background-size:cover; background-position:center center; border-radius:6px 6px 0 0;" class="m-ufi-bg">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:226px;height:226px;">
<v:fill type="frame" src="'.$json['image'][$i].'" color="#7bceeb" />
</v:rect>
<![endif]-->
</td>
</tr>
</table>
</td>
';
if($i == 3) { $content .= '</tr><tr>'; unset($i); $i == 0; }
}
echo "</table>";
echo $content;
This is just an experiment for me, any suggestion / critique is appreciated. Thanks in advance.

You are reseting $i to 0 so it never becomes greater than count($json) and your for loop becomes infinite

extra input added by jquery doesn't work

Hi I'm trying to get a dinamically input added with Jquery, but when I try to get the code it's not working
The code in codeigniter catch all POST but less the one added by jquery
here is the code:
<script type="text/javascript">
$(document).ready(function(){
var value = parseFloat($("#subtotal").val());
$('.subtotal').html(value);
$('#subtotal').val(value);
$('input[name="phprop"]').change(function(event){
if($('input[name="phprop"]:checked').val() == 'Yes'){
$('#sections').show();
}else if($('input[name="phprop"]:checked').val() == 'No'){ $('#sections').hide();}
});
$('input[name="xsst"]').change(function(event){
if($('input[name="xsst"]:checked').val() == 'Yes'){
$('#xtraphotos').show();
$('<input type="text" name="extraid'+i+'" id="extraid'+ i +'" style="width:80px;margin-left:4px;"/>').appendTo('#xtrabox');
var num = value + 9.95;
value = parseFloat(num.toFixed(2));
$('.subtotal').html(value);
$('#subtotal').val(value);
$('#extrass').val(i); i++;
}else if($('input[name="xsst"]:checked').val() == 'No'){
$('#xtraphotos').hide();
$('#xtraphotos input[type="text"]').remove();
var num = value - 9.95 * (i - 1);
value = parseFloat(num.toFixed(2));
$('.subtotal').html(value);
$('#subtotal').val(value);
$('#extrass').val(0);
i = 1;
}
});
var scntDiv = $('#xtrabox');
var i = 1;
$('#addScnt').live('click', function() {
$('<input type="text" name="extraid'+i+'" id="extraid'+ i +'" style="width:80px;margin-left:4px;"/>').appendTo(scntDiv);
num = value + 9.95;
value = parseFloat(num.toFixed(2));
$('.subtotal').html(value);
$('#subtotal').val(value);
$('#extrass').val(i);
i++;
return false;
});
});
</script>
Here is the HTML
<div style="margin-left: 50px;">
<label><b>Do you need more photos for your web?</b> </label>Yes<input type="radio" name="xsst" id="xsst" value="Yes"/>No<input type="radio" name="xsst" id="xsst" value="No"/> (Each aditional photo has a cost of <b>$9.95</b>)
<div id="xtraphotos" style="display:none;">Add another picture box<div id="xtrabox"></div></div></div>
Here is the Codeigniter code:
if($_POST['extrass'] !=0){
for($i=1;$i<=$_POST['extrass'];$i++){
$names = "extraid".$i;
$extras .= $_POST[$names];
if($i!=$_POST['extrass']){
$extras .= "-";
}
}
Here is the complete HTML (Just the form Section):
<?php echo form_open_multipart(base_url() . 'purchase/confirmation')?>
<p style="float:left">Image ID of the Photos for your Website</p><div style="float:left;margin: 13px 0 0 110px;width: 450px;"><?php
if($idtype == 4){$x=3;}elseif($idtype == 1){$x=5;}elseif($idtype == 2){$x=10;}elseif($idtype == 3){$x=13;}
for($i=1;$i<=$x;$i++){?><input type="text" name="ssid[]" id="ssid_<?=$i?>" value="" style="width:80px; margin-left:4px;"/><?php }?></div>
</div>
<div style="margin-left: 50px;">
<label><b>Do you need more photos for your web?</b> </label>Yes<input type="radio" name="xsst" id="xsst" value="Yes"/>No<input type="radio" name="xsst" id="xsst" value="No"/> (Each aditional photo has a cost of <b>$9.95</b>)
<div id="xtraphotos" style="display:none;">Add another picture box<div id="xtrabox"></div></div></div>
<br />
<div id="choose_your_template" style="background-image:url(<?=base_url()?>images/step_4.png)"><div style="padding-left:5px; float:left">
<span style=" position: relative; top: 14px; left: 210px; font-size: 18px; color: gray; ">Step 4: Do you have Photos? Upload the pictures for your website.</span></div>
</div>
<div style="margin-left: 50px;">
<label>Do you have photos of your property? </label>Yes<input type="radio" name="phprop" id="phprop" value="Yes"/>No<input type="radio" name="phprop" id="phprop" value="No"/><br />
<div id="sections" style="display:none;">
<p>Upload the photos in the theme that they should be used. The photos should be in jpge.format. Otherwise the system will not accept. them.</p><br/>
<?php
if($idtype == 4){$x=1;}elseif($idtype == 1){$x=3;}elseif($idtype == 2){$x=4;}elseif($idtype == 3){$x=5;}
for($i=1;$i<=$x;$i++){?>
<label>Section</label><select name="section[]" id="section"><option value="">Choose Section</option><option value="home">Home</option><option value="about-us">About Us</option><option value="contact-us">Contact Us</option></select><?php for($j=1;$j<=4;$j++){?><input type="file" name="userphoto<?=$i?><?=$j?>" /><?php }?><br /> <br />
<?php }?>
<p>I certify that the photos that i am uploading for the website development are of my entire property and that I have all the copyrights.</p></div>
</div><br />
<input type="hidden" id="domain" name="domain" value="<?=$domain?>" />
<input type="hidden" id="payment_plan" name="payment_plan" value="<?=$poption?>" />
<?php if($ownamedomain){?>
<input type="hidden" name="ownamedomain" id="ownamedomain" value="<?=$ownamedomain?>" />
<?php }?>
<input type="hidden" name="idtype" id="idtype" value="<?=$idtype?>" />
<input type="hidden" name="templateid" id="templateid" value="<?=$templateid?>" />
<input type="hidden" name="extrass" id="extrass" value="0" />
<input type="hidden" name="subtotal" id="subtotal" value="<?=$subtotal?>" />
<div style="padding-left:45px; padding-top:15px;">
<hr style=" width: 868px; margin: 0 0 16px; "/>
<div align="center">
<p>Subtotal: USD$<span class="subtotal"><?=$subtotal?></span> </p></div>
</div>
<div style="background:url(<?=base_url()?>images/bottombar.png) no-repeat;display: block;height: 16px;margin: 0 36px 10px;width: 902px;"></div>
<input type="submit" name="continue" id="continue"/><input type="button" value="Back" onClick="history.back();" class="back">
</div>

Your HTML have a tag form?
When.you not put forms elements inside a form, onload, some brownser add a form to correct code syntax... But when you add nes elements using DOM, maybe this elements not include inside this form...

get value from dropdown. (little tricky)

First of all, im quite new to PHP and coding, but here goes.
I have a web form, that has to get some info from a txt file (located in a folder on the server)
I got how to make it get the info from the file and how to make the dropdown list, show all files in the folder.
How ever what i cant figure out is how to make them work together, so the file name it reads from, is taken from the selected value of the dropdown list.
the code for the dropdown list:
<?
$currentdir = 'files'; //change to your directory
$dir = opendir($currentdir);
echo 'Files are as follows:<br>';
echo '<select name="select">';
while($file = readdir($dir))
{
echo '<option value="'.$file.'">'.$file.'</option>';
}
echo '</select>';
closedir($dir); ?>
and the code to read from the file:
<input type="text" value="<?php $myFile = ""; $lines = file($myFile); echo $lines[2]; ?>" name="refnr" id="refnr" class="input" />
lets say the drop down shows 2 files, test.txt and test2.txt, if i select test2.txt from the dropdown, i wanted it to put "test2.txt" in between the "" at <?php $myFile = "";
but no matter how i try to put the code in there to get the selected value, it just fails...
The full code of my Form as it is right now:
<?php
if (!empty($_POST)) {
// Used for later to determine result
$success = $error = false;
// Object syntax looks better and is easier to use than arrays to me
$post = new stdClass;
// Usually there would be much more validation and filtering, but this
// will work for now.
foreach ($_POST as $key => $val)
$post->$key = trim(strip_tags($_POST[$key]));
// Check for blank fields
if (empty($post->refnr))
$error = true;
else {
// Get this directory, to include other files from
$dir = dirname(__FILE__);
// Get the contents of the pdf into a variable for later
ob_start();
require_once($dir.'/pdf.php');
$pdf_html = ob_get_contents();
ob_end_clean();
// Load the dompdf files
require_once($dir.'/dompdf/dompdf_config.inc.php');
$dompdf = new DOMPDF(); // Create new instance of dompdf
$dompdf->load_html($pdf_html); // Load the html
$dompdf->render(); // Parse the html, convert to PDF
$pdf_content = $dompdf->output(); // Put contents of pdf into variable for later
// Get the contents of the HTML email into a variable for later
ob_start();
require_once($dir.'/html.php');
$html_message = ob_get_contents();
ob_end_clean();
// Load the SwiftMailer files
require_once($dir.'/swift/swift_required.php');
$mailer = new Swift_Mailer(new Swift_MailTransport()); // Create new instance of SwiftMailer
$message = Swift_Message::newInstance()
->setSubject('Felanmalan') // Message subject
->setTo(array('mymail#hidden' => 'Fel')) // Array of people to send to
->setFrom(array('mymail#hidden' => 'Fel')) // From:
->setBody($html_message, 'text/html') // Attach that HTML message from earlier
->attach(Swift_Attachment::newInstance($pdf_content, 'Felanmalan.pdf', 'application/pdf')); // Attach the generated PDF from earlier
// Send the email, and show user message
if ($mailer->send($message))
$success = true;
else
$error = true;
}
}
?>
<!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>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Felanmälan från IKEA</title>
<style type="text/css">
html, body, h1, h2, h3, h4, h5, h6, p, span, ul, li, div, form, input, select, textarea, button {margin:0; padding:0;}
ul {list-style:none;}
a, a:hover {text-decoration:none; outline:0;}
a img {border:0;}
body {font:12px/16px Verdana, Arial, sans-serif; background:#ffffff;}
#container {width:450px; margin:10px auto; padding:10px; overflow:hidden; border:1px solid #000; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; background:#F9F9F9;}
#container h1 {margin-bottom:20px; font-size:40px; line-height:40px; font-family:'HelveticaNeue-Light', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight:normal;}
.message {margin-bottom:10px; padding:5px;}
.success {color:#4F8A10; border:1px solid #4F8A10; background:#DFF2BF;}
.error {color:#D8000C; border:1px solid #D8000C; background:#FFBABA;}
label {display:block; margin-bottom:3px; cursor:pointer;}
.input, textarea, select, button {display:block; width:440px; margin-bottom:10px; padding:3px; font:22px/22px 'HelveticaNeue-Light', 'Helvetica Neue', Helvetica, Arial, sans-serif; border:1px solid #CCC; border-top-width:2px;}
textarea {font-size:13px; line-height:16px;}
select {width:396px;}
button {float:right; width:auto; margin-bottom:0; padding:3px 30px; cursor:pointer; font-size:16px; border:1px solid #999; border-bottom-width:2px; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; background:#EEE;}
button:active {border-bottom-width:1px; padding:4px 30px 3px; background:#E9E9E9;}
</style>
</head>
<body>
<?
$currentdir = 'files'; //change to your directory
$dir = opendir($currentdir);
echo 'Files are as follows:<br>';
echo '<select name="select">';
while($file = readdir($dir))
{
echo '<option value="'.$file.'">'.$file.'</option>';
}
echo '</select>';
closedir($dir); ?>
<div id="container">
<h1><img src="felimg.png" /> Felanmälan</h1>
<?php if ($success) { ?>
<div class="message success">
<h4>Congratulations! It worked! Now check your email.</h4>
</div>
<?php } elseif ($error) { ?>
<div class="message error">
<h4>Sorry, an error occurred. Try again!</h4>
</div>
<?php } ?>
<form method="post" action="">
<label for="date"><b>Date:</b></label>
<input type="text" readonly name="date" id="date" class="input" value="<? print(Date("Y-m-d")); ?>"/>
<label for="refnr"><b>Referensnummer:</b></label>
<input type="text" value="<?php $myFile = ""; $lines = file($myFile); echo $lines[2]; ?>" name="refnr" id="refnr" class="input" />
<label for="bestav"><b>Beställd av:</b></label>
<input type="text" name="bestav" id="bestav" class="input" />
<label for="tel"><b>Tel:</b></label>
<input type="text" name="tel" id="tel" class="input" />
<label for="email"><b>Email:</b></label>
<input type="text" name="email" id="email" class="input" />
<label for="kund"><b>Kund:</b></label>
<textarea name="kund" id="kund" rows="4" cols="40"></textarea>
<label for="ktel"><b>Tel:</b></label>
<input type="text" name="ktel" id="ktel" class="input" />
<label for="art"><b>Berörd Artikel:</b></label>
<textarea name="art" id="art" rows="3" cols="40"></textarea>
<label for="fel"><b>Fel på varan: </b></label>
<textarea name="fel" id="fel" rows="2" cols="40"></textarea>
<label for="q1"><b>Installation gjord av fackman:</b></label>
<select name="q1" id="q1">
<option value="Ja">Ja</option>
<option value="Nej">Nej</option>
</select>
<label for="q2"><b>Serviceverkstad:</b></label>
<input type="text" name="q2" id="q2" class="input" />
<label for="q3"><b>Servicenr:</b></label>
<input type="text" name="q3" id="q3" class="input" />
<label for="q4"><b>Serienr:</b></label>
<input type="text" name="q4" id="q4" class="input" />
<label for="q5"><b>Inom garanti eller reklamation:</b></label>
<select name="q5" id="q5">
<option value="Garanti">Garanti</option>
<option value="Reklamation">Reklamation</option>
</select>
<label for="q6"><b>Informerat om punkt 8:</b></label>
<select name="q6" id="q6">
<option value="Ja">Ja</option>
<option value="Nej">Nej</option>
</select>
<label for="q7"><b>Har kund själv gått igenom manual för felsökning:</b></label>
<select name="q7" id="q7">
<option value="Ja">Ja</option>
<option value="Nej">Nej</option>
</select>
<label for="q8"><b>Ordernr:</b></label>
<input type="text" name="q8" id="q8" class="input" />
<label for="q9"><b>Inköpsdatum:</b></label>
<input type="date" name="q9" id="q9" class="input" /><br>
<p><button type="submit">Submit!</button></p>
</form>
</div>
</body>
</html>
hope it makes sense and again, sorry if it turns out to be a noob question :) i have used 2 days googling and testing and i have simply come to a point where i need a little push in the right direction again.
Thanks in advance.
p.s to explain short what my goal is, then i have 1 webform that generates a txt file and saves it on a server, then another form, where the "admin" can choose the file from the drop down, get the info in that the client filled out in the txt version and then fill out what he needs to fill out and then have it saved and sent as a PDF to a technician.

You could use
echo '<select id="select" name="select">';
while($file = readdir($dir))
{
echo '<option value="'.$file.'">'.$file.'</option>';
}
echo '</select>';
And after it has been loaded to the DOM, use
document.getElementById('select').onchange=changeSelect;
function changeSelect(){
document.getElementById('refnr').value=document.getElementById('select').value;
}
changeSelect();
See it here: http://jsfiddle.net/7nzBS/

I wanted it to put "test2.txt" in between the "" at `<?php $myFile = ""`
You can't do such a thing, because the "text2.txt" is at the client side and the $myfile, php variable, is at the server side. If you want to access data of a client side from server side, you need to send data via HTTP. So you have two choices:
Send the selected value via HTTP post or get.
Send the selected value via AJAX.

Thank you Oriol, that worked :)
the code now looks like this and is working as i needed it to.
Also thanks for all other suggestions, lovely with quick and helpful replies :)
<label for="refnr"><b>Referensnummer:</b></label>
<input type="text" value="<?php $selectedfile = #$_POST['file2']; $myFile = "files/$selectedfile"; $lines = file($myFile); echo $lines[0]; ?>" name="refnr" id="refnr" class="input" />

Appendchild not posting form data in firefox

I have an appendchild-function that adds form elements. In IE, everything works fine; the process.php is able to $_POST it. But in firefox, it doesnt send the data.
Here is my code.
<script type="text/javascript">
var i=0;
function addElement()
{
var ni = document.getElementById('org_div1');
var numi = document.getElementById('theValue');
var num = (document.getElementById('theValue').value -1)+ 2;
numi.value = num;
var newDiv = document.createElement('div');
var divIdName = num; newDiv.setAttribute('id',divIdName);
newDiv.innerHTML = '<input type="text" name="work" /><input type="file"
class="fileupload" size="80" name="file' + (num) +'" onclick="addElement()"/> <a
class="removelink" onclick=\'removeElement('+divIdName+')\'>Remove This File</
a>';
// add the newly created element and it's content into the DOM
ni.appendChild(newDiv);
}
function removeElement(divNum)
{
var d = document.getElementById('org_div1');
var olddiv = document.getElementById(divNum);
d.removeChild(olddiv);
}
</script>
<td>
<div class="file_input_wrapper">
<input type="hidden" value="1" id="theValue" />
<div id='org_div1'>
<input type="file" class="fileupload" name="file1" size="80" onclick="addElement()" />
</div>
</td>

Solved the problem...
Basically, I had this..
<div>
<form>
</div>
</form>
And changed to this..
<form>
<div>
</div>
</form>
Seems firefox doesnt like invalid html.

You can use PHP's field name array functionality to get around having to keep track of your field names. Simply name the field like this:
<input type="file" name="files[]" ... />
^^--- array notation
and PHP will handle each file box as a separate member in the $_FILES array after the form's submitted. This frees you up from all the extra overhead of keeping track of how many boxes there are and hidden form fields to store the value.
You may want to reconsider having the file element's onclick be the thing that adds a new file input. What happens if someone clicks on the "browse" button to add a file? They'll get a new file input box, even though they may only have wanted one. If they choose the wrong file or change their minds later and click browse again to change the file selection, they'll get yet another input box.
Consider having a dedicated "add another box" button instead.

Just want to ask where your form tag is located? Before or after table tag? I had similar problem and my form tag was inside table. When I put form tag outside of table everything worked fine.
Site doesn't work anymore.
Here is working example. I used your code. Only two thing I changed is
<input type="text" name="work[]" /> instead of <input type="text" name="work" />
and you was missing one </div> closing div tag
here is code (tested on IE7, IE8, FF and google chrome)
<?php
if (!empty($_POST['btnProsledi'])){
print_r($_POST);
echo "<br />";
print_r($_FILES);
}
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<script type="text/javascript">
var i=0;
function addElement()
{
var ni = document.getElementById('org_div1');
var numi = document.getElementById('theValue');
var num = (document.getElementById('theValue').value -1)+ 2;
numi.value = num;
var newDiv = document.createElement('div');
var divIdName = num; newDiv.setAttribute('id',divIdName);
newDiv.innerHTML = '<input type="text" name="work[]" /><input type="file" class="fileupload" size="80" name="file' + (num) + '" onclick="addElement()"/> <a class="removelink" onclick=\'removeElement(' + divIdName + ')\'>Remove This File</a>';
// add the newly created element and it's content into the DOM
ni.appendChild(newDiv);
}
function removeElement(divNum)
{
var d = document.getElementById('org_div1');
var olddiv = document.getElementById(divNum);
d.removeChild(olddiv);
}
</script>
</head>
<body>
<form method="post" action="" enctype="multipart/form-data">
<table>
<tr>
<td>
<input name="proba" type="text" id="proba" value="" />
</td>
</tr>
<tr>
<td>
<div class="file_input_wrapper">
<input type="hidden" value="1" id="theValue" />
<div id='org_div1'>
<input type="file" class="fileupload" name="file1" size="80" onclick="addElement()" />
</div>
</div>
</td>
</tr>
<tr>
<td>
<input name="btnProsledi" type="submit" id="btnProsledi" value="Submit" />
</td>
</tr>
</table>
</form>
</body>
</html>

Categories