Develop Reference

How to retain dropdown selected value after postback javascript?

I have a form in my site. Fiddle is here
I removed tag because it gives error without action.
Here my issue is when I have full form with action, if I click the form its post back the page. Meanwhile the drop down menu show select an option :
before the form is submitted
when I select
After form is submitted
But I want the form should remain the values which is selected before the form is submitted. How can I do that?

You could either have the form content dynamically generated on the server-side, and when you submit, you generate the new form with the data already in it.
Or you could resort to ajax instead and don't do form submits.

When you submit your form, it will reload the page. And when the page is reloaded, the select option is by default "select an option".
You have to store the value before submitting, and when the page is reloaded, check if there is something stored. You can do that with the localStorage for exemple.
Or the second solution is to load the content in ajax, with a webmethod.

How do I add an element to form data before submitting it?

NOTE: This is a very specific question regarding Javascript and HTML forms. I have searched and cannot find an answer for this particular question, which involves the Dojo framework, and does not involve JQuery. Please do not mark this as a "duplicate" of a JQuery question, because it does not involve JQuery.
I need to submit a form by clicking a button which is of type "button", not type "submit". However, I also need to include the name of the button that was clicked, which is not normally submitted under these circumstances. The reason for this change (from the original "submit" functionality) is because there can be upwards of a dozen buttons on this dynamic form and if they are all "submit" buttons, the users will press "enter" to move to the next field and will be confused when the form does something unexpected (like submitting) instead of moving to the next field.
The method I have come up with to do this is to change all the button type='submit' tags to button type='button' controls. I then added this small Javascript fragment (we use the Dojo library so this is Dojo syntax):
query("button[type='button']").on("click",function(e) {
dom.byId("myform").submit();
}
This works but on the server side, it's not processed correctly. When a submit button is pressed, the form data (parsed by Chrome) looks like:
myInput1: 1
myInput2: Some Data
_button_Button23: addSomeFields
the last line is the button name and ID. When the form is submitted using the Javascript above, the last line is missing:
myInput1: 1
myInput2: Some Data
I need to add the last element to the form data before submitting it.
I have searched for this information but unfortunately all the existing examples use Jquery, which is not available to me in this case. How can I add this information to the form data using either Dojo or regular Javascript?

you could add the button element to the form on submit, or create an hidden input element and add that to the form
var form = dom.byId('myform');
form.appendChild(e.target);
form.submit();

JQuery on form submit for appended form not working

I have a form that is appended to div on my web page when a user clicks on a button. I have JQuery that fires when a user clicks the button, this send an AJAX call to a PHP page that returns a form back to my AJAX and then it is appended to the div. Now, I am using JQuery to process this new form's submission, but it does not seem to work for the appended forms. Is this because the form was not there at first page load? What can I do?
The JQuery works fine with the exact same forms that are there from the start.
My JQUERY:
$(".comment-form").submit(function() {
// Jquery form stuff
});

For dynamically added elements use this:
$(document).on('submit','.comment-form',function(){});

You might need to bind the submit action to elements that are added to the DOM through javascript.
So after the form is added through javascript bind the submit function again.
$('.comment-form').submit(function(){});

Why do some forms auto-submit on clicking the enter button and others do not?

Problem:
I never specify a submit button, as I use ajax to submit my forms, but some forms have an auto-submit feature regardless.
Background:
Throughout my application I have instances when clicking the enter button will auto-submit a form and other instances where it will do nothing. For example; there are times where I will need to capture the "enter" button to get an auto-submit but other times where it seems to just happen on it's own and I have not found the pattern. Except that the dynamically created forms seem to have the auto-submit feature but static ones do not? Does anyone else have a similar issue.
Example:
All of my forms have the submit button removed and I specify no target or action elements as seen below. All of the forms have their data transmitted through AJAX.
<form id="ajaxForm">
<input>
</form>
<button>ButtonOutSideForm</button>
Not looking for a way to prevent auto-submit
I already know about "onsubmit = return false" and e.preventDefault. I'm not looking for a way to disable auto-submit. My question is why does it's presence seem arbitrary. Thanks.

As LouD pointed out. Some browsers will auto-submit if the form only contains one input element.Why does forms with single input field submit upon pressing enter key in input

add a text field on click of a link: javascript disabled

How do I add a text field on click of a link inside a form when javascript is disabled? It should not refresh the page and should store the form values which are present earlier.

Since Javascript is disabled, the interaction should occur using a server. You should call an appropriate event on the server and this latter will return the page with an added textfield.