Store values of dynamically created controls - javascript

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.

Related

How to make two selected indexes match in pdf dropdown using javascript

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.

How to make a dynamic HTML table repopulate after form is reopened based on saved value

I have created a form which uses a dropdown, based on the selection in this dropdown a few tables dynamically populate with dynamically created inputs. This all works properly.
The problem is that I have to place this form inside of another HTML/JS/JQuery based 3rd party system and the form will need to be closed and reopened multiple times on different computers of an intranet. From what I can tell, this system has a background script (probably using serialization?) that saves the user inputs for any fields that is an input/select/check which allows it to store forms with entered user input.
Given that this system is storing the data for my dropdown selection, I should be able to call my function again to "reset" the table I would think.
I have tried checking if the dropdown is not at the "default" and running the function for setting dropdowns and it did not work.
How can I have my table populate when the form is reloaded?
if (document.getElementById('cmblstPartNumber') != "Select Product"){
setDropdowns(document.getElementById('cmblstPartNumber'),document.getElementById('cmblstLine'));
}
This is the function declaration for my functional code to set the dropdowns.
function setDropdowns(cmblstPartNumber,cmblstLine) {
//Massive Switch statement
}
You can store the selected values in local storage and repopulate it when the form element is reloaded.
Clear the local storage when you are done
I was able to address my particular problem by creating hidden inputs that mirrored the possible created inputs. Then bound a function to an event that would assign the hidden input to the dynamic input.
//Create hidden mirror input to store the input
<input type="hidden" id="hVisual1" name="hVisual1">
//Check if field exists, then assign the hidden field the user input
<script>
if(document.getElementById('Visual1')){
document.getElementById('hVisual1').value = document.getElementById('Visual1').value;
}
</script>

Why is the field values are posted twice on submit

I'm working on dynamically changing a the textfields based on radiobutton selection.
If I select single, then it should display different kinds of fields in the form and when I select multi it has different.
To achieve this,
I created two div's to fit the elements which gets changed on radiobutton selection.
I put the textfields in first div(id="single") and repeated the same fields in second field in another div(id="multi").
Based on radio button selection this works, but when I submit the form the values I have the below problem:
When I select single, the form displays all fields required, but the submitted values are sent twice, i.e. in console I see two entries sent,
I guess it is taking the fields of multi as well.
But when I select multi it works fine, still I see two entries in POST of console.
How can I avoid this. Is it the right way of handling such situations or is there anything other than this.
Fiddle
Console:
Ivrmapping[WelcomeNotes]
Ivrmapping[audioWelcomeUr...
Ivrmapping[audioWelcomeUr...
Ivrmapping[groupZCode] Ba
Ivrmapping[groupzName]
Ivrmapping[groupzName]
Ivrmapping[ivrnumber] 123467901
Ivrmapping[language]
Ivrmapping[language] 0
Ivrmapping[selectionList]
Ivrmapping[selectionList]
Do something like:
$("#multi_language > input").attr('disabled', true);
$("#single_language > input").attr('disabled', false);
Disabling inputs remove them from request.
The name attribute of your fields need to be different in a form control in order to differentiate the values in the request. This does not help you NOT send values across that aren't being used, but it lets you distinguish on the server side which values are for which radio button selection.

What is best way to make a calculation with input values from a html form?

I have a product form with 3 inputs
Price (fixed number)
Quantity (an input with type="text" where the user can enter a number)
Optional extra (a checkbox that the user can tick to add a number)
So far I have been using Javascript to get the value of the html elements, and then adding them and outputting the result into a html element.
I need the form to update on the fly, so that a user can enter a number into quantity and tick the box and the result update live. Unfortuantely I have been unbale to find a way to set variables when there is an update in a field, please see the link below of what I have done so far.
http://jsbin.com/tapen/2/watch?html,css,js,output
With Jquery its very easy to acess the value of an input field, or to set events to will execute when the field value is changed / updated.
As a pratical example i would suggest that you take a look in the code of a sample calculator using only jquery and html: http://firstemission.blogspot.com.br/2012/10/jquery-and-watermark-example.html

reload a page without losing field values like in FireFox using javascript

I'm very new to JavaScript and HTML.
I have a simple html form that has some select fields. When the user selects the options from the fields, a function is called that takes the values of the fields, multiples the values against other field values and spits out the results to an input text field named "result".
This is all working great, however I would love a way that instead of outputting the results to a text field, it would output as standard text on the page.
What I did was call the calculate function the tag, within the body, I inserted a document.write(result), then I created a button that calls the calculate function in addition to location.reload().
In Firefox, it works perfectly where it KEEPS the options selected, calculates the results, reloads the page and updates the document.write(result) value on the page.
But in IE or Safari, it resets the select options values to the default settings.
I hope this makes sense and appreciate any help!
how about this:
every time the user selects an option, or makes any sort of a selection, serialize that control, and slap the serialized string to the end of the current window.location, then navigate to it.
also, you will need to add javascript to check the current url, figure out what selection was made, and pro grammatically change the control's values. this way, when the user refreshes the page, the url will contain all of his selections.
got it?
Instead of document.write you could setup an element used specifically to hold the output value much like you do currently with the input element.
In place of the current input element used to output the result..
<span id="calculationResult"></span>
Then to populate that value and avoid reloading the page at all so that your fields maintain current values..
document.getElementById("calculationResult").innerHTML = result;
if you need to append you can always just create text nodes and append to the element which would be preferred anyway.
In order to keep text boxes' content as is, set the button as type="button" and call the calculate function and document.write in onclick. No reload, no mess.

Categories

Resources