Make text appear in an input as I click on a button - javascript

I am a novice when it comes to javascript and I need some help with a specific thing:
Make text appear in an input as I click on a button.
A bit of a situation: In a HTML form the user selects 2 tickets in a different input. Let's say each ticket is worth $5, I want the script to show the total price of the tickets in an input at the bottom.
Here is how the script should behave

First make a variable for the total price. You will then need to write a formulae that multiplies the first input by the price (In this case $5) and saves this number to the variable created previously. Finally document.write this variable into the second input

Related

Form input to define number of variables in JS array

I had a class assignment to create a form letter that allows form input to insert the entered data into the document once a submit button is pressed.
The newest assignment instructs me to add a new input field to allow me to input the number of recipients to create this letter for, such that I input a number and hit enter, and the document updates to have multiple input fields for each recipient in a JS array. Then, I can type in a new receipient name in each field created, and have a new page create the mockups of the letter to each recipient recursively.
In other words, the web page says "How many people do you want to send this to?" - I put in a number, hit enter, and the page updates for a "Name" field for each person, plus the other fields. Then, after all fields are filled and submit is pressed, a new page opens and shows the full form letter for each name I input.
I dont have a clue how to do this, and I bumbled through the initial assignment. Any suggestions? And yes, I'm a 100% JS noob, and I'm not all that well versed with HTML5 either, so please be verbose and gentle with me. :)
Thanks!!

NaN error message in field transferring text radio button values to another field

My objective is to accumulate results of a multi-page questionnaire form into a summary page. Specifically I wish to take the selection from radio buttons and check boxes and place their values into another field on the summary page. This works fine when the radio button selections are numbers. I use the following script in the calculation pane (Custom calculation script) of the destination field of the summary page e.g.
var v1 = +getField("Hx.LBPWorst").value;
event.value=v1
The variable Hx.LBPWorst is a radio button with 11 buttons, 0-10 and the selected option is transferred to another field on the summary page without problems
My problem is that I wish to transfer text choices rather than numbers from a radio button E.g.
The radio button Hx.mech.prosit has four options “Worse”, “Better”, “NE”, “Varies”. The destination field for the selected option is a field with the format set to “None”. I have attempted to use the same structure i.e.
var v2 = +getField("Hx.mech.prosit").value;
event.value=v2
In this case the destination variable is filled with NaN i.e. Not a Number. I have read some of the questions and answers in this forum and apparently the problem is that radio buttons actually don’t store the selection as text. How can I achieve my objective and still use radio buttons (or check boxes)?
Change +getField to getField
var v2 = getField("Hx.mech.prosit").value;
The Unary plus (+) is changing the string to a number. When it can not convert it to a number, you get the NaN.

Javascript new window form field error

I have created a new window and have fields that need to be completed, one a text field (for a numeric value) and the other is a radio button option (choose between 7 radio buttons). I can enter text and select a radio button but cannot obtain the value for the field id, e.g. myWindow.document.write ('Copies required: ') and for the button choice
myWindow.document.write ('6x4 ').
How do I obtain the value for copies and tell if the radio button has been checked. Have displayed the value for copies and always says undefined. Any help would be very much appreciated. Thanks.
How did you displayed the value?
In simple javascript it should be a code like:
alert(document.getElementById('IdofyourObject').value);
If you are using jQuery it would be:
alert($('#IdofyourObject').val());
Maybe you can share your code.

Correct number is not being displayed in the textbox

Problem:
In the "Number of Answers" textbox, it should display the number 1, but it doesn't, it displays the number 2 and the reason it is displaying this number is that before the buttons changed, you selected 2 letter buttons, so it displays 2 in the textbox because you previously chose 2 letter buttons.
Now this is happening because of this code:
$('.answertxt', context).val(context.find('.answerBtnsOn').length > 0 ? context.find('.answerBtnsOn').length : '');,
in the $('.gridBtns').on('click', function() but I do need this code.
The reason I need this code is because lets say there is 7 letter buttons "A-G" and you turn on all the letter buttons, the textbox would display number "7", but if I change my mind and I want to only display 5 letter buttons "A-E", then the textbox would change from "7" to "5" as now only 5 buttons are turned on. That is why I need this code.
So my question is that if the user has clicked on the "Add" button, how can I get the number from the "Number of Answers" column within the row added be displayed in the textbox?
Below is the code I have where it is suppose to display the number within the textbox when the "Add" button is clicked on but it is over written because of the "$('#btn'+gridValues).trigger('click');" and in that code is the
$('.answertxt', context).val(context.find('.answerBtnsOn').length > 0 ? context.find('.answerBtnsOn').length : '');,
in the $('.gridBtns').on('click', function()
function addwindow(numberAnswer, gridValues, btn) {
$('#mainNumberAnswerTxt').val(numberAnswer);
$('#btn'+gridValues).trigger('click');
}
I think the important question is: why do you have to specify the number of answers AND the set of possible answers in the first place? That's redundancy. And if you want to have this sort of redundancy and keep it consistent at all times, you have to define constraints to do so, e.g. identify one of the things as primary -- either the textbox should always display the number of pressed buttons (and therefore be read-only) or (not really likely) the number of pressed buttons should always equal the number in the text box.
Allowing the user to edit the two independently is bound to cause inconsistency of the type you describe, even without the 'Add' button. I mean, I can type "2" and then go ahead and mark all the answers as possible.
I think you can add a custom attribute to the .gridBtns elements that specify who triggered the click button so that when the user click on the .gridBtns element you can use the $(this).attr("cutom attribute name") and use this value to check who triggered the action and you would react based on that.

How to gather values of multiple JS-generated input fields?

I have a form in which I have an add button. When the add button is clicked a new text box appears where user can enter some data. The user can click add button any number of times. I am using javascript to dynamically generate textboxes. I can maintain a count of the number of textboxes generated. All the values entered in these text boxes have to be stored in database using JSP. How can I store those values in the database as I do not know how many textboxes were created?
You could assign the text box count (increment an integer every time they click the Add button) to a hidden input field in the form, then retrieve the value of that field in the JSP when the form is posted.
If you give each new text box a new name, e.g. text{count}, then in your JSP just get the parameters from text0 to text{maxCount}, where maxCount is the count from the hidden field.

Categories