Hii would like to know to make the maximum input if someone click the button mean if someone click the button he can just can add up to 5 with following code ltscript type 34textjavascript34gt var counter 0 function AddFileUpload var div documentcreateElement39DIV39 divinnerHTML 39ltinput id34file39 counter 3934 name 34file

Hi almahmeed2Here I have created sample that fullfill your requirementHTMLlthtml xmlns34httpwwww3org1999xhtml34gtltheadgt lttitlegtlttitlegt ltscript type34textjavascript34gt var counter 0 function AddFileUpload if counter lt 5 var div documentcreateElement39DIV39 divinnerHTML 39ltinput id34file39 counter 3934 name 34file39 counter 3934 type34file34 style34displayinlinemarginbottom5px34 gt39 39ltinput id34Button39 counter 3934 type34button34 Class34betabtn betabtn3d betabtnprussian betabtnmedium3439 39value34Remove34 onclick 34RemoveFileUploadthis34 gt39 documentgetElementById34

Add Maximum Limit for dynamic FileUpload controls created using JavaScript

almahmee...

SOLVED CLOSED ACTIVE ANSWERED
User: almahmeed2
Posted: on Aug 04, 2015 02:27 AM
Forum: JavaScript
Answer: 1
Views: 2857

i would like to know to make the maximum input if someone click the button? mean if someone click the button he can just can add up to 5 with following code.

  <script type = "text/javascript">
                var counter = 0;
              
                function AddFileUpload() {
                  
                        var div = document.createElement('DIV');
                        div.innerHTML = '<input id="file' + counter + '" name = "file' + counter +
                                        '" type="file"  style="display:inline;margin-bottom:5px;" />' +
                                        '<input id="Button' + counter + '" type="button"  Class="beta-btn beta-btn-3d beta-btn-prussian beta-btn-medium"' +
                                        'value="Remove" onclick = "RemoveFileUpload(this)" />';
                        document.getElementById("FileUploadContainer").appendChild(div);
                       
                    }
                  
                
                function RemoveFileUpload(div) {
                    document.getElementById("FileUploadContainer").removeChild(div.parentNode);
                }
</script>

Shashika...

0 3

Reply
ANSWER
User: Shashikant
Replied: on Aug 05, 2015 05:04 AM
Report

Hi almahmeed2,

Here I have created sample that full-fill your requirement.

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
        var counter = 0;
        function AddFileUpload() {
            if (counter < 5) {
                var div = document.createElement('DIV');
                div.innerHTML = '<input id="file' + counter + '" name = "file' + counter +
                                        '" type="file"  style="display:inline;margin-bottom:5px;" />' +
                                        '<input id="Button' + counter + '" type="button"  Class="beta-btn beta-btn-3d beta-btn-prussian beta-btn-medium"' +
                                        'value="Remove" onclick = "RemoveFileUpload(this)" />';
                document.getElementById("FileUploadContainer").appendChild(div);
                counter++;
            }
        }
        function RemoveFileUpload(div) {
            document.getElementById("FileUploadContainer").removeChild(div.parentNode);
            counter--;
        }
    </script>
</head>
<body>
    <div>
        <span style="font-family: Arial">Click to add Gallery</span>&nbsp;&nbsp;
        <input id="Button1" type="button" value="add" class="beta-btn beta-btn-3d beta-btn-prussian beta-btn-medium"
            onclick="AddFileUpload()" />
        <br />
        <br />
        <div id="FileUploadContainer">
            <!--FileUpload Controls will be added here -->
        </div>
    </div>
</body>
</html>

Demo

Add Maximum Limit for dynamic FileUpload controls created using JavaScript

Company

Explore

Follow us

Contact Us