Adding textFiled to row in function

Question

akkbkht 14 Newbie Poster

11 Years Ago

Hello.
I have a user defined function in start of an Html page. I want to add textfields in the innerHtml. Please guide me what should I do. When I enter string in the innerHtml on line 10 and 11, It show "New" in the cells. BUt i am adding textfileds instead of "New", Nothing happens.

Here is the code

<html>
<head>
<script>
function displayResult()
{
var table=document.getElementById("myTable");
var row=table.insertRow(0);
var cell1=row.insertCell(0);
var cell2=row.insertCell(1);
cell1.innerHTML="New";
cell2.innerHTML="New";
}
</script>
</head>

Need Guidance.

Regards.

Aamir Karim.

php

3 Contributors
10 Replies
184 Views
2 Days Discussion Span
Latest Post 11 Years Ago Latest Post by akkbkht

paulkd 59 Newbie Poster

11 Years Ago

This HTML looks like Click Here

<!DOCTYPE html>
<html>
<head>
<script>
function displayResult()
{
var table=document.getElementById("myTable");
var row=table.insertRow(0);
var cell1=row.insertCell(0);
var cell2=row.insertCell(1);
cell1.innerHTML='<input name="myinput" type="input">';
cell2.innerHTML="New";
}
</script>
</head>
<body>

<table id="myTable" border="1">
  <tr>
    <td>cell 1</td>
    <td>cell 2</td>
  </tr>
  <tr>
    <td>cell 3</td>
    <td>cell 4</td>
  </tr>
</table>
<br>
<button type="button" onclick="displayResult()">Insert new row</button>

</body>
</html>

Code updated with an input in the table cell

Edited 11 Years Ago by paulkd

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

akkbkht 14 Newbie Poster · Answer 1 · 2013-04-19T13:18:55+00:00

Thanks @paulkd
Ok I am making mistake line 11 parenthesis. Let me check this...

akkbkht 14 Newbie Poster · Answer 2 · 2013-04-19T13:25:54+00:00

Thanks alot dear.
Yes it works. The Correct code is here.

<script>
function displayResult()
{
var table=document.getElementById("myTable");
var row=table.insertRow(5);
var cell1=row.insertCell(0);
var cell2=row.insertCell(1);
var cell3=row.insertCell(2);
var cell4=row.insertCell(3);
cell1.innerHTML='<input name="myinput" type="input">';
cell2.innerHTML="2";
cell3.innerHTML="3";
cell4.innerHTML="4";
}
</script>

<table id="myTable" width="666" border="1" align="center" bgcolor="#FFFFCC">
            <tr>
              <td width="312"><strong>Medicine</strong></td>
              <td width="80"><strong>Quantity</strong></td>
              <td width="65"><strong>Rate</strong></td>
              <td width="74"><strong>Total</strong></td>
            </tr>
            <tr>
              <td><label>
                <select name="select">
                </select>
              </label></td>
              <td><label>
                <input type="text" name="textfield" />
              </label></td>
              <td><input type="text" name="textfield5" /></td>
              <td><input type="text" name="textfield9" /></td>
            </tr>
            <tr>
              <td><label>
                <select name="select2">
                </select>
              </label></td>
              <td><input type="text" name="textfield2" /></td>
              <td><input type="text" name="textfield6" /></td>
              <td><input type="text" name="textfield10" /></td>
            </tr>
            <tr>
              <td><label>
                <select name="select3">
                </select>
              </label></td>
              <td><input type="text" name="textfield3" /></td>
              <td><input type="text" name="textfield7" /></td>
              <td><input type="text" name="textfield11" /></td>
            </tr>
            <tr>
              <td><label>
                <select name="select4" size="1">
                </select>
              </label></td>
              <td><input type="text" name="textfield4" /></td>
              <td><input type="text" name="textfield8" /></td>
              <td><input type="text" name="textfield12" /></td>
            </tr>
          </table>

          <button type="button" onclick="displayResult()">Insert new row</button>
          <p align="center">
            <label>
            <input type="submit" name="Submit2" value="Submit" />
            </label>

You solved my issue less then 5 minutes.

That's great.

IIM 163 Master Poster · Answer 3 · 2013-04-19T13:35:37+00:00

cell1.innerHTML='<input name="myinput" type="input">';

the type should be "text" not input.Though it is working because default type is text.Correct it.

Alternative of above example,you can do it by using createElement and then set attributes of that element.

var table=document.getElementById("myTable");
var row=table.insertRow(0);
var cell1=row.insertCell(0);
var cell2=row.insertCell(1);
var element = document.createElement("input");

element.setAttribute("type", "text");
element.setAttribute("value", "text");
element.setAttribute("name", "text");
cell1.appendChild(element);
cell2.innerHTML="New";

paulkd 59 Newbie Poster · Answer 4 · 2013-04-19T14:05:38+00:00

paulkd 59 Newbie Poster

11 Years Ago

akkbkht 14 Newbie Poster · Answer 5 · 2013-04-20T06:53:14+00:00

akkbkht 14 Newbie Poster

11 Years Ago

Hmmm.
Thanks for correction.

akkbkht 14 Newbie Poster · Answer 6 · 2013-04-21T12:11:13+00:00

One more question.
How dropdown list will be added in <script></script> like textfilesds while the options of the dropdown list is stored in MySQL tale med_t?

Thanks

IIM 163 Master Poster · Answer 7 · 2013-04-21T15:14:38+00:00

you can create element for select then add options by creating option element and assigning value and text and id and class if required.
i have added comments in code to understand the code worling

var table=document.getElementById("myTable");
var row=table.insertRow(5);
var cell1=row.insertCell(0);
var cell2=row.insertCell(1);
var cell3=row.insertCell(2);
var cell4=row.insertCell(3);
var element = document.createElement("input");
element.setAttribute("type", "text");
element.setAttribute("value", "text");
element.setAttribute("name", "text");
cell1.appendChild(element);

//changes frm here
var element1 = document.createElement("select");//create select element
element1.setAttribute("name", "text");
var option = document.createElement("option");//create option element
 option.text = "name";//option text attribute
    option.value = "name";//option value attribute
     try {
        element1.add(option, null); //Standard 
    }catch(error) {
        element1.add(option); // IE only
    }
    cell2.appendChild(element1);//append select to cell

//till here
cell3.innerHTML="3";
cell4.innerHTML="4";

akkbkht 14 Newbie Poster · Answer 8 · 2013-04-22T07:34:06+00:00

Thanks @IIM.
Its working fine. But i don't know where I am making a mistake. Its not fetching data from MySQL table.
I have tried it in diffirent ways but no success. Have a look on code I have done so far.

var element = document.createElement("select");//create select element
    element.setAttribute("name", "text");
    var option = document.createElement("option");//create option element
    option.text = "name1";//option text attribute
    option.value= '<?php
        //Server= localhost, Username= root, pasword = "there is no password" and db name = bsc_db.
    mysql_connect('localhost', 'root', '') or die('Connection could not be established');
    mysql_select_db('bsc_db') or die('Database is not present');
    $q = mysql_query("SELECT * FROM doctor_t");
    $options = '';
    while($r = mysql_fetch_array($q))
    {
    $options .= '<option value="'.$r['id'].'">'.$r['dname'].'</option>';
    }
    ?>'
    //option.value = "name";//option value attribute
    try 
    {
    element.add(option, null); //Standard
    }catch(error) {
    element.add(option); // IE only
    }
cell1.appendChild(element);

I am trying that when user click on Insert New Row button so new should be added and in first cell, A dropdown menu should be displayed and the values in that drop down menu is fetching from my SQL table "doctor_t" and the field is "dname".
Everything is going fine but its not fetching the values from the above said table.

regards.

akkbkht 14 Newbie Poster · Answer 9 · 2013-04-22T10:28:33+00:00

When doing like this,

var element = document.createElement("select");//create select element
    element.setAttribute("name", "text");
    var option = document.createElement("option");//create option element
    <?php
                     //Server= localhost, Username= root, pasword = "there is no password" and db name = bsc_db.
    mysql_connect('localhost', 'root', '') or die('Connection could not be established');
    mysql_select_db('bsc_db') or die('Database is not present');
    $q = mysql_query("SELECT * FROM doctor_t");
    $options = '';
    while($r = mysql_fetch_array($q))
    {
    $options .= '<option value="'.$r['id'].'">'.$r['dname'].'</option>';
    }
    ?>
    option.text = '<?php echo $options;?>';//option text attribute
    option.value= "text";
        //option.value = "name";//option value attribute
    try 
    {
    element.add(option, null); //Standard
    }catch(error) {
    element.add(option); // IE only
    }
cell1.appendChild(element);

I get the result like one that is attached to this post. Made changes at line 16.