I have a page in Codeigniter in which i can set the product quantity (sq.m) that the client wants to buy. When the client sets the quantity i have to do some calculations (about the quantity number whis was set before) and i am doing that with Javascript setting some variables. Now i want to show these variables in the same (php) page and it's working, but i don't know what should i do to put these variables in the values of the hidden inputs so that i can send them to the controller. Here is the coding:
<input type="text" name="productQuantity">
<input type="button" class="button" onclick="return showHide();" value="Calculate Packs">
<script type="text/javascript" language="javascript">// <![CDATA[
function showHide() {
var ele = document.getElementById("showHideDiv");
if(ele.style.display == "block") {
ele.style.display = "none";
}
else {
<?php $pack = explode(' ', $pro->productPackSize); ?>
ele.style.display = "block";
var val = document.getElementById('productQuantity').value;
document.getElementById('val').innerHTML = val;
var req = Math.round(val/<?php echo $pack[0]; ?>);
document.getElementById('req').innerHTML = req;
var total = req * <?php echo $pack[0]; ?>;
document.getElementById('total').innerHTML = total;
}
}
// ]]></script>
<div id="showHideDiv" style="display:none;">
<?php echo form_open('main/add_to_cart_validation/' . $pro->productId); ?>
To cover <strong id="val"></strong> sq.m, you will need <strong id="req"></strong> Packs
which is <strong id="total"></strong> sq.m in total</a> //the ids' here are working, i can show them in the page
<input type="hidden" id="" value="" name="productPacks"> //how can i get the 'reg' variable here?
<input type="hidden" id="" value="" name="productQuantity"> //the same here as above for 'total' variable
<input type="submit" class="button" value="Add to Cart">
</form>
</div>
Thanks for your answers
Add these lines in the else condition after your math:
document.getElementById("productPacks").value = val;
document.getElementById("productQuantity").value = total;
Starty by giving your inputs an id and then you can pass the values like this :
document.getElementById('myField').value = total;
It is very simple.You do it the same way.
var MyHiddenValue = document.getElementById('myHiddenField').value;
alert(MyHiddenValue);
WORKING FIDDLE
Related
I can't get the php code to run! Would anybody know what the problem is? I'm not sure of the way I called the pHp code makes sense. Everything works but a file is not saved.
The code is supposed to display a list of subjects in a bullet
pointed list as I ask the user to keep putting in subjects until
submitted.
The code is then supposed to save this list in a csv file like this
(Math, Biology, English etc) but I dont think the php code is
running.
<html>
<h1> Fill in Subjects </h1>
<input type='text' id='input' />
<input type='button' value='add subject' id = "add" />
<input type='text' id='input2' />
<input type='button' value='remove subject' id='remove' />
<div id='list'>
</div>
<p> When Submit button is clicked, you can not come back to this page!</p>
<form method="POST" action=''>
<input type='button' value='Submit' id = "subjectsub" name = "complete" />
</form>
<script type="text/javascript">
var subjectli = [];
document.getElementById("subjectsub").onclick = function(){
JSON.stringify(subjectli);
}
document.getElementById("remove").onclick = function(){
document.getElementById("list").innerHTML = "";
var toRemove = document.getElementById("input2").value;
var index = subjectli.indexOf(toRemove);
if (index > -1) {
subjectli.splice(index, 1);
}
var sList = "";
for (var I = 0; I < subjectli.length; I++)
{
sList = "<li>" + subjectli[I] + "</li>";
document.getElementById("list").innerHTML += sList;
}
document.getElementById("input2").value = ""; // clear the value
}
document.getElementById("add").onclick = function() {
var text = document.getElementById("input").value;
subjectli.push(text);
var li = document.createElement("li");
li.textContent = text;
document.getElementById("list").appendChild(li);
document.getElementById("input").value = ""; // clear the value
}
</script>
<?php
if (isset($_POST['complete']))
{
$subjectA=json_decode($_POST['jsondata']);
$fp = fopen('file1.csv', 'w');
foreach ($subjectA as $fields) {
fputcsv($fp, $fields);
}
fclose($fp);
}
?>
</html>
The input elements need to be within the form if you want them to be posted with the form submit.
<div id='list'>
</div>
<p> When Submit button is clicked, you can not come back to this page!</p>
<form method="POST" action=''>
<input type='text' id='input' />
<input type='button' value='add subject' id = "add" />
<input type='text' id='input2' />
<input type='button' value='remove subject' id='remove' />
<input type='button' value='Submit' id = "subjectsub" name = "complete" />
</form>
Form elements should be inside the form tags as the other answerer mentioned. And be sure to put the form processing file inside the form action attribute like this:
<form method="POST" action='myFileName.php'>
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 have created div elements dynamically by this
$(document).ready(function(){
var c=0;
$(".addC").on('click', function(){
//alert("Add More....");
var addInput = $("<br /><input type='text' name=court_"+ c + " id=court_"+ c +" required />");
$(this).parent().append(addInput);
c++;
});
});
This is done for a form that has already an input field for entering court name
<input type="text" name="court_name" id="court_name" required />
I want these values in $_POST[] php variable for further DB operations. How to find how many input fields are added and how can they be used (in php only)
I suggest use a grouping name on your forms, so that it's much easier to manage: name="txtbox[]"
if(isset($_POST['submit'])) {
$count = count($_POST['court_name']); // this is an array now, you can use count()
echo $count;
foreach($_POST['court_name'] as $court_name) {
// your DB queries, blah blah
}
}
?>
<form method="POST">
<button class="addC" type="button">Add more</button>
<input type="submit" name="submit" />
<br/>
<input type="text" name="court_name[]" id="court_name" required />
</form>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var c = 0;
$(".addC").on('click', function(){
//alert("Add More....");
var addInput = $("<br /><input type='text' name='court_name[]' id='court_"+ c +"' required />");
// ^^ use []
$(this).parent().append(addInput);
c++;
});
});
</script>
this is my javascript function:
function GetCellValues()
{
var rows = document.getElementsByTagName('tr');
var str = '';
for (var c = 1 ; c < rows.length ; c++)
{
str += '\n';
var row = rows[c];
var inputs = row.getElementsByTagName('input');
for (var k = 0 ; k < inputs.length ; k++)
{
str += inputs[k].value + ', ';
}
}
document.getElementById('hide').value = str;
}
This is my html tag. In this tag I want to use input type 'hidden' instead of submit and want to print this value in php page.
<form action = "project.php" method = "POST">
<h1><u>PROJECT</u> :</h1>
<!-- here I want input type 'hidden' -->
<input type="submit" id = "hide" name="hide"onclick = "GetCellValues()" />
</form>
This is my php code:project.php
<?php
$hide = isset($_POST['hide']) ? $_POST['hide'] : "";
echo($hide);
?>
I guess you are trying to store the values from a function to hidden variable.If so then specify input hidden id.Try this:
<form action = "project.php" method = "POST">
<h1><u>PROJECT</u> :</h1>
<input type="hidden" id="hide" name="hide" value="">
<input type="submit" name="submit" onclick = "GetCellValues()" />
</form>
php:
<?php
$hide = isset($_POST['submit']) ? $_POST['hide'] : "";
echo $hide;
?>
Not sure if i understood your problem. But if i did, you just use the javascript to modify the value of the hidden field. Then you use $_POST to give it to your PHP-Script. Something like this, not tested and probably wont work without adjustments.
</head>
<body>
<form action = "project.php" method = "POST">
<h1><u>PROJECT</u> :</h1>
<input type="hidden" id="hide" value="">
<input type="submit" onclick = "GetCellValues()" />
</form>
</body>
</html>
I have a query regarding form generation based on current inputs,
like in applications the text input appear based on our choice.
I am trying to make it work using JavaScript , but my code doesn't do anything:
<html>
<head>
<script>
function addInput() {
if (fields != 10) {
document.getElementById('d_div').innerHTML += "<input type='text' value='' /><br />";
fields += 1;
} else {
document.getElementById('d_div').innerHTML += "<br />Only 10 upload fields allowed.";
document.form.add.disabled=true;
}}
</script>
</head>
<body>
<div align = "center">
<form method = "post" action = "<?php echo $_SERVER['PHP_SELF']; ?>">
Select a Template<br />
<select name = "template" id = "rawquery">
<option>Select</option>
<option value = "Alpha query">Alpha</option>
<option value = "Betaquery">Beta</option>
<option value = "Gamma query">Gamma</option>
<option value = "Epsilon query">Epsilon</option>
</select>
<br/>
<input type = "submit" name = "submit"><br /><br />
</form>
</div>
<textarea name = "raw" rows = "10" cols = "50" id = "Raw">raw template</textarea>
<br /><br />
<form id="d_form">
<input type="submit" onclick="addInput()" name="newform" value="Click to enter values">
</form>
<div id="d_div"> </div>
</div>
<br> <br> <br> <br>
</body>
</html>
The code making drop-down menu is not used here.
When I click on the button to enter values it doesn't give me a new text area; can you please help, I am very new to this and learning?
where is 'fields'-initialization?
don't forget returning false, if really don't need to submit form #d_form clicking button #newform
You have a lot of problems with your tags. First make those right. I am giving an example
of creating dynamic tags. I think you can use it.copy and see how it works
<script type="text/javascript">
fields=0;
function addInput() {
textvalue=document.getElementById("raw").value;
var opt = document.createElement("option");
if (fields != 10) {
opt.text=textvalue;
document.getElementById('rawquery').options.add(opt);
fields += 1;
} else {
document.getElementById('d_div').innerHTML += "<br />Only 10 upload fields allowed.";
document.form.add.disabled = true;
}
}
</script>