Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I am trying to create a google web map using google maps v3, and I want to include a function whereby when the user selects a time (e.g. 6AM) in a select option (dropdown list), the markers fitting this condition will appear. However, when I try this, google chrome's console only detects the default selected option and doesn't change the value as selected accordingly. (you can say it doesn't do a postback I suppose?) I looked around and found a solution from this question, and added the codes in accordingly
<select id="ddlTime" onchange="this.form.submit()"> ...
but this is what was returned in my console
Uncaught TypeError: Cannot read property 'submit' of null
this does not reference the select when used in that manner. As you've tagged jQuery, here's how to do it:
$('#ddlTime').change(function() {
$(this).closest('form').submit();
});
If you would prefer to stick with the onchange attribute (which I would advise against, as they are outdated, ugly and bad for separation of concerns) then you could access the forms collection of the window:
<select id="ddlTime" onchange="forms[0].submit()">
</select>
The above is obviously assuming that the form you want to submit is the first one in the DOM.
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 1 year ago.
Improve this question
what i need is a system that will let me send some data when a user clicks a link.
for example, if i had an html or javascript file that would display a color depending on data it gets, and the link you click to get there sends the data to that site that determines the color (sets a variable in javascript, or something like that).
i havent tried anything yet since i am new to html and have no idea how to do things that involve interacting scripts. i have looked at github projects with the results i want that use a '#' in the url
You can send the color you want the other site to show in a GET parameter.
E.g, your anchor could look something like this:
Red
Then, on site.com/page, you can use JavaScript to get the color parameter value:
const color = new URLSearchParams(window.location.search).get('color')
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 3 years ago.
Improve this question
Using HTML5's reset button I can easily reset the form to it's "initial values" (the ones when the form was created/loaded).
What happens is, I submit the form using ajax, that means the entity/data is now updated. So, is there a way to tell the browser that those submited values are now the "initial values", so if the user hits the reset button it does not reset to the old values?
Thanks!
[edited]
We have standard forms for our applications, with a Save/Cancel button on them. If you save the entity, we remain in the form. We're using Aurelia Framework with Syncfusion for our UI.
I don't know much about Aurelia or Syncfusion, but an HTML reset input will reset every input element in the form to its value attribute. So if you use setAttribute to replace the element's value attribute with the new value, the reset button will use that one as the "initial" value from then on.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 3 years ago.
Improve this question
I am using the typeahead.js plugin which can be used to add autocomplete features to HTML input box.
So if you load the script and do
<input class="typeahead" type="text" id="partNumberInput" aria-describedby="enter Part Number" placeholder="Part Number">
The script will look for all the DOM elements with the class typeahead and add bunch of parent elements and does some other things which helps to give the autocomplete feature.
Now, I wanted to add input boxes dynamically using javascript append with the class of typeahead. Since the typeahead only runs once when the page loads at the beginning it does not get to do all the stuff I mentioned before.
Is this a scenario where I reload the script every time a user clicks a button to add another input box with typeahead class?
The very first example in the examples shows how to call typeahead on any element in the page.
Rather than relying on putting a specific class on your elements so that typeahead detects them, you can call typeahead on your target element(s) using any class you want.
For example, if you have a brand new element that you dynamically placed into the DOM, and it has the class whatever, then you can load typeahead on that element by doing:
$('.whatever').typeahead({
// your options here
}, {
// more options here, see examples
})
You would want to reload the script tag itself; that could have unintended (potentially detrimental) effects on your app.
In general, the form $('.whatever').typeahead(...) is how you generally call any jQuery plugin, in order to do operations with that plugin on the elements specified by the selector.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I am making a HTML form where I need my users to be able to get back whatever data that they have filled up, after closing the window/tab and reopening it.
If I do it with JavaScript cookies or HTML 5 local storage, Then I will have to write code for every single input tag there is, even if its like thousands.
So, what would be the most efficient way to accomplish this?
P.S. I am using PHP for back end processing.
I want the function just like we have in the browser like restoring the session in firefox or chrome.
you can use like this with localstorage.
localStorage.setItem('formData', JSON.stringify($('form').serialize())); //comfortable java script way.
or with cookies you can like this
$.cookie('formData', JSON.stringify($('form').serialize())); //can support old browsers also.
please read the excellent accepted answer at storage-vs-cookies you will know which one to use.
LocalStorage is your best option.
I will have to write code for every single input tag there is, even if it's like thousands.
That is not true. You can use a JS loop, or a jQuery each, to do that:
$("input").each(function(){
$(this).val(storage.getItem($(this).attr("id")));
})
.change(function(){
storage.setItem($(this).attr("id"), $(this).val());
});
When the page loads, you loop through each input on the page and put content into it based on the input's ID.Then you attach an event listener to all the inputs, which saves any changes into local storage.
I have not tested this, and it is only for illustrations purposes. This code probably won't work straight away, but I hope you understand the concept.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I'm building a very basic website, and am currently working user creation. The user fills out a form, which then has the inputs validated and written to a MYSQL DB if valid.
I'd like to add some basic error checking while the user is inputting data - for example:
Validate the username the user is attempting to select against the Users table in the database.
Validate that the FirstName/LastName/Email fields contain values.
Validate that the password fields match.
You get the idea...if any of the above conditions fails, I'd like the label for the textbox to turn red, bold, and a slightly different size than the form otherwise, as well as provide a simple error message for the user somewhere on the page.
I've written a simple javascript function that can perform #2 and #3 above, and change the appropriate text to the "error" style.
My questions are:
How do I query the MYSQL db when the cursor exits the username field (to check if the username is still available)? I can easily do this when the user actually submits the form, but I'd like to query once it appears that the user is done typing, i.e. when the cursor leaves the textbox.
How do I display the simple error message on the page (and control what it says)?
How do I get the "default" or "standard" font size/weight/color values from the css stylesheet that controls the webpage's layout, so that I can then change the element back once the user corrects the error condition?
Is javascript even the right way to do this? I'm not incredibly familiar with it, but it seems similar enough to other languages I've worked with that I can kind of muddle through it.
Thank you in advance - if for some reason you think this question has been previously asked/answered, please provide a link for my benefit, as I was unable to find any questions directly on point.
First and foremost you need to understand that pure javascript in client side only. Something that the client could even turn off if the so desired.
Javascript is for display (like having fancy input validation or anything that could change the DOM after the page is loaded).
Server side languages like PHP is the only way you could talk to a MYSQL database. (Not saying that php is the only one-- others might include Ruby/Python/Node.js)
But everything you laid out here is a question/project itself.
If you want to check some information without refreshing the page, you'll need to look into AJAX.
The most basic message would be something like alert('That name is taken!').
You could add a new class to the form element with the error, so that it gets some additional CSS properties. Then once the user corrects the error, remove that class from the element and the browser will redraw the element with the original properties.
JavaScript will handle the AJAX request part and the changing styles part. Obviously the actual database querying will happen through your server-side language of choice. But it sounds like you're okay with that side.