Advertisement
If you have a new account but are having problems posting or verifying your account, please email us on hello@boards.ie for help. Thanks :)
Hello all! Please ensure that you are posting a new thread or question in the appropriate forum. The Feedback forum is overwhelmed with questions that are having to be moved elsewhere. If you need help to verify your account contact hello@boards.ie

Edit a table and submit data when finished?

Options
  • 08-07-2011 2:59pm
    #1
    murphaph
    Registered Users Posts: 19,019 ✭✭✭✭


    Hi all,
    I have a task to implement a small table into a booking page. It should be a grid like a spreadsheet 5 x 4 "cells" (so quite small) in which all elements are editable within the page.

    When the user is finished editing the table/grid, they should be able to hit a submit button and the contents should be extracted and sent to the server.

    My task is basically to make the HTML/CSS/JS bit. It's a bit messy because then the page will be sent to a java programmer who will build it into the main project (using stripes).

    I thought I had a solution with the jeditable plugin for jQuery, which allows selected HTML to be edited in browser, but then it tries to submit each and every change to a server. This is not the desired behaviour.

    Anyone got any links/pointers or thoughts on how to implement "my bit" of this task? At least the bit about building an editable tabular layout.

    Cheers!


Comments

  • Options
    #2
    stevenmu
    Moderators, Society & Culture Moderators Posts: 9,689 Mod ✭✭✭✭stevenmu


    You should really check with the programmer you have to hand it off to, what they expect and need from it will be key to how you implement it.

    Other than that I'd suggest just a plain form, bog standard html table with your 5x4 cells, and a bog standard input box in each, and a standard button which doesn't need to do anything.

    Not very glamourous or exciting, but if you have to hand it off to another programmer it's best to keep it simple, anything fancy you do is only complicating it from their point of view.

    You could maybe add some javascript validation of the inputs, use CSS to make it look shiny etc, but keep in mind if you're going to put those in seperate files that the programmer will then have to worry about integrating those into an existing system as well.


  • Options
    #3
    murphaph
    Registered Users Posts: 19,019 ✭✭✭✭murphaph


    Thanks Steven.

    Have spoken with him and will be basically doing exactly as you've outlined except for one thing...the whole table has to be updatable with a single click on a single submit button. That request came from the client so can't be changed. Should still be straightforward though, no?

    :)


  • Options
    #4
    HellFireClub
    Closed Accounts Posts: 3,912 ✭✭✭HellFireClub


    I had to do this a while back, I found using an ASP.NET GridView or a DetailsView with a DataSource bound to my table to be the handiest way to go at it, you'd pick the basics up in a weekend I think if you are at all handy with ASP.NET or even HTML, and a lot of it is drag and drop stuff. Also, dead easy to update rows, cells, etc...


  • Options
    #5
    Ali J
    Closed Accounts Posts: 12 ✭Ali J


    I don't really even get what you're talking about. I think I do. I don't even get what is supposed to be so hard about an editable table. Here is some simple code anyway:

    [HTML]
    <html>
    <head>
    <style type="text/css">
    <!--Some css here; who said you would need an external file?-->
    </style>
    </head>
    <body>
    <form action="placetosend.php" method="post">
    <table border="1">
    <tr>
    <td>
    <b>Heading 1</b>
    </td>
    <td>
    <b>Heading 2</b>
    </td>
    <td>
    <b>Heading 3</b>
    </td>
    <td>
    <b>Heading 4</b>
    </td>
    </tr>
    <tr>
    <td>
    <input type=text size=15 name=a1>
    </td>
    <td>
    <input type=text size=15 name=a2>
    </td>
    <td>
    <input type=text size=15 name=a3>
    </td>
    <td>
    <input type=text size=15 name=a4>
    </td>
    </tr>
    <td>
    <input type=text size=15 name=b1>
    </td>
    <td>
    <input type=text size=15 name=b2>
    </td>
    <td>
    <input type=text size=15 name=b3>
    </td>
    <td>
    <input type=text size=15 name=b4>
    </td>
    </tr>
    <td>
    <input type=text size=15 name=c1>
    </td>
    <td>
    <input type=text size=15 name=c2>
    </td>
    <td>
    <input type=text size=15 name=c3>
    </td>
    <td>
    <input type=text size=15 name=c4>
    </td>
    </tr>
    <td>
    <input type=text size=15 name=d1>
    </td>
    <td>
    <input type=text size=15 name=d2>
    </td>
    <td>
    <input type=text size=15 name=d3>
    </td>
    <td>
    <input type=text size=15 name=d4>
    </td>
    </tr>
    </table>
    <br/>
    <input type=submit value=Submit>
    </form>
    </body>
    <html>
    [/HTML]That is off the top of my head. And if you wanted the field to contain a value on page load just do something like, "<input type=text size=15 value=" <?PHP echo "TheValueYouWant"; ?> " />". I'm sorry if I didn't understand you. But, tell me what you need if this isn't it and I should be able to fix the problem for you.


Advertisement