Populate array in Jquery and pass to controller - javascript

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 + ';';

Related

Save all edit on a form with button click

I have a form with multiple inputs, checkboxes, textarea, etc. On button click I want to execute a save values for any element that may have changed.
Due to my user base I can't always guarantee that they will press ENTER or TAB. So the button will be labeled SAVE CHANGES.
The problem is that without leaving an input element or pressing ENTER the new value is not actually written into the input, and therefore the SAVE BUTTON does not now the input value has changed.
So. How to implement code that scrubs all elements for any value changes. Something that forces all inputs to be updated with new values.
Remember that the user will edit a value and immediately select SAVE button without an ENTER or exit from the element.
You can execute your script that saves every event that occurs in the input as follows
Jquery
$("input").change(function(){
alert("The text has been changed.");
});
Javascript
object.addEventListener("change", myScript);
You could also review the documentation for keyup events so that it is saved every time the user changes the value or when the user presses a key. It could be useful in some cases.
My solution was to load all the records data retrieved into an array. Then, before exit collect all the current values on the form in another array.
When the user selects another record do a diff on the arrays and voila we have the pairs that need saving. I left the form on change as well for when the user edits a value and presses ENTER.
This way we hope to catch any changes. The new function called is also called on the Windows.beforeunload.

Function doesn't output data taken from user input

I'm writing a small program that takes user input from form text fields and when the generate button is clicked, it displays the collected data unto another div.
Problem is once it collects the input (I know this because I used an alert test to know where the function breaks), it doesn't display. It stops exactly where the display commands start.
Any advice?
I'm not sure why you needed to put the output functions into the nested function, they should have worked directly.
But with the nested function, you need to call it. Put:
outputstuff();
after alert("working 8");
The generate button appears to submit the form on return from calling generate - the default type of a button is "submit" and it has the id "submitbutton".
If the page is reloaded from the server, the browser may fill in previously filled in input values but won't copy them into the SPAN elements.

Achieving dependency on the Shuttle value in Oracle Apex

Good evening!
I'm making a page in Oracle Apex, which leads to creating a document. This page has many fields like "text field" or "select list" and so on with its own logic, and I've got stuck with two ones - the shuttle field (let it be named A) and the text field (let it be named B), which should depend on the first one. The scheme of their interaction is this:
Shuttle A has values "A", "B", "C", "D" and "others";
If one chooses value "others" among others from the shuttle, one also should fill the text field B. In other words, in this case field B should be required.
The problem I have is that I can't make the field B to behave depending on field A values. I've already tried to use JavaScript function triggering from "onChange" event, which should have been working, if the right half of the shuttle B had got "others" value. But this way didn't work as I wanted, because "onChange" event arises on every click on both halfs of shuttle, and I need to have it arosen only on moving the value "others" (what can be done in two ways: on double click or due to click on arrow icon on shuttle).
So the question is: how to synchronize shuttle and text field in "master-detail" logic?
p.s. I'm using Oracle Apex 4.2.6.0003. Also I know that I can have a workaround, using only select lists, but I'd like to try to solve the problem with using shuttle, especially considering that the last one could have almost infinite count of values.
With static values as list of values for shuttle:
STATIC:A;A,B;B,C;C,Others;OTHERS
Using jvascript code like this:
$("#P40_SHUTTLE").change(function(){
console.log(apex.item(this).getValue().indexOf("OTHERS") != -1);
})
Will return true when OTHERS has been selected (it is in the values of the shuttle). Change is the correct event to listen for here!
Translating that to a DA:
On change of the shuttle
Use the "When" condition of type "JavaScript expression" and use this code:
apex.item(this.triggeringElement).getValue().indexOf("OTHERS") != -1
You can then use the True and False actions of the DA to for example show and hide the text field as required. I'd not go further than that on the front end. Maybe show a required label for the textfield, as it'll only get shown when the field is shown.
Add a server side validation (on submit) on the textfield where you'll inspect the shuttle values for the existence of the OTHERS value. If it's present, then the text field should be required.
Validation created on the textfield.
Condition of type "PLSQL Function Body"
DECLARE
l_vc_arr2 APEX_APPLICATION_GLOBAL.VC_ARR2;
BEGIN
l_vc_arr2 := APEX_UTIL.STRING_TO_TABLE(:P40_SHUTTLE);
FOR z IN 1..l_vc_arr2.count LOOP
IF l_vc_arr2(z) = 'OTHERS' THEN
RETURN TRUE;
END IF;
END LOOP;
RETURN FALSE;
END;
Type of the validation: IS NOT NULL
Item: the text field.
The validation will only fire when others is present in the selected values, and then will require the text field to be required.

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