How to add row accodingly?

newtomysql · July 3, 2011, 11:01am

Dear All,
Here is my link http://183.78.169.53/tm/layout.php. I have two button “Add Single” and “Add Double”.What I want is that when I press the “Add Single” a new row add with the single drop down list and when I press “Add Double” I would like to have the row with two drop down list. How to achieve this ? In the begining must I hide both the rows is it? Now I have the relevant function ready for both buttons but I do not know how to add the rows accordingly. Finally I also want to make sure all the dropdown list values selected is different.

PhilipToop · July 4, 2011, 2:05pm

You could try something like

<html>
<head>
<link rel="stylesheet" type="text/css" href="my1.css" media="all">
<script type="text/javascript">
	var index = 0;
function addRow(type)
{
	var tbody = document.getElementById("layoutbody");
	var tr = document.getElementById("id" + type);
    var trcopy = tr.cloneNode(true);
	index++;
    trcopy.id="row" + index;
	var sels = trcopy.getElementsByTagName("select");
    for (var i = 0; i < sels.length; i++) {
    	var sel = sels[i];
    	sel.name = "sel" + i + "_" + index;
    }
    tbody.appendChild(trcopy);
    return false;
}
</script>
<style>
            .dynatable {
                border: solid 1px #000;
                border-collapse: collapse;
            }
            .dynatable th,
            .dynatable td {
                background-color:#ccc;
                font-size:14px;
                font-color:#ffffff;
                font-family:Calibri;
            }
            .dynatable .prototype {

            }
            label.error
            {
            	display: block;
            	color:red;
            }

            td { vertical-align: top; }
            #iddouble, #idsingle {
            	display: none;
            	visibility: hidden;
            }

        </style>
</head>
<body>

<div >
	<h2 class="form_desicription"> Tyre Code </h2>
</div>

<table>
<tr>
<form action="#" method="post" name="form1" id=form1 onSubmit="return validateForm();">
<td width=700 valign="top">

	<table class="dynatable" id="layout">
		<thead>
      <tr>
          <th>In</th>
          <th>Out</th>
          <th><button class="add" onclick="return addRow('single');">Single</button><button class="add" onclick="return addRow('double');">Double</button></th>
      </tr>
    </thead>
    <tbody id="layoutbody">
         <tr id="idsingle">

	         		<td><select><option value=''>-Select Code-</option><option value=1>F1L</option><option value=2>F1R</option><option value=7>R1L</option><option value=8>R1R</option><option value=9>R2L</option><option value=10>R2R</option><option value=11>R3L</option><option value=12>R3R</option></select>
	         	<td>
	         	</td>
	         	<td>
	         	</td>
	         	<td>
	         	</td>
         </tr>
         <tr id="iddouble">
	         	<td>
	         		<select><option value=''>-Select Code-</option><option value=3>FI1L</option><option value=4>FI1R</option><option value=5>FO1L</option><option value=6>FO1R</option><option value=13>RI1L</option><option value=14>RI1R</option><option value=15>RO1L</option><option value=16>RO1R</option><option value=17>RI2L</option><option value=18>RI2R</option><option value=19>RO2L</option><option value=20>RO2R</option></select>	         	</td>
	         	<td>
	         		<select><option value=''>-Select Code-</option><option value=3>FI1L</option><option value=4>FI1R</option><option value=5>FO1L</option><option value=6>FO1R</option><option value=13>RI1L</option><option value=14>RI1R</option><option value=15>RO1L</option><option value=16>RO1R</option><option value=17>RI2L</option><option value=18>RI2R</option><option value=19>RO2L</option><option value=20>RO2R</option></select>	         	</td>
	         	<td>
	         	</td>
         </tr>
    </tbody>
  </table>
</td>
</form>
</tr>
</table>



</body>
</html>

newtomysql · July 4, 2011, 4:29pm

Dear Philip,
Great it works fine. I dont quite understand what is this doing?

for (var i = 0; i < sels.length; i++) {
var sel = sels[i];
sel.name = “sel” + i + “_” + index;
}

In addition I am planning to add a remove button so that I can remove the relevant rows accordingly and also I would like to validate before submit that none of the dropdown list have similar values selected.

PhilipToop · July 5, 2011, 7:25am

The <select> that are in id=“idsingle” and id=“iddouble” do not have a name. That is when the form is sent to the server they are not included in the data stream. This loop is adding a name to each of the select elements found in the table row created. The name is of the format selp_n where p is 1 or 2 (2 in the case of double) and n is the row number.

newtomysql · July 5, 2011, 10:38am

Dear Philip,
Ok I am clear. How to go about with the validation? I would like to validate that all the dropdown list are selected and one of dropdown list from any of the rows are similar.

PhilipToop · July 5, 2011, 10:50am

You have already started the process with your

onSubmit=“return validateForm();”

Now you need to write the code for that function.

If you have problems whilst doing that then post a specific problem to this site.

newtomysql · July 5, 2011, 5:38pm

Dear Philip,
I have added this two function. For the first function I want to remove the rows. But it tell me the window.event is undefined? Secondly validateForm I am trying to first read the dropdownlist name but none is appearing either? What I plan after reading the name check the value and give an error message. Can you help me check what is wrong here? Below is my changes with the remove button.

<tr id=“idsingle”>

               &lt;td&gt;&lt;select&gt;&lt;option value=''&gt;-Select Code-&lt;/option&gt;&lt;option value=1&gt;F1L&lt;/option&gt;&lt;option value=2&gt;F1R&lt;/option&gt;&lt;option value=7&gt;R1L&lt;/option&gt;&lt;option value=8&gt;R1R&lt;/option&gt;&lt;option value=9&gt;R2L&lt;/option&gt;&lt;option value=10&gt;R2R&lt;/option&gt;&lt;option value=11&gt;R3L&lt;/option&gt;&lt;option value=12&gt;R3R&lt;/option&gt;&lt;/select&gt;
            &lt;td&gt;
            &lt;/td&gt;
            
            &lt;td&gt;&lt;button class="remove" onclick="return removeRow();"&gt;Remove&lt;/button&gt; 
     &lt;/tr&gt;
     &lt;tr id="iddouble"&gt;
            &lt;td&gt;
               &lt;select&gt;&lt;option value=''&gt;-Select Code-&lt;/option&gt;&lt;option value=3&gt;FI1L&lt;/option&gt;&lt;option value=4&gt;FI1R&lt;/option&gt;&lt;option value=5&gt;FO1L&lt;/option&gt;&lt;option value=6&gt;FO1R&lt;/option&gt;&lt;option value=13&gt;RI1L&lt;/option&gt;&lt;option value=14&gt;RI1R&lt;/option&gt;&lt;option value=15&gt;RO1L&lt;/option&gt;&lt;option value=16&gt;RO1R&lt;/option&gt;&lt;option value=17&gt;RI2L&lt;/option&gt;&lt;option value=18&gt;RI2R&lt;/option&gt;&lt;option value=19&gt;RO2L&lt;/option&gt;&lt;option value=20&gt;RO2R&lt;/option&gt;&lt;/select&gt;              &lt;/td&gt;
            &lt;td&gt;
               &lt;select&gt;&lt;option value=''&gt;-Select Code-&lt;/option&gt;&lt;option value=3&gt;FI1L&lt;/option&gt;&lt;option value=4&gt;FI1R&lt;/option&gt;&lt;option value=5&gt;FO1L&lt;/option&gt;&lt;option value=6&gt;FO1R&lt;/option&gt;&lt;option value=13&gt;RI1L&lt;/option&gt;&lt;option value=14&gt;RI1R&lt;/option&gt;&lt;option value=15&gt;RO1L&lt;/option&gt;&lt;option value=16&gt;RO1R&lt;/option&gt;&lt;option value=17&gt;RI2L&lt;/option&gt;&lt;option value=18&gt;RI2R&lt;/option&gt;&lt;option value=19&gt;RO2L&lt;/option&gt;&lt;option value=20&gt;RO2R&lt;/option&gt;&lt;/select&gt;              &lt;/td&gt;
            
            &lt;td&gt;&lt;button class="remove" onclick="return removeRow();"&gt;Remove&lt;/button&gt; 
     &lt;/tr&gt;

function removeRow()
{
var current = window.event.srcElement;
//here we will delete the line
while ( (current = current.parentElement) && current.tagName !=“TR”);
current.parentElement.removeChild(current);

return false;

}
function validateForm()
{
alert(“Validate”);
for(i=0; i<document.form1.elements.length; i++)
{
//alert("Name is : "+document.form1.elements.length);
if(document.form1.elements[i].type==“select”)
{
alert("Name is : "+document.form1.elements[i].name);
}
}
}

newtomysql · July 5, 2011, 6:20pm

Dear Philip,
For the delete I tried this now. But the problem from the remove button I dont know to send the exact rowIndex.

function removeRow(elem)
{
var m = elem.rowIndex;
alert("M : "+m);
var tbody = document.getElementById(“layoutbody”);
tbody.deleteRow(m);

return false;

}

PhilipToop · July 6, 2011, 6:55am

Have you thought of using jQuery?

It is very powerful allowing you to do complicated operations simply and protect yourself against browser differences.

christajoe · July 6, 2011, 7:06am

u can also use JBuilder to help you understand where actually u are facing problem…And as per philp Jquery is really useful or else try using SQL yog for MySql interface…

newtomysql · July 6, 2011, 10:38am

Dear Philip,
I will try working it on jquery. If you have related examples for me to work on please do let me know ya. So you idea is move to jquery and do not do it via javascript. Actually what is the danger with javascript by itself?

Paul_Wilkins · July 6, 2011, 11:02am

To head off any potential misunderstanding, jQuery is a code library written with JavaScript. The jQuery library provides cross-browser methods that help to simplify some aspects of scripting. They allow you to focus on writing your code, so that you don’t have to deal with solving as many browser compatibility problems.

jQuery is just one of many code libraries that exist out there, such as Prototype, Dojo, YUI, and MooTools. They are all written in JavaScript, and they all use JavaScript to help piece things together.

newtomysql · July 6, 2011, 11:51am

Dear Paul,
Since jquery is based on JavaScript how it can work on across
Browser but why not JavaScript itself? The main library of jquery is found at jquery.com right?
Then how about the plugin,jquery ui what are these how they work with jquery?

Paul_Wilkins · July 6, 2011, 11:59am

Because the jQuery library contains lots of code that checks for known compatibility issues, and does what it can to fix those problems.

So instead of you having to bust your brain trying to work out why it works here and not there, they have already put their best minds to the problem and fixed them for you.

Those are user interface (ergo the UI) features and improvements that the are added on to the standard jQuery library.

newtomysql · July 6, 2011, 11:46pm

Dear Paul,
Thank you for the details. Anyway I have manage to port over my codes to full jquery. The link is here http://183.78.169.53/tm/layout2.php. My only problem now is that after I have add either both the single or double drop down list I want to finally validate that neither of the dropdownlist have the same value. How to do that ? I would also in the begining would like to hide all the rows. Then I will clone from either the single or double prototype.

Paul_Wilkins · July 6, 2011, 11:48pm

That is something I cannot help you with right now, but hopefully someone else will be able to.

newtomysql · July 7, 2011, 12:19am

Dear Paul,
Ok thank you. Is it something very tough or is not available via jquery yet?

Paul_Wilkins · July 7, 2011, 12:24am

To prevent any mistaken notions, it has nothing to do with any of that. Instead it is due to the situation that I am personally in at the moment.

newtomysql · July 7, 2011, 2:08am

Dear Paul,
No worries once you are fine will welcome your input.

Paul_Wilkins · July 7, 2011, 2:13am

Do not wait for me. Someone else can help you with this if they are willing.