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

Javascript & Ajax
#1

Hi,
I have a fixed table row

sabit
sabit1169Ă—255 9.38 KB

I check the input contents in this line with the following javascript code.

  function kontrol() {
    var katlar = [];
    var kablo_sayilari = [];

    var kac_kat = $("#A_blok_kac_kat").val();
    var daire_sayisi = $("#A_blok_dairsayisi").val();
    var abone_sayisi = $("#A_blok_abone_sayisi").val();
    var katlar = $("#A_blok_pano_katlari").val();
    var kablo_sayilari = $("#A_blok_panodaki_kablo_sayisi").val();
    var saft_sayisi = $("#A_blok_saft_sayisi").val();
    var optik_sayisi = $("#A_blok_kac_noktasina_optik_gidecek").val();

    var katlar = katlar.split(',');
    var kablo_sayilari = kablo_sayilari.split(',');

    if(kac_kat == ""){
        alert("ABlok kaç kat olduğunu girmediniz");
    return false;      
    }

    if(daire_sayisi == ""){
        alert("A Blokta toplam daire sayısınız girmediniz");
    return false;      
    }

    if(abone_sayisi == ""){
        alert("A Blokta toplam kaç abone var?\n\nBir daireye çekilen kablo x daire = abone sayısıdır");
    return false;      
    }

    if(katlar == ""){
        alert("A Bloğun bir şaftında panolar hangi katlarda?\n\nKatları virgülle ayırarak giriniz");
    return false;      
    }

    if(kablo_sayilari == ""){
        alert("A Bloğun bir şaftındaki panolarda kaç kablo var?\n\nEğer panolar arasında farklılık gösteriyorsa virgülle ayırarak giriniz\n\nEğer tüm panolarda sayılar eşir ise sadece bir panonun sayısını giriniz");
    return false;      
    }

    if( katlar.length != kablo_sayilari.length && kablo_sayilari.length > 1 ){
        alert("A blok için " + katlar.length + " pano girdiniz, ancak " + kablo_sayilari.length + " pano için kablo girdiniz\n\nPano kadar kablo seçeneğini girmelisiniz\n\nEğer tüm panolardaki kablo sayısı eşit ise sadece bir panonun kablo sayısını girebilirsiniz.");
    return false;
    }

    if(saft_sayisi == 1){

    if( katlar.length < optik_sayisi ){
        alert("A blok için 1 şatta " + katlar.length + " pano girdiniz, ancak " + optik_sayisi + " optik seçtiniz\n\nPano sayısından fazla optik olamaz\n\nBir şaftta en az bir optik seçilmelidir yada bir kaç panoya bir veya tüm panoya seçebilirsiniz.");
    return false;
    }

  }else if(saft_sayisi == 2){

    if( katlar.length*2 < optik_sayisi ){
        alert("A blok için 1 şatta " + katlar.length + " pano girdiniz, ancak " + optik_sayisi + " optik seçtiniz, 2 şaft seçtiğiniz için pano sayısı x 2 olarak hesaplanır\n\n2 şaft için " + katlar.length * 2 + " pano demekir ve bu sayıdan fazla optik seçilemez\n\nBir şaftta en az bir optik seçilmelidir yada bir kaç panoya bir veya tüm panoya seçebilirsiniz.");
    return false;
    }

  }

  }

The problem is how can I check the input inputs of the lines I added with javascript / Jquery?

eklenen
eklenen1164Ă—361 14.3 KB

Adds the block name to the beginning of name="" and id="" when adding new line
Sample:

$("#A_blok_kac_kat").val();
$("#B_blok_kac_kat").val();
$("#C_blok_kac_kat").val();
$("#D_blok_kac_kat").val();

as
Inserted lines may not be standard but may be less or more.

Thank you from now

#2

Just use indexing… When you create the line, assign the name with increasing index numbers.
Assing the name or id as kac_kat[1] , kac_kat[2], etc. If you are creating the lines in PHP, just add the # of the line as the index. And, when you check them in Jquery, you have to add the index in the function.
Lastly, when you POST the page, you will need to parse thru all of the lines to get individual inputs for each using indexes. Hope that helps!

#3

I’m creating new lines with javascript / Jquery
As you said, I used index, it worked smoothly, thank you

var alphabet = {'1':'A','2':'B','3':'C','4':'D','5':'E','6':'F','7':'G','8':'H','9':'I','10':'J','11':'K','12':'L','13':'M','14':'N','15':'O','16':'P','17':'Q','18':'R','19':'S','20':'T','21':'U','22':'V','23':'W','24':'X','25':'Y','26':'Z'};

alert(alphabet[5]);

How do I get the number in square brackets?

var katlar_arr          = [];
var kablo_sayilari_arr  = [];

var kac_kat         = $("input[name^='blok_kac_kat']").map(function(){return $(this).val();}).get();
var daire_sayisi    = $("input[name^='blok_dairsayisi']").map(function(){return $(this).val();}).get();
var abone_sayisi    = $("input[name^='blok_abone_sayisi']").map(function(){return $(this).val();}).get();
var katlar          = $("input[name^='blok_pano_katlari']").map(function(){return $(this).val();}).get();
var kablo_sayilari  = $("input[name^='blok_panodaki_kablo_sayisi']").map(function(){return $(this).val();}).get();
var saft_sayisi     = $("select[name^='blok_saft_sayisi'] option:selected").map(function(){return $(this).val();}).get();
var optik_sayisi    = $("select[name^='blok_kac_noktasina_optik_gidecek'] option:selected").map(function(){return $(this).val();}).get();

var katlar_arr          = katlar.join(",").split(',');
var kablo_sayilari_arr  = kablo_sayilari.join(",").split(',');
#4

Sometimes for a computer puzzle, you just need a little push to solve it.

Glad you got it working!

#5

I want to show Block name in Alert message but I couldn’t

I think if I get the sequence number [x] of the block that will send the alert message, I can show the block name by saying alert (alphabet [x]).
How do I get the name=“name [x]” sequence number of the line with the error message

#6

Well, Jquery uses the DOM. Meaning that it “sees” the current page. So, it does not really see the “code”, but, the data that the browser received from the server.

You could have it alert you the “X” and then, you would know the row it is on. Or, you can create a an extra tag for the row’s column. Something like:

< input name='xxx' data-function-name="name-of-field">

Then, in the alert use that data as part of the display. Means more work as you will need to create this value when you create each of the input tag inside your row of data. But, then, you can get the name when needed. Might work well…

#7

I did this but it didn’t work.
var kac_kat_id = $("input[name^='blok_kac_kat']").map(function(){return $(this).data("id");}).get();

<input type="tel" data-id="1">

#8

I said it worked more but I didn’t understand how it happened
Values come separated by commas, it doesn’t work that way.
I’m confused

It was very good that you suggested a series of names, It will be very useful for me in the next php process

Are the inputs empty with javascript, I need to check

#9

Well, I do not think this is the way you read it. data-id=“1” is okay. But, to read it, you need to use .data-id since that is what you named it. Not sure. I will test it later today and see if I can create a working demo for you…

#10

It seems these codes seem to work, but the form does not stop

http://jsfiddle.net/ademgenc/a6t3ve52/

<form action="" method="POST">
<input class = "new_input" type=text name="name[]" data-id="1"/>
<br />
<input class = "new_input" type=text name="name[]" data-id="2"/>
<br />
<input class = "new_input" type=text name="name[]" data-id="3"/>
<br />
<input class = "new_input" type=text name="name[]" data-id="4"/>
<br />
<input class = "new_input" type=text name="name[]" data-id="5"/>
<br />
<input class = "new_input" type=text name="name[]" data-id="6"/>
<br />
<input type="submit" value=" Validate " onclick="validate()" >
</form>

  function validate() {
      var inputs = document.getElementsByTagName("input");
      var empty_inputs = 0;
      for(var i = 0; i < inputs.length; i++) {
          if(inputs[i].name.indexOf('name') == 0) { // check all inputs with 'name' in their name
              if (inputs[i].value == '') {
                  empty_inputs++;
                  alert($(inputs[i]).data("id"));
                  return false;
              }
          }
      }

  }
#11

Adem, there is a virus in your jsfiddle. Please edit it and remove it. And, repost your fiddle…

#12

How can it be, I use a licensed and up-to-date Norton 360 on my computer
I will delete and republish

https://jsfiddle.net/ademgenc/f3axzr5e/1/

<form action="" method="POST">
<input class = "new_input" type=text name="name[]" data-id="1"/>
<br />
<input class = "new_input" type=text name="name[]" data-id="2"/>
<br />
<input class = "new_input" type=text name="name[]" data-id="3"/>
<br />
<input class = "new_input" type=text name="name[]" data-id="4"/>
<br />
<input class = "new_input" type=text name="name[]" data-id="5"/>
<br />
<input class = "new_input" type=text name="name[]" data-id="6"/>
<br />
<input type="submit" value=" Validate " onclick="validate()" >
</form>

  function validate() {
      var inputs = document.getElementsByTagName("input");
      var empty_inputs = 0;
      for(var i = 0; i < inputs.length; i++) {
          if(inputs[i].name.indexOf('name') == 0) { // check all inputs with 'name' in their name
              if (inputs[i].value == '') {
                  empty_inputs++;
                  alert($(inputs[i]).data("id"));
                  return false;
              }
          }
      }

  }

data-id=“1” or data-name=“A”

I guess this won’t fix the problem either
Because it will first check if the five inputs are empty.
Then, are the items of the last two entries equal?
Sample:
1st. input (15,11,7,3) (The array here has 4 elements)
2nd. input (Can be 1 item 20, means all items are equal. 20,20,20,20 as)
if each one differs. 20,15,18,25 as
1st. As many as the number of items in the input field
2nd. The number of items must be equal in the input field.
input(1) 10,7 input(2) 20,15,25 can’t be

Other control
1st. input (15,11,7,3) (The array here has 4 elements)
the last rightmost select option is also,
Can be selected as the number of items in the 1st input field at most
1st. input (15,11,7,3) (The array here has 4 elements), select option max 4 select
1st. input (7,3) (The array here has 4 elements), select option max 2 select as

#13

First, the new jsfiddle did not throw a virus error this time. That is good. But, it does not work. I have not used Norton’s in years as it is not as good as other anti-virus systems. Lately I have used Avast’s free version and it works great for me. But, Norton’s is good in general.

I am a bit confused on what you are asking help with at this point. You solved the indexing of the input fields so you can access them. Now you want to make sure that all the fields are filled in with values?

Is that what you require?

#14

I did a little research for you. I think you should try using JQuery’s own validation code. Here are some of my thoughts on it.

Super simple code! ! ! Easy to implement. No fancy overhead, just one library call. Can be set up using the basics if all you require is to force the users to enter certain fields. Again, super simple code!

Here is a sample page, a full page, which shows a simple input array and forces user to fill it all:

I am not sure if that is what you need, but, I think with your pages you posted that it should work out nicely for you. Let us know…

#15

How can I give a message in a situation like in the picture?

<script>`
alert("You did not enter "Pano Katları" in Block C");
</script>`

cblokbos
cblokbos1174Ă—439 14.6 KB

#16

Well, you can use the process I showed, but, instead change the live CSS for that input tag to border-red.
I could create an example page to do that, I think. I can do that tomorrow. Not at home right now.

Didn’t you like the file I posted before? Did you try it?

#17

I haven’t tried it yet, I don’t know how to use it, I’ll search and look.
Is it possible not to like your suggestions? :grinning: :grinning: thank you

Except for the red border, an alert() message is also needed to tell what the problem is.

Since there are more than one input and select in a line, the validate message next to or under it will cause confusion.

#18

Well, to test the one I posted, just copy it as one file. Just create a new PHP file and store it all in there. Run it and you will see a nice pop-up that is very simple to use. Just add the “required” option to any input you want to make show up an alert for.

But, if you do not like it, and just want a red box around missing ones, I can create a test file for that, too.
I will do that later today as I have some time today for you…

#19

Well, here is another version to test. If you want to force a user to fill in all fields, you need to start with them clearly showing this. This example will do that. Does this help you out?

#20

I’m sorry I made you very hard
“required” and “red frame” does not see my job

I want to open a popup warning window
Cause I need to explain the rule
The problem is that there are multiple inputs and select options with the same name.
Which entries are blank?
Which input or select is also wrong?
not according to the rule,
I need to explain these errors with a warning window.
Problem,
Is “A” on the line?
Is “B” on the line?
Is “C” on the line?
Is “D” on the line?

The form below is a 4-line form

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

<input type=text name="floor[1]" data-id="A">
<input type=text name="total_number_of_flats[1]" data-id="A">
<input type=text name="number_of_subscribers[1]" data-id="A">
<select size="1" name="shaft1[1]" data-id="A">
<option value="1">1 Shaft</option>
<option value="2">2 Shaft</option>
</select>
<input type=text name="panel_floors[1]" data-id="A">
<input type=text name="number_of_cables[1]" data-id="A">
<select size="1" name="fiber_optic[1]" data-id="A">
<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]" data-id="B">
<input type=text name="total_number_of_flats[2]" data-id="B">
<input type=text name="number_of_subscribers[2]" data-id="B">
<select size="1" name="shaft[2]" data-id="B">
<option value="1">1 Shaft</option>
<option value="2">2 Shaft</option>
</select>
<input type=text name="panel_floors[2]" data-id="B">
<input type=text name="number_of_cables[2]" data-id="B">
<select size="1" name="fiber_optic[2]" data-id="B">
<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]" data-id="C">
<input type=text name="total_number_of_flats[3]" data-id="C">
<input type=text name="number_of_subscribers[3]" data-id="C">
<select size="1" name="shaft[3]" data-id="C">
<option value="1">1 Shaft</option>
<option value="2">2 Shaft</option>
</select>
<input type=text name="panel_floors[3]" data-id="C">
<input type=text name="number_of_cables[3]" data-id="C">
<select size="1" name="fiber_optic[3]" data-id="C">
<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]" data-id="D">
<input type=text name="total_number_of_flats[4]" data-id="D">
<input type=text name="number_of_subscribers[4]" data-id="D">
<select size="1" name="shaft[4]" data-id="D">
<option value="1">1 Shaft</option>
<option value="2">2 Shaft</option>
</select>
<input type=text name="panel_floors[4]" data-id="D">
<input type=text name="number_of_cables[4]" data-id="D">
<select size="1" name="fiber_optic[4]" data-id="D">
<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">

</form>
Sponsor our Newsletter | Privacy Policy | Terms of Service