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:

    

        

            

                
                    
                
            
            

                Add Child / Student
            
        
        

            
                  
                
                    Edit
                
                

            
            

                
                    Parent Info
                
            
        
        

            

                Upgrade Package
            
            

                Wow Catalog
            
        
    
    

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