গঠনে গতিশীল ইনপুট উপাদান যুক্ত করা

Question 1

গতিশীলভাবে ফিল্ডসেট যুক্ত করার বিষয়ে আমি অনেকগুলি ব্লগ এবং পোস্ট পড়েছি তবে সেগুলি একটি খুব জটিল উত্তর দেয়। আমার যা প্রয়োজন তা জটিল নয়।

আমার এইচটিএমএল কোড:

<input type="text" name="member" value="">Number of members: (max. 10)<br />
<a href="#" id="filldetails">Fill Details</a>

সুতরাং, কোনও ব্যবহারকারী ক্ষেত্রে একটি পূর্ণসংখ্যা মান প্রবেশ করবে (আমি জাভাস্ক্রিপ্ট ব্যবহার করে যাচাইকরণ যাচাই করছি) input। এবং Fill Detailsলিঙ্কটি ক্লিক করার পরে, তার সাথে প্রবেশের জন্য সংশ্লিষ্ট সংখ্যার ইনপুট ক্ষেত্র উপস্থিত হবে। আমি জাভাস্ক্রিপ্ট ব্যবহার করে এটি অর্জন করতে চাই।

আমি জাভাস্ক্রিপ্টে প্রো না। আমি ভাবছিলাম কীভাবে আমি inputলিঙ্কের মাধ্যমে ক্ষেত্রের ব্যবহারকারীদের দ্বারা পূর্ণ পূর্ণ সংখ্যার পুনরুদ্ধার করতে পারি এবং সংশ্লিষ্ট সংখ্যক ইনপুট ক্ষেত্রগুলি প্রদর্শন করব।

Question 2

onclickপাঠ্যের ক্ষেত্রে ইনপুট মান পেতে আপনি ইভেন্ট হ্যান্ডলারটি ব্যবহার করতে পারেন । আপনি ক্ষেত্রটিকে একটি অনন্য idবৈশিষ্ট্য দিয়েছেন তা নিশ্চিত করুন যাতে আপনি নিরাপদে এর মাধ্যমে উল্লেখ করতে পারেন document.getElementById():

আপনি যদি গতিশীলভাবে উপাদান যুক্ত করতে চান তবে সেগুলি কোথায় রাখবেন তা আপনার একটি ধারক থাকা উচিত। উদাহরণস্বরূপ, ক <div id="container">। এর মাধ্যমে নতুন উপাদান তৈরি করুন document.createElement()এবং appendChild()সেগুলি প্রতিটি পাত্রে যুক্ত করতে ব্যবহার করুন। আপনি কোনও অর্থবোধক nameবৈশিষ্ট্য আউটপুট করতে আগ্রহী হতে পারেন (উদাহরণস্বরূপ name="member"+iগতিশীলভাবে উত্পন্ন প্রতিটি এর জন্য <input>যদি সেগুলি কোনও ফর্ম জমা দেওয়া হয় তবে।

লক্ষ্য করুন আপনি এর <br/>সাথে উপাদানও তৈরি করতে পারেন document.createElement('br')। আপনি যদি কিছু পাঠ্য আউটপুট করতে চান তবে আপনি document.createTextNode()পরিবর্তে ব্যবহার করতে পারেন ।

এছাড়াও, আপনি ধারক প্রত্যেক সময় এটা সম্পর্কে জনবহুল করা হয় পরিষ্কার চান, আপনি ব্যবহার করতে পারে hasChildNodes()এবং removeChild()একসঙ্গে।

<html>
<head>
    <script type='text/javascript'>
        function addFields(){
            // Number of inputs to create
            var number = document.getElementById("member").value;
            // Container <div> where dynamic content will be placed
            var container = document.getElementById("container");
            // Clear previous contents of the container
            while (container.hasChildNodes()) {
                container.removeChild(container.lastChild);
            }
            for (i=0;i<number;i++){
                // Append a node with a random text
                container.appendChild(document.createTextNode("Member " + (i+1)));
                // Create an <input> element, set its type and name attributes
                var input = document.createElement("input");
                input.type = "text";
                input.name = "member" + i;
                container.appendChild(input);
                // Append a line break 
                container.appendChild(document.createElement("br"));
            }
        }
    </script>
</head>
<body>
    <input type="text" id="member" name="member" value="">Number of members: (max. 10)<br />
    <a href="#" id="filldetails" onclick="addFields()">Fill Details</a>
    <div id="container"/>
</body>
</html>

স্নিপেট প্রসারিত করুন

এই জেএসফিডেলে একটি কাজের নমুনা দেখুন ।

Question 3

ফর্ম, ক্ষেত্র, এবং আচরণ মোছা / মুছে ফেলার জন্য এই জিক্যুরি কোডটি চেষ্টা করুন:

$(document).ready(function() {
    var max_fields = 10;
    var wrapper = $(".container1");
    var add_button = $(".add_form_field");

    var x = 1;
    $(add_button).click(function(e) {
        e.preventDefault();
        if (x < max_fields) {
            x++;
            $(wrapper).append('<div><input type="text" name="mytext[]"/><a href="#" class="delete">Delete</a></div>'); //add input box
        } else {
            alert('You Reached the limits')
        }
    });

    $(wrapper).on("click", ".delete", function(e) {
        e.preventDefault();
        $(this).parent('div').remove();
        x--;
    })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container1">
    <button class="add_form_field">Add New Field &nbsp; 
      <span style="font-size:16px; font-weight:bold;">+ </span>
    </button>
    <div><input type="text" name="mytext[]"></div>
</div>

স্নিপেট প্রসারিত করুন

পড়ুন এখানে ডেমো