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.
Related
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.
I am looking for a way with my form I am currently showing and hiding fields based on the values selected in the dropdowns, What I want to know is.
when i select yes and the field below displays I click submit on the form, if I return to the form the value is still present but the field is hidden again...
How can I prevent that from happening by default?
I want my browser to remember the jQuery change funtions state I left it at after I submit the form.
What you want to do is 'refresh fields visibility' in some cases. I suggest you to create such function refreshFieldsVisibility. Such function reads values from the dropdown and shows/hide the proper field. Then call your function:
When elements state is changed, with on('change') events.
When document is ready (this is your case as I understand), with $(document).ready
Any other situation if necessary
Say I want to load an html page with a text box, "add" and "remove" buttons, and an empty text field below.
If I type "Sally" and click the add button, "Sally" appears in the text field below.
Then I type "Greg" and click the add button, "Greg" appears under Sally.
Then I type "Sally" and click the remove button, and only "Greg" remains in the text box.
I want "Greg" to still be the only item displayed in the text box when I close and re-open the page later.
Is the most efficient way to do this to serialize() the items that are typed in the text box, and then deserialize them in order to display them? Or is there a better/more efficient way to do this.
Edit: This method needs to be offline, using an SQL database/etc. is not an option.
One option is to store this information in localstorage.
After every time a user presses the add or remove button you:
Update your JS array (either add the item, remove the
item if it exists, etc)
Visually update your text field where you display the array items.
Serialize the array and save it to local storage (which if you click on the link above, you can see how to do)
On page load, reload the serialized array from localstorage, unserialize it, save it to a variable on the page, and visually update your text field where you display the array items.
Ι have a form where it has an input element where a user can enter the url-this happens when he clicks the edit button at which point the input fields appears.
If the user starts typing the url and clicks the cancel button what ever he was typing becomes null and the input field is hidden again from view(a class is added to the element with display:none).
And here is where the problem, appears:
If the user types something and clicks the save button the data(url) is sent to the server with an ajax request.That means the next time the forms loads the user will see the submitted url. If, at that point chooses to edit the form,and press the cancel button the submitted url is hidden from view...something not desirable of course because we are talking here about the submitted data.
How I can distinguish the one from the other,-submitted data and non-submitted data-on cancel.
Here is some code, first related to clicking the cancel button and secondly with the function which adds the classes to the input element:
$('#canceladrs').click(function() {
var urlcancel=$.trim($('input#wwwaddress').val());
save=2;
close_url(save,urlcancel);
closeaddress();
});
here is the close_url() function
function close_url(savearg,urlarg,cancelarg)
{
console.log(urlarg);
if(savearg===1)// save button clicking here
{ if(urlarg==='')
{
$('input#wwwaddress').addClass('hideurl');
$('label[for=url]').addClass('hideurl');
$('input#wwwaddress').val(null);
}
else if(urlarg!=='')
{
$('input#wwwaddress').removeClass('hideurl');
$('label[for=url]').removeClass('hideurl');
$('input#wwwaddress').val(urlarg);
}
}
else if(savearg===2)//cancel button clicking here
{if((urlarg!=='')||(urlarg===''))
{
$('input#wwwaddress').addClass('hideurl');
$('label[for=url]').addClass('hideurl');
}
}
}
}
As you see above I am trying to mark the clicking of the cancel button setting save=2.
Ok, based on your comment, you do not want to hide an input if it has text in it. In this case allow me to refer to a snippet of the code you provided:
if((urlarg!=='')||(urlarg==='')){
$('input#wwwaddress').addClass('hideurl');
$('label[for=url]').addClass('hideurl');
}
The logic here reads if urlarg has no value or if urlarg has a value add a class that hides the input and label.
Thus you are hiding the input and label in all cases.
If you do not want to hide input elements when they have content, do not add the urlarg !== '' condition.
I also recommend adding a separate event handler for cancel and save events, such that you do not have to send special signals such as save to your function.
Also, as I mentioned, jquery already has a hide, no need to do that yourself.
Finally, you may want to trim your urlarg string, because if a user enters just a space, that's essential no value, but your script will treat it as having a value.
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.