区分多个提交按钮

同一个表单,可能需要多个提交按钮,服务端在接收表达数据后,根据用户单击不同的提交按钮,进行不同的后续操作。

服务端是如何区分不同的提交按钮呢?

方法一

最简单的方式是设置提交按钮的value属性,单击某个提交按钮,此按钮的Value属性值将作为表单数据的一部分提交到服务器。

方法二

另一中方法是设置提交按钮的FormAction属性,单击提交按钮后,数据将被提交到FormAction所制定的网页链接,这种方法的优势是可以通过get方式附加更多的数据。

一个例子

HttpRequest事件代码:

Dim wb As New weui
Select
Case e.Path
    Case "input.htm"
        If e.PostValues.Count = 0 Then
            wb.AddForm("","form1","input.htm")
            With wb.AddInputGroup("form1","ipg1","
数据输入")
                .AddInput("
客户","客户","text")
                .AddInput("
日期","日期","date")
                .Addinput("
产品","产品","text")
                .Addinput("
数量","数量","number")
            End With
            With wb.AddButtonGroup("form1","btngrp1",False)
                .Add("btn1", "
按钮1", "submit").Value = "btn1"
                .Add("btn2", "
按钮2", "submit").Value = "btn2"
                .Add("btn3", "
按钮3", "submit").FormAction = "accept.htm"
                .Add("btn4", "
按钮4", "submit").FormAction = "accept.htm?type=1&model=ha"
            End With
        Else
            wb.InsertHTML("
接收到的数据有:<br/>")
            For Each key As String In e.PostValues.Keys
                wb.InsertHTML(key & ":" & e.PostValues(key) & "<br/>")
            Next
        End If
    Case "accept.htm"
        wb.InsertHTML("
通过accept.htm接收到的数据有:<br/>")
        For Each key As String In e.PostValues.Keys
            wb.InsertHTML(key & ":" & e.PostValues(key) & "<br/>")
       
Next
End
Select
e
.WriteString(wb.Build)

通过浏览器访问,可以看到四个提交按钮:

定义表单的代码为:

wb.AddForm("","form1","input.htm")

表示默认接收表单的目标网页为input.htm,单击按钮1和按钮2会将数据提交到这个页面。

由于我们给按钮1和按钮2设置了Value属性,服务端通过接收到的值,可以判断出用于单击的是那个按钮。

按钮3和按钮4通过FormAction属性,将数据接收页面改为accept.htm,不同的是按钮4还会通过get方式 附加了两个数据,这两个数据会随表单数据一并提交到服务器。。

下表分别单击四个按钮后的显示结果:

按钮1 接收到的数据有:
客户:CS01
日期:2016-11-30
产品:PD01
数量:100
btn1:btn1
按钮2 接收到的数据有:
客户:CS01
日期:2016-11-30
产品:PD01
数量:100
btn2:btn2
按钮3 通过accept.htm接收到的数据有:
客户:CS01
日期:2016-11-30
产品:PD01
数量:100
按钮4 通过accept.htm接收到的数据有:
type:1
model:ha
客户:CS01
日期:2016-11-30
产品:PD01
数量:100

提示:type和model两个值是通过get方式传递的。

 


本页地址:http://www.foxtable.com/mobilehelp/topics/0122.htm