Shulou(Shulou.com)06/03 Report--

This article mainly introduces the ways of web form submission, which has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, let the editor take you to know about it.

Let's first take a look at several ways to submit a form:

1 、

2 、

Submit

3 、

Description: when a user submits a button or image button, the form is submitted. You can define the submit button using or both, as long as the value of its property is set to "submit", while the image button is defined by setting the type property value to "image". Therefore, we can submit the form as long as we click the code-generated button.

4. Prevent form submission

As long as any of the buttons listed above exist in the form, press enter to submit the form if the corresponding form control has focus. If there is no submit button in the form, pressing enter will not submit the form.

When the form is submitted in this way, the browser triggers the submit event before sending the request to the server. In this way, we have the opportunity to validate the form data and decide whether to allow the form to be submitted. The default behavior of blocking this event can cancel the form submission. For example, the following code prevents form submission:

The code is as follows:

Var EventUtil = {

AddHandler: function (element, type, handler) {

If (element.addEventListener) {

Element.addEventListener (type, handler, false)

} else if (element.attachEvent) {

Element.attachEvent ("on" + type, handler)

} else {

Element ["on" + type] = handler

}

}

GetEvent: function (event) {

Return event? Event: window.event

}

PreventDefault: function (event) {

If (event.preventDefault) {

Event.preventDefault ()

} else {

Event.returnValue = false

}

}

}

Var form = document.getElementById ("myForm")

EventUtil.addHandler (form, "submit", function () {

/ / get the event object

Event = EventUtil.getEvent (event)

/ / block default events

EventUtil.preventDefault (event)

});

Calling the preventDefault () method prevents the form from being submitted. In general, this technique can be used when form data is invalid and cannot be sent to the server.

5. In JavaScript, you can also submit a form by programmatically calling the submit () method.

In this way, there is no need for the form to contain a submit button, and the form can be submitted normally at any time. Let's look at an example:

Var form = document.getElementById ("myForm")

/ / submit the form

Form.submit ()

The submit event is not triggered when the form is submitted in the form of a call to the submit () method, so remember to validate the form data before calling this method.

The biggest problem that may arise when submitting a form is to submit the form repeatedly. After submitting the form for the first time, users may become impatient if they don't respond for a long time. At this point, they may click the submit button repeatedly. The result is often troublesome (because the server has to handle duplicate requests), or cause errors (if an order is placed, several more may be ordered).

There are two ways to solve this problem:

Disable the submit button after the first submission of the form

Use the onsubmit event handler to cancel subsequent form submission operations.

Next, several methods of submitting through form will be described in detail.

Method 1: use the onsubmit () function of form (frequently used). The code is as follows:

The code is as follows:

Function validateForm () {

If (document.reply.title.value = "") {/ / obtain form by form name

Alert ("please input the title!")

Document.reply.title.focus ()

Return false

}

If (document.forms [0] .cont.value = "") {/ / get form through the forms array

Alert ("please input the content!")

Document.reply.cont.focus ()

Return false

}

Return true

}

Method 3: use the onclick () function of the button component to manually submit the code as follows:

The code is as follows:

Function modifyItem () {

If (trim (document.getElementById ("itemName") .value) = "") {

Alert ("item name cannot be empty!")

Document.getElementById (itemName) .focus ()

Return

}

With (document.getElementById ("itemForm")) {

Method = "post"

Action = "item.do?command=modify&pageNo=$ {itemForm.pageNo}"

Submit ()

}

}

/ / return

Function goBack () {

Window.self.location = "item.do?command=list&pageNo=$ {itemForm.pageNo}"

}

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.