Question

I have received a task to add functionality to a HTML page (JSP). The page is just from designers/frontend devs so in some places I need to change a href to button or input but it makes a mess and all the design is changed. Here is a piece of code:

<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>

I want it to be like the below, without changing appearance:

<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>

Answer 1

你不应该改变给你的设计。在HTML中添加/更改可见元素会更改布局。

同样做这些修改不仅会给设计带来麻烦，还会给HTML代码增加错误。

锚标记没有type="submit"属性。此属性在按钮和input元素中可用。

修改链接上的href属性会在悬停时显示网址。这不是设计者强加的行为。可能他/她应该告诉你如何继续执行代码以不改变设计。在这种情况下，可以使用javascript函数处理onclick和onsubmit个事件以提交表单。

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

注意：该代码仅适用于Edit按钮。

JSFiddle

<强> 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);
}

<强>参考文献：

页面设计<a href="">, <button>, <input/> in JSP

1 个答案: