Tasarım <a href>, <button>, <input> in JSP

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

You should not change the design given to you. Adding/changing visible elements in HTML changes the layout.

Also doing that modifications you not only bring a mess to the design but add errors to the HTML code.

The anchor tag doesn't have type="submit" attribute. This attribute is available in buttons and input elements.

Modifying href attribute on links makes URL visible on hover. It's not intended behavior imposed by the designer. Probably he/she should give you directions how to proceed with the code to not change the design. In this case onclick and onsubmit events could be handled with javascript functions to submit a form.

Here the example show you could submit a form with validations.

Note: The code only works with Edit button.

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

Referanslar: Gerçekten burada çözmek için herhangi bir husus bulunmamaktadır değil

• Should jQuery's $(form).submit(); not trigger onSubmit within the form tag?
• What are the allowed tags inside a <li>?