Skip to main content

Creating and submitting a form using javascript

In this article I will show you how to create a form dynamically using JavaScript and submit it.

JavaScript provides a way to create a DOM element easily using createElement method.

see the below code snippet for creating a form element

var form = document.createElement('form');

using same method you can create other element as well see the below code which creates input element

var field1 = document.createElement('input');

After creating form element you can set the action, method, target attributes of the form element as below.

form.method = 'POST';
form.action = 'urlToPost';
form.target = '_blank'

for filed element we need to set the name of the element and value of the element and need to add element to the form element as below

field1.name = 'username';
field1.value = field1val;
form.appendChild(field1);

after we add all the element to the form, we need to add form to the body of page and then submit the form as below

document.body.appednChild(form);
form.submit();

That’s it.

Now see the below complete function for Creating and submitting form using JavaScript.

function CreateandSubmitForm(urlToPost, field1val, field2val)
{
var form = document.createElement('form');
var field1 = document.createElement('input');
var field2 = document.createElement('input');

form.method = 'POST';
form.action = urlToPost;

field1.name = 'username';
field1.value = field1val;
form.appendChild(field1);

field2.name = 'password';
field2.value = field2val;
form.appendChild(field2);

document.body.appednChild(form);
form.submit();
}

 

Introduction to Class in OOPS with C#.net

Understanding class

A class is like a blueprint. It allows us to create our own custom data types by grouping methods, events and variables of different types like int, string or any other custom types. Class defines the data and behavior of a type.

A class can be defined with a keyword “class” followed by the class name and body of the class with a pair of curly braces.
Let’s have a look at the general form of a class body.

below is the general form of a class body.

//Public is the access specifier while Calculator is the name of the class
public class Calculator
{
//variables declaration
private int var1;
private int var2;

//methods declaration
public decimal Add(decimal val1, decimal val2)
{
return val1+val2;
}
}

Classes supports inheritance while structs can’t support it.
Access specifiers plays an important role in the class definition, which specify the rules for accessing the member as well as the class itself. Default access specifier for the class is internal while for member it is private.

Data type specifies the type of variable, and return type specifies the data type of the data the method returns.

To access the class members we need to create an object of the class if class is not static, and using object name(dot)membername or member function name

See the below code for accessing Add method of Calculator class

Calculator calc = new Calculator();
decimal finalSum = calc.Add(10,20);