Data dissapeared in input field values - javascript

I have a Html table inside .cshtml file.But when i hardcoded values it shows me but when i get those values from the foreach loop,table dissapeared
<script>
var nTable = "";
$(document).ready(function () {
#foreach (var item in Model.NewsModel)
{
#:nTable = "<tr class=\"news1\">";
#:nTable += "<td>";
#:nTable += "<input id=\"test1\" value="+ item.NewsNo +" class=\"form-control\" />";// This is not working / item.NewsNo has a value.
#:nTable += "<input id=\"test1\" value=\"Helloooo\" class=\"form-control\" />";// This is working with hardcoded values
#:nTable += "<td>";
#:nTable += "</tr>";
}
document.getElementById('GlobeNews').innerHTML = nTable;
});
</script>
<div class="panel panel-success">
<div class="panel-heading"><u><b>Total News</b></u></div>
<div class="panel-body utiDIv">
<table id="GlobeNews">
<tr></tr>
</table>
</div>
</div>

Seems like you have null values in NewsNo. I suggest you better way to do this is to include loop in html instead of adding to js code. Try this:
<div class="panel panel-success">
<div class="panel-heading"><u><b>Total News</b></u></div>
<div class="panel-body utiDIv">
<table id="GlobeNews">
#foreach (var item in Model.NewsModel)
{
<tr class="news1">
<td>
<input id="test1" value="#item.NewsNo" class="form-control" />
<input id="test1" value="Helloooo" class="form-control" />
<td>
</tr>
}
</table>
</div>

Related

Posting Inputs to PHP inside HTML <table>

I'm pretty new to HTML, PHP, and javascript. So I'm developing a simple music search website. So basically after entering a keyword, my web will show up a list of possible results, then clicking on a result will redirect me to a music player and start playing the music.
This is my HTML file:
<div class="container">
<div class="row">
<h1>Search Results</h1>
<!-- BEGIN SEARCH RESULT -->
<div class="col-md-12">
<div class="grid search">
<div class="grid-body">
<div class="row">
<div class="table-responsive">
<table class="table table-hover">
<tbody id="mytable">
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
And I will insert the search results into the table with javascript
<script>
window.onload= function () {
var results = <?php echo json_encode($result_array); ?>;
for (i=1;i<=results.length;i++){
document.getElementById("mytable").innerHTML += '<tr action="get_music.php" method="post"><td class= "number text-center">' + i +'</td> <td><input type="hidden" name="name" value='+results[i-1][0]+'/></td></tr>' ;
}
}
</sript>
My problem is, whenever I click on a result (or a table row specifically), I won't be redirected to get_music.php and I also can't post my inputs into the get_music.php file.
I know my code is a mess, but please help! Thanks!
Update - Added some pictures just to describe it clearer!
Photo Link
So, I've searched a keyword and got more than one results, I wish to pass 3 values ( name, album, artist ) from the result I clicked on to get_music.php
Update - It works! Thanks to Agustin Mita for the help!
So this is my final code
<script>
window.onload= function() {
getDataPHP();
}
function getDataPHP(){
var results = <?php echo json_encode($result_array); ?>;
renderView(results);
}
function renderView(results){
var data = "";
for (i=0;i<results.length;i++){
data += '<tr>';
data += '<td class="number text-center">' + (i+1) + '</td>';
data += '<td class="image" align="left"><img src="https://discussions.apple.com/content/attachment/881765040" alt=""></td>';
data += '<td class="product"><strong>'+results[i][0]+'</strong><br>'+results[i][1]+'<br>'+results[i][2]+'</td>';
data += '<td><form method="post" action="get_music.php">';
data += '<input type="hidden" value="'+results[i][0]+'" name="name" />';
data += '<input type="hidden" value="'+results[i][1]+'" name="album" />';
data += '<input type="hidden" value="'+results[i][2]+'" name="author" />';
data += '<br><input style="float: right;" type="submit" value="Play music" />';
data += '</form></td>';
data += '</tr>';
}
document.getElementById('mytable').innerHTML += data;
}
</script>
You can add form tag before table tag:
<form id="myForm" method="POST" action="get_music.php">
<table class="table table-hover">
<tbody id="mytable">
</tbody>
</table>
</form>
On javascript can submit with onclick:
data += '<td onclick="document.getElementById(\'myForm\').submit()" > Any text</td>';
Example:
Nota: On php pageyou can retrieve data with $_POST function
window.onload= function() {
getData();
}
function getData(){
fetch("https://jsonplaceholder.typicode.com/todos").then(response => response.json()).then((json) => renderView(json));
}
function getDataPHP(){
//var results = <?php echo json_encode($result_array); ?>;
//renderView(results);
}
function renderView(results){
var data = "";
for (i=0;i<results.length;i++){
data += '<tr>';
data += '<td onclick="document.getElementById(\'myForm\').submit()" class= "number text-center">';
data += results[i].id;
data += '</td>';
data += '<td><input type="submit" value="Go '+results[i].id+'" name="'+results[i].id+'" /></td>';
data += '</tr>';
}
document.getElementById('mytable').innerHTML += data;
}
td {
cursor: pointer;
}
<div class="container">
<div class="row">
<h1 id="titleBig">Search Results</h1>
<!-- BEGIN SEARCH RESULT -->
<div class="col-md-12">
<div class="grid search">
<div class="grid-body">
<div class="row">
<div class="table-responsive">
<form id="myForm" method="POST" action="get_music.php">
<table class="table table-hover">
<tbody id="mytable">
</tbody>
</table>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Update
#KuanyuChwn You need a 3 inputs fields with different name attribute and submit button
data += '<tr>';
data += '<td onclick="document.getElementById(\'myForm\').submit()" class= "number text-center">';
data += results[i].id;
data += '</td>';
data += '<td><input type="text" value="'+results[i].id+'" name="valueA" /></td>';
data += '<td><input type="text" value="'+results[i].title+'" name="valueB" /></td>';
data += '<td><input type="text" value="'+results[i].title+'-valueC'+'" name="valueC" /></td>';
data += '<td><input type="submit" value="Send" /></td>';
data += '</tr>';
If you want to post it, it must be inside the form tag. You should also add a submit button. If you want the line to go when you click it, you can use the get method with the a tag. If you want to click on the line and perform post, I suggest you look at ajax.

how to clear unwanted td showing in a table

guys i have a stupid question here.
i'm using bootstrap.min.js for showing a data into a table.
but it has an unwanted td showing at my last row. how i can clear that unwanted td that showing at the last row in my table?
anyone have any answer for my question? please help me for solve this.
this my code for showing the data or created the table
script type="text/javascript">
$(document).ready(function(){
$('#submit-file').on("click",function(e){
e.preventDefault();
$('#files').parse({
config: {
delimiter: "",
complete: displayHTMLTable,
},
before: function(file, inputElem)
{
//console.log("Parsing file...", file);
},
error: function(err, file)
{
//console.log("ERROR:", err, file);
},
complete: function()
{
//console.log("Done with all files");
}
});
});
function displayHTMLTable(results){
var table = "<table class='table table-bordered'>";
var data = results.data;
for(i=0;i<data.length;i++){
table+= "<tr>";
var row = data[i];
var cells = row.join(",").split(",");
for(j=0;j<cells.length;j++){
table+= "<td>";
table+= cells[j];
table+= "</td>";
}
table+= "</tr>";
}
table+= "</table>";
$("#parsed_csv_list").html(table);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/4.1.2/papaparse.js"></script>
<div class="container" style="padding:5px 5px; margin-left:5px">
<div class="well" style="width:70%">
<div class="row">
<form class="form-inline">
<div class="form-group">
<label for="files">Upload File Data :</label>
<input type="file" id="files" class="form-control" accept=".csv" required />
</div>
<div class="form-group">
<button type="submit" id="submit-file" class="btn btn-primary">Upload File</button>
</div>
</form>
</div>
<div class="row">
<div id="parsed_csv_list" class="panel-body table-responsive" style="width:800px">
</div>
</div>
</div>
<div id="footer"></div>
</div>
and this is the unwanted tr and td showing
this that i have got when i check it with inspect element
i try editing my code to this
function displayHTMLTable(results){
var table = "<table class='table table-bordered'>";
var data = results.data;
for(i=0;i<=data.length;i++){
if(data[i].trim().length > 1)// check added here
{
table+= "<tr>";
var row = data[i];
var cells = row.join(",").split(",");
for(j=0;j<cells.length;j++){
table+= "<td>";
table+= cells[j];
table+= "</td>";
}
table+= "</tr>";
}
else {
}
}
table+= "</table>";
$("#parsed_csv_list").html(table);
}
});
You will need to check the number of columns you have:
function displayHTMLTable(results){
var table = "<table class='table table-bordered'>";
var data = results.data;
var size = -1;
for(i=0;i<data.length;i++){
var row = data[i];
var cells = row.join(",").split(",");
if (cells.length < size) continue;
else if (cells.length > size) size = cells.length;
table+= "<tr>";
for(j=0;j<cells.length;j++){
table+= "<td>";
table+= cells[j];
table+= "</td>";
}
table+= "</tr>";
}
table+= "</table>";
$("#parsed_csv_list").html(table);
}

update is not happening in table when the row is added(bug)

I am creating a table where I am fetching the data from a json file and giving user the option of add, update and delete along with search option. Every thing is working fine in the table. But it has some bugs like when I add the row in the table and click on update button it doesn't update whereas rest of the update button is working. Other bug is when I search in the search input, I can only search if I enter item name, but I want search item name, place or time. Below is my code so far.
HTML:
<form>
<div class="form-group">
<div class="row">
<div class="col-md-3 col-sm-3 col-xs-3">
<input type="text" class="form-control input_style" id="item" placeholder="Enter the Item name">
</div>
<div class="col-md-3 col-sm-3 col-xs-3">
<input type="text" class="form-control input_style" id="place" placeholder="Enter the Place">
</div>
<div class="col-md-3 col-sm-3 col-xs-3">
<input type="text" class="form-control input_style" id="time" placeholder="Enter the time">
</div>
<div class="col-md-3 col-sm-3 col-xs-3">
<button type="button" class="btn btn-primary add-row" value="Add Row"> Add Row</button>
</div>
</div>
</div>
</form>
<table class="table" id="myTable">
<thead>
<tr class="header">
<th>Item</th>
<th>Place</th>
<th>Time</th>
<th>Action</th>
</tr>
</thead>
<tbody></tbody>
</table>
JS File:
$(document).ready(function () {
var tr;
//Display table data
for (var i = 0; i < json.length; i++) {
tr = $('<tr/>');
tr.append("<td contenteditable='true'>" + json[i].Item + "</td>");
tr.append("<td contenteditable='false'>" + json[i].Place + "</td>");
tr.append("<td contenteditable='false'>" + json[i].Time + "</td>");
tr.append("<td><div class='edit_button' data-value='Update' value='Update' class='edit'>Update</div> | <span class='delete' value='Delete' onclick='delete_row(this)'>Delete</span></td>");
$('.table').append(tr);
}
//add row in table
$(".add-row").click(function(){
var item = $("#item").val();
var place = $("#place").val();
var time = $("#time").val();
var markup = "<tr><td>" + item + "</td><td>" + place + "</td><td>" + time + "</td><td><div class='edit_button' value='Update' class='edit'>Update </div> | <span class='delete' value='Delete' onclick='delete_row(this)'>Delete</span></td></tr>";
if($('#item, #place, #time').val() == ''){
alert('Input can not be left blank');
}else{
$("table tbody").append(markup);
$('#item, #place, #time').closest('form').find("input[type=text]").val("");
}
});
//edit row in the table
$('.edit_button').click(function () {
var $this = $(this);
var tds = $this.closest('tr').find('td').filter(function() {
return $(this).find('.edit_button').length === 0;
});
if ($this.data('value') === 'Update') {
$this.data('value', 'Save');
$this.html('Save');
tds.prop('contenteditable', true);
tds.focus();
} else {
$this.data('value', 'Update');
$this.html('Update');
tds.prop('contenteditable', false);
}
});
});
Please can anyone tell me where Iam going wrong?

Generate table code( not table) based on input value (HTML, JavaScript)

I want to generate table code based on two input fields. One input field contains number of rows and another one contains number of columns. There is one more button called submit on click of that I need to generate table code for no of rows / no of columns.
Suppose If gave rows 3 and column 2, then it should generate code like
<table>
<tbody>
<tr>
<td> </td><td> </td>
</tr>
<tr>
<td> </td><td> </td>
</tr>
<tr>
<td> </td><td> </td>
</tr>
</tbody>
</table>
This code I need to save into one string.
Please help me how to do this. I am beginner for JavaScript.
need to save into one string.
var form = document.getElementsByTagName("form")[0];
form["button"].onclick = function() {
var html = "<table><tbody>";
for (var i = 0; i < form["rows"].value; i++) {
html += "<tr>";
for (var j = 0; j < form["columns"].value; j++) {
html += "<td> </td>"
}
html += "</tr>"
}
html += "</tbody></table>";
console.log(html)
}
<form>
<input type="number" min="1" max="10" name="rows" required />rows
<input type="number" min="1" max="10" name="columns" required />columns
<input type="button" name="button" value="create table" />
</form>
I made an example for you here:
JS-FIDDLE
function buildTable() {
var rows = document.getElementById("setRows").value;
var cols = document.getElementById("setCols").value;
var table = "<table>";
table += "<tbody>";
for (i=0;i<rows;i++) {
table += "<tr>";
for (j=0;j<cols;j++) {
table += "<td> </td>";
}
table += "</tr>";
}
table += "</tbody>";
table += "</table>";
document.getElementById("tableHolder").innerHTML=table;
}

how to post data from php while loop with ajax

I am trying to create a friend button like fb.I have a while loop that echos the name and some other data i need to save into a table in my database for every user request seperatly.My problem is that i don't know how to pass them with ajax because i have same id on textboxes buttons.I tried to pass them with same ids but this passed 3 times the same data or only one of them.So i tried to use the id="something$row[id]" to define every textbox and button but i don't know how to trigger the jquery function and post them with ajax.a picture of what i am trying
my php file
echo "<div class='col-xs-12'>
<div class='row fixed-table'>
<div class='table-content'>
<table class='table table-striped text-muted' id='mytable'>
<tbody>";
while($row = mysqli_fetch_array($requests)){
$username=("SELECT * FROM users WHERE user_id=".$row['patient']);
$found=mysqli_fetch_array(mysqli_query($sql_link,$username));
echo "<tr>
<td class='text-center'>
<p>
$found[username]
<p>
</td>
<td class='text-center'>";
$patient_username=$found['username'];
$patient_id=$found['user_id'];
echo"<input type='text' id='patient_id$row[id]' class='hidden' value='$patient_id'>
<input type='text' id='patient_username$row[id]' class='hidden' value='$patient_username'>
<input type='text' id='doctor_id$row[id]' class='hidden' value='$doctor_id'>
<input type='text' id='doctor_fname$row[id]' class='hidden' value='$doctor_fname'>
<input type='button' id='accept_btn$row[id]' class='btn btn-primary' value='Accept'>
</td>
</tr>";
}
echo "</tbody>
</table>
</div>
</div>
</div>";
my js file
function decision(){
var patient_id = $('#patient_id').val();
var patient_username = $('#patient_username').val();
var doctor_id = $('#doctor_id').val();
var doctor_fname = $('#doctor_fname').val();
$.ajax({
type:"post",
url:"php/add.php",
data: {"patient_id": patient_id,"patient_username": patient_username,"doctor_id": doctor_id,"doctor_fname": doctor_fname},
success:function(data){
$("#decision").html(data);
}
});
$('#accept_btn').click(function(){
decision();
});
This is easy with JQUERY as you dont even need to know the IDs within the form. However first you will need to wrap all your inputs into a form and assign an ID to the form and a name to each input.
var data = $("#myForm").serialize();
$.post('myPHPFILEURL.php', data,function(retData){
//CODE THAT HANDLES SERVER RESPONSE
});
echo "<div class='col-xs-12'>
<div class='row fixed-table'>
<div class='table-content'>
<form id='myForm'>
<table class='table table-striped text-muted' id='mytable'>
<tbody>";
while($row = mysqli_fetch_array($requests)){
$username=("SELECT * FROM users WHERE user_id=".$row['patient']);
$found=mysqli_fetch_array(mysqli_query($sql_link,$username));
echo "<tr>
<td class='text-center'>
<p>
$found[username]
<p>
</td>
<td class='text-center'>";
$patient_username=$found['username'];
$patient_id=$found['user_id'];
echo"<input type='text' name='patient_id$row[id]' id='patient_id$row[id]' class='hidden' value='$patient_id'>
<input type='text' id='patient_username$row[id]' name='patient_username$row[id]' class='hidden' value='$patient_username'>
<input type='text' id='doctor_id$row[id]' name='doctor_id$row[id]' class='hidden' value='$doctor_id'>
<input type='text' id='doctor_fname$row[id]' name='doctor_fname$row[id]' class='hidden' value='$doctor_fname'>
<input type='button' id='accept_btn$row[id]' name='accept_btn$row[id]' class='btn btn-primary' value='Accept'>
</td>
</tr>";
}
echo "</tbody>
</table>
</form>
</div>
</div>
</div>";
Simply select your form and serialize() the data then pass the new serialized string into the data argument of your AJAX function.
You could add data-id="userID"
attribute to your input instead of having it in the ID
<input type='button' id='accept_btn$row[id]' class='btn btn-primary' value='Accept'>
So your input would look something like this:
<input type='button' id='accept_btn' data-id='$row[id]' class='btn btn-primary' value='Accept'>
And then in you jquery/javascript code use like this:
$("#accept_btn").on("click", function(){
var userID = $(this).data("id"); //this will get the value from data-id from the clicked button
//rest of your code here...
});
You can also add this for all of your input fields and retrieve data from them as well.
$("#patient_username").data("id")
Hope this helps. You can check this sample jsfiddle https://jsfiddle.net/Lz3k1he1/
I finally made it. It took me hours but it works and i wanto thank you all for your help and specially Igor Ilic.
The solution
php
<tbody>";
while($row = mysqli_fetch_array($requests)){
$username=("SELECT * FROM users WHERE user_id=".$row['patient']);
$found=mysqli_fetch_array(mysqli_query($sql_link,$username));
echo "<tr>
<td class='text-center'>
<p>
$found[username]
<p>
</td>
<td class='text-center'>";
$patient_username=$found['username'];
$patient_id=$found['user_id'];
echo"<buuton id='accept_btn$row[id]' class='btn btn-primary' data-patient_id='$patient_id' data-patient_username='$patient_username' data-doctor_id='$doctor_id' data-doctor_fname='$doctor_fname'
href='#' onclick='decision(this);'>
Accept</button>
</td>
</tr>";
}
echo "</tbody>
and js
function decision(p){
var patient_id = $(p).data('patient_id');
var patient_username = $(p).data('patient_username');
var doctor_id = $(p).data('doctor_id')
var doctor_fname = $(p).data('doctor_fname');
$.ajax({
type:"post",
url:"php/add.php",
data: {"patient_id": patient_id,"patient_username": patient_username,"doctor_id": doctor_id,"doctor_fname": doctor_fname},
success:function(data){
$("#decision").html(data);
}
});
}

Categories