Geek asks and answers

Looping through an array of dynamically added elements

New in jQuery, asking for help with something that is hard for me to figure out.

The cloned row of the table contains the field <input type="text" name="dt[]" id="dt1">. Below is the template string that is being cloned.

<table id="MyTable" name="MyTable">
    <tr name="tr3" id="tr3">
        <td>
            <input type="text" name="dt[]" id="dt1">
        </td>
        <td>
            <input type="file" name="fff[]" id="ff1">
        </td>
    </tr>
</table>

The user can potentially create several of these fields, and I'm trying to figure out how to iterate over them and check if they have text before submitting the form.

Note that I must use the jQuery.on () method to access form elements. How should the loop be encoded? I originally tried this (EDITED):

$(document).on('click','#sub1',function() {
    var d1 = $("[name^=dt]").val();
    alert(d1);
    if (d1 !=""){
        $("#TheForm").submit();
    } else {
        alert("Empty fields!");
    }
});

And this:

var d1 = $("#dt1").val();
alert(d1);

And this:

var d1 = $("#^dt").val();
alert(d1);

but could not get the data.

EDIT: upon request, this code clones the line:

$(document).on('click', '#add_row', function() {
    $("table#MyTable tr:nth-child(4)")
        .clone()
        .show()
        .find("input, span").each(function() {
            $(this)
                .val('')
                .attr('id', function(_, id) {
                    var newcnt = id + count;
                    return id + count;
                    });
        })
        .end()
        .appendTo("table")
        ;

    count++;
    if (count == 2) {
        $('#add_row').prop('disabled', 'disabled');
    }
}); //end add_row Function
+5
source share
2 answers

Your HTML is not in the correct format. you should do:

<input type="text" name="dt[]">

:

$('input[name^=dt]').each(function() {
  // code
  alert( this.value ); // $(this).val()
});

, , id, name. id .

,

class input, , :

$('input.common_cls').each(function() {
  // code
});

"#^dt" .

'input[name^=dt]'

input[id^=dt].

,

// this function will return true if no empty
// input exists, otherwise it will return false

function noEmptyExists() {
    return $('input[name^=dt]').filter(function() {
        return !$.trim( this.value );
    }).length === 0;
}

$(document).on('click','#sub1',function() {
   if( noEmptyExists() ) {
      alert('Success');
   } else {
      alert('Failed');
   }
});

PROGRESS UPDATE

this.val() .

:

$(this).val()


$(document).ready(function() {
    var count = 1;
    alert('doc ready');
    var row = $("table#MyTable tr:eq(1)");
    $(document).on('click', '#sub1', function() {
        if (noEmptyExists()) {
            alert('Success');
        } else {
            alert('Failed');
        }
    });

    $(document).on('click', '#add_row', function() {
        row.clone(true).find("input").each(function() {
            $(this).val('').attr('id', function(_, id) {
                var newcnt = id + count;
                return id + count;
            });
        }).end().appendTo("table");
    });

});

function noEmptyExists() {
    return $('input[name^=dt]').filter(function() {
        return !$.trim(this.value);
    }).length === 0;
}

+12

- , . thecodeparadox , HTML ajax, . , - . , .

"" (<INPUT type="button">)

$(document).on('click', '#sub1', function() {
    var fcnt = 0; //input-FILE
    var dcnt = 0; //input-DOCTITLE
    $('input[name^=fff]').each(function() {
        if($(this).val() == ''){fcnt=fcnt + 1;}
    });
    $('input[name^=dt]').each(function() {
        if($(this).val() == ''){dcnt=dcnt + 1;}
    });
    if (dcnt > 1) {
        alert('Fields marked with an asterisk cannot be empty');
    } else if (fcnt > 1) {
        alert('One of the files is still empty');
    }else{
        $("#TheForm").submit();
    }
});

. , ( tcp), var, var .clone().

$(document).on('click', '#add_row', function() {
    var row = $("table#MyTable tr:eq(3)");
    row.clone(true).find("input").each(function() {
        $(this).val('').attr('id', function(_, id) {
            var newcnt = id + count;
            return id + count;
        });
    }).end().show().appendTo("table");
}); //end add_row Function
+1

More articles:


All Articles