[Vuejs]-Working on a Dynamic table to add and delete rows in Vuejs framework, Below is my table

by

0👍

Please have a look at this code it might help 

<?php

if(isset($_POST['submit'])){
    $field_Values_array = $_POST['field_name'];
    $pass_array = $_POST['class'];

    $sg = "";

    $len1 = count($field_Values_array);

    $x=0;
    while($x<$len1){
        $sg = $sg."Book - ".$field_Values_array[$x]." Set - ".implode(", ",$pass_array[$x])."<br>";
        $x++;
    }

    echo $sg;

    print '<pre>' ; print_r($field_Values_array); print '</pre>';
    print '<pre>' ; print_r($pass_array); print '</pre>';
}

?>


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<?php 
$index = 0;
?>

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js" integrity="sha384-6khuMg9gaYr5AxOqhkVIODVIvm9ynTT5J4V1cfthmT+emCG6yVmEZsRHdxlotUnm" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
var index = parseInt('<?php echo $index; ?>');
$(document).ready(function(){
    var maxField = 10; //Input fields increment limitation
    var addButton = $('.add_button'); //Add button selector
    var wrapper = $('.field_wrapper'); //Input field wrapper
    var fieldHTML = '<div><select id="a1" name="field_name[indexed]"><option selected disabled>     </option><option>महात्मा गांधी</option><option>बिल्ली</option><option>घोड़ा</option><option>नारियल</option><option>केरल</option><option>चावल</option><option>महाराष्ट्र</option><option>महाबली</option><option>रमेश</option><option>दिल्ली</option><option>किताब </option><option>कछुआ</option></select> <input type="checkbox" name="class[indexed][]" value="A" />A <input type="checkbox" name="class[indexed][]" value="B" />B <input type="checkbox" name="class[indexed][]" value="C" />C <input type="checkbox" name="class[indexed][]" value="1" />1 <input type="checkbox" name="class[indexed][]" value="2" />2 <input type="checkbox" name="class[indexed][]" value="3" />3 <input type="checkbox" name="class[indexed][]" value="4" />4 <input type="checkbox" name="class[indexed][]" value="5" />5 <input type="checkbox" name="class[indexed][]" value="6" />6 <input type="checkbox" name="class[indexed][]" value="7" />7 <input type="checkbox" name="class[indexed][]" value="8" />8 <a href="javascript:void(0);" class="remove_button"><img src="remove.png"/></a></div>'; //New input field html 
    var x = 1; //Initial field counter is 1

    //Once add button is clicked
    $(addButton).click(function(){
        //Check maximum number of input fields
        index++;

        newHTML = fieldHTML.replace(/indexed/g, index);



        if(x < maxField){ 
            x++; //Increment field counter
            $(wrapper).append(newHTML); //Add field html
        }
    });

    //Once remove button is clicked
    $(wrapper).on('click', '.remove_button', function(e){
        e.preventDefault();
        $(this).parent('div').remove(); //Remove field html
        x--; //Decrement field counter
    });
});

window.onload = function(e){ 
   $('#a1').append("<option selected disabled></option><option>महात्मा गांधी</option><option>बिल्ली</option><option>घोड़ा</option><option>नारियल</option><option>केरल</option><option>चावल</option><option>महाराष्ट्र</option><option>महाबली</option><option>रमेश</option><option>दिल्ली</option><option>किताब </option><option>कछुआ</option>");
}
</script>
</head>
<body>
<div class="container">
    <form action="index.php" method="post">
        <div class="field_wrapper">
            <div>
                <input type="text" readonly value="Book Name"/>
                <input type="text" readonly value="Book Set"/>
            </div>
            <div>
                <select id="a1" name="field_name[<?php echo $index; ?>]"></select>
                <!--<input type="text" name="field_name[<?php echo $index; ?>]" value=""/>-->
                <input type="checkbox" name="class[<?php echo $index; ?>][]" value="A" />A
                <input type="checkbox" name="class[<?php echo $index; ?>][]" value="B" />B
                <input type="checkbox" name="class[<?php echo $index; ?>][]" value="C" />C
                <input type="checkbox" name="class[<?php echo $index; ?>][]" value="1" />1
                <input type="checkbox" name="class[<?php echo $index; ?>][]" value="2" />2
                <input type="checkbox" name="class[<?php echo $index; ?>][]" value="3" />3
                <input type="checkbox" name="class[<?php echo $index; ?>][]" value="4" />4
                <input type="checkbox" name="class[<?php echo $index; ?>][]" value="5" />5
                <input type="checkbox" name="class[<?php echo $index; ?>][]" value="6" />6
                <input type="checkbox" name="class[<?php echo $index; ?>][]" value="7" />7
                <input type="checkbox" name="class[<?php echo $index; ?>][]" value="8" />8
                <a href="javascript:void(0);" class="add_button" title="Add field"><img src="add.png"/></a>
            </div>
        </div><br><input type="submit" name="submit" value="Submit">
    </form>
</div>
</body>
</html>

0👍

At least you’ve got 2 keys with the same name in data() function. Remove first
Or juts edit your data func to:

 data(){
    return {
     selectedTypes:[]
    }
 }

And change all callings to this

Leave a comment