将来自动态生成的文本框的值存储到数组中

Question

I'm creating a Time table generating website as a part of my project and I am stuck at one point.

Using for loop, I am generating user selected text boxes for subjects and faculties. Now the problem is that I cannot get the values of those dynamically generated text boxes. I want to get the values and store it into array so that I can then later on store it to database

If I am using localstorage, then it sometimes shows NaN or undefined. Please help me out.

Following is my Jquery code

$.fn.CreateDynamicTextBoxes = function()
        {
            $('#DynamicTextBoxContainer, #DynamicTextBoxContainer2').css('display','block');

            InputtedValue = $('#SemesterSubjectsSelection').val();

            SubjectsNames = [];

            for (i = 0; i < InputtedValue; i++)
            {
                TextBoxContainer1 = $('#DynamicTextBoxContainer');
                TextBoxContainer2 = $('#DynamicTextBoxContainer2');

                $('<input type="text" class="InputBoxes" id="SubjectTextBoxes'+i+'" placeholder="Subject '+i+' Name" style="margin:5px;" value=""><br>').appendTo(TextBoxContainer1);
                $('<input type="text" class="InputBoxes" id="FacultyTextBoxes'+i+'" placeholder="Subject '+i+' Faculty Name" style="margin:5px;" value=""><br>').appendTo(TextBoxContainer2);
                SubjectsNames['SubjectTextBoxes'+i];
            }

            $('#DynamicTextBoxContainer, #UnusedContainer, #DynamicTextBoxContainer2').css('border-top','1px solid #DDD');
        }

        $.fn.CreateTimeTable = function()
        {
            for (x = 0; x < i; x++)
            {
                localStorage.setItem("Main"+x, +SubjectsNames[i]);
            }
        }

I am also posting screenshot for better understanding

Answer 1

I understand you create 2 text boxes for each subject, one for subject, and second one for faculty. And you want it as a jQuery plugin.

First of all, I think you should create single plugin instead of two, and expose what you need from the plugin.

You should avoid global variables, right now you have InputtedValue , i , SubjectsNames , etc. declared as a global variables, and I believe you should not do that, but keep these variables inside you plugin and expose only what you really need.

You declare your SubjectNames , but later in first for loop you try to access its properties, and actually do nothing with this. In second for loop you try to access it as an array, but it's empty, as you did not assign any values in it.

Take a look at the snippet I created. I do not play much with jQuery, and especially with custom plugins, so the code is not perfect and can be optimized, but I believe it shows the idea. I pass some selectors as in configuration object to make it more reusable. I added 2 buttons to make it more "playable", but you can change it as you prefer. button creates your dynamic text boxes, and button takes their values and "print" them in result div. generate method is exposed from the plugin to take the values outside the plugin, so you can do it whatever you want with them (eg store them in local storage).

 $(function() { $.fn.timeTables = function(config) { // prepare variables with jQuery objects, based on selectors provided in config object var numberOfSubjectsTextBox = $(config.numberOfSubjects); var subjectsDiv = $(config.subjects); var facultiesDiv = $(config.faculties); var prepareButton = $(config.prepareButton); var numberOfSubjects = 0; prepareButton.click(function() { // read number of subjects from the textbox - some validation should be added here numberOfSubjects = +numberOfSubjectsTextBox.val(); // clear subjects and faculties div from any text boxes there subjectsDiv.empty(); facultiesDiv.empty(); // create new text boxes for each subject and append them to proper div // TODO: these inputs could be stored in arrays and used later for (var i = 0; i < numberOfSubjects; i++) { $('<input type="text" placeholder="Subject ' + i + '" />').appendTo(subjectsDiv); $('<input type="text" placeholder="Faculty ' + i + '" />').appendTo(facultiesDiv); } }); function generate() { // prepare result array var result = []; // get all text boxes from subjects and faculties divs var subjectTextBoxes = subjectsDiv.find('input'); var facultiesTextBoxes = facultiesDiv.find('input'); // read subject and faculty for each subject - numberOfSubjects variable stores proper value for (var i = 0; i < numberOfSubjects; i++) { result.push({ subject: $(subjectTextBoxes[i]).val(), faculty: $(facultiesTextBoxes[i]).val() }); } return result; } // expose generate function outside the plugin return { generate: generate }; }; var tt = $('#container').timeTables({ numberOfSubjects: '#numberOfSubjects', subjects: '#subjects', faculties: '#faculties', prepareButton: '#prepare' }); $('#generate').click(function() { // generate result and 'print' it to result div var times = tt.generate(); var result = $('#result'); result.empty(); for (var i = 0; i < times.length; i++) { $('<div>' + times[i].subject + ': ' + times[i].faculty + '</div>').appendTo(result); } }); }); 

 #content div { float: left; } #content div input { display: block; } #footer { clear: both; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="container"> <div id="header"> <input type="text" id="numberOfSubjects" placeholder="Number of subjects" /> <button id="prepare"> Prepare </button> </div> <div id="content"> <div id="subjects"> </div> <div id="faculties"> </div> </div> </div> <div id="footer"> <button id="generate">Generate</button> <div id="result"> </div> </div>