JS: cannot jump when buttons exist? Principles of Form submission

In development, there is a form, which is probably like this:

<script>  function formSubmit(){     document.getElementById("form1").submit();  }  </script>  <form action="xxx.php" id='form1' method="post">  <a href="javascipt:;"></a>  </form>  

In XXX. php, headers are redirected. Then the problem occurs. This form is submitted, but cannot jump. Why?

If the <A> label and IMG label are removed and replaced with <input type = "button" onclick = "formsubmit ()">, the submission is successful and the jump is successful. Why can't I use the <A> label?

It is suspected that the <A> label's href = "javascript:;"> result in a jump submission failure. Therefore, the <A> label is removed and onclick is added to the IMG label, sure enough.

The reason why <A> label is used is because of the relationship between the mouse style. Now that you know this, try to change href = "javascript:;" "#", jump successful (the disadvantage of # Is that # is the anchor. If nothing is added, the page will automatically scroll to the top after you click it, which is not conducive to user experience)

Alternatively, if you do not use the <A> label, simply add style = "cursor: Pointer" to the label. You can move the mouse over the image to display a small hand.

 

Form only submits values, without page Jump.

<Form action = "savereport.htm" method = "Post"> ...... <Input type = "Submit" value = "Save Report"/> </form>

Click the submit button or press enter to submit the data to the savereport page. However, the savereport page is displayed after submission.

 

How to achieve

Submit dataSavereport (Action of form points to) page, but the page does not jump, That is, keep the current page unchanged ??

This is especially urgent when loading a page.

Use jquery's ajaxsubmit function and form's onsubmit function to complete, As follows:

<Form ID = "savereportform" Action = "savereport.htm" method = "Post" onsubmit = "Return savereport (); "> <input type =" Submit "value =" Save Report "/> </form>

Add an ID to form for calling in jquery, and add an onsubmit function for submitting the form before submit.

 

The corresponding function of savereport is

Function savereport () {// jquery form submission $ ("# showdataform "). ajaxsubmit (function (Message) {// after the table ticket is successfully submitted, messageindicates the returned content of savereport.htm on the page to be submitted}); Return false; // The returned value must be false; otherwise, the form will perform the submit operation again and the page jumps}

 

 

Principles of Form submission

1. HTTPHow to submit a form

<Form> the label attribute enctype specifies the encoding method used to submit form data. There are three optional values:

Application/X-WWW-form-urlencoded:

This is the default encoding method. It only processes the value attribute values in the form field. In this method, the form will process the value of the form field as a URL.

Multipart/form-data:

This encoding method processes form data in the form of a binary stream, which encapsulates the file content specified by the file field into the request parameters.

Text/plain:

This method is convenient when the form's action attribute value is in the form of mailto: URL. This method is mainly applicable to sending emails directly through the form.

 

2.File tag

<Input type = "file" name = "myfile"> the tag is used to submit a file. Note that the value of this label is not the content of the selected file, but the complete path name of the file. As mentioned above, when submitting a form, if the default encoding method is used, the content of the file will not be submitted. The multipart/form-data encoding method is used to submit the file content. This requires the server to read the file content from the submitted binary stream.

 

3.Get input stream from client

Request. inputstream can obtain the Request body (including the form field content) in binary data ). It contains the content of the request body. You can use this inputstrem to read the Form Content (including the file content ).

 

4.File Upload Overview

After obtaining the form data stream through the request. inputstream method, we can manually process the form data.

Let's take a look at how the form tag is written:

 

<FormAction = "Upload. ashx" enctype = "mutltipart/form-Data" method = "Post">

<InputType = "file" name = "F"/>

<InputType = "text" name = "comment"> </Input>

<InputType = "Submit" name = "btnupload" value = "Upload"/>

</Form>

After the form's enctype is set to multipart/form-data, the content of the comment text field can be accessed through the request. form ["Comment"]. The content of file F can only be obtained through request. inputstream, but request. inputstream does not only contain the content of the file, but also the content of the comment text field. Let's take a look at the content of inputstream:

------ Webkitformboundaryqqpaxgr2pgik6uyy

Content-Disposition: Form-data; name = "F"; filename = "hello.txt"

Content-Type: Application/octet-stream

Hello !!!

------ Webkitformboundaryqqpaxgr2pgik6uyy

Content-Disposition: Form-data; name = "comment"

File Upload

------ Webkitformboundaryqqpaxgr2pgik6uyy

Content-Disposition: Form-data; name = "buttom"

Upload

------ Webkitformboundaryqqpaxgr2pgik6uyy --

 

We can see that the submitted form data is mixed with the data of all request parameters. From the content of the form data above, we can see that each request parameter starts with a line starting with ----, and the following characters are different in the browser. The following two lines are the description of the parameter, and then the parameter value is followed by the empty line (the input of the file is slightly different, that is, the empty line is followed by the additional file content ). The form data ends with rows starting from and ending.

After understanding the form data format, you can program to parse the form data. We can parse the file from the form data.

 

1. HTTPHow to submit a form

<Form> the label attribute enctype specifies the encoding method used to submit form data. There are three optional values:

Application/X-WWW-form-urlencoded:

This is the default encoding method. It only processes the value attribute values in the form field. In this method, the form will process the value of the form field as a URL.

Multipart/form-data:

This encoding method processes form data in the form of a binary stream, which encapsulates the file content specified by the file field into the request parameters.

Text/plain:

This method is convenient when the form's action attribute value is in the form of mailto: URL. This method is mainly applicable to sending emails directly through the form.

 

2.File tag

<Input type = "file" name = "myfile"> the tag is used to submit a file. Note that the value of this label is not the content of the selected file, but the complete path name of the file. As mentioned above, when submitting a form, if the default encoding method is used, the content of the file will not be submitted. The multipart/form-data encoding method is used to submit the file content. This requires the server to read the file content from the submitted binary stream.

 

3.Get input stream from client

Request. inputstream can obtain the Request body (including the form field content) in binary data ). It contains the content of the request body. You can use this inputstrem to read the Form Content (including the file content ).

 

4.File Upload Overview

After obtaining the form data stream through the request. inputstream method, we can manually process the form data.

Let's take a look at how the form tag is written:

 

<FormAction = "Upload. ashx" enctype = "mutltipart/form-Data" method = "Post">

<InputType = "file" name = "F"/>

<InputType = "text" name = "comment"> </Input>

<InputType = "Submit" name = "btnupload" value = "Upload"/>

</Form>

After the form's enctype is set to multipart/form-data, the content of the comment text field can be accessed through the request. form ["Comment"]. The content of file F can only be obtained through request. inputstream, but request. inputstream does not only contain the content of the file, but also the content of the comment text field. Let's take a look at the content of inputstream:

------ Webkitformboundaryqqpaxgr2pgik6uyy

Content-Disposition: Form-data; name = "F"; filename = "hello.txt"

Content-Type: Application/octet-stream

Hello !!!

------ Webkitformboundaryqqpaxgr2pgik6uyy

Content-Disposition: Form-data; name = "comment"

File Upload

------ Webkitformboundaryqqpaxgr2pgik6uyy

Content-Disposition: Form-data; name = "buttom"

Upload

------ Webkitformboundaryqqpaxgr2pgik6uyy --

 

We can see that the submitted form data is mixed with the data of all request parameters. From the content of the form data above, we can see that each request parameter starts with a line starting with ----, and the following characters are different in the browser. The following two lines are the description of the parameter, and then the parameter value is followed by the empty line (the input of the file is slightly different, that is, the empty line is followed by the additional file content ). The form data ends with rows starting from and ending.

After understanding the form data format, you can program to parse the form data. We can parse the file from the form data.