为什么我无法捕获输入字段中的值？ (JS/HTML)

Question

我正在尝试为我的输入字段创建一个验证函数，问题是我无法捕获我的输入字段中的内容！！

当我运行测试并在我的输入字段中输入一些内容时，它什么也不返回...

这是我的代码

<form id="myForm" name="myForm" onsubmit="test();">
<style type="text/css">
.botLayout{
padding-right:130px;
margin-right:20px;
}
</style>
<div class="botLayout">
<div name="title" align="left" style="font-size: 13px;">
<font size="4"><b>
REGISTER NOW
</b></font>
</div>
<div name="indic" align="right" style="font-size: 13px;">
<font size="1">
<font color="#ff0000">*</font>Required field
</font>
</div>
<b style="font-weight: bold;">
<div>
<div>
<div>
<b style="font-size: 13px;">First Name</b><b>
<div style="display: inline !important;">
<div style="display: inline !important;">
<span style="color: #ff0000; font-weight: normal; text-align: -webkit-right;"><font size="2">*</font></span>
</div>
</div>
</b>
</div>
<div style="font-size: 13px;">
<input type="text" maxlength="50" name="First Name" id="First Name" value="%%first name%%" size="19" />
</div>
</div>
<div>
<div>
<b style="font-size: 13px;">Last Name</b><b>
<div style="display: inline !important;">
<div style="display: inline !important;">
<span style="color: #ff0000; font-weight: normal; text-align: -webkit-right;"><font size="2">*</font></span>
</div>
</div>
</b>
</div>
<div style="font-size: 13px;">
<input type="text" maxlength="50" name="Last Name" id="Last Name" value="" size="19" />
</div>
</div>
<div>
<div>
<b style="font-size: 13px;">Email</b><b>
<div style="display: inline !important;">
<div style="display: inline !important;">
<span style="color: #ff0000; font-weight: normal; text-align: -webkit-right;"><font size="2">*</font></span>
</div>
</div>
</b>
</div>
<div style="font-size: 13px;">
<input type="text" maxlength="254" name="Email" id="Email" value="" size="19" />
</div>
</div>
<div>
<div>
<b style="font-size: 13px;">Company</b><b>
<div style="display: inline !important;">
<div style="display: inline !important;">
<span style="color: #ff0000; font-weight: normal; text-align: -webkit-right;"><font size="2">*</font></span>
</div>
</div>
</b>
</div>
<div style="font-size: 13px;">
<input type="text" maxlength="50" name="Company" id="Company" value="" size="19" />
</div>
</div>
<div>
<div>
<b style="font-size: 13px;">Job Title</b><b>
<div style="display: inline !important;">
<div style="display: inline !important;">
<span style="color: #ff0000; font-weight: normal; text-align: -webkit-right;"><font size="2">*</font></span>
</div>
</div>
</b>
</div>
<div style="font-size: 13px;">
<input type="text" maxlength="50" name="Job Title" id="Job Title" value="" size="19" />
</div>
</div>
<div style="font-size: 13px;">
<div>
<b>Contact Phone number</b>
</div>
<div>
<input type="text" maxlength="50" name="Contact Phone number" id="Contact Phone number" value="" size="19" />
</div>
</div>
<div>
<div>
<b style="font-size: 13px;">Event Location</b><b>
<div style="display: inline !important;">
<div style="display: inline !important;">
<span style="color: #ff0000; font-weight: normal; text-align: -webkit-right;"><font size="2">*</font></span>
</div>
</div>
</b>
</div>
<div style="font-size: 13px;">
<select name="Event Location" id="Event Location">
<option value="Please select" selected="selected">
Please select</option>
<option value="Adelaide">
Adelaide</option>
<option value="Canberra">
Canberra</option>
<option value="Melbourne">
Melbourne</option>
<option value="Sydney">
Sydney</option></select>
</div>
<div style="font-size: 13px;">
&nbsp;
</div>
<div style="font-size: 13px;">
<p class="MsoNormal">
<span style="font-size: 9pt; font-family: Arial, sans-serif; color: #333333;">By providing your details above you are consenting to receive
communications from SMS Management & Technology in the future, on the
understanding that you have read and agree to our </span><a href="http://www.smsmt.com/AU/Privacy-Statement" target="_blank" title="http://www.smsmt.com/AU/Privacy-Statement" alias="http://www.smsmt.com/AU/Privacy-Statement" conversion="false"><span style="font-size: 9pt; font-family: Arial, sans-serif;">Privacy Statement</span></a><span style="font-size: 9pt; font-family: Arial, sans-serif; color: #333333;">.<o:p></o:p></span>
</p>
<p class="MsoNormal">
<span style="font-size: 9pt; font-family: Arial, sans-serif; color: #333333;">As this event is supported by Rally Software, you also consent
to receive communication from them, according to their <a href="http://www.rallydev.com/privacy-statement " title="https://www.rallydev.com/privacy-statement " alias="https://www.rallydev.com/privacy-statement " conversion="false">Privacy Statement</a>. You
will be able to opt-out of communications at any time.</span><span style="color: #1f497d;"><o:p></o:p></span>
</p>
</div>
</div>
<div style="font-size: 13px;">
<input type="submit" value="Submit" />
</div>
</div>
<span style="display: none;" id="post_code">%%[[name="FormPost";type="POST"] 
VAR @de, @de_col, @updateOptions, @saveOptions, @de_statusCode, @de_statusMsg, @errorCode
SET @de = CreateObject("DataExtensionObject")
SetObjectProperty(@de, "CustomerKey", "AgileforGovRegistered")
SET @de_col = CreateObject("APIProperty")
SetObjectProperty(@de_col, "Name", "Email")
SetObjectProperty(@de_col, "Value", RequestParameter("Email"))
AddObjectArrayItem(@de, "Keys", @de_col)
IF NOT IsNull(RequestParameter("First Name")) THEN
SET @de_col = CreateObject("APIProperty")
SetObjectProperty(@de_col, "Name", "First Name")
SetObjectProperty(@de_col, "Value", RequestParameter("First Name"))
AddObjectArrayItem(@de, "Properties", @de_col)
ENDIF
IF NOT IsNull(RequestParameter("Last Name")) THEN
SET @de_col = CreateObject("APIProperty")
SetObjectProperty(@de_col, "Name", "Last Name")
SetObjectProperty(@de_col, "Value", RequestParameter("Last Name"))
AddObjectArrayItem(@de, "Properties", @de_col)
ENDIF
IF NOT IsNull(RequestParameter("Email")) THEN
SET @de_col = CreateObject("APIProperty")
SetObjectProperty(@de_col, "Name", "Email")
SetObjectProperty(@de_col, "Value", RequestParameter("Email"))
AddObjectArrayItem(@de, "Properties", @de_col)
ENDIF
IF NOT IsNull(RequestParameter("Company")) THEN
SET @de_col = CreateObject("APIProperty")
SetObjectProperty(@de_col, "Name", "Company")
SetObjectProperty(@de_col, "Value", RequestParameter("Company"))
AddObjectArrayItem(@de, "Properties", @de_col)
ENDIF
IF NOT IsNull(RequestParameter("Company")) THEN
SET @de_col = CreateObject("APIProperty")
SetObjectProperty(@de_col, "Name", "Job Title")
SetObjectProperty(@de_col, "Value", RequestParameter("Company"))
AddObjectArrayItem(@de, "Properties", @de_col)
ENDIF
IF NOT IsNull(RequestParameter("Contact Phone number")) THEN
SET @de_col = CreateObject("APIProperty")
SetObjectProperty(@de_col, "Name", "Contact Phone number")
SetObjectProperty(@de_col, "Value", RequestParameter("Contact Phone number"))
AddObjectArrayItem(@de, "Properties", @de_col)
ENDIF
IF NOT IsNull(RequestParameter("Event Location")) THEN
SET @de_col = CreateObject("APIProperty")
SetObjectProperty(@de_col, "Name", "Event Location")
SetObjectProperty(@de_col, "Value", RequestParameter("Event Location"))
AddObjectArrayItem(@de, "Properties", @de_col)
ENDIF
SET @updateOptions = CreateObject("UpdateOptions")
SET @saveOptions = CreateObject("SaveOption")
SetObjectProperty(@saveOptions, "PropertyName", "DataExtensionObject")
SetObjectProperty(@saveOptions, "SaveAction", "UpdateAdd")
AddObjectArrayItem(@updateOptions, "SaveOptions", @saveOptions)
SET @de_statusCode = InvokeUpdate(@de, @de_statusMsg, @errorCode, @updateOptions)
IF @de_statusCode != "OK" THEN
RaiseError(@de_statusMsg, 0, @de_statusCode, @errorCode)
ENDIF
VAR @ts, @tsDef, @ts_sub, @ts_attr, @tsctr, @ts_subkey, @ts_statusCode, @ts_statusMsg, @errorCode
SET @ts = CreateObject("TriggeredSend")
SET @tsDef = CreateObject("TriggeredSendDefinition")
SET @ts_subkey = RequestParameter("Email")
SetObjectProperty(@tsDef, "CustomerKey", "AgileForGovConfirmation")
SetObjectProperty(@ts, "TriggeredSendDefinition", @tsDef)
SET @ts_sub = CreateObject("Subscriber")
SetObjectProperty(@ts_sub, "EmailAddress", RequestParameter("Email"))
IF NOT EMPTY(@ts_subkey) THEN
SetObjectProperty(@ts_sub, "SubscriberKey", @ts_subkey)
ELSE
SetObjectProperty(@ts_sub, "SubscriberKey", RequestParameter("Email"))
ENDIF
IF NOT IsNull(RequestParameter("First Name")) THEN
SET @ts_attr = CreateObject("Attribute")
SetObjectProperty(@ts_attr, "Name", "First Name")
SetObjectProperty(@ts_attr, "Value", RequestParameter("First Name"))
AddObjectArrayItem(@ts_sub, "Attributes", @ts_attr)
ENDIF
AddObjectArrayItem(@ts, "Subscribers", @ts_sub)
SET @ts_statusCode = InvokeCreate(@ts, @ts_statusMsg, @errorCode)
IF @ts_statusCode != "OK" THEN
RaiseError(@ts_statusMsg, 0, @ts_statusCode, @errorCode)
ENDIF
]%%</span>
<span style="display: none;" id="post_code">%%[[name="FormPost";type="POST"] 
VAR @de, @de_col, @updateOptions, @saveOptions, @de_statusCode, @de_statusMsg, @errorCode
SET @de = CreateObject("DataExtensionObject")
SetObjectProperty(@de, "CustomerKey", "AgileforGovRegistered")
SET @de_col = CreateObject("APIProperty")
SetObjectProperty(@de_col, "Name", "Email")
SetObjectProperty(@de_col, "Value", RequestParameter("Email"))
AddObjectArrayItem(@de, "Keys", @de_col)
IF NOT IsNull(RequestParameter("First Name")) THEN
SET @de_col = CreateObject("APIProperty")
SetObjectProperty(@de_col, "Name", "First Name")
SetObjectProperty(@de_col, "Value", RequestParameter("First Name"))
AddObjectArrayItem(@de, "Properties", @de_col)
ENDIF
IF NOT IsNull(RequestParameter("Last Name")) THEN
SET @de_col = CreateObject("APIProperty")
SetObjectProperty(@de_col, "Name", "Last Name")
SetObjectProperty(@de_col, "Value", RequestParameter("Last Name"))
AddObjectArrayItem(@de, "Properties", @de_col)
ENDIF
IF NOT IsNull(RequestParameter("Email")) THEN
SET @de_col = CreateObject("APIProperty")
SetObjectProperty(@de_col, "Name", "Email")
SetObjectProperty(@de_col, "Value", RequestParameter("Email"))
AddObjectArrayItem(@de, "Properties", @de_col)
ENDIF
IF NOT IsNull(RequestParameter("Company")) THEN
SET @de_col = CreateObject("APIProperty")
SetObjectProperty(@de_col, "Name", "Company")
SetObjectProperty(@de_col, "Value", RequestParameter("Company"))
AddObjectArrayItem(@de, "Properties", @de_col)
ENDIF
IF NOT IsNull(RequestParameter("Company")) THEN
SET @de_col = CreateObject("APIProperty")
SetObjectProperty(@de_col, "Name", "Job Title")
SetObjectProperty(@de_col, "Value", RequestParameter("Company"))
AddObjectArrayItem(@de, "Properties", @de_col)
ENDIF
IF NOT IsNull(RequestParameter("Contact Phone number")) THEN
SET @de_col = CreateObject("APIProperty")
SetObjectProperty(@de_col, "Name", "Contact Phone number")
SetObjectProperty(@de_col, "Value", RequestParameter("Contact Phone number"))
AddObjectArrayItem(@de, "Properties", @de_col)
ENDIF
IF NOT IsNull(RequestParameter("Event Location")) THEN
SET @de_col = CreateObject("APIProperty")
SetObjectProperty(@de_col, "Name", "Event Location")
SetObjectProperty(@de_col, "Value", RequestParameter("Event Location"))
AddObjectArrayItem(@de, "Properties", @de_col)
ENDIF
SET @updateOptions = CreateObject("UpdateOptions")
SET @saveOptions = CreateObject("SaveOption")
SetObjectProperty(@saveOptions, "PropertyName", "DataExtensionObject")
SetObjectProperty(@saveOptions, "SaveAction", "UpdateAdd")
AddObjectArrayItem(@updateOptions, "SaveOptions", @saveOptions)
SET @de_statusCode = InvokeUpdate(@de, @de_statusMsg, @errorCode, @updateOptions)
IF @de_statusCode != "OK" THEN
RaiseError(@de_statusMsg, 0, @de_statusCode, @errorCode)
ENDIF
VAR @ts, @tsDef, @ts_sub, @ts_attr, @tsctr, @ts_subkey, @ts_statusCode, @ts_statusMsg, @errorCode
SET @ts = CreateObject("TriggeredSend")
SET @tsDef = CreateObject("TriggeredSendDefinition")
SET @ts_subkey = RequestParameter("Email")
SetObjectProperty(@tsDef, "CustomerKey", "AgileForGovConfirmation")
SetObjectProperty(@ts, "TriggeredSendDefinition", @tsDef)
SET @ts_sub = CreateObject("Subscriber")
SetObjectProperty(@ts_sub, "EmailAddress", RequestParameter("Email"))
IF NOT EMPTY(@ts_subkey) THEN
SetObjectProperty(@ts_sub, "SubscriberKey", @ts_subkey)
ELSE
SetObjectProperty(@ts_sub, "SubscriberKey", RequestParameter("Email"))
ENDIF
IF NOT IsNull(RequestParameter("First Name")) THEN
SET @ts_attr = CreateObject("Attribute")
SetObjectProperty(@ts_attr, "Name", "First Name")
SetObjectProperty(@ts_attr, "Value", RequestParameter("First Name"))
AddObjectArrayItem(@ts_sub, "Attributes", @ts_attr)
ENDIF
AddObjectArrayItem(@ts, "Subscribers", @ts_sub)
SET @ts_statusCode = InvokeCreate(@ts, @ts_statusMsg, @errorCode)
IF @ts_statusCode != "OK" THEN
RaiseError(@ts_statusMsg, 0, @ts_statusCode, @errorCode)
ENDIF
]%%</span><span style="display: none;" id="post_code"><!-- AMP Processing Placeholder DO NOT REMOVE --></span>
</b>
</div>
<script type="text/javascript">
var a=document.forms["myForm"]["First Name"].value;
var b=document.forms["myForm"]["Last Name"].value;
var c=document.forms["myForm"]["Email Address"].value;
var d=document.forms["myForm"]["Company"].value;
var e=document.forms["myForm"]["Job Title"].value;
function test()
{
if(1===1){
alert(a);
alert(b);
event.preventDefault();
return false; 
}
}
</script>
<input type="hidden" name="__successPage" id="__successPage" value="http://pages.s7.exacttarget.com/agileforgovconfirmation/" /><input type="hidden" name="__errorPage" id="__errorPage" value="" /><input type="hidden" name="__contextName" id="__contextName" value="FormPost" /><input type="hidden" name="__executionContext" id="__executionContext" value="Post" />

滚动到底部看看text/JS样式，我测试了好久还是搞不懂！

Answer 1

您不能使用数组集合之类的表单元素来访问它的值。 因为document.forms['idOfForm'] 将返回表单元素而不是数组。

对于网络标准，您不应在元素名称和 ID 中使用空格。

这是您的代码的工作形式 http://jsfiddle.net/vcgquvh7/

Answer 2

有效的 id 和 name 属性不能包含空格。

https://www.w3.org/TR/html-markup/global-attributes.html#common.attrs.id

解决方法：去掉空格。

---

其他问题：

首先是你正在读取渲染的值，当他提交表单时你没有读取它们。当值改变时，它不会神奇地更新变量。将代码移动到读取函数内部值的位置。

你也从不声明event，所以你有一个未定义的变量。

您从函数返回，但您的 onsumbit 处理程序不处理返回。

---

1：删除名称和 ID 中的空格

2：修复 onsubmit 处理程序

<form onsubmit="return test()">

3：将字段的读取移到测试函数中

function test (event) {
    var a=document.forms["myForm"]["FirstName"].value;
    var b=document.forms["myForm"]["LastName"].value;
    var c=document.forms["myForm"]["EmailAddress"].value;
    var d=document.forms["myForm"]["Company"].value;
    var e=document.forms["myForm"]["JobTitle"].value;
    if(1===1){
        alert(a);
        alert(b);
        //event.preventDefault();
        return false; 
    }
    return true;
}