Develop Reference

i have multiple dynamic textboxes in my form .I want to retrieve values of all textboxes

<label for="firstName" class="col-sm-3 control-label">'.$r['1'].'</label>
<div class="col-lg-5">
<input type=text name="text_quest" class="form-control">
</div>
This whole code is inside while loop. I want to retrieve all values of textboxes which are being created in form.

Add a class other then form-control to all textboxes because this class is used by bootstrap and get the value in jquery like:
<input type=text name="text_quest" class="form-control userInput">
$('.userInput').each(function(){
console.log( $(this).val() );
});
this will print value of each textbox in console. You can push the values in an array also and use that array.

Using Request form you can get textbox values in your post Method like this.
string[] textboxesvalue = Request.Form.GetValues("text_quest");

var textboxElements = document.getElementsByClassName("form-control") will return an array-like object of all your textbox elements. You can iterate that object properties to access every textbox value like following:
[].forEach.call(textboxElements, function (textboxElement) {
console.log(textboxElement.value);
});

JS and/or D3 Methods of storing Dynamic User Inputs

My question is similar to the one posed here: storing user input in array
My use case is different in one crucial aspect, I do not have static inputs. At any one time, there could be anywhere from 1 to 3 user number inputs on my page. They are also removed dynamically too, so I can't just create them all, then style them as needed something like using display:hidden;.
My question is: What is a js solution that can store user inputs into an array robust to inputs that may or may not have been appended without an if clause for each array in the event the element hasn't been appended yet(!==null).
Or if d3 has a simpler approach than native javascript to store number inputs into an array, that would be an acceptable answer too. I postulated this selection: d3.selectAll('#input1,#input2,#input3') but I'm not sure if values can be retrieved and stored in an array from such a selection.
Here is a worked-out example:
The document could potentially have 3 inputs, but lets say the current state of the document only has 2 inputs with IDs: #input1 and #input2. So I need to store the values of the existing inputs, and a 0 for #input3 because it has not been created yet. I'm not sure how to create an array comprehension with these requirements. I was thinking something like:
my_array.push(d3.selectAll('#input1,#input2,#input3').each().value())
But like I said above, I want the array to contain the value for each input. push() would just add another item to the array. The array would exceed 3 values if the event listener was triggered more than 3 times, which is not what I want. I just want an array that is updated with the current values of all existing number inputs (and a value of 0 if input has not been appended yet).

Your question is not exactly clear, but it seems to me that you want to get all the values of the inputs, without knowing how many of them you have on the page.
If that's the case, you can simply use...
d3.selectAll("input[type=number]")
..., which will get all the inputs present on the page when you call the function.
Here is a demo, look at the console:
d3.select("button").on("click", function() {
var inputs = [];
d3.selectAll("input[type=number]").each(function() {
inputs.push(this.value);
})
console.log(inputs);
})
<script src="https://d3js.org/d3.v4.min.js"></script>
<div id="form">
<h1><b>Please enter data</b></h1>
<hr size="3" />
<br>
<label for="input 1">Input 1</label>
<input id="input1" type="number">
<br>
<label for="input 2">Input 2</label>
<input id="input2" type="number">
<br>
<label for="input 3">Input 3</label>
<input id="input3" type="text">
<br>
<hr>
</div>
<button>Submit</button>

jQuery, input elements with the same data attribute value but one is hidden, fill in same data on keyup

jQuery, input elements with the same data attribute value but one is hidden, fill in same data on keyup.
I have 2 forms on a page with dynamically created form fields from a database via .NET MVC.
I have one form visible and one form that is hidden.
I know how to copy, on keyup, the values from one form field to another IF I have known element classes or Id's. This is not the case on dynamically created fields. I can not guarantee that all fields will come back in the same order in each form.
So what I did was I created a 'data' attribute and output the "Model.Name" on the input field. In my case I am lucky enough that the 2 forms have fields with the same "Model.Name" values. So I am able to do a match on that. But since the forms are built dynamically I need a few things to happen and I need some pointers.
I need to know how to copy field inputted values from the visible form fields to their matching hidden form fields with the same "data" attribute value. I won't necessarily know the actual data-attribute value since the input fields are getting created dynamically.
How would this work to get the matching form fields.
I have a basic JS Fiddle set up.
https://jsfiddle.net/mb91ktbg/6/
HTML
<!--I know the class of the wrapping form -->
<!--All data values are dynamic, so I don't know then on page load-->
<div class="masterFieldWrapper">
<!--Need to copy these input values to the sub field wrapper input values-->
<label>Field one</label>
<input type="text" data-myattribute="dynamicvalue" />
<label>Field Two</label>
<input type="text" data-myattribute="dynamicvalue2" />
<label>Field Three</label>
<input type="text" data-myattribute="dynamicvalue3" />
<!--I know the class of the sub field wrapper-->
<!--I would like to copy the inserted values from the parent wrapper fields to the sub field wrapper fields with the same data-myattribute value-->
<!--I can not assume the fields come back in the same order. This is why I need to use the data attribute value-->
<div class="subFieldWrapper">
<label>Field One</label>
<input type="text" data-myattribute="dynamicvalue" />
<label>Field Two</label>
<input type="text" data-myattribute="dynamicvalue2" />
<label>Field Three</label>
<input type="text" data-myattribute="dynamicvalue3" />
</div>
</div>
jQuery Started but not working. need some help please.
$(".masterFieldWrapper input").each(function() {
var fieldVal = $(this).val();
var fieldDataAttr = $(this).data("myattribute");
console.log(fieldDataAttr);
$(this).keyup(function() {
$(this).parent('.masterFieldWrapper').find(".subFieldWrapper input").data("myattribute").val($(this).val());
});
});

Don't know if this would help but, you could dynamically add a class or id to the element and then access like so:
$(".bodyWrapper").on("change", ".form-control", event => {
let value = $('.dynamicValueInput').val();
$('.dynamicValueInputCopy').val(value);
console.log(`body-input-has-changed`);
});

//Try this :)
var mainForm = $(".masterFieldWrapper");
var Input_type = $("input[type='text']");
var Totalinputs = mainForm.find(Input_type).length;
var Visible_inputs = Totalinputs/2;
var auto_fulfill = function(){
for(i=Visible_inputs; i<Totalinputs;i++){
Input_type.eq(i).val(Input_type.eq(i-Visible_inputs).val());
}
}
Input_type.keyup(function(){
auto_fulfill();
})

Creating an entry form using Angular

I am in the process of learning AngularJS (version 1) and want to convert a simple word game that I had previously written.
I have a partial HTML which will select a word from a dictionary (JSON file) and display it on screen. The word is saved in $scope as selectedWord. I now want to display an array of empty textboxes for the user to input their guess. The number of boxes to display will obviously be determined by the length of selectedWord and will be different for each game played.
The relevant HTML I need to produce for each letterbox is:
<input name="letters[]" class="answerbox" id="letter_1" onkeyup="testResults(this)" onfocus="this.select();" type="text" size="1" maxlength="1">
with the id incremented by 1 for each new box.

When selectedWord changes, create an array containing as many objects as the length of selectedWord, something as simple as
$scope.guesses =[];
for(var i=0;i<$scope.selectedWord.length;i++){
$scope.guesses.push({
value:''
});
}
Then in your template, use ng-repeat like:
<input type="text" name="letters[]" class="answerbox" ng-repeat="guess in guesses" id="{{'letter_'+$index}}" ng-model="guess.value" ng-keyup="testResults(guess)" ng-focus="this.select();" size="1" maxlength="1">
But if you're using angular properly, I don't you'l need that id unless you want to associate it with a <label>.

ng-repeat
In ng-repeat you can repeat an element and the index is tracked by {{ $index }}. It is zero-based though so you most likely need to add 1.
Split string to array
What you could do is to create an array of characters from your string/word and do an ng-repeat with it.
Track items by $index
It is important that you track the items by $index, so angular js does not complain about dupes.
Here's the code I propose:
<div style="float:left" ng-repeat="chars in selectedWord.split('') track by $index">
<input name="letters[]" class="answerbox" id="letter_{{$index + 1}}" onkeyup="testResults(this)" onfocus="this.select();" type="text" size="1" maxlength="1" >
</div>
I am not sure if it can be done without the surrounding div but if you make it float: left it should not make a difference.

Submitting multiple values for one input field

What I'm trying to do:
I'm trying to build a very simple visual layout builder.
The idea is that, the user selects a block, and it has some settings in it, those setting values are stored in the hidden input, and when the user saves the page, i store those values in the database.
Basic block is ok:
For example, user selects a 'text' block, it is added like this:
<div>
<input type="hidden" value="text" name="item_name[]">
<input type="hidden" value="" name="item_title[]">
<input type="hidden" value="sdsd" name="item_text[]">
</div>
Problem:
However, some of the blocks have more than one values for each field. For example, 'gallery' block, which has multiple image urls, image titles etc. I'm facing problem in finding a suitable way to put together the multiple values and submit.
Right now I'm adding them to a string with jQuery, separated with __. I can store the data and separate it, but the problem is that if I want to remove any image from it, it is very difficult because I have just added them in the string, so its hard to find it and remove it.
<div>
text item
<input type="hidden" value="gallery" name="item_name[]">
<input type="hidden" value="__http://img1.jpg__http://img2.jpg" name="img_path[]">
<input type="hidden" value="__img1__img2" name="img_title[]">
<input type="hidden" value="" name="img_desc[]"></input>
</div>
Question:
What would be the suitable way to send multiple values for the above block example, keeping in the mind that there will be multiple blocks having multiple input values?
Thanks.

Build a Javascript Array with all values.
Convert the array to JSON
Submit JSON as the value of the hidden field
On server side, use PHP json_decode function to convert JSON to PHP object or array