jQuery help

dinindu kan

Member
Nov 12, 2013
243
9
0
ape project eka wedak meka.mata form ekata dynamic text fields add karanna denna one user ta.so mama me code eka use kala.eke text fields add unata e text fields add wena code eka mage file eke auto liyawenne na.mata e code eka liyawena widiyata meka hadala denna..pahala thiyenne e mama net eken gaththu code eka.
Danna kenek kiyala denna.
!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jq</title>
<script src="jquery-1.11.3.min.js"></script>
</head>

<body>
<div class="input_fields_wrap">
<button class="add_field_button">Add More Fields</button>
<div><input type="text" name="mytext[]"></div>
</div>
</body>
<script>
$(document).ready(function() {
var max_fields = 10; //maximum input boxes allowed
var wrapper = $(".input_fields_wrap"); //Fields wrapper
var add_button = $(".add_field_button"); //Add button ID

var x = 1; //initlal text box count
$(add_button).click(function(e){ //on add input button click
e.preventDefault();
if(x < max_fields){ //max input box allowed
x++; //text box increment
$(wrapper).append('<div><input type="text" name="mytext[]"/><a href="#" class="remove_field">Remove</a></div>'); //add input box
}
});

$(wrapper).on("click",".remove_field", function(e){ //user click on remove text
e.preventDefault(); $(this).parent('div').remove(); x--;
})
});
</script>
</html>
 

Lakshan-Seram

Well-known member
  • May 31, 2011
    24,714
    12,619
    113
    127.0.0.1:8080/Kandy
    PHP:
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>jq</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    </head>
    <body>
    <div class="input_fields_wrap">
      <button class="add_field_button">Add More Fields</button>
      <div>
        <input type="text" name="mytext[]">
      </div>
    </div>
    </body>
    <script>
    $(document).ready(function() {
        var max_fields = 10; //maximum input boxes allowed
        var wrapper = $(".input_fields_wrap"); //Fields wrapper
        var add_button = $(".add_field_button"); //Add button ID
        
        var x = 1; //initlal text box count
        $(add_button).click(function(e){ //on add input button click
            e.preventDefault();
            if(x < max_fields){ //max input box allowed
                x++; //text box increment
                $(wrapper).append('<div><input type="text" name="mytext[]"/><a href="#" class="remove_field">Remove</a></div>'); //add input box
            }
        });
        
        $(wrapper).on("click",".remove_field", function(e){ //user click on remove text
            e.preventDefault(); $(this).parent('div').remove(); x--;
        });
    });
    </script>
    </html>
     
    Last edited:

    dinindu kan

    Member
    Nov 12, 2013
    243
    9
    0
    mata one e add wena fields wala values ganna..eth meke e fields visually add unata code eke pennanne nane.
     
    Last edited:

    dinindu kan

    Member
    Nov 12, 2013
    243
    9
    0
    විල්සන් මාමා;18922006 said:
    '
    Mokakda bun ube meken kiyanna hadanne
    Terenne naha

    Menna ube code eka jsfiddle eke damma
    http://jsfiddle.net/gfb1L9gv/

    den aiye meke text fields add wenawa nh button eka click kalama.e add karapu fields chrome eke pennanawa nh..eth code eka open kalama e fields nane.therunada den?
     

    dinindu kan

    Member
    Nov 12, 2013
    243
    9
    0
    i am using jquery for the first time..eka nisa echchra denumak na..mama jqery file eka download karala mekata attache kala