HTML5 reset button: change initial values after a save/submit [closed] - javascript

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.

Related

how to store new elements added in webpage by user? [closed]

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 4 years ago.
Improve this question
I want to store user changes in my webpage so that user can go to next page then come back on that page so that elements which he added should be there when he comes back for editing the webpage. I do not want to store data to the database until he submits the form.
let me explain with the example
in this image user add a new item to list by entering the name in input field I want to store these new items so that user can go to next and can come back with the list item present
You can use JavaScript to set a cookie with all the changes you want to keep. If the user returns to the page later, restore the changes from the cookie.

How to make sure text processes onchange before form submit [closed]

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 5 years ago.
Improve this question
I have an input with an onchange event. This event is called appropriately provided the text box looses focus. However, when clicking a button for form submission while the text box still has focus, this onchange event is not being called or it is not finishing before submitting the form. What is the best way to make sure this event is processed before submitting the form?
If you are doing ajax call in your 'onChange' then that makes complete sense now. You have to wait for the success and only then allow submit. Either disable the submit button until all processing is finished or you could use a promise for the ajax and use it in the submit function (developer.mozilla.org/en/docs/Web/JavaScript/Reference/…)

JavaScript/HTML website: detect option selected in select option [closed]

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.

How to store HTML form data in local? [closed]

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.

JQuery creating divs and associated buttons on the fly [closed]

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 8 years ago.
Improve this question
I'm creating text fields each time a button is clicked, with each new div I create I also want to give it a button to delete this field. As can be seen in this JSFiddle.
However the button associated with each newly created div doesn't delete it's associated field. How can this delete that text fields?
You have to use delegation.
This works for the elements new to the DOM, after it was already loaded.
$(document).on('click','.deleteButton',function(){
$(this).closest('.form-group').hide();//remove
});
JSFiddle
Note: I added deleteButton class to the dynamically inserted buttons.
You can set in your button an onclick function and handle delete there like following:
window.deleteRow = function(obj){
$(obj).parent().remove();
}
fiddle

Categories

Resources