我有一个ASP .NET MVC 3项目和我的“创建”视图之一的问题.

我有使用ajax表单实现的级联下拉字段.

这个观点粗略地说 – 像这样：

@using (Html.BeginForm(...))
{
    @Html.MyDropDown1

    using (Ajax.BeginForm(...))
    {
        @Ajax.MyDropdown2
        <input type="submit" value="Select" />
    }

    using (Ajax.BeginForm(...))
    {
        @Ajax.MyDropdown3
        <input type="submit" value="Select" />
    }

    <!-- other form fields -->

    <input type="submit" value="Create" />
}

问题是ajax表单中的提交按钮实际上提交了外部html表单.

有没有办法指定我想提交的表单的名称？

我想把我的ajax表单放在我的html表单上面所以不会有任何嵌套 – 但是我需要在我的html帖子中下拉列表的选定项的值.

谢谢,
皮特

正如评论中指出的那样,您不能拥有嵌套表单.删除所有using(Ajax.BeginForm(…))位,并通过jQuery(或其他)处理你的ajax调用.

尝试这个简单的代码,我很惊讶它没有用,我们走了：

<form method="get" action="" >
    <input type="submit" value="validate" onclick="redirect(); alertIt(); "/>
</form>
<script>
    function redirect(){
       window.location.href = "test.html" ;
    }
</script>
<script>
function alertIt(){
   alert("redirect");
}
</script>

代码只是在点击提交按钮时重定向到“test.html”,但它没有做到.另一方面：alertIt()工作正常……我的问题如下：事件处理表单中是否有一些我应该知道的特殊规则？

如果您希望表单不提交,则需要返回false.

function redirect(){
       window.location.href = "test.html" ;
}

应该

function redirect(){
    window.location.href = "test.html" ;
    return false;
}

您还应该优先挂钩提交事件而不是click事件,并在处理程序中返回.

onclick="return redirect(); alertIt(); "

会工作(但不警惕)

最理想的是,您要做的是在表单中添加一个id,例如myForm,并为其附加一个事件.

document.getElementById("myForm").addEventListener("submit",function(){
    alertIt();
    return redirect(); 
},false);

我很好奇,如果 WebComponents的工作中的任何内容都可以在不违反 the rules的情况下逃脱嵌套HTML表单之类的东西.我问,因为我很好奇WebComponent的内部对于祖先元素是多么孤立包含它们.我可以想象,如果使用WebComponents无法嵌套表单,那么由于消费者不了解组件的内部结构可能导致的问题,这可能导致建议转向组件远离包含表单.

无论哪种方式,我已经做了一些挖掘,并且无法发现任何事情,所以我想我会在这里咨询专家以获得更多洞察力.

相关文章：

> Is it valid to have a html form inside another html form?
> Can you nest html forms?

这对我来说似乎是一个非常有效的问题.

出于好奇,我快速做了一个fiddle(下面提供)测试嵌套表单的用例,其中一个在shadow root中.

var template = document.querySelector('template');
var clone = document.importNode(template.content,true);

var root = document.querySelector('#host').createShadowRoot();
root.appendChild(clone);

document.querySelector('button').onclick = function(e) {
    var formValues = $('#docForm').serialize();
    
    alert(formValues);
    $('#result').text(formValues);
    return false;
}

document.querySelector('#host').shadowRoot.querySelector('button').onclick = function(e) {
    var form = document.querySelector('#host').shadowRoot.querySelector('#shadowForm');
    
    alert($(form).serialize());
  $('#result').text($(form).serialize());
    return false;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<template id="template">
    <form id="shadowForm">
        <input type="text" name="text"/>
        <button type="submit">Submit shadow form</button>
    </form>
</template>


<form id="docForm" >
    <table>
    <tr>
        <td>
            <input type="checkBox" name="checkBox"/>
        </td>
    </tr>
    <tr>
        <td>
            <input type="text" val="" name="text"/>
        </td>
        </tr>
    <tr>
        <td>
            <select name="multiple" multiple="multiple">
                <option>A</option>
                <option>B</option>
                <option>C</option>
            </select>
        </td>
    </tr>
    <tr>
        <td>
            <div id="host"></div>
            <button type="submit"> Submit document Form</button>
        </td>
    </tr>
    </table>
</form>


<div id="result"></div>

IMO它按预期工作,当你提交一个在轻DOM中的表单,其中包含一个元素的shadowRoot中的表单,它们都呈现完美.

just how isolated the internals of a WebComponent are to the ancestor
elements that contain them

Shadow Root是与特定元素相关联的不同节点,它不能使用常规DOM操作API访问,因此不会干扰轻型DOM标记,在这种情况下是form-in-form规则.

I Could imagine that if nesting of forms is not possible using
WebComponents … if a consumer isn’t aware of the internals of the component.

因此,要回答这个问题,用户可以在页面上放置他们想要的任何html,如果该组件使用shadow DOM进行封装,则其渲染行为不会受到他们使用的组件的影响.

<input type="submit" />
<button type="submit"></button>
<input type="image" />

登录后复制

form.addEventListener('submit', function (e) {
  if (valid()) {
    ...
  }
  e.preventDefault()
})

登录后复制

if (valid()) {
  form.submit()
}

登录后复制

function validate_required(field,alerttxt)
{
with (field)
{
if (value==null||value=="")
  {alert(alerttxt);return false}
else {return true}
}
}

登录后复制

<html>
<head>
<script type="text/javascript">
 
function validate_required(field,alerttxt)
{
with (field)
  {
  if (value==null||value=="")
    {alert(alerttxt);return false}
  else {return true}
  }
}
 
function validate_form(thisform)
{
with (thisform)
  {
  if (validate_required(email,"Email must be filled out!")==false)
    {email.focus();return false}
  }
}
</script>
</head>
 
<body>
<form action="submitpage.htm" onsubmit="return validate_form(this)" method="post">
Email: <input type="text" name="email" size="30">
<input type="submit" value="Submit">
</form>
</body>
 
</html>

登录后复制