On button click, validate that atleast a row must be moved to a custom table with Jquery

Go To StackoverFlow.com

3

I am using MVC3, EF Model first on my project.

I have a view with 4 tables and then I have a CustomPickedTable, whenever a user click on a row inside those 4 tables that row moves to CustomPickedTable Table this is the code for it:

<script type="text/javascript">
        $(function () {
            $('.questionsForSubjectType tbody tr').click(function () {
                var origin = $(this).closest('table').attr('id');
                $(this)
        .appendTo('#CustomPickedTable tbody')
        .click({ origin: origin }, function (evt) {
            $(this).appendTo('#' + evt.data.origin);
                });
            });
        });
</script>

What I am looking for is some kind of validation that when a user clicks on the submit button there should be a rule that make sures that atleast one row in each of those 4 tables must be moved to CustomPickedTable if not it should not post the form but give the user an errormessage.

This is one of my 4 tables, these get generated by a foreach loop with razor in MVC

    <div class="questionsForSubjectType" id="questionsForSubjectType_1">              
              <table class="box-style2" id="RandomID_c5b9bc7a-2a51-4fe5-bd3a-75b4b3934ade">
                <thead>
                  <tr>
                    <th>
                    Kompetens
                    </th>
                  </tr>
                </thead>
                  <tbody>
                   <tr>
                     <td data-question-id="16">Har konsulten F&#246;rm&#229;ga att l&#228;ra sig nytt?</td>   
                   </tr>
                  </tbody>
                  <tbody>
                   <tr>
                     <td data-question-id="17">Har konsulten r&#228;tt kompetens?</td>   
                   </tr>
                  </tbody>
               </table>
    </div>

My custom table:

<table id="CustomPickedTable" class="box-style2">
<thead><tr><th>Choosen Questions</th></tr></thead>
<tbody>
</tbody>
</table>

Thanks in advance!

2012-04-04 07:59
by Obsivus
Could you post HTML also? I Would use a class or data-value on the sets, lets call them A,B,C,D and then on submit, i would make sure there is one of each in the CustomPickedTable - Marco Johannesen 2012-04-04 08:04
So you basically would like to make sure that upon submitting, #CustomPickedTable have to have at least one row in the body, correct - Andreas Wong 2012-04-04 08:15
no I would like upon submitting that atleast one row in each of those 4 table must be moved to #CustomPickedTable, which makes the user to choose 1 row in each of those 4 table to be able to submit the form. User should not be able to skip a tabl - Obsivus 2012-04-04 08:20
Ok understood, are the users also able to remove selected row from #CustomPickedTable - Andreas Wong 2012-04-04 10:23


1

There might be a better way.

But i would add a data-attribute or some class to each of the TD's you can move, and on submit check for each required value.

Created an example here: http://jsfiddle.net/y35Qf/1/

Basicly i added an attribute called data-row, and each table has its own value, on submit i require each of these values to be in the CustomPickedTable - if not i alert that something is missing - else alert success.

You could easily add so you alert which rows are misssing or any other validation you would want.

Is this what you wanted?

2012-04-04 08:41
by Marco Johannesen
Great! But there is just one problem, Since my tables get generated by foreach loops and inside that foreach loops it generates rows. I need to find a way to be able to give data-row a same number for each table - Obsivus 2012-04-04 08:59
Could you post the foreach loop? I would think its just creating an Int I which counts the loops(where you create the TR) and inserts the loopCounter inside : - Marco Johannesen 2012-04-04 10:58
I Figured it out, the problem was nothing to do with my question but since the tables were grouped by a entity CoreValue and the questions were associated with CoreValue, I just declared data-value to my corevalueIDs and it solved my problem, Thanks for the answer it works perfectly - Obsivus 2012-04-04 11:10
No problem, glad you solved it : - Marco Johannesen 2012-04-04 11:19
Ads