Design of page , <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

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

References:

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