Skip to main content
Question

Build a table in a form where user can input values and save them.

  • November 7, 2017
  • 0 replies
  • 254 views

I need to create a table in a form where a logged in user can enter data ,similar to grid editing. If I am not wrong the values in the table must be stored in different fields. Image is shown below. Can anyone advise me on how to accomplish this task? 

Well, this will depend on how many rows there are on this report.  Are there just two "rows" of 5 field each, or was this just a partial screen shot and there are many more "rows".

  • Registered
  • November 7, 2017
Normally QuickBase associates one form control with one field. But in your case you basically want five "Likert Scale" radio buttons for one answer field.

Using the IOL technique you can transform each answer text field (shown below for fid=7) into five radio buttons with this simple script:
var markup ='
<input type="radio" name="_fid_7" value="SD">Strongly Disagree
<input type="radio" name="_fid_7" value="D">Disagree
<input type="radio" name="_fid_7" value="N">Neither Agree Nor Disagree
<input type="radio" name="_fid_7" value="A">Agree
<input type="radio" name="_fid_7" value="SA">Strongly Agree
';
$("#_fid_7").replaceWith(markup);
The resulting form section will look like this although it still represents only one text field:


If you want to arrange your answer using a table or with some other attractive style you just modify the markup to appropriately surround the five radio buttons.

Likert Scale
https://en.wikipedia.org/wiki/Likert_scale

I suggest a native approach.

Make 5 fields each with 5 choices ranging from Strongly Disagree to Strongly Agree.

Set the form properties to show as radio buttons.

Put the fields on the from across the page as opposed to down the page.

The layout will be a bit different to the paper form, but arguably better.

  • Author
  • Registered
  • November 7, 2017
I appreciate the feedback, I have implemented the native approach, just looking to show the information in a tabular format. 

You mean you really do want ton display the results in that format fro your post even though it will take up 5 times the space?

You would need to make 25 checkbox fields,each one calculating to true or false, one for each cell of the tabular format.

Post back if you need help with the formula.

The first cell would be

[Builds Rapport ....] = "Strongly Agree

  • Registered
  • November 7, 2017
Don't compromise - you can get precisely what you want using script. See screenshots of data entry and result - code manually applied from the console is at the bottom.







var markup ='
<style>
  .QBU_table {
    border-collapse: collapse;
    border-spacing: 0;
  }
  .QBU_table td, .QBU_table th {
    border: 1px solid black;
    text-align: center
  }
</style>
<table class=QBU_table>
  <tr>
    <th></th>
    <th>Strongly Disagree</th>
    <th>Disagree</th>
    <th>Neither Agree Nor Disagree</th>
    <th>Agree</th>
    <th>Strongly Agree</th>
  </tr>
  <tr>
    <td>Lorem Ipsum?</td>
    <td><input type="radio" name="_fid_7" value="SD"></td>
    <td><input type="radio" name="_fid_7" value="D"></td>
    <td><input type="radio" name="_fid_7" value="N"></td>
    <td><input type="radio" name="_fid_7" value="A"></td>
    <td><input type="radio" name="_fid_7" value="SA"></td>
  </tr>
  <tr>
    <td>Bacon Ipsum?</td>
    <td><input type="radio" name="_fid_8" value="SD"></td>
    <td><input type="radio" name="_fid_8" value="D"></td>
    <td><input type="radio" name="_fid_8" value="N"></td>
    <td><input type="radio" name="_fid_8" value="A"></td>
    <td><input type="radio" name="_fid_8" value="SA"></td>
  </tr>
  <tr>
    <td>Cat Ipsum?</td>
    <td><input type="radio" name="_fid_9" value="SD"></td>
    <td><input type="radio" name="_fid_9" value="D"></td>
    <td><input type="radio" name="_fid_9" value="N"></td>
    <td><input type="radio" name="_fid_9" value="A"></td>
    <td><input type="radio" name="_fid_9" value="SA"></td>
  </tr>
  <tr>
    <td>Cupcake Ipsum?</td>
    <td><input type="radio" name="_fid_10" value="SD"></td>
    <td><input type="radio" name="_fid_10" value="D"></td>
    <td><input type="radio" name="_fid_10" value="N"></td>
    <td><input type="radio" name="_fid_10" value="A"></td>
    <td><input type="radio" name="_fid_10" value="SA"></td>
  </tr>
  <tr>
    <td>Hodor Ipsum?</td>
    <td><input type="radio" name="_fid_11" value="SD"></td>
    <td><input type="radio" name="_fid_11" value="D"></td>
    <td><input type="radio" name="_fid_11" value="N"></td>
    <td><input type="radio" name="_fid_11" value="A"></td>
    <td><input type="radio" name="_fid_11" value="SA"></td>
  </tr>
</table>
';
$("#tdf_1").replaceWith(markup);

  • Registered
  • November 7, 2017
BTW, I didn't even write the HTML for the table - rather I used a table generator:

https://www.tablesgenerator.com/

  • Registered
  • November 7, 2017
At the risk of lengthening this thread further, both options have pro's and cons. I am curious though what might be driving the need for the tabular view...

  • Author
  • Registered
  • November 7, 2017
I agree, that's what it is. Don;t want to complicate or change the resulting layout from the previous one. Thank you for all your suggestions and replies. It really helps building an app with such an active community. 

HELLO CAN SOMEONE WALK ME THROUGH THIS.i AM NOT SURE HOW SHOULD I DO THIS