How to set value in dynamically added form of strings using jquery?

I have a form in php with dynamically added rows (a row is added after the button is clicked). I want to fill a field with "xx" value and I want to do it in jquery.

This loop creates dynamically added rows in jquery. I want to fill in the added fields with the value "xx":

while($personsArrayLength>2){
        echo '
            <script>
            $(document).ready(function(){
                var i = 2;
                var rowTemplate2 = jQuery.format($("#template2").html());

                rowTemplate2.value = "xx";
                addRow2();

                function addRow2(){
                    var ii = i++;
                    $("#app_here2").append(rowTemplate2(ii));
                    $("#delete_" + ii).click(function(){
                        $("#row_" + ii).remove();
                    });
                }
            });
        </script>
    ';

      

Here is the html for that:

function addRows2(){

    global $personsError_css;
    $personsArray = $_POST['persons'];
    JB_var_dump($_POST['whichRow']);
        $html = '<table id="template2" align="right" style="display:none; ">
            <tr id="row_{0}">
                <td><input type="text" size="52" id="persons" name="persons[]" maxlength="100"></td>
                <td><img src="/../_img/row_del.png" id="delete_{0}" alt="usun"></td>
            </tr>
        </table>
        <table id="list2" style="margin-left:200px;">
            <thead >
                <tr>
                    <th></th>
                    <th></th>
                </tr>
            </thead>

            <tbody>
                <tr>
                    <td><input type="text" size="52" name="persons[]" maxlength="100" style="'.$personsError_css.';" value="'.$personsArray[1].'"></td>
                    <td></td>
                </tr>

                <tr>
                    <td colspan="2" id="app_here2"></td>
                </tr>
            </tbody>
        </table>';
        return $html;
} 

      

This is a correctly completed form
  enter image description here

In these epty fields I want to add "xx" values enter image description here

Sorry for my English.

How can I set values ​​in added rows? What should I change in my code? Thanks for the help.

+3


source to share


1 answer


Change your addRow2 to:



function addRow2(){
    var ii = i++;
    $("#app_here2").append(rowTemplate2(ii));
    //UPDATE: var rowTemplate2 is not a jQuery Object, as i thought
    $("#template2").find("input:empty").val("xx");; // added this row
    $("#delete_" + ii).click(function(){
        $("#row_" + ii).remove();
    });
}

      

+1


source







All Articles