Trying to get input.className to work

I have a table that uses addRow() function. The className I'm trying to use is bootstrap v2.0 'input-small' but nothing shows when I add a row. I can input but I don't see the glowing border or anything for that matter. Also on the last cell I have a select dropdown menu that uses foreach function. When I add a row the dropdown menu is empty. How can I fix these two items?

Thanks

<script>
        function addRow() {
          var tbl = document.getElementById('addbeds');
          var lastRow = tbl.rows.length;
          var row = tbl.insertRow(lastRow);
          
          var cell1 = row.insertCell(0);
          var input = document.createElement('input');
          input.name = 'bedroom' + lastRow;
          input.className = 'input-small';
          input.id = 'bedroom' + lastRow;
          cell1.appendChild(input);
          
          var cell2 = row.insertCell(1);
          input = document.createElement('input');
          input.name = 'comment' + lastRow;
          input.className = 'input-medium';
          input.id = 'comment' + lastRow;
          cell2.appendChild(input);
		  
	  var cell3 = row.insertCell(2);
          input = document.createElement('select');
          input.name = 'bedsize' + lastRow;
	  input.className = 'input-medium' + lastRow;
          input.id = 'bedsize' + lastRow;
          cell3.appendChild(input);
        }
        
        function delRow() {
          var tbl = document.getElementById('addbeds');
          var lastRow = tbl.rows.length;
          if (lastRow > 2) tbl.deleteRow(lastRow - 1);
        }
    </script>

Open in new window


<table class="table" id="addbeds">
   <tbody>
     <tr>
       <td>
         <p align="center">Bedroom</p></td>
       <td>
         <p align="center">Comment</p></td>
       <td></td>
    </tr>
     <tr>
       <td>
        <input type='text' id='bedroom' name='bedroom' title='Please give this bedroom a name. ie Bedroom 1' maxlength='65,535' placeholder="Name this bedroom" class='input-small' value='<?php echo (isset($data['bedroom'])) ? $data['bedroom'] : '' ?>' data-toggle="tooltip" data-placement="right" /> </td>
       <td>
        <input type='text' id='comment' name='comment' title='Comment on this bedroom' maxlength='65,535' placeholder="What to find on this room." class='input-medium' value='<?php echo (isset($data['comment'])) ? $data['comment'] : '' ?>' data-toggle="tooltip" data-placement="right" /></td>
        <td>
          <select name="bedsize" title="bedsize" class="input-medium">
            <?php foreach($bedsize as $key => $value): ?>
            <option value="<?php echo $key ?>"<?php echo (isset($data['bedsize']) && $data['bedsize'] == $key) ? ' selected="selected"' : null ;?>><?php echo $value ?></option>
            <?php endforeach ?>
          </select></td>
    </tr>
  </tbody>
</table>
<table style="WIDTH: 100%; BORDER-COLLAPSE: collapse">
     <tr>
       <td>
       <p align="center">
          <input type="button" value="Add Row" onclick="addRow()" />
          <input type="button" value="Subtract Row" onclick="delRow()" />
       </p>
       </td>
    </tr>
</table>

Open in new window

Genesis5150Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Genesis5150Author Commented:
Does anyone know?
0
James RodgersWeb Applications DeveloperCommented:
this is what is showing up iun the added row

 <tr>
          <td><input name="bedroom2" class="input-small" id="bedroom2"></td>
          <td><input name="comment2" class="input-medium" id="comment2"></td>
          <td><select name="bedsize2" class="input-medium2" id="bedsize2">
            </select></td>
        </tr>

Open in new window


the only thing i see as an issue is you are appending the row number to the calss, giving you and invalid class name

try cahnging this block

var cell3 = row.insertCell(2);
          input = document.createElement('select');
          input.name = 'bedsize' + lastRow;
	  input.className = 'input-medium' + lastRow;
          input.id = 'bedsize' + lastRow;
          cell3.appendChild(input);

Open in new window

to this
var cell3 = row.insertCell(2);
          input = document.createElement('select');
          input.name = 'bedsize' + lastRow;
	  input.className = 'input-medium';
          input.id = 'bedsize' + lastRow;
          cell3.appendChild(input);

Open in new window



as for the select, give the full HTML from the page source so it can be tested

What browser are you using?
0
Julian HansenCommented:
First: There does not seem to be a specific use of the input id's therefore I would recommend removing them - it allows for an easier cloning of the row without having to worry about unique ID's.

Second: I would use form arrays (seeing as you are using PHP) to return your values i.e.
name="bedroom[]"
name="comment[]"
name="bedsize[]"

Open in new window


When these are returned to your processing script PHP will convert them into arrays that you can then simply iterate through.

Third: Consider using JQuery for doing the add and remove. The following two functions using JQuery achieve the same thing
function addRow()
{
  // CLONE THE FIRST ROW. CHOOSE FIRST BECAUSE IT
  // GIVES US THE GREATEST OPTIONS IF WE WANT TO 
  // ADD AN id ATTRIBUTE.

  var nr = $('#addbeds tr:first-child').clone();

  // APPEND IT TO THE TABLE BODY
  $('#addbeds tbody').append(nr);
}

function delRow() {
  // REMOVE THE LAST ROW - BUT ONLY IF 
  // THERE IS MORE THAN 2 ROWS - NEED
  // TO TAKE COGNIZANCE OF TITLE ROW
  if ($('#addbeds tr').length > 2) {
    $('#addbeds tr:last-child').remove();
  }
}

Open in new window


Full listing here
<?php
// FOR TESTING
$bedsize = array (
  'Single','Double','Queen','King','Helipad'
);
?>
<!doctype html>
<html>
<head>
<title>Test</title>
<link href="css/bootstrap.css" rel="stylesheet" />
</head>
<body>
<table class="table" id="addbeds">
  <tbody>
    <tr>
      <td>
        <p align="center">Bedroom</p>
      </td>
      <td>
        <p align="center">Comment</p>
      </td>
      <td></td>
    </tr>
    <tr>
      <td>
        <input type='text' name='bedroom[]' title='Please give this bedroom a name. ie Bedroom 1' maxlength='65,535' placeholder="Name this bedroom" class='input-small' value='<?php echo (isset($data['bedroom'])) ? $data['bedroom'] : '' ?>' data-toggle="tooltip" data-placement="right" />
      </td>
      <td>
        <input type='text' name='comment[]' title='Comment on this bedroom' maxlength='65,535' placeholder="What to find on this room." class='input-medium' value='<?php echo (isset($data['comment'])) ? $data['comment'] : '' ?>' data-toggle="tooltip" data-placement="right" />
      </td>
      <td>
        <select name="bedsize[]" title="bedsize" class="input-medium">
<?php foreach($bedsize as $key => $value): ?>
          <option value="<?php echo $key ?>"<?php echo (isset($data['bedsize']) && $data['bedsize'] == $key) ? ' selected="selected"' : null ;?>><?php echo $value ?></option>
<?php endforeach ?>
        </select>
      </td>
    </tr>
  </tbody>
</table>
<table style="WIDTH: 100%; BORDER-COLLAPSE: collapse">
  <tr>
    <td>
      <p align="center">
        <input type="button" value="Add Row" onclick="addRow()" />
        <input type="button" value="Subtract Row" onclick="delRow()" />
      </p>
    </td>
  </tr>
</table>
<script src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
function addRow()
{
  var nr = $('#addbeds tr:last-child').clone();
  $('#addbeds tbody').append(nr);
}

function delRow() {
console.log($('#addbeds tbody tr').length);
  if ($('#addbeds tr').length > 2) {
	$('#addbeds tr:last-child').remove();
  }
}
</script>
</body>
</html>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Genesis5150Author Commented:
Jquery worked for me.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.