Member Avatar for Jiby_1

//How dinamically adding textbox and textarea of the given code can take after submit button is clicked in php?

<!DOCTYPE html>
<html>
<head>
<title>Add or Remove text boxes with jQuery</title>
<script type="text/javascript" src="//code.jquery.com/jquery-latest.js"></script>
<style type="text/css">
<!--
#main {
    max-width: 800px;
    margin: 0 auto;
}
-->
</style>
</head>
<body>
<div id="main">
    <h1>Add or Remove text boxes with jQuery</h1>
    <div class="my-form">
        <form role="form" method="post">
            <p class="text-box">
                <label for="box1">Box <span class="box-number">1</span></label>
                <textarea name="boxes[]" value="" id="box1" ></textarea>
                <input type="text" name="boxes1[]" value="" id="box2" ></textarea>
                <a class="add-box" href="#">Add More</a>
            </p>
            <p><input type="submit" value="Submit" name="submit" /></p>
        </form>
    </div>
</div>
<script type="text/javascript">
jQuery(document).ready(function($){
    $('.my-form .add-box').click(function(){
        var n = $('.text-box').length + 1;
//        if( 5 < n ) {
//            alert('Stop it!');
//            return false;
//        }
        var box_html = $('<p class="text-box"><label for="box' + n + '">Box <span class="box-number">' + n + '</span></label> <textarea name="boxes[]" value="" id="box1' + n + '" ></textarea> <input type="text" name="boxes[]" value="" id="box2' + n + '" /><a href="#" class="remove-box">Remove</a></p>');

    box_html.hide();
        $('.my-form p.text-box:last').after(box_html);
        box_html.fadeIn('slow');
        return false;
    });
    $('.my-form').on('click', '.remove-box', function(){
        $(this).parent().css( 'background-color', '#FF6C6C' );
        $(this).parent().fadeOut("slow", function() {
            $(this).remove();
            $('.box-number').each(function(index){
                $(this).text( index + 1 );
            });
        });
        return false;
    });
});
</script>
</body>
</html>
  • 2 Contributors
  • 2 Replies
  • 218 Views
  • 4 Days Discussion Span
  • Latest Post Latest Post by Jiby_1

Recommended Answers

All 2 Replies

Member Avatar for rpv_sen 
if(isset($_POST['submit']))
{
    $chkbox = $_POST['boxes'];
    $txtbox = $_POST['boxes1'];

    foreach($txtbox as $a => $b)

        echo "$chkbox[$a]  -  $txtbox[$a] <br />";
        //insert query

        insert into table name(field1,field2)values($chkbox[$a],$txtbox[$a]);

}
Member Avatar for Jiby_1 
if dynamically more textbox means how to do the loop for above code

this is the code i did

 $firstkbox = $_POST['boxes'];

        foreach($secondbox as $a => $b){

             echo "$firstkbox[$a]  -  $secondbox[$a] <br />" ;

        }

}
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.