CODEWITHSUNDEEP
javascriptjquery
AAB
AAB

Reputation: 1653

Getting values from elements added dynamically

http://jsfiddle.net/R89fn/9/

If any of the text input/Box added are empty then the page must not submit.when I try to retrieve values from the text inputs using their id`s nothing gets retrieved is it possible to retrieve values from elements added dynamically?

 $("#submit").click(function (event) {
                var string = "tb";
                var i;
                for (i = 1; i <= count; i++) {
                    if (document.getElementById(string+1).value=="") {
                        event.preventDefault();
                        break;
                    }
                }
            });

The above code is what I am using to get the value from the text fields using there id

Upvotes: 0

Views: 99

Answers (4)

johncastle
johncastle

Reputation: 21

<form name="form" id="form" action="htmlpage.html" method="POST">
<input type="button" id="b1" name="b1" value="Add TextBox" />
<input type="button" id="b2" name="b2" value="Remove TextBox" />
<input type="submit" id="submit" name="submit" value="Submit" />
</form>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">

</script>

<script>
    var count = 0;
    $(document).ready(function() {

        $("#b1").click(function() {
            if (count == 5) {
                alert("Maximum Number of Input Boxes Added");
            } else {
                ++count;
                var tb = "tb" + count;
                $(this).before("<div class=\"newTextBox\" id= "+ tb +" >" + 'InputField : <input type="text" name="box[]"></div>');
            }
        });
        $("#b2").click(function() {
            if (count == 0) {
                alert("No More TextBoxes to Remove");
            } else {
                $("#tb" + count).remove();
                --count;
            }
        });
        $("#submit").click(function(event) {
            var string = "#texttb";
            var i;
            for (i = 1; i <= count; i++) {
            if ($('input[type = text]').val() == "") {
                    event.preventDefault();
                    break;
                }
            }
        });
    });

</script>

<style>
    .newTextBox
    {
        margin: 5px;z
    }
</style>


Reason:

you had given id to the div element. so its not get retrive. i had updated the answer with the usage of jquery functions and changed your code for this requirement.

Upvotes: 1

Alex
Alex

Reputation: 7688

Check out this solution on fiddle: http://jsfiddle.net/R89fn/15/

var count = 0;
$(document).ready(function () {

    $("#b1").click(function () {
        if (count == 5) {
            alert("Maximum Number of Input Boxes Added");
        } else {
            ++count;
            var tb = "tb" + count;
            $('#form').append("<div class=\"newTextBox\" id=" + tb + ">" + 'InputField : <input type="text" name="box[]"></div>');
        }
    });

    $("#b2").click(function () {
        if (count == 0) {
            alert("No More TextBoxes to Remove");
        } else {
            $("#tb" + count).remove();
            --count;
        }
    });

    $("#submit").click(function (event) {
        var inputBoxes = $('#form').find('input[type="text"]');;

        if (inputBoxes.length < 1) {
            alert('No text inputs to submit');
            return false;
        } else {
            inputBoxes.each(function(i, v) {
                if ($(this).val() == "") {
                    alert('Input number ' + (i + 1) + ' is empty');
                    $(this).css('border-color', 'red');
                }
            });

            alert('continue here');
            return false;
        }
    });

});

Upvotes: 1

kockburn
kockburn

Reputation: 17616

If I understand correctly, your only issue atm is to make sure that the form is not sent if one of the inputs are empty? Seems the solution to your problem is simpler. Simply add required at the end of any input and HTML5 will ensure that the form is not sent if empty. For example: 

<input type="text" required />

Upvotes: 0

Oday Fraiwan
Oday Fraiwan

Reputation: 1157

I took a look on the code in the JSFiddle. It appears that the input textboxes are not given the intended IDs; the IDs are given to the container div.

The code for the add button should use this,

var inputBox = $('<input type="text" id="td1">') //add also the needed attributes
$(containerDiv).append(inputBox);

Upvotes: 2

Related Questions