We Keep Coding

read array and display html div

how do I display my array "employee" to this table?
the idea is to display each name with on button on the side.
<div id="projectPopUp" class="popup-window" style="display:none">
<div class="popuptitle" id="details-name"></div>
<table width="100%" id="detailsgrid">
<tr>
<tr class="bb cls-{id} active-{active}">
<td class="active-{active}" id="{id}-list" width="70%">{employees}</td>
<td class="cls-{id} active-{active}" width="30%">
<button class="buttons" step="0.01"
data-clear-btn="false"
style="background: #006b54; color:white !important ;"
id="{id}-inspectSelected">
</button>
</td>
</tr>
</table>
<div>
<button class="smallButton" onClick="closePopup()">Close</button>
</div>
</div>
js
var employees = ['usera', 'userb', 'userc'];

Check out these lessons by W3 Schools:
Creating elements: https://www.w3schools.com/jsref/met_document_createelement.asp
Changing Inner Html: https://www.w3schools.com/jsref/prop_html_innerhtml.asp

Form is presenting same data in php while loop

I am trying to get an edit form to work with the loop in the php. I have a delete button and it works just fine. The edit form keeps presenting only the first row in the table. In firebug, it shows that all the other forms are there with the correct unique id for each but only the first form shows when edit is clicked on different rows. Can someone help me as to why?
<table id="table_id" class="table table-hover table-striped">
<thead>
<tr>
<th>ID #</th>
<th>Product</th>
<th>Quantity</th>
<th>Price</th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<?php
while($row = mysqli_fetch_assoc($search_sql)) {
?>
<tr>
<td id = "clicked"><?=$row['ID']?></td>
<td id = "clicked"><?=$row['Product']?></td>
<td id = "clicked"><?=$row['Quantity']?></td>
<td id = "clicked">$ <?=$row['Price']?></td>
<td>
<button class="btn btn-warning btn-sm" onclick="div_show2(this, '<?=$row['ID']?>'); return false;"><span class="glyphicon glyphicon-edit"></span>Edit</button>
<!-- Modal for the Edit Data Form -->
<div id ="hidden-form2">
<div id = "popupContact">
<form action= "updateData.php" id = "editForm<?=$row['ID']?>" method="POST" name="editForm">
<input type="hidden" name="ID" value="<?=$row['ID']?>">
<div class="form-group">
<label for="product">Product</label>
<input type="text" class="form-control" id="product<?=$row['ID']?>" name="product" value="<?=$row['Product']?>">
</div>
<div class="form-group">
<label for="quantity">Quantity</label>
<input type="text" class="form-control" id="quantity<?=$row['ID']?>" name="quantity" value="<?=$row['Quantity']?>">
</div>
<div class="form-group">
<label for="price">Price</label>
<input type="text" class="form-control" id="price<?=$row['ID']?>" name="price" value="<?=$row['Price']?>">
</div>
<button type="button" class="btn btn-default" onclick="formHide2()">Close</button>
<button type="submit" id="save" class="btn btn-primary">Save changes</button>
</form>
</div>
</div>
<!--End of Edit Form-->
</td>
<td>
<!--Delete Button Form-->
<form method="post" action="deleteData.php">
<button class="btn btn-danger btn-sm" type="submit"><span class="glyphicon glyphicon-trash"></span>Delete</button>
<input type="hidden" id="ID" name="ID" value="<?=$row['ID']?>">
</form>
</td>
</tr>
<?php
}
?>
</tbody>
</table>
//script for calling the edit forms as a modal popup
//Function To Display Popup for Edit form
function div_show2() {
document.getElementById("editForm").reset();
document.getElementById('hidden-form2').style.display = "block";
}
//Function to Hide Popup
function formHide2(){
document.getElementById('hidden-form2').style.display = "none";
}

Your show_div2 function is only showing one element.
document.getElementById('hidden-form2').style.display = "block";
That shows you why you are only seeing the first row.
Update your HTML and Javascript as follows
HTML
<div id="hidden-form2<?=$row['ID']?>">
Javascript
function div_show2(id) {
document.getElementById("editForm"+id).reset();
document.getElementById('hidden-form2'+id).style.display = "block";
}
To avoid having any problems like this in the future, always make sure that your id's are unique.

The first 4 td I see all use the same id name clicked. Try to fix that first and see what happens.
<td class="clicked" id="clickedID<?=$row['ID']?>"><?=$row['ID']?></td>
<td class="clicked" id="clickedProduct<?=$row['ID']?>"><?=$row['Product']?></td>
<td class="clicked" id="clickedQuantity<?=$row['ID']?>"><?=$row['Quantity']?></td>
<td class="clicked" id="clickedPrice<?=$row['ID']?>">$ <?=$row['Price']?></td>

Get the text box value and display it into the h3 element

Tried to get the text box value and display into the h3 element in above the textbox field
Here is my HTML Code :
<div class="clonedInput" id="add_attribute" style="display: block;">
<div id="add_attributes">
<div id="accordion1">
<h3>
<input type="button" value="Remove" class="btnDel remove_row button" name="btnDelete1">
<strong class="attribute_name">**Here Text box value should be displayed**</strong> </h3>
<table cellspacing="0" cellpadding="0" id="attribute_data" class="">
<tbody>
<tr>
<td class="attribute_name"><label>Name:</label>
<input type="text" id="attribute_name" class="attribute_name" name="attribute_names[]">
</td>
<td rowspan="3"><label>Value(s):</label>
<textarea name="attribute_values[]" cols="5" rows="5" placeholder="Enter some text, or some attributes"></textarea>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="clonedInput" id="add_attribute_2" style="display: block;">
<div id="add_attributes" class="woocommerce_attribute wc-metabox ">
<div id="accordion1">
<h3>
<input type="button" value="Remove" class="btnDel remove_row button" name="btnDelete1">
<strong class="attribute_name"></strong> </h3>
<table cellspacing="0" cellpadding="0" id="attribute_data" class="">
<tbody>
<tr>
<td class="attribute_name"><label>Name:</label>
<input type="text" id="attribute_name" class="attribute_name" name="attribute_names[]">
</td>
<td rowspan="3"><label>Value(s):</label>
<textarea name="attribute_values[]" cols="5" rows="5" placeholder="Enter some text, or some attributes"></textarea>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="clonedInput" id="add_attribute_3" style="display: block;">
<div id="add_attributes" class="woocommerce_attribute wc-metabox ">
<div id="accordion1">
<h3>
<input type="button" value="Remove" class="btnDel remove_row button" name="btnDelete1">
<strong class="attribute_name"></strong> </h3>
<table cellspacing="0" cellpadding="0" id="attribute_data" class="">
<tbody>
<tr>
<td class="attribute_name"><label>Name:</label>
<input type="text" id="attribute_name" class="attribute_name" name="attribute_names[]">
</td>
<td rowspan="3"><label>Value(s):</label>
<textarea name="attribute_values[]" cols="5" rows="5" placeholder="Enter some text, or some attributes"></textarea>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
I'm trying to get the input field value <input type="text" id="attribute_name" class="attribute_name" name="attribute_names[]"> and display the value into the "
<h3>
<input type="button" value="Remove" class="btnDel remove_row button" name="btnDelete1">
<strong class="attribute_name">"**Here the text box value"</strong> </h3>
" on blur function and this was dynamic text box
My Jquery :
$( "input" ).blur(function() {
var string = $(this).val();
$(this).parent().append(string);
});

I added an id attribute to the h3 where you want to display it and use that as reference on the blur event callback: DEMO HERE
HTML
<strong class="attribute_name" id="output">**Here Text box value should be displayed**</strong> </h3>
jQuery
$("input").blur(function () {
var string = $(this).val();
$('#output').html(string);
});

See a working demo here: http://jsfiddle.net/wPCZ5/
You need to do this in your handler:
$(this).closest('div').find('h3 > strong').html(string);
for all text boxes to work. The closest() call looks up the DOM hierarchy and returns the first matching element. In your case, it is the accordion div. The find() call then looks down the DOM hierarchy for the matching element. Finally html() replaces the current HTML within the element with the supplied string. Your original call to append() would add the string to whatever is already present.

There's a working fiddle here: http://jsfiddle.net/u63CU/ but I think you should not reuse class and ID names like you have. It can lead to many undesired results, as jquery selects by id or class name.
<div class="clonedInput" id="add_attribute" style="display: block;">
<div id="add_attributes">
<div id="accordion1">
<h3>
<input type="button" value="Remove" class="btnDel remove_row button" name="btnDelete1">
<strong id="text-value" class="attribute_name">**Here Text box value should be displayed**</strong> </h3>
<table cellspacing="0" cellpadding="0" id="attribute_data" class="">
<tbody>
<tr>
<td class="attribute_name"><label>Name:</label>
<input type="text" id="attribute_name" class="attribute_name" name="attribute_names[]">
</td>
<td rowspan="3"><label>Value(s):</label>
<textarea name="attribute_values[]" cols="5" rows="5" placeholder="Enter some text, or some attributes"></textarea>
</td>
</tr>
</tbody>
</table>
</div>
</div>
$( "#attribute_name" ).blur(function() {
var string = $(this).val();
$('#text-value').text(string);
});

try something like this
$( "input" ).blur(function() {
$(this).closest('strong.attribute_name').text(this.value);
});

If you want to place text box value in place of **Here Text box value should be displayed**, please try this:
$( "input" ).blur(function() {
var string = $(this).val();
$(".attribute_name").text(string);
});

Why the text fields are not getting disabled="disabled" in colorbox popup?

I'm using PHP, Smarty , jQuery, Colorbox - a jQuery lightbox plugin, etc. for my website. Now I'm displaying some output in a popup which is generated by using " Colorbox - a jQuery lightbox plugin". Now I want to disable all the text fields present in this popup when the form loads but if I go to the HTML source of page the disabled="disabled" attribute from the <input> tag gets removed and the text boxes are not getting disabled. Can you tell me why this is happening? For your reference I'm putting below the code which will display the data in a Colorbox pop up.
{if $subject_topic_questions}
{foreach from=$subject_topic_questions item=subject_topic_data}
<div class="hidden">
<div id="topics_{$subject_topic_data.subject_id}" class="c-popup">
<h2 class="c-popup-header">Select Topics</h2>
<div class="c-content">
<input type="hidden" name="subject_names[{$subject_topic_data.subject_id}]" id="subject_names" value="{$subject_topic_data.subject_name}">
<h2 class=""> {$subject_topic_data.subject_name}</h2>
<div class="c-tbl-wrap">
<table width="100%" cellspacing="0" cellpadding="0" border="0" class="c-tbl">
<tbody>
<tr>
<td>
<p class="custom-form">
<input class="custom-check" type="checkbox" name="" id="">
<label class="blue">Select All</label>
</p>
</td>
{foreach from=$difficulty_levels item=diff_levels key=dkey}
<input type="hidden" name="diff_levels[{$dkey}]" value="{$diff_levels}">
<td width="22%" align="center"><strong>{$diff_levels}</strong></td>
{/foreach}
</tr>
{foreach from=$subject_topic_data.topics item=topic_diff_level_data}
<input type="hidden" name="subject_{$subject_topic_data.subject_id}_topics[]" value="{$topic_diff_level_data.topic_id}">
<tr>
<td valign="middle">
<p class="custom-form">
<input type="checkbox" class="custom-check" name="{$sheet_type}_topics_{$subject_topic_data.subject_id}[]" id="{$sheet_type}_{$subject_topic_data.subject_id}_{$topic_diff_level_data.topic_id}" value="{$topic_diff_level_data.topic_id}" onChange="enable_topic_ques('{$sheet_type}', '{$subject_topic_data.subject_id}', '{$topic_diff_level_data.topic_id}'); return false;">
<label>{$topic_diff_level_data.topic_name}</label>
<!-- <input type="hidden" name="topic_names[{$topic_diff_level_data.topic_id}]" value="{$topic_diff_level_data.topic_name}"> -->
</p>
</td>
{foreach from=$topic_diff_level_data.difficulty_level item=diff_level key=key_diff_lvl}
<td valign="middle">
{if $site_id=='ENTPRM'}<em>Total {$diff_level.question_count}</em>{/if}
<input type="text" name="{$sheet_type}_{$subject_topic_data.subject_id}_{$topic_diff_level_data.topic_id}_{$key_diff_lvl}" id="{$sheet_type}_{$subject_topic_data.subject_id}_{$topic_diff_level_data.topic_id}_{$key_diff_lvl}" maxlength="3" class="mini" value="{$diff_level.added_no_questions}" disabled="disabled">
<input type="hidden" name="{$sheet_type}_available_questions_{$subject_topic_data.subject_id}_{$topic_diff_level_data.topic_id}_{$key_diff_lvl}" value="{$diff_level.question_count}">
</td>
{/foreach}
</tr>
{/foreach}
</tbody>
</table>
</div>
<p class="center">Done Cancel</p>
</div>
</div>
</div>
{/foreach}
{/if}
The main code you need to consider is as below from the above code:
<input type="text" name="{$sheet_type}_{$subject_topic_data.subject_id}_{$topic_diff_level_data.topic_id}_{$key_diff_lvl}" id="{$sheet_type}_{$subject_topic_data.subject_id}_{$topic_diff_level_data.topic_id}_{$key_diff_lvl}" maxlength="3" class="mini" value="{$diff_level.added_no_questions}" disabled="disabled">
Can you tell me how the disabled="disabled" attribute gets vanishes after page load and if there is any way to apply to it, please tell me. Thanks in advance.

$('.mini').prop("disabled", true);
$('.mini').prop("disabled", false);
try this

Conflict using multiple forms javascript

I'm using two different forms - one is to retrieve radio button, another is as submission form. Problem is, I cannot use both the form actions at a time.
<table id="newImageTable" border="1" style="position:absolute; ">
<?
while($row=mysql_fetch_array($image_query)) {?>
<form name="radioForm">
<tr>
<td><img border="0" src="<?=$row['image_path']?>" /></td>
<td>
<input type="radio" name="imageRadio" id="<?=$row['image_name']?>" />
</td>
</tr>
</form>
<?}?>
<tr>
<td width="60%">
<!--<input type="file" id="image" /><input type="button" id="imagePathButton" value="Upload Image" onclick="uploadImagePath()" />-->
<form name="submitForm" action="http://128.233.104.33/passimagemodels/uploadServer.php?dbname=<? echo $dbname ?>" method="post" target="foo" enctype="multipart/form-data"
onSubmit="window.open('', 'foo', 'width=200,height=200,status=yes,resizable=yes,scrollbars=yes')">
Upload New Image: <input name="myfile" type="file" id="imageBox" />
<input type="submit" name="submitBtn" value="Upload" onclick=""/>
</form></td>
<td width="10%">
<input type="button" value="Use selected image" id="useImageButton" onclick="post_value();"/>
</td></tr>
</table>
javascript code:
function getRadioValue() {
for (index=0; index < document.radioForm.imageRadio.length; index++) {
if (document.radioForm.imageRadio[index].checked) {
var radioValue = document.radioForm.imageRadio[index].id;
return radioValue;
}
}
}
function post_value(){
alert('im');
var selected_Image = getRadioValue();
if (selected_Image == null){
alert('Please Select an Image');
}
else{
window.opener.document.getElementById(imageId).value = selected_Image;
self.close();
}
}
Here if I put the radioForm outside the table, getRadioValue function works fine but Upload button does not submit the submitForm. And if I surround one <tr> with radioForm scenario is just vice-versa. Are there any restrictions on nesting forms?

Scroll to the bottom if you want to skip the explanation, and get to the solution.
You're creating multiple forms with the same name. document.radioForm will only refer to the first form, which is probably not desired. To solve it, place the form tags outside the while loop.
See below for a simplified overview of your problem, without loss of generality):
Current situation (document.radioForm.imageRadio.length = 1):
<!-- Only the first form is selected by JS. All of the others are ignored-->
<form name="radioForm"><input type="radio" name="imageRadio" id="imag1" /></form>
<form name="radioForm"><input type="radio" name="imageRadio" id="imag2" /></form>
<form name="radioForm"><input type="radio" name="imageRadio" id="imag3" /></form>
<!-- Et cetera -->
Desired situation (<form> placed outside the while loop):
<form name="radioForm">
<input type="radio" name="imageRadio" id="image1" />
<input type="radio" name="imageRadio" id="image2" />
<input type="radio" name="imageRadio" id="image3" />
</form>
Fixed code
One form is enough to meet your wishes. The form will only be submitted when you click at the <input type="submit" .. /> button. Since the name attribute of your previous "second" form is obsolete, I've omitted it without breaking any code.
<form name="radioForm"
action="http://128.233.104.33/passimagemodels/uploadServer.php?dbname=<? echo $dbname ?>"
method="post" target="foo" enctype="multipart/form-data">
<table id="newImageTable" border="1" style="position:absolute;">
<?
while($row=mysql_fetch_array($image_query)) {?>
<tr>
<td><img border="0" src="<?=$row['image_path']?>" /></td>
<td>
<input type="radio" name="imageRadio" id="<?=$row['image_name']?>" />
</td>
</tr>
<?}?>
<tr>
<td width="60%">
<!--<input type="file" id="image" /><input type="button" id="imagePathButton" value="Upload Image" onclick="uploadImagePath()" />-->
<input type="submit" name="submitBtn" value="Upload" />
</td>
<td width="10%">
<input type="button" value="Use selected image" id="useImageButton" onclick="post_value();" />
</td>
</tr>
</table>
</form>
I have adjusted only one thing: The onsubmit event handler have been removed. It serves no purpose, and would be a huge annoyance to the user.

nesting form isn't allowed, check How do you overcome the html form nesting limitation?
the result unpreditable but you can use Javascript to workaround with it.
Checkout jQuery serialize example. see how it extract values, and then submit from via DOM.
http://api.jquery.com/serialize/
In your case, file upload form should be the parent, because you need its encode type to work. Or you can optionally iframe it, using the above technique to reorganize data.