Click here to Skip to main content
15,354,171 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
I'm trying to convert my table to html5. Before I tried converting it, my button that would make the row editable, worked fine. Now the edit button flashes to "save", and the table doesn't stay contenteditable. I'm changing the format so I can prepare to do a post of the form/table data with php like the link at the bottom.

This is the function that does the contenteditable change with the button press:

JavaScript
<script type="text/javascript">
        //Used to make row editable or not
        $(document).ready(function () {
      $('.editbtn').click(function () {
          var currentTD = $(this).parents('tr').find('td');
          if ($(this).html() === 'Edit') {                  
              $.each(currentTD, function () {
                  $(this).prop('contenteditable', true);
              });
          } else {
             $.each(currentTD, function () {
                  $(this).prop('contenteditable', false);
              });
          }

          $(this).html($(this).html() === 'Edit' ? 'Save' : 'Edit');
          if ($(this).html() === 'Save')
          {
 
          }
 
      });

  });
    </script>


In the body, this is the table code:

HTML
 <h1> Visual Evaluation Entry Table </h1&>

     <form >
        <table id="bigTable" border="1">


    	<tr>
            
            <th id="edit" class="col3">Edit/Save</th><th id="bandY" class="col3">Bands @263mm Y</th><th id="bandM" class="col3">Bands @263mm M</th><th id="bandC" class="col3">Bands @263mm C</th><th id="bandK" class="col3">Bands @263mm K</th><th id="Comments" class="col3">Comments</th></tr>
    
  
        <tr>
            <td><button class="editbtn" type="button">Edit</button></td>  
            <td name="bandY" contenteditable="false"></td><!-- //Row 0 Column 1-->
            <td name="bandM" contenteditable="false"></td><!--//Row 0 Column 2-->
            <td name="bandC" contenteditable="false"></td><!--//Row 0 Column 3-->
            <td name="bandK" contenteditable="false"></td><!--//Row 0 Column 4-->
            <td name="comment" contenteditable="false"></td><!--//Row 0 Column 4-->
        </tr>
   
 
</table>
     <form>


Previously, the table looked like this and the edit button worked fine:

HTML
<div class="form">
        <p>
            <h1> Visual Evaluation Entry Table </h1>
        </p>
    </div>
<table id="bigTable" border="1">
    <thead>
    	<tr>
            <th id="edit" class="col3">Edit/Save</th><th id="bandY" class="col3">Bands @263mm Y</th><th id="bandM" class="col3">Bands @263mm M</th><th id="bandC" class="col3">Bands @263mm C</th><th id="bandK" class="col3">Bands @263mm K</th><th id="Comments" class="col3">Comments</th></tr>
    </thead>
    <tbody>
        <tr>
            <td><button class="editbtn" type=button">Edit</td>;  
            <td name="bandY" contenteditable="false"></td> <!-- //Row 0 Column 1-->
            <td name="bandM" contenteditable="false"></td>  <!--//Row 0 Column 2-->
            <td name="bandC" contenteditable="false"></td>  <!--//Row 0 Column 3-->
            <td name="bandK" contenteditable="false"></td>  <!--//Row 0 Column 4-->
            <td name="comment" contenteditable="false"></td>  <!--//Row 0 Column 4-->
        </tr>
    </tbody>
 
</table>


I want to use the post example below with html5 and php:

http://tangledindesign.com/how-to-create-a-contact-form-using-html5-css3-and-php/#comment-1428428110[^]

So my question is, why did the edit button stop working and what do I need to do to fix it?
Posted
Updated 10-Jun-14 10:26am
v3

1 solution

Add a type='button' in here:
<button class="editbtn" type="button">
   
Comments
MichCl 10-Jun-14 15:42pm
   
I added type button, but the button turns to edit and then back to save right away on it's own when I have the form tag in there. Without the form tag, it's fine. Any ideas? I need form in there to do a php post. I removed the p tags too.
MichCl 10-Jun-14 15:58pm
   
It's working now. Thanks!
MichCl 10-Jun-14 16:26pm
   
It's weird that it doesn't validate (doesn't like name in td tag), but code is working.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900