I am creating a form where a part of it would be cloned using javascript. The input name is of type input[ID][date], input[ID][type] etc. where the ID is the group of inputs. Those will be relationship IDs decided after the form submission.
I am currently having a placeholder for ID which gets replaced on cloning by the current element count.
Problem
When someone adds 3 elements ([0],[1],[2]) and removes the first one, the next ID of the element will be 2, same as the third element, overtwriting its inputs. I can't use input[][date] because it will create separate array for each input.
Question
What is the best way to approach dynamic input arrays? Should I keep the ID as a variable and increment it every time so it's unique even after removing an element? Would random temporary ID work? (I guess it could repeat that way)
I did something like this a while ago, here is how.
I stored each element name/id in an array ["inputname1", "inputname2"].
Then when ever a user would add a new element I would re iterate my array ["inputname1", "inputname2", "inputname3"] and replace each name id with the new id number based on how many inputs I have iterated over.
If an input got deleted the array would shift, no worries about same input id number.
More efficient than the original(you dont need to refresh each input remove button or their ids)
Example
Original Example
Sorry if I did not explain well enough.
Related
I have a form I created in pdf that basically has a dropdown with the student's names that uses their Student ID's as the values. Pretty straightforward. I am able to populate another field (textbox) with the value of the selected item in the dropdown. Works great. I have searched in whatever ways I know how, but I am unable to find an answer to this question:
I have a second dropdown that I very simply want to populate with the same selected index as the first. In other words the selected indexes of both dropdowns will always match each other (I don't need a two way function, I just want the second dropdown to match the first.). I don't know of a way to assign two values to each dropdown item or I would try that. In theory, this problem seems like it should be really simple to solve, but I guess that's what makes me, me.
Here is the simple code I use to get the value from the dropdown and populate the textbox:
event.value = this.getField("Fieldname").value;
Thank you.
After much experimentation, I finally realized there actually IS a simple way to do this. Let me try to explain. The first dropdown has student names using their student ID's as the VALUES. The ID text box pulls the values from the selected name to display the id number. I needed the third dropdown field to display the address. Here's how simple that was:
I called the value from the textbox (which was the student ID). I set up the third dropbdown to have the address as the display and the Student ID as the VALUE of the address. I then just set it up like the iroginal:
event.value = this.getField("Fieldname").value;
Voila! It now displays the address in the third field.
It seems like you can actually daisy chain this method repeatedly to autofill even more fields if you needed to.
I have to create text box dynamically on each button click and the previous values should be loaded correctly. I know by saving the value to hidden field i can achieve this. Is there any other option for achieving this. Because by increasing the number of the controls the hidden field value also increases
There may be multiple solution to your problem:
1. Save your values in session on each post back.
2. Or you can save your values in single hidden field with comma separated values.
For further assistance you can email me.
So I have 2 identical forms on a page which I cannot give different names, because they are tied to the back-end.
I have a few input fiends with same ID's on the diferent forms, which are checked if they are empty with document.getElementById('id').value;
Strange thing is, half of the input fields are checked on one of the forms and the other half are checked from the other form (this is when the user is entering values in only one of the forms), despite them using 2 different javascript functions. For one input field it gets the closest id automatically, for the others it goes all the way up to the other form.
My question is how can I get the value of the elements to be checked which are closest to the submit button (or other element near one of the forms)?
I tried with the jQuest closest() method, but I can't seem it to get to work with all of the document.getElementById.
Element IDs should always be unique. You should never have 2 or more elements with the same ID. document.getElementById('someId') is expecting to return 1 element, not an array of elements - there are other functions available if you want to get multiple elements that dont require you to duplicate IDs.
From w3schools:
An ID should be unique within a page. However, if more than one element with the specified ID exists, the getElementById() method returns the first element in the source code.
More about HTML DOM getElementById() Method
I have a simple C# program where a user enters the ID of a item to be discarded then the individual who is to take it away signs and does so.
Upon entering the ID, you click the "search" button, the purpose of that button is to ensure that such an item exist in the database.
Issue
This method works however,, if there are 50 items to discard, my program requires the individual to sign 50 times. I am trying to have it so that, when I enter the ID number I can keep adding then ask for a signature once that will cover all 50 items.
My question is, I am having some issue with constantly adding the ID number to my textbox. In my jquery I have the line document.getElementById('test').value = document.getElementById('refno').value;
which takes the value from the refno textbox and adds it to the test texbox. Obviously that simple replaces the value and I am not sure of how to append it. So my next bet is an array. My question therefore is, how do I when I click the "Add" button, store those value in an array and then pass it to my controller and at the same time display it on the UI so that it can be edited ie if an id was entered in error.
This should add the value instead of replace it:
document.getElementById('test').value += document.getElementById('refno').value + ';';
Good morning,
I have a web page in which you can rate systems.
I created a javascript to dynamically add new systems to be evaluated and to remove them. The problem is that I have to manually change the radio buttons names, so they don't become one giant radio button.
When adding new buttons it's easy to just change the name of the new radio-buttons from radio-button-0 to radio-button-1. But, when removing, I have to rename all items, or there will be gaps (radio-button-0 and radio-button-2 exist, but not radio-button-1).
In the other hand, selects don't have to be renamed. They will just be selected in separate and I can check their value later as an array easily.
I was wondering if there's anyway to create a select item, but change its appearance so it will look like a radio button. Or if there's any easy way to create new radio-buttons without them grouping together (It also can be a jQuery approach).
I would rather not use XForms Select1 tags.
Thank you,
The only things you can style about an a <select> + <option> are background-color and color.
The easiest way to accomplish what you want is probably to use some sort of a plugin. Either that, or you could possibly write some sort of script that populates X amount of radio buttons with an incrementing name to go under each tag with the class Y.
Why do you need to name them by number? Why cant you name them by the attribute label that you have instead if a name/label/attribute is required data.
Then there will be no gaps because you are using labels instead of numbers. Ofcourse this requires each label to be unique. But I dont see why anyone would like to add 2 labels/attributes with exactly the same name, so you could do a validation on that.