JSP中页面、、的设计

我收到了一项向 HTML 页面 (JSP) 添加功能的任务。该页面仅来自设计师/前端开发人员，因此在某些地方我需要更改a href to button or input但这会造成混乱，所有设计都改变了。这是一段代码：

<div class="col-md-3 col-sm-5 col-sx-12" id="leftmenu">
    <nav>
        <ul class="nav nav-pills nav-inline" id="addchild">
            <li>
                <a href="#" id="add">
                    <i class="glyphicon glyphicon-plus"></i>
                </a>
            </li>
            <li>
                <a href="#" id="addtext">Add Child / Student</a>
            </li>
        </ul>
        <ul class="nav nav-pills" id="parentinfo">
            <li>
                <a href="#" class="listItem" id="edit">
                    <span class="editicon">Edit</span>
                </a>
            </li>
            <li>
                <a href="#" class="listItem" id="edittext">
                    <span class="parentInfo">Parent Info</span>
                </a>
            </li>
        </ul>
        <ul class="nav nav-pills nav-stacked">
            <li>
                <a href="#" class="listItem" id="upgrade" style="color:#FFFFFF !important;">Upgrade Package</a>
            </li>
            <li>
                <a href="#" class="listItem" id="catalog" style="color:#FFFFFF !important;">Wow Catalog</a>
            </li>
        </ul>
    </nav>

我希望它像下面这样，而不改变外观：

<div class="col-md-3 col-sm-5 col-sx-12" id="leftmenu">
    <nav>
        <ul class="nav nav-pills nav-inline" id="addchild">
            <li>
                <a href="/register/studentSignup" type="submit" id="add">
                    <i class="glyphicon glyphicon-plus"></i>
                </a>
            </li>
            <li>
                <a href="/register/studentSignup" type="submit" id="addButton">Add Child / Student</a>
            </li>
        </ul>
        <ul class="nav nav-pills" id="parentinfo">
            <li>
                <input type="submit" class="listItem" name="action" value="editParentInfo" id="edit" />
                <span class="editicon">Edit</span>
            </li>
            <li>
                <input type="submit" class="listItem" name="action" value="editParentInfo" id="editParent" />
                <span class="parentInfo">Parent Info</span>
            </li>
        </ul>
        <ul class="nav nav-pills nav-stacked">
            <li>
                <a href="upgrade" class="listItem" id="upgrade" style="color:#FFFFFF !important;">Upgrade Package</a>
            </li>
            <li>
                <a href="#" class="listItem" id="catalog" style="color:#FFFFFF !important;">Wow Catalog</a>
            </li>
        </ul>
        <input type="hidden" name="parentID" path="parentID" value="${parentInfo.parentID}">
        <input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}" />
    </nav>

您不应该改变给您的设计。添加/更改visibleHTML 中的元素会更改布局。

同时进行这些修改不仅会给设计带来混乱，还会给 HTML 代码添加错误。

锚标记没有type="submit"属性。该属性在按钮和input元素。

修改href链接上的属性使 URL 在悬停时可见。这不是设计师强加的预期行为。也许他/她应该指导您如何继续编写代码而不更改设计。在这种情况下onclick and onsubmit可以使用 javascript 函数处理事件以提交表单。

这里的示例显示您可以提交带有验证的表单。

Note:该代码仅适用于Edit button.

JSFiddle https://jsfiddle.net/2p93eyuu/18/

HTML:

<form id="editForm" onsubmit="return doValidate();">
<div class="col-md-3 col-sm-5 col-sx-12" id="leftmenu">
    <nav>
        <ul class="nav nav-pills nav-inline" id="addchild">
            <li>
                <a href="#" id="add">
                    <i class="glyphicon glyphicon-plus"></i>
                </a>
            </li>
            <li>
                <a href="#" id="addtext">Add Child / Student</a>
            </li>
        </ul>
        <ul class="nav nav-pills" id="parentinfo">
            <li>                  
                <a href="#" class="listItem" id="edit"  onclick="doSubmit()">
                    <span class="editicon">Edit</span>
                </a>
                <input type="hidden" name="param" value="editParentInfo"/>

            </li>
            <li>
                <a href="#" class="listItem" id="edittext">
                    <span class="parentInfo">Parent Info</span>
                </a>
            </li>
        </ul>
        <ul class="nav nav-pills nav-stacked">
            <li>
                <a href="#" class="listItem" id="upgrade" style="color:#FFFFFF !important;">Upgrade Package</a>
            </li>
            <li>
                <a href="#" class="listItem" id="catalog" style="color:#FFFFFF !important;">Wow Catalog</a>
            </li>
        </ul>
    </nav>
    </div>
</form>

JavaScript：

function doSubmit() {
    alert("The form is submitting"); 
    var form =  document.getElementById("editForm");
    form.action="/register/studentSignup";
    form.method="post";
    submitForm(form);
}

function doValidate() {
  var form =  document.getElementById("editForm");
  alert("The form is being submitted\n"+"action="+form.action+", param="+form.param.value); 
  return false;
}  

function submitForm(form) {
    //get the form element's document to create the input control with
    //(this way will work across windows in IE8)
    var button = form.ownerDocument.createElement('input');
    //make sure it can't be seen/disrupts layout (even momentarily)
    button.style.display = 'none';
    //make it such that it will invoke submit if clicked
    button.type = 'submit';
    //append it and click it
    form.appendChild(button).click();
    //if it was prevented, make sure we don't get a build up of buttons
    form.removeChild(button);
}

参考：

• 应该是 jQuery 的 $(form).submit();不在表单标签内触发onSubmit？ https://stackoverflow.com/q/645555/573032
• 中允许使用哪些标签？ https://stackoverflow.com/q/4967976/573032