JSP/HTML / JS / CSS - How to create a cancel button in form


Tags: javascript,jquery,html,css,jsp

Problem :

I need to put the "save", and "cancel" functionality in the form in JSP code. Clicking on "save" should submit the form data to intended place. Clicking on "cancel" should cancel the form without submitting the data to intended place.

Thanks & Regards,

Arun Dhwaj



Solution :

I'd solved this in the following way:

1) myInfo.jsp

<form name="myForm" action="/done" method="POST">
<fieldset>
    <label>Enter new name </label>
    <input class="form-control" name="edit_filed" id="name_edit" type="text" value="${obj.getfName()} &nbsp;${obj.getlName()}">

    <label>Enter new specializations </label>
    <input class="form-control" name="specializations" id="specializations_edit" type="text" value="${obj.oldSpecialization()}">

    <button class="btn btn-success" onClick="Save('myInfo_visual', 'myInfo_edit')">Save</button>
    <input type="button" value="Cancel" class="btn btn-gray" onClick="Cancel('myInfo_visual', 'myInfo_edit')"/>
</fieldset>

2) myInfo.js

function Save(visual, edit)

{
var v = document.getElementById(visual); var e = document.getElementById(edit);

v.style.display="block";
e.style.display="none";

}

function Cancel(visual, edit) { var v = document.getElementById(visual); var e = document.getElementById(edit);

v.style.display="block";
e.style.display="none";

return false;

}


    CSS Howto..

    JS manipulation on CSS and how it result on page rendering

    How to make “button-like appearance” with CSS

    How to use jquery to cycle elements bg color on click, and reset upon another element's click

    How to position a css radial gradient to the top left responsively?

    How to select -webkit-filter: drop-shadow with jQuery?

    How can I extend the width of a child div to go beyond the parent div's width?

    How to make the posts of a content type horizontal scrollabel?

    How to override a style of a specific Joomla module?

    jquery easyui TreeGrid: How to make only Column Headers Bold

    How to create centered image slideshow behind website content

    Control Show/Hide multiple DIV using CSS, Javascript, and Anchor without unique ID

    Show Button in Table Cell Hover Over/Mouse Over

    CSS: How to prevent Background colour to be overwritten by colour from less-file

    How to achieve this header with html and css?

    How do I make this sprite behave how I want?

    How to change the color of the active link in the menu

    css transform. How to get rotation degree value from “matrix( 0, 1, -1, 0, 0, 0”)?

    How to include SASS into CSS

    How do I include a css file while creating a wordpress theme?

    Show all text document

    How to remove Menu Item Class form secondary menu

    How to add custom CSS class name in PHP?

    Show missing CSS in Google Chrome

    How to modify multiple CSS attributes of an element?

    How to load CSS into CodeIgniter

    How can I get good errors from the LESS compiler when integrated in Symfony 2

    How do I change the font colour of text nested within a placeholder of an input search [duplicate]

    How to fix an image compared with another one in CSS?

    How to combine jQuery animate with css3 properties without using css transitions?

    How to get just numeric part of CSS property with jQuery?