Dynamically generated text-box using jQuery

Question

I have the below working script to create 2 dynamic text-box where user enters min and max values. There is a hidden text box where entered values are comma separated. But I am trying to add comma after two values.

Example:

User clicks on Add Element --> Two dynamic boxes are generated. Asking him to enter Min and Max values.

Let's imagine he enters 103 in first text box and 209 in second. I want the output in my text box (Configsize) to be as 103 - 209 Sqft.

Also want to join this Sqft.. by default. This should be appended.

This is my working website : https://getrightproperty.com/post_property.php

Text box code:

<textarea name="configsize" id="configsize"/></textarea>

J-Query code:

<script>
    $(document).ready(function() {

        var iCnt = 0;
        // CREATE A "DIV" ELEMENT AND DESIGN IT USING jQuery ".css()" CLASS.
        var container = $(document.createElement('div')).css({
            padding: '5px', margin: '20px', width: '170px', border: '1px dashed',
            borderTopColor: '#999', borderBottomColor: '#999',
            borderLeftColor: '#999', borderRightColor: '#999'
        });

        $('#btAdd').click(function() {
            if (iCnt <= 19) {

                iCnt = iCnt + 1;

                // ADD TEXTBOX.
                $(container).append('<input type=text class="input" id=tb' + iCnt + ' ' +
                    'value="Enter Min Size ' + iCnt + '" />');

                $(container).append('<input type=text class="input" id=tb' + iCnt + ' ' +
                    'value="Enter Max Size ' + iCnt + '" />');  

                // SHOW SUBMIT BUTTON IF ATLEAST "1" ELEMENT HAS BEEN CREATED.
                if (iCnt == 1) {
                    var divSubmit = $(document.createElement('div'));
                    $(divSubmit).append('<input type=button class="bt"' + 
                        'onclick="GetTextValue()"' + 
                            'id=btSubmit value=Submit />');
                }

                // ADD BOTH THE DIV ELEMENTS TO THE "main" CONTAINER.
                $('#main').after(container, divSubmit);
            }
            // AFTER REACHING THE SPECIFIED LIMIT, DISABLE THE "ADD" BUTTON.
            // (20 IS THE LIMIT WE HAVE SET)
            else {      
                $(container).append('<label>Reached the limit</label>'); 
                $('#btAdd').attr('class', 'bt-disable'); 
                $('#btAdd').attr('disabled', 'disabled');
            }
        });

        // REMOVE ONE ELEMENT PER CLICK.
        $('#btRemove').click(function() {
            if (iCnt != 0) { $('#tb' + iCnt).remove(); iCnt = iCnt - 1; }

            if (iCnt == 0) { 
                $(container)
                    .empty() 
                    .remove(); 

                $('#btSubmit').remove(); 
                $('#btAdd')
                    .removeAttr('disabled') 
                    .attr('class', 'bt');
            }
        });

        // REMOVE ALL THE ELEMENTS IN THE CONTAINER.
        $('#btRemoveAll').click(function() {
            $(container)
                .empty()
                .remove(); 

            $('#btSubmit').remove(); 
            iCnt = 0; 

            $('#btAdd')
                .removeAttr('disabled') 
                .attr('class', 'bt');
        });
    });

    // PICK THE VALUES FROM EACH TEXTBOX WHEN "SUBMIT" BUTTON IS CLICKED.
    var divValue, values = '';

    function GetTextValue() {
        $(divValue) 
            .empty() 
            .remove(); 

        values = '';

        var values = [];
        $('.input').each(function() {
         values.push(this.value);
        });
        $("#configsize").text(values.join(','));
    }
</script>

Here is the Code::

<!DOCTYPE html>
<html lang="en">

<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<link href="styles.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(document).ready(function (e) {
    $("#form1").on('submit',(function(e) {
        e.preventDefault();
        $.ajax({
            url: "upload.php",
            type: "POST",
            data:  new FormData(this),
            contentType: false,
            cache: false,
            processData:false,
            success: function(data)
            {
            $("#targetLayer").html(data);
            },
            error: function() 
            {
            }           
       });
    }));
});
</script>

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <script type="text/javascript">
    $(document).ready(function() {
    var text_max = 300;
    $('#textarea_count').html(text_max + ' characters remaining');

    $('#comment').keyup(function() {
        var text_length = $('#comment').val().length;
        var text_remaining = text_max - text_length;

        $('#textarea_count').html(text_remaining + ' characters remaining');
        });
    });

    $(document).ready(function() {
    var text_max = 300;
    $('#textarea_count1').html(text_max + ' characters remaining');

    $('#comment1').keyup(function() {
        var text_length = $('#comment1').val().length;
        var text_remaining = text_max - text_length;

        $('#textarea_count1').html(text_remaining + ' characters remaining');
        });
    });

    $(document).ready(function() {
    var text_max = 600;
    $('#textarea_count2').html(text_max + ' characters remaining');

    $('#comment2').keyup(function() {
        var text_length = $('#comment2').val().length;
        var text_remaining = text_max - text_length;

        $('#textarea_count2').html(text_remaining + ' characters remaining');
        });
    });
  </script>
   <script>
    $(document).ready(function() {

        var iCnt = 0;
        // CREATE A "DIV" ELEMENT AND DESIGN IT USING jQuery ".css()" CLASS.
        var container = $(document.createElement('div')).css({
            padding: '5px', margin: '20px', width: '170px', border: '1px dashed',
            borderTopColor: '#999', borderBottomColor: '#999',
            borderLeftColor: '#999', borderRightColor: '#999'
        });

        $('#btAdd').click(function() {
            if (iCnt <= 19) {

                iCnt = iCnt + 1;

                // ADD TEXTBOX.
                $(container).append('<input type=text class="input" id=tb' + iCnt + ' ' +
                    'value="Enter Min Size ' + iCnt + '" />');

                $(container).append('<input type=text class="input" id=tb' + iCnt + ' ' +
                    'value="Enter Max Size ' + iCnt + '" />');  

                // SHOW SUBMIT BUTTON IF ATLEAST "1" ELEMENT HAS BEEN CREATED.
                if (iCnt == 1) {
                    var divSubmit = $(document.createElement('div'));
                    $(divSubmit).append('<input type=button class="bt"' + 
                        'onclick="GetTextValue()"' + 
                            'id=btSubmit value=Submit />');
                }

                // ADD BOTH THE DIV ELEMENTS TO THE "main" CONTAINER.
                $('#main').after(container, divSubmit);
            }
            // AFTER REACHING THE SPECIFIED LIMIT, DISABLE THE "ADD" BUTTON.
            // (20 IS THE LIMIT WE HAVE SET)
            else {      
                $(container).append('<label>Reached the limit</label>'); 
                $('#btAdd').attr('class', 'bt-disable'); 
                $('#btAdd').attr('disabled', 'disabled');
            }
        });

        // REMOVE ONE ELEMENT PER CLICK.
        $('#btRemove').click(function() {
            if (iCnt != 0) { $('#tb' + iCnt).remove(); iCnt = iCnt - 1; }

            if (iCnt == 0) { 
                $(container)
                    .empty() 
                    .remove(); 

                $('#btSubmit').remove(); 
                $('#btAdd')
                    .removeAttr('disabled') 
                    .attr('class', 'bt');
            }
        });

        // REMOVE ALL THE ELEMENTS IN THE CONTAINER.
        $('#btRemoveAll').click(function() {
            $(container)
                .empty()
                .remove(); 

            $('#btSubmit').remove(); 
            iCnt = 0; 

            $('#btAdd')
                .removeAttr('disabled') 
                .attr('class', 'bt');
        });
    });

    // PICK THE VALUES FROM EACH TEXTBOX WHEN "SUBMIT" BUTTON IS CLICKED.
    var divValue, values = '';

    function GetTextValue() {
        $(divValue) 
            .empty() 
            .remove(); 

        values = '';

        var values = [];
        $('.input').each(function() {
         values.push(this.value);
        });
        $("#configsize").text(values.join(','));
    }
</script>
<script type="text/javascript">

        function updateTextArea() {

            var allVals = [];

            $('#mydiv :checked').each(function () {

                allVals.push($(this).val());

            });

            $('#txtValue').val(allVals)

        }

        $(function () {

            $('#mydiv input').click(updateTextArea);

            updateTextArea();

        });

    </script>

</head>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<a href="<?php echo $logoutAction ?>">Logout</a>
<form action="upload.php" method="post" name="form1" id="form1" enctype="multipart/form-data">
  <table border="1" align="center" cellpadding="15" cellspacing="15">
    <tr valign="baseline">
      <td nowrap="nowrap" align="right">Builder Name:</td>
      <td><input type="text" name="property_builder" value="" class="form-control" size="32" /></td>
    </tr>
    <tr valign="baseline">
      <td nowrap="nowrap" align="right">Property Name:</td>
      <td><input type="text" name="property_name" value="" class="form-control" size="32" /></td>
    </tr>
    <tr valign="baseline">
      <td nowrap="nowrap" align="right">Property Location:</td>
      <td><input type="text" name="property_location" value="" class="form-control" size="32" /></td>
    </tr>
    <tr valign="baseline">
      <td nowrap="nowrap" align="right">Property City:</td>
      <td><input type="text" name="property_city" class="form-control" value="" size="32" /></td>
    </tr>
    <tr valign="baseline">
      <td nowrap="nowrap" align="right">Property RERA Id:</td>
      <td><input type="text" name="property_rera_id" class="form-control" value="" size="32" /></td>
    </tr>
    <tr valign="baseline">
      <td nowrap="nowrap" align="right">Property For:</td>
      <td><select name="property_for" class="form-control">
        <option value="Sale" <?php if (!(strcmp("Sale", ""))) {echo "SELECTED";} ?>>Sale</option>
        <option value="New" <?php if (!(strcmp("New", ""))) {echo "SELECTED";} ?>>New</option>
        <option value="Re-Sale" <?php if (!(strcmp("Re-Sale", ""))) {echo "SELECTED";} ?>>Re-Sale</option>
      </select></td>
    </tr>
    <tr valign="baseline">
      <td nowrap="nowrap" align="right">Property Type:</td>
      <td><select name="property_type" class="form-control">
        <option value="Apartment" <?php if (!(strcmp("Apartment", ""))) {echo "SELECTED";} ?>>Apartment</option>
        <option value="Villa" <?php if (!(strcmp("Villa", ""))) {echo "SELECTED";} ?>>Villa</option>
        <option value="Plot" <?php if (!(strcmp("Plot", ""))) {echo "SELECTED";} ?>>Plot</option>
      </select></td>
    </tr>
    <tr valign="baseline">
      <td nowrap="nowrap" align="right">Property Status:</td>
      <td>
      <select name="property_status" class="form-control">
        <option value="Under-Construction" <?php if (!(strcmp("Under-Construction", ""))) {echo "SELECTED";} ?>>Under-Construction</option>
        <option value="Pre-Launch" <?php if (!(strcmp("Pre-Launch", ""))) {echo "SELECTED";} ?>>Pre-Launch</option>
        <option value="Read to move in" <?php if (!(strcmp("Read to move in", ""))) {echo "SELECTED";} ?>>Read to move in</option>
      </select>
    </tr>
    <tr valign="baseline">
      <td nowrap="nowrap" align="right">Property Possession:</td>
      <td><input class="form-control" type="text" name="property_possession" value="" size="32" /></td>
    </tr>
    <tr valign="baseline">
      <td nowrap="nowrap" align="right">Property Configuration:</td>
      <td><input class="form-control" type="text" name="property_configuration" value="" size="32" /></td>
    </tr>
    <tr valign="baseline">
      <td nowrap="nowrap" align="right">Property Price Range:</td>
      <td><input class="form-control" type="text" name="property_price_range" value="" size="32" /></td>
    </tr>
    <tr valign="baseline">
      <td nowrap="nowrap" align="right">Property Launch Date:</td>
      <td><input class="form-control" type="text" name="property_launch_date" value="" size="32" /></td>
    </tr>
    <tr valign="baseline"> 
      <td nowrap="nowrap" align="right">Property Discription 1st Para:<br /><br />
      <div id="textarea_count" class="badge pull-right"></div></td>
      <td><textarea class="form-control" name="1stpara"  id="comment" rows="5" maxlength="300"></textarea></td>
   </tr>
   <tr valign="baseline"> 
      <td nowrap="nowrap" align="right">Property Discription 2nd Para:<br /><br />
      <div id="textarea_count1" class="badge pull-right"></div></td>
      <td><textarea class="form-control" name="2ndpara"  id="comment1" rows="5" maxlength="300"></textarea></td>
    </tr>
   <tr valign="baseline"> 
      <td nowrap="nowrap" align="right">Property Discription 3rd Para:<br /><br />
      <div id="textarea_count2" class="badge pull-right"></div></td>
      <td><textarea class="form-control" name="3rdpara"  id="comment2" rows="5" maxlength="600"></textarea></td>
    </tr> 
   <tr valign="baseline"> 
    <td nowrap="nowrap" align="right">Amenities (List all the amenities by comma seperated values)</td>
    <td><textarea name="amenities" class="form-control"></textarea></td>
   </tr>
   <tr valign="baseline">
    <td nowrap="nowrap" align="right">Select Photo (one or multiple): <br /> Note: Upload 3 Images ( Supported image format: .jpeg, .jpg, .png, .gif )</td>
    <td>

<div id="uploadFormLayer">
    <input name="userImage" id="inp_file" type="file" class="inputFile" /><br/>
    <input id="userImage" name="userImage" type="hidden" value="">
    <input name="userImage1" type="file" class="inputFile" /><br/>
    <input name="userImage2" type="file" class="inputFile" /><br/>
    <input name="userImage3" type="file" class="inputFile" /><br/>
    <input name="userImage4" type="file" class="inputFile" /><br/>            

    </div>
</div>
    </td>
   </tr>
   <tr valign="baseline"> 
    <td nowrap="nowrap" align="right">Configurations</td>
    <td>
    <div id="mydiv">
        <input type="checkbox" name="1 RK Apartment" id="1 RK Apartment" value="1 RK" onClick="dynInput(this);"/> 1 RK Apartment<br />

        <input type="checkbox" name="1 BHK Apartment" id="1 BHK Apartment" value="1 BHK" onClick="dynInput(this);" /> 1 BHK Apartment<br />

        <input type="checkbox" name="1.5 BHK Apartment" id="1.5 BHK Apartment" value="1.5 BHK" onClick="dynInput(this);" /> 1.5 BHK Apartment<br />

        <input type="checkbox" name="2 BHK Apartment" id="2 BHK Apartment" value="2 BHK" onClick="dynInput(this);" /> 2 BHK Apartment<br />

        <input type="checkbox" name="2.5 BHK Apartment" id="2.5 BHK Apartment" value="2.5 BHK" onClick="dynInput(this);" /> 2.5 BHK Apartment<br />

        <input type="checkbox" name="3 BHK Apartment" id="3 BHK Apartment" value="3 BHK" onClick="dynInput(this);" /> 3 BHK Apartment<br />

        <input type="checkbox" name="3.5 BHK Apartment" id="3.5 BHK Apartment" value="3.5 BHK" onClick="dynInput(this);" /> 3.5 BHK Apartment <br />

        <input type="checkbox" name="4 BHK Apartment" id="4 BHK Apartment" value="4 BHK" onClick="dynInput(this);" /> 4 BHK Apartment <br />

        <input type="checkbox" name="4+ BHK Apartment" id="4+ BHK Apartment" value="4+ BHK" onClick="dynInput(this);" /> 4+ BHK Apartment <br />

        <textarea id="txtValue" name="config"></textarea>
    </div>   
     </tr>
   <tr valign="baseline"> 
    <td nowrap="nowrap" align="right">Configuration Sizes</td>
    <td> <div id="main">
        <input type="button" id="btAdd" value="Add Element" class="bt" />
        <input type="button" id="btRemove" value="Remove Element" class="bt" />
        <input type="button" id="btRemoveAll" value="Remove All" class="bt" /><br />
    </div>
        <textarea name="configsize" id="configsize"/></textarea>  
    </td>
   </tr>     
   <tr valign="baseline"> 
    <td nowrap="nowrap" align="right">Youtube Link</td>
    <td><textarea name="youtubelink" class="form-control"></textarea></td>
   </tr> 

   <tr valign="baseline">
      <td nowrap="nowrap" align="right">Facebook Page Link:</td>
      <td><input class="form-control" type="text" name="fblink" value="" size="32" /></td>
    </tr>
    <tr valign="baseline">
      <td nowrap="nowrap" align="right">Twitter Page Link:</td>
      <td><input class="form-control" type="text" name="TwitterPagelink" value="" size="32" /></td>
    </tr> 
   <tr valign="baseline"> 
    <td nowrap="nowrap" align="right">Property Pincode</td>
    <td><textarea name="property_pincode" class="form-control"></textarea></td>
   </tr>    
   <tr valign="baseline"> 
    <td nowrap="nowrap" align="right">Property Address</td>
    <td><textarea name="property_address" class="form-control"></textarea></td>
   </tr>
    <tr valign="baseline">
      <td nowrap="nowrap" align="right">Google Maps URL:</td>
      <td><input class="form-control" type="text" name="property_maps_url" value="" size="32" /></td>
    </tr>
    <tr valign="baseline">
      <td nowrap="nowrap" align="right">Property Latitude:</td>
      <td><input class="form-control" type="text" name="property_lat" value="" size="32" /></td>
    </tr>
    <tr valign="baseline">
      <td nowrap="nowrap" align="right">Property Longitude:</td>
      <td><input class="form-control" type="text" name="property_log" value="" size="32" /></td>
    </tr>
    <tr valign="baseline">
      <td nowrap="nowrap" align="right">Floor Plans:</td>
      <td><div id="uploadFormLayer">
    1 RK Apartment <input name="userImage6" type="file" class="inputFile" /><br/>
    1 BHK Apartment <input name="userImage7" type="file" class="inputFile" /><br/>
    1.5 BHK Apartment <input name="userImage8" type="file" class="inputFile" /><br/>
    2 BHK Apartment <input name="userImage9" type="file" class="inputFile" /><br/>
    2.5 BHK Apartment<input name="userImage10" type="file" class="inputFile" /><br/>            
    3 BHK Apartment <input name="userImage11" type="file" class="inputFile" /><br/>
    3.5 BHK Apartment <input name="userImage12" type="file" class="inputFile" /><br/>
    4 BHK Apartment <input name="userImage13" type="file" class="inputFile" /><br/>
    4+ BHK Apartment <input name="userImage14" type="file" class="inputFile" /><br/>
    </div></td>
    </tr>
    <tr valign="baseline">
      <td nowrap="nowrap" align="right">Logo:</td>
      <td><input type="file" name="image" /><br/>
    </td>
    </tr>
   <tr valign="baseline">
      <td nowrap="nowrap" align="right">&nbsp;</td>
      <td>&nbsp;</td>
    </tr>     
   <tr valign="baseline">
   <td colspan="2" align="right" nowrap="nowrap"><input type="submit" class="form-control btn-primary" value="Insert record" /></td>
    </tr>
  </table>
  <input type="hidden" name="MM_insert" value="form1" />
</form>
<p>&nbsp;</p>
</body>
</html>

Can you include HTML mark up?.

Murali Nepalli
– Murali Nepalli

2019-12-06 04:29:28 +00:00
Commented Dec 6, 2019 at 4:29 — Murali Nepalli
– Murali Nepalli, Commented Dec 6, 2019 at 4:29
Have updated the question. Please have a look at this

Akshay M A
– Akshay M A

2019-12-06 04:40:32 +00:00
Commented Dec 6, 2019 at 4:40 — Akshay M A
– Akshay M A, Commented Dec 6, 2019 at 4:40

Murali Nepalli · Accepted Answer · 2019-12-06 04:52:16Z

1

You need to change the "$("#configsize").text()" line as follows. Here is the fiddle https://jsfiddle.net/wrpteuak/

 function GetTextValue() {
    $(divValue).empty().remove(); 
    values = '';
    var values = [];

    $('.input').each(function() {
       values.push(this.value);
    });
    $("#configsize").text(values.join(' - ') + " Sqft.");
}

answered Dec 6, 2019 at 4:52

Murali Nepalli

1,61811 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Akshay M A Over a year ago

Thanks there for the help.. need some changes

Akshay M A Over a year ago

If the user clicks and adds 4 boxes.. sqft is adding at the last.. I want it be like.

Akshay M A Over a year ago

102 - 108 sqft, 303 - 209 sqft. And so on and so forth. Want it to be comma separated

Akshay M A Over a year ago

Please this one help, I can move on. Stuck with this big time

Murali Nepalli Over a year ago

You can see the changes in updated fiddle. jsfiddle.net/tfb49ym1

Collectives™ on Stack Overflow

Dynamically generated text-box using jQuery

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related