how to print textbox value in php - javascript

In my code,when any text is entered into the textbox and click on add attribute button, entered value displayed on page for two times, one in first row of table and another one is in first row of second table. Now question is, when i entered text into another textbox which is in second row of second table, it should display the entered text.but it can't display. it is not working.
<script>
var i = 0;
document.getElementById('add-val').innerHTML='';
function insRow()
{
i++;
var x=document.getElementById('myTable').insertRow(-1)
var a=x.insertCell(-1)
var txt=document.getElementById('add-val').value;
a.innerHTML=txt;
// for <tr> of table
var row = document.getElementById("myRow");
var newrow=document.getElementById("myRow1");
var x = row.insertCell(-1);
var y = newrow.insertCell(-1);
x.innerHTML=txt; //+ '<br>' +
y.innerHTML='<input type="text" name="nm" />';
}
document.getElementById('add-val').innerHTML='';
</script>
& this is html code.
<form method="post" name="form">
<input type="text" name="attr" id="add-val"> <input type="button" onClick="insRow()" value="Add Attribute">
<table width="27" height="17" id="myTable"> </table>
<table cellpadding="13px">
<tr id="myRow"> </tr>
<tr id="myRow1"> </tr>
</table>
<input type="submit" value="Add option" onClick="insRow()"/>
<?php
if(isset($_POST['submit']))
{
$val= $_POST['add'];
echo $val;
}
?>
</form>

It should be
y.innerHTML='<input type="text" name="nm[]" />';
The []'s after nm
name="nm[]"
Serve to store all new generated fields into an array, which can then be accessed by $_POST
Which you then just access like so....
$val = $_POST['nm'];
foreach($val as $v){
echo $v; // display what user entered
}
// var_dump($val) will show you all the users seperate input for each field

HTML Code :
<form method="post" name="form">
<input type="text" name="attr" id="add-val"> <input type="button" onClick="insRow()" value="Add Attribute">
<table width="27" height="17" id="myTable"> </table>
<table cellpadding="13px">
<tr id="myRow"> </tr>
<tr id="myRow1"> </tr>
</table>
<input type="submit" value="Add option" onClick="insRow()"/>
<?php
if(isset($_POST['submit']))
{
$val= $_POST['nm'];
echo $val;
}
?>
</form>
put the name of input whos value you want to print in place of attr
$val= $_POST['attr'];

Related

Looping Table Rows in Form

So I'm trying to code a form that sits inside a table that has only one row. The row contains a drop down box, text box and a checkbox.
<table class="table text-size-12">
<thead>
<tr>
<th scope="col">Location</th>
<th scope="col" class="text-nowrap">COD Charge</th>
<th scope="col">Allow Negotiate</th>
</tr>
</thead>
<tbody>
<?php
for($rows = 0; $rows < 5; $rows++):
?>
<tr>
<td>
<select name="location" class="form-control" style="width:250px">
<option value="">--- Select Location ---</option>
<?php foreach ($locations as $state): ?>
<optgroup label="--- <?= $state->name ?> ---">
<?php foreach ($state->locations as $area): ?>
<option value="{{ $key }}"><?= $area->name ?></option>
<?php endforeach ?>
</optgroup>
<?php endforeach ?>
</select>
</td>
<td>
<input type="text" id="shipping_fee_value">
</td>
<td>
<input type="checkbox" id="shipping_fee_allow_negotiate">
<script>
document.getElementById('shipping_fee_allow_negotiate').onchange = function (){
document.getElementById('shipping_fee_value').disabled = this.checked;
}
</script>
</td>
</tr>
<?php endfor ?>
</tbody>
</table>
As you can see, I've used Javascript so that if the checkbox is checked, the text box will be disabled.
<td>
<input type="text" id="shipping_fee_value">
</td>
<td>
<input type="checkbox" id="shipping_fee_allow_negotiate">
<script>
document.getElementById('shipping_fee_allow_negotiate').onchange = function (){
document.getElementById('shipping_fee_value').disabled = this.checked;
}
</script>
</td>
And I've also looped the rows 5 times using for. My problem is, the checkbox disabling text box script only works in the first row, how do I allow each row to be independent?
P.S. I prefer not hard coding every specific row just because so.
You are repeating the id of the elements. You can't do this. id are meant to be unique. Set a unique id on the every element.
<td>
<input type="text" id="shipping_fee_value_<?= $rows ?>">
</td>
<td>
<input type="checkbox" class="shipping_fee_allow_negotiate" data-target="shipping_fee_value_<?= $rows ?>">
<script>
var elements = document.getElementsByClassName('shipping_fee_allow_negotiate');
for (var i = 0; i < elements.length; i++) {
elements[i].onchange = function() {
document.getElementById(this.dataset.target).disabled = this.checked;
}
}
</script>
</td>
Here we are using the $row variable to add a index to the id property on the input.
<input type="text" id="shipping_fee_value_0"/>
Also we use the data-target property on the checkbox to tell him which specific input to handle on the onchange callback.
<input type="checkbox" class="shipping_fee_allow_negotiate" data-target="shipping_fee_value_0">
And finally the selector to assign the callback is using getElementsByClassName to select all the checkboxes.
Because your id is common that's why they consider only the first row instead of common id use dynamic id.

Placing id on input and select tags inside td depending on query result looping

asigning id for each input tag and select tag in tr depending on query result
I tried a code like this putting an id inside the input tag and select tag
<table id="myTable">
<thead>
<th>Progress</th>
<th>Amount</th>
<th>Action</th>
</thead>
<tbody>
<?php $qry = "SELECT * FROM trade";
foreach($conn->query($qry) as $data){
?>
<form action="update.php" method="post">
<tr>
<td><select name="progress" id="select_progress" onclick="changeSetting()">
<option value="Partial">Partial</option>
<option value="Full">Full</option>
</select></td>
<td><input type="number" name="amount" id="amount"></td>
<td><input type="submit" name="update" value="Update"></td>
<input type="hidden" name="tradeid" value="<?php echo $data['tradeID'];?>">
</tr>
</form>
<?php }?>
</tbody>
</table>
Now i coded the javascript like this:
function changeSetting(){
var selectValue = document.getElementById("select_progress").value;
var amountValue = document.getElementById("amount");
if(selectValue.value === "Partial"){
amountValue.required = true;
}else if(selectValue.value === "Full"){
amountValue.required = false;
}
}
The first row seems to be doing fine, but the second row doesn't apply the javascript i wrote. Any suggestion on how to approach this would be welcome. I know, that an id should be unique for each element but if i have about 50 results in my query i dont know how to place id's on each input and select tag inside my table. Any suggestions or help is greatly appreciated.
All your elements have the same id value, so when you try to getElementById it always returns the first one. One way to work around this is to add the tradeID value to each element's id value to distinguish them. For example:
<td><select name="progress" id="select_progress<?php echo $data['tradeID'];?>" onchange="changeSetting(<?php echo $data['tradeID'];?>)">
<option value="Partial">Partial</option>
<option value="Full">Full</option>
</select></td>
<td><input type="number" name="amount" id="amount<?php echo $data['tradeID'];?>"></td>
<td><input type="submit" name="update" value="Update"></td>
Then you would modify your JS as so:
function changeSetting(id){
var selectValue = document.getElementById("select_progress" + id).value;
var amountValue = document.getElementById("amount" + id);
if(selectValue === "Partial"){
amountValue.required = true;
}else if(selectValue === "Full"){
amountValue.required = false;
}
}

Get HTML's <TD> Value

I would like to get the static values from my table data (the tag) and and display it to another page. Should I use jQuery for this or possibly PHP?
Example.php Table:
<table width="100%" class="table table-striped table-bordered table-hover display" id="dataTables-example">
<thead>
<tr>
<th>Race</th>
<th>Role</th>
<th>2015</th>
<th>2016</th>
<th>2017</th>
</tr>
</thead>
<tbody>
<tr class="Testing">
<td>BLAH</td>
<td>ANOTHA_BLAH</td>
<td>25</td>
<td>26</td>
<td>27</td>
</tr>
</table>
I tried doing it in PHP similar to
<form action = "PutTheExampleTableValuesHere.php" method = "post">
TABLE BLAH BLAH BLAH
<input type="submit" name="submit" value="View Line Chart">
and using the $_POST function and simply echoing it to the other pages but my logic failed.
Please guide. Thank you!
with the $_POST logic is way more simpler than using javascript/ajax for this solution. Just put your data in some paragraph or similar and give it a name so you can access it from post from another external page that you call in "method" parameter in form.
example:
index.php:
<form action="test.php" method="post">
<table>
<td>
<div id="blah" name="blah" value="blah">BLAH</div>
</td>
<td>
<div id="anoblah" name="anoblah" value="anotherblah">BLAH</div>
</td>
<input type="submit" id="test" name="test">
</table>
</form>
test.php
<?php
if(isset($_POST["test"]))
echo "td1: ".$_POST["blah"]." td2: ".$_POST["anoblah"];
?>
You can probably use jquery to create an array (using input hidden) in the form structure. Then you can read it after the form submit, using $_POST variable.
<script>
$(document).ready(function(){
$("input[type=submit]").click(function(e) {
e.preventDefault();
var form = $("form");
$(".Testing td").each(function() {
form.append('<input type="hidden" name="data[]" value="' + $(this).html() + '">');
});
form.submit();
});
});
</script>
This will create an array from the TD values under class "Testing" that you can access over $_POST['data'] (type Array).
<?php
if(isset($_POST['data'])) {
foreach($_POST['data'] as $key=>$val) {
echo $key.' = '.$val.'<br>';
}
}
?>
You may use AJAX to post the whole html code to the other page (URL):
$.post(URL, {data: encodeURIComponent($("#dataTables-example").html())})
On the other page(URL), you can use php's $_POST to get it:
<form action = "PutTheExampleTableValuesHere.php" method = "post">
<table ...>
<?php urldecode($_POST['data']) ?>
</table>
<input type="submit" name="submit" value="View Line Chart">
UPDATE:
#SimoneWalter Then you can compose the data in $.post with the TD values. For example:
data = []
$.each($("#dataTables-example TR"), function(tr){
// get td values
tmp = []
$.each($(tr).find('TD'), function(td){
tmp.push($(td).html())
})
data.push(tmp)
})
// post the data
// data will be something like:
// [['Race', 'Role', '2015', ...], ...]
$.post(URL, {data: data})
Then on the other page:
<form action = "PutTheExampleTableValuesHere.php" method = "post">
<table ...>
<thead>
<?php foreach($_POST['data'] as $tr): ?>
<tr>
<?php foreach($tr as $td): ?>
<td><?php echo $td ?></td>
<?php endforeach ?>
</tr>
<?php endforeach ?>
</thead>
</table>
<input type="submit" name="submit" value="View Line Chart">

Tried Every Thing But Still Getting OBJECT NOT FOUND error in Xamp when i hit submit button?

I was following some tutorials about ecommerce site in PHP and MySQL.
But when i hit submit button I get OBJECT NOT FOUND ERROR.
Below is the code,please guide me. Directories etc. are fine. I've also tried enclosing the button in seprate form tag but nothing worked.
<?php
include("includes/db.php");
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Add Products</title>
</head>
<body bgcolor="#3B6AD8">
<form method="post" action="insert_product" enctype="multipart/form-data">
<table width="700" height="650" align="center" border="2" bgcolor="#F3F3F3">
<tr>
<td colspan="2">
<h2 align="center">Insert Product Here</h2>
</td>
</tr>
<tr>
<td><b>Product Title</b></td>
<td><input type="text" name="product_title" /></td>
</tr>
<tr>
<td><b>Product Category</b></td>
<td>
<select name="product_cat">
<option>Select a Category</option>
<?php
$get_categories = "SELECT * FROM categories";
$run_categories = mysqli_query($con,$get_categories);
while($row_categories =mysqli_fetch_array($run_categories) ) {
$cat_id = $row_categories['cat_ID'];
$cat_title = $row_categories ['cat_title'];
echo "<option value='$cat_id'>$cat_title</option>";
}
?>
</td>
</select>
<tr>
<td><b>Product Brand</b></td>
<td><select name="product_brand">
<option>Select a Category</option>
<?php
$get_brands = "SELECT * FROM brands";
$run_brands = mysqli_query($con,$get_brands);
while($row_brands =mysqli_fetch_array($run_brands) ) {
$brand_id = $row_brands['brand_ID'];
$brand_title = $row_brands['brand_title'];
echo "<option value='$brand_id'>$brand_title</option>";
}
?>
</td>
</select>
</td>
</tr>
<tr>
<td><b>Product Image 1</b></td>
<td>
<input type="file" name="product_img1" />
</td>
</tr>
<tr>
<td><b>Product Image 2</b></td>
<td>
<input type="file" name="product_img2" />
</td>
</tr>
<tr>
<td><b>Product Image 3</b></td>
<td>
<input type="file" name="product_img3" />
</td>
</tr>
<tr>
<td><b>Product Price</b></td>
<td>
<input type="text" name="product_price" />
</td>
</tr>
<tr>
<td><b>Product Description</b></td>
<td>
<textarea name="product_desc" cols="30" rows="5"></textarea>
</td>
</tr>
<tr>
<td>Product Keywords</td>
<td>
<input type="text" name="product_keywords" />
</td>
</tr>
<tr align="center">
<td colspan="2">
<form method="post">
<input type="submit" name="add_product" value="Add Product"/>
</form>
</td>
</tr>
</table>
</form>
</body>
</html>
<?php
if(isset($_POST['add_product'])){
//text data variables
$product_title = $_POST['product_title'];
$product_cat = $_POST['product_cat'];
$product_brand = $_POST['product_brand'];
$product_price = $_POST['product_price'];
$product_desc = $_POST['product_desc'];
$product_keywords = $_POST['product_keywords'];
$product_status = 'on';
//Produt Images
$product_img1 = $_FILES['product_img1']['name'];
$product_img2 = $_FILES['product_img2']['name'];
$product_img3 = $_FILES['product_img3']['name'];
//Image Temp Names
$temp_name1 = $_FILES['product_img1']['tmp_name'];
$temp_name2 = $_FILES['product_img2']['tmp_name'];
$temp_name3 = $_FILES['product_img3']['tmp_name'];
if($product_title=="" OR $product_cat=="" OR $product_brand=="" OR $product_price=="" OR $product_desc=="" OR $product_keywords=="" OR $product_img1==""){
echo "<script>alert('Please Fill All The Fields')</script>";
exit();
}
else {
move_uploaded_file($temp_name1,"product_images/product_img1");
move_uploaded_file($temp_name2,"product_images/product_img2");
move_uploaded_file($temp_name3,"product_images/product_img3");
$insert_product_query = "INSERT INTO products(category_ID,brand_ID,date,product_title,product_img1,
product_img2,product_img3,product_price,product_desc,product_status)
values ('$product_cat','$brand_id',
NOW,'$product_title','$product_img1','$product_img2','$product_img3','$product_price','$product_desc',
'$product_status')";
$run_products = mysqli_query($con,$insert_product_query);
if ($run_products){
/*echo "<script>alert('Product inserted successfully')</script>";*/
}
}
}
?>
try to put an extension to your form action="insert_product" ... like .php or .asp .. Also, reform your title to something more like "Object not found on form submit."
Try this:
<form method="post" enctype="multipart/form-data">
Ther are two problems:-
The problem is you write form contains only submit button.Try to remove <form method="post">before button
You write all your code in same page but in form your action is insert_product which have no extension like .php.It's totally wrong
so try to do any one of these two.
a) either define it action= insert_product.php and make a file with that name and put your last form processing code in that file.
b) Or remove form action attribute and write like <form method="post" enctype="multipart/form-data">.
Try 1 point and 2 nd b) point at-once. And check once.

How do i get the javascript dynamic row values in php?

jsfiddle
I'm trying to print the input text field values on nextpage (postdata.php). But it always print the first row result only. I didn't get the remaining row values on next page. I've posted my full codes on jsfiddle.. How do i get the remaining js dynamic row values in php (postdata.php page)?
JS
$(document).ready(function(){
$("span").click(function(){
$("#container").append('<tr><td>Email : </td><td><input type="text" name="email[]" placeholder="Email id" /></td> <td>Name : </td><td><input type="text" name="name[]" placeholder="Your Name "/></td> <td><a title="Delete this row" href="javascript:void(0);" class="remove">Del</a></td></tr>');
});
$("#container").on('click','.remove',function(){
$(this).parent().parent().remove();
});
});
Php
<?php
echo "
<table>
<tr>
<td>
Email :
</td>
<td>
$_POST[email]
</td>
<td>
Name :
</td>
<td>
$_POST[name]
</td>
</tr>
</table>";
?>
Since name of fields you declared is array the $_POST becomes multidimensional array.So try like this
<?php
$size = sizeof($_POST['email']);
echo "<table>" ;
for($i=0; $i<$size;$i++)
{
echo "
<tr>
<td>
Email :
</td>
<td>
".$_POST['email'][$i]."
</td>
<td>
Name :
</td>
<td>
".$_POST['name'][$i]."
</td>
</tr>
";
}
echo "</table>";
?>
also in your html change names of Name and Email field to name[] and email[] respectively.Also you have misplaced the form tag. It starts after <table> and ends after <table>. which was not correct. so place form tag before table tag
When you add square brackets to the name of an input field, PHP will receive it's value as an array. Your JS code is fine, but the PHP code doesn't handle arrays at all. Look at the following:
echo "
<table>";
if(!is_array($_POST['email'])) {
$_POST['email'] = array($_POST['email']);
$_POST['name'] = array($_POST['name']);
}
foreach($_POST['email'] as $key => $email) {
// get the corresponding name to the email
$name = $_POST['name'][$key];
echo "<tr>
<td>
Email :
</td>
<td>
$email
</td>
<td>
Name :
</td>
<td>
$name
</td>
</tr>";
}
echo "</table>";
Note: This code will check whether multiple values were submitted or not and will work in both scenarios.

Categories