SitePoint Sponsor

User Tag List

Results 1 to 20 of 20
  1. #1
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    874
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to add row accodingly?

    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.

  2. #2
    SitePoint Evangelist
    Join Date
    Jun 2007
    Location
    North Yorkshire, UK
    Posts
    483
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You could try something like

    Code JavaScript:
    <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>

  3. #3
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    874
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  4. #4
    SitePoint Evangelist
    Join Date
    Jun 2007
    Location
    North Yorkshire, UK
    Posts
    483
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  5. #5
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    874
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  6. #6
    SitePoint Evangelist
    Join Date
    Jun 2007
    Location
    North Yorkshire, UK
    Posts
    483
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  7. #7
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    874
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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">

    <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><button class="remove" onclick="return removeRow();">Remove</button>
    </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><button class="remove" onclick="return removeRow();">Remove</button>
    </tr>
    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);
    }
    }
    }

  8. #8
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    874
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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;
    }

  9. #9
    SitePoint Evangelist
    Join Date
    Jun 2007
    Location
    North Yorkshire, UK
    Posts
    483
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Have you thought of using jQuery?

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

  10. #10
    SitePoint Member
    Join Date
    Jun 2011
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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...

  11. #11
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    874
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

    Quote Originally Posted by PhilipToop View Post
    Have you thought of using jQuery?

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

  12. #12
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,705
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by newtomysql View Post
    So you idea is move to jquery and do not do it via javascript. Actually what is the danger with javascript by itself?
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  13. #13
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    874
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  14. #14
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,705
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by newtomysql View Post
    Since jquery is based on JavaScript how it can work on across
    Browser but why not JavaScript itself?
    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.

    Quote Originally Posted by newtomysql View Post
    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?
    Those are user interface (ergo the UI) features and improvements that the are added on to the standard jQuery library.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  15. #15
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    874
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  16. #16
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,705
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by newtomysql View Post
    Thank you for the details. Anyway
    That is something I cannot help you with right now, but hopefully someone else will be able to.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  17. #17
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    874
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dear Paul,
    Ok thank you. Is it something very tough or is not available via jquery yet?

  18. #18
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,705
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by newtomysql View Post
    Dear Paul,
    Ok thank you. Is it something very tough or is not available via jquery yet?
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  19. #19
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    874
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dear Paul,
    No worries once you are fine will welcome your input.

  20. #20
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,705
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by newtomysql View Post
    No worries once you are fine will welcome your input.
    Do not wait for me. Someone else can help you with this if they are willing.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •