How can I control the input contents in table rows added with jquery?

ErnieAlex · May 4, 2021, 1:38am

Well, I showed you how to pop-up a warning. Then, you wanted red borders and I showed you how to do that. Now you want A-B-C-D, but, only show us the A part. Perhaps it is our language barrier, but, I do not understand what you really need. And, each time, you show us different items. Inputs, selects…

Confused…

Adem · May 4, 2021, 11:43am

Sorry, yes language is a problem
Trying to tell the same thing from the beginning
Let me try to explain short short

Each line refers to an apartment block
I name the blocks alphabetically (A,B,C,D as)
The line codes of block A are fixed
Other block rows are added with Jquery

No problem so far
Before sending the user form, I need to check whether according to the rules
I need to tell which block is unregulated by popup window.
This popup is supposed to be with javascript alert()
This " data-id =“A” " tag is for maybe I can use it to figure out which block is wrong

name and number of your suggestions name = “name [1]” Adding the PHP process was easy for me and helped me to learn that which belongs to the block, thank you

So where am I having trouble

name="total_number_of_flats[1]"
name="total_number_of_flats[2]"
name="total_number_of_flats[3]"
name="total_number_of_flats[4]"

Which is blank or false
total_number_of_flats is 1? 2? 3? 4?
Tags such as ID, DATA, CLASS can be added to inputs and select options

Thank You

Demo: https://jsfiddle.net/ademgenc/q4fkwpe0/27/

ErnieAlex · May 4, 2021, 2:24pm

Well, you just have to loop thru them using the correct indexing. I will create an example. I will use the JSfiddle code but will post it here.

ErnieAlex · May 4, 2021, 7:29pm

Well, first, how do you know how many rows are placed for the user to enter?
If a user has 3 floors and another user has 8 floors, you need to add that to the page.

Next, you can not use separate “IF” clauses for each row of data since you do not know how many
there will be as example 3 floors or 8 floors. Therefore, you need to do this in a loop instead. And, you
would need to loop thru the correct number of floors.

But, for this example, we will use four rows, which would be four floors. You can use the “filter” function to load all the empty inputs into a variable. Just a few lines to do that. Then, you can loop thru them to create a better message. You could send one generic message stating that there are missing entries. And, if you add in the code to place red borders around them, it would work nicely. If there are a large number of rows of data, listing all the empty fields would be hard to display. For users, simple is best!

Here is one possible example that might work well for you.

<!doctype html>
<html>
    <head>
        <title>Adem</title>
    </head>
<body>

<form name="myForm" id="myForm" action="" method="POST">

<input type=text name="floor[1]" size="5" data-info="A">
<input type=text name="total_number_of_flats[1]" size="5" data-info="A">
<input type=text name="number_of_subscribers[1]" size="5" data-info="A">
<select size="1" name="shaft[1]" data-info="A">
<option value="">Select Shafts</option>
<option value="1">1 Shaft</option>
<option value="2">2 Shaft</option>
</select>
<input type=text name="panel_floors[1]" size="5" data-info="A">
<input type=text name="number_of_cables[1]" size="5" data-info="A">
<select size="1" name="fiber_optic[1]" data-info="A">
<option value="">Select Points</option>
<option value="1">1 Points</option>
<option value="2">2 Points</option>
<option value="3">3 Points</option>
<option value="4">4 Points</option>
<option value="5">5 Points</option>
<option value="6">6 Points</option>
<option value="7">7 Points</option>
<option value="8">8 Points</option>
<option value="9">9 Points</option>
<option value="10">10 Points</option>
</select>

<br>

<input type=text name="floor[2]" size="5" data-info="B">
<input type=text name="total_number_of_flats[2]" size="5" data-info="B">
<input type=text name="number_of_subscribers[2]" size="5" data-info="B">
<select size="1" name="shaft[2]" data-info="B">
<option value="">Select Shafts</option>
<option value="1">1 Shaft</option>
<option value="2">2 Shaft</option>
</select>
<input type=text name="panel_floors[2]" size="5" data-info="B">
<input type=text name="number_of_cables[2]" size="5" data-info="B">
<select size="1" name="fiber_optic[2]" data-info="B">
<option value="">Select Points</option>
<option value="1">1 Points</option>
<option value="2">2 Points</option>
<option value="3">3 Points</option>
<option value="4">4 Points</option>
<option value="5">5 Points</option>
<option value="6">6 Points</option>
<option value="7">7 Points</option>
<option value="8">8 Points</option>
<option value="9">9 Points</option>
<option value="10">10 Points</option>
</select>

<br>

<input type=text name="floor[3]" size="5" data-info="C">
<input type=text name="total_number_of_flats[3]" size="5" data-info="C">
<input type=text name="number_of_subscribers[3]" size="5" data-info="C">
<select size="1" name="shaft[3]" data-info="C">
<option value="">Select Shafts</option>
<option value="1">1 Shaft</option>
<option value="2">2 Shaft</option>
</select>
<input type=text name="panel_floors[3]" size="5" data-info="C">
<input type=text name="number_of_cables[3]" size="5" data-info="C">
<select size="1" name="fiber_optic[3]" data-info="C">
<option value="">Select Points</option>
<option value="1">1 Points</option>
<option value="2">2 Points</option>
<option value="3">3 Points</option>
<option value="4">4 Points</option>
<option value="5">5 Points</option>
<option value="6">6 Points</option>
<option value="7">7 Points</option>
<option value="8">8 Points</option>
<option value="9">9 Points</option>
<option value="10">10 Points</option>
</select>

<br>

<input type=text name="floor[4]" size="5" data-info="D">
<input type=text name="total_number_of_flats[4]" size="5" data-info="D">
<input type=text name="number_of_subscribers[4]" size="5" data-info="D">
<select size="1" name="shaft[4]" data-info="D">
<option value="">Select Shafts</option>
<option value="1">1 Shaft</option>
<option value="2">2 Shaft</option>
</select>
<input type=text name="panel_floors[4]" size="5" data-info="D">
<input type=text name="number_of_cables[4]" size="5" data-info="D">
<select size="1" name="fiber_optic[4]" data-info="D">
<option value="">Select Points</option>
<option value="1">1 Points</option>
<option value="2">2 Points</option>
<option value="3">3 Points</option>
<option value="4">4 Points</option>
<option value="5">5 Points</option>
<option value="6">6 Points</option>
<option value="7">7 Points</option>
<option value="8">8 Points</option>
<option value="9">9 Points</option>
<option value="10">10 Points</option>
</select>

<br>

<input type="submit" value="Validate" id="validateButton">

</form>
    
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
<script>
$("#validateButton").click(function(){
   var emptyFields = $("#myForm :input").filter(function() {
      return $.trim(this.value).length === 0;
   }).length > 0;

   if (emptyFields) {
      alert("Fields missing!");
      $("input, select").each(function() { 
         if($(this).val()=='') { 
            $(this).css('border', 'solid 2px red'); 
         } else {
            // If it is not blank.
            $(this).css('border', '');    
         }
      });
      return false;
   }
});
</script>

</body>
</html>

ErnieAlex · May 5, 2021, 1:33am

I forgot to mention, this code also needed a blank at the top of each select option. It needed a way to create a blank selection so that the JQuery can see nothing and force the user to alter it. Meaning they must select each of the selects. To skip a select, just do not include the first blank option clause!

Adem · May 5, 2021, 8:25am

First of all, thank you very much all your anchors
Options don’t have to be blank above, because the first option is necessary

Adem · May 5, 2021, 8:45am

I tried found something like below but the popup window repeats
If this alert() does not repeat it will work.
On the second click, two popups are on top, and on the third click on three popups, and so on.
https://jsfiddle.net/ademgenc/q4fkwpe0/101/

Adem · May 5, 2021, 10:39am

No iteration after adding blank to array below.
I think this will see my job

@ErnieAlex, Can you look at my javascript code with a professional eye, things like excess or wrong or unnecessary, or is this a correct solution?
I’m happy

https://jsfiddle.net/ademgenc/q4fkwpe0/107/

Sample

Also the red border turned out very beautiful, thank you for your suggestion

ErnieAlex · May 5, 2021, 1:05pm

The red does stand out!
I like the list of errors. It looks better than just a simple notice. You have improved it greatly this way!

Congratulations. The code works well and looks good. Glad you solved it!