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.
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'm currently using multifilter (a jquery plugin at https://tommyp.github.io/multifilter/) in my code. if you take a look at that link it shows you how it filters the table in realtime. my problem is that whatever text i enter into the input boxes are lost when i refresh the page. i figured out that if i set the input to autocomplete=on, like so:
<input autocomplete='on' class='filter' name='name' placeholder='name' data-col='name'/>
it will retain the values in the input boxes. however, it does not trigger the multifilter.js upon refresh requiring me to still type something into the input boxes.
how would i trigger the plugin upon refresh so that the table will automatically filter results based on whatever text was in the input boxes?
You won't be able to use autocomplete for this, since autocomplete is a feature that is used for something different (w3schools autocomplete):
Autocomplete allows the browser to predict the value. When a user starts to type in a field, the browser should display options to fill in the field, based on earlier typed values.
A good solution to solving your problem is localStorage.
The following code is what you're looking for:
$(document).ready(function() {
var name = localStorage.getItem('name') || '';
$("#name").val(name);
$('.filter').multifilter(); // for filtering values in the table
$('#name').keyup(function(e) {
var name = $(this).val();
localStorage.setItem('name', name);
});
});
The above code uses the localStorage API to get a value that has already been set with a call to localStorage.setItem() and sets the value of the input equal to the value retrieved from the getItem() call. The code then checks everytime the user types something into the input and saves the value for later retrieval using localStorage.setItem().
This way, the value is persistent and each time the user refreshes the page, because the value is stored using localStorage, it loads the value into the input using localStorage (note that you do need to have 3rd party cookies enabled to use lcoalStorage).
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
I am using some JQuery Combobox that you can check out here: https://simpletutorials.com/uploads/1860/demo/index.html
As you can see, you can start typing and get the results filtered.
However, once you have selected a value, when clicking on the arrow to open the list, no other values are shown anymore. So, if I want to change college/state, I need to manually clear the input value. I don't like this, so I want to modify it.
I changed that code and added this JS on the click event of the list:
onclick="document.getElementById('statesCombo-ddi').value='';"
This line basically finds the input by id and sets its value to an empty string.
You can try out by looking for the td element having class "stc-button" (with Chrome, just focus on the arrow of the second combo box) and add my code to the tag.
===EDIT===
You can obtain the same results by adding this code directly to the input:
onclick="this.value=''"
===END EDIT===
This has a weird behavior:
If I SELECT an element from the list, it clears the value and everything works correctly.
If I TYPE some letters and then select a value from the list, no item is shown in the list after clicking.
What's wrong with it?
You can override one of the combo box methods to accomplish this:
STComboBox.prototype.filterAndResetSelected = function() {
this.$('ddi').val('');
this.filterList('');
this.selectRow(0);
this.$('ddl').scrollTop(0);
};
Does this help?
The unminified code is provided, is relatively small (12kb) and is fairly well commented, so you could make this modification directly to the source if you'd like.
Edit: Fixed to clear the input value (as indicated in the comment below)
By reading the source and doing a little debugging with Chrome's inspector (Control+Shift+i), you can find the particular ID of the element you need to clear (#collegesCombo-ddi) in order to clear the input box. Once you've found the element's ID you need to clear (and being very careful with plugins that assign multiple elements with the same ID, which is not allowed in the standard, and an indicator of poorly-written code):
$('#collegesCombo-ddi').val('');
I am using jQuery on method to do a search and populate my div with the search results. I have an input text box which is part of the div's contents. I am using the keyup event to read the text entered and then using ajax to call my server and do the search. When I return the results I populate the text box with the text that has been typed so far. The rest of the content I return is the search results. This is all working fine.
What I want to however is have the focus be placed in my input text box and the cursor placed after the last character typed so that the user can just keep typing and the search results will keep changing with every keystroke. I imagine there is some way to do this with jQuery and JavaScript but I don't know how.
Edit:
Maybe I wasn't clear, but I found the answer at this question: jQuery - Place cursor in input field when link clicked.
Basically all I needed to do was:
var searchBox = $("#search");
searchBox.focus();
searchBox[0].selectionStart = searchBox[0].selectionEnd = searchBox.val().length;
I think you can use select2 plugin. Take a look here, maybe it can help you: http://ivaynberg.github.io/select2/
If I understand correctly, you need to do less rather than more.
You say, "when I return the results I populate the text box with the text that has been typed so far".
Why? The text that has been typed so far is already in the text box, so it should not need to be replaced. By not replacing the text, the user will be able to carry on typing.
There's an additional aspect that you may not have considered ...
The user will almost undoubtedly be able to out-type the ajax responses, so you should take measures to abort an unfulfilled ajax request before issuing a new one. This is made simple by the jQuery jqXHR object returned by $.ajax() (and its shorthand versions) in the form of an abort() method.
Failure to abort could result in the wrong set of search results being displayed against the current text, as the ajax responses are not guaranteed to arrive back in the same order their requests were issued.