Introduction to the method of adding a submit link to a button in an HTML static page

1. The button looks like a link (picture)
Submit button

<input type="submit" value="提交">

Submit link

<a href="#" onclick="表单名字.submit()">提交</a>

Reset button

<input type="reset" value="重置">

Reset link

<a href="#" onclick="表单名字.reset()">重置</a>

Normal button

<input type="button" value="按钮" onclick="函数()">

Normal link

<a href="#" onclick="函数()">链接</a>

As for the picture, do the same and replace the a tag with img
2. Make the link look like a button

<a href="reg.asp">注册</a>
=><input type="button" value="注册" onclick="location.href=&#39;reg.asp&#39;">

----------------------------------
Sometimes we can do it by hand A form with get mode, you can use buttons or links as you like.

<form action="xx.asp" method="get" name="form1">
  <input name="aa" type="text" id="aa">
  <input name="bb" type="text" id="bb">
  <input type="submit" name="Submit" value="提交">
</form>
=>
<input name="aa" type="text" id="aa">
<input name="bb" type="text" id="bb">
<input type="button" value="按钮" onclick="location.href=&#39;xx.asp?aa=&#39;+document.all[&#39;aa&#39;].value+&#39;&bb=&#39;+document.all[&#39;bb&#39;].value">

----------------------------------
further We can also make a button (link) to simultaneously transfer js variables, form input values, asp variables, and Recordset values

<script language="javascript">
var id1=1；
</script>
<%
id3=3
....
rs.open exec,conn,1,1
假设有rs("id4")=4
...
%>
<input name="id2" type="text" id="id2" value="2">
<input type="button" value="按钮"
onclick="location.href=&#39;xx.asp?id1=&#39;+id1+&#39;&id2=&#39;+document.all[&#39;id2&#39;].value+&#39;&id3=<%=id3%>&id4=<%=rs("id4")%>&#39;">

When we press the button, we will see that the browser's url is xx.asp ?id1=1&id2=2&id3=3&id4=4
In xx.asp we can use request.querystring to get all the variables. Is this a disguised variable transfer between the client js and the server segment?
-------------------------------------------------- -------------------------------------------------- --------------------------
How to add link function to button

Solution:
The button is a control-level object with a relatively high priority, so it cannot be directly linked like a picture or text. It can only be implemented by calling a script through the click event of the button.
Specific steps:
1. Open the link in the original window

    <input type="button" 
value="闪吧" onClick="location=’http://www.xxx.net’">
    <button onClick="location.href=’http://www.xxxx.net’">闪吧</button>
    <form action="http://www.xxxx.net%22%3e%3cinput/ type="submit" value="打开链接"></form>

2. Open the link in a new window

<input type="button" 
value="闪吧" onClick="window.open(’http://www.xxxx.net’)">
    <button onClick="window.open(’http://www.xxxx.net’)">ggg</button>
    <form action="http://www.xxxx.net/" 
target="_blank"><input type="submit" value="打开链接"></form>

Note: onClick call The quotation marks in the code can be nested single or double when there is only one quotation mark. If there are more than two quotation marks, they must be escaped with "\" and the escaped quotation marks must be consistent with the inner quotation marks, such as:

<button onClick="this.innerHTML=’<font color=\’red\’>http://www.xxxx.net</font>’">闪吧</button>

or

<button onClick=’this.innerHTML="<font color=\"red\">http://www.xxxx.net</font>"’>闪吧</button>

and the following are wrong ways of writing:

<button onClick="this.innerHTML=’<font color=’red’>http://www.xxxx.net</font>’">闪吧</button>
<button onClick="this.innerHTML=’<font color="red">http://www.xxxx.net</font>’">闪吧</button>
<button onClick="this.innerHTML=’<font color=\"red\">http://www.xxxx.net</font>’">闪吧</button>

Tip: Most methods and properties belonging to window or document objects can omit the prefix window or document, for example, location.href in this example (location.href can also be abbreviated as location, because the default object of location is href) is the elliptical way of writing window.location.href or document.location.href.

Tips: In this example, you can also use the following method to replace location.href

location.replace(url)
location.assign(url)
navigate(url)

Special Tips

After the code in the first step is run, click Clicking the button will jump to the link target. The second step will open the link in a new window after clicking the button.

Special Note

This example mainly uses onClick to capture the user's click event on the button, and then calls the href method of the location object or the open method of the window object to open the link. Another trick is to implement the link function by submitting a form. The button must be of type=submit type. The action value of the form is the link target, and the target value is the target method of opening the link.

The above is the detailed content of Introduction to the method of adding a submit link to a button in an HTML static page. For more information, please follow other related articles on the PHP Chinese website!