We help IT Professionals succeed at work.

javascript add,edit remove in jsp page

jaggernat
jaggernat asked
on
Medium Priority
191 Views
Last Modified: 2008-03-17
hi experts,

I have some problem with javascript in my jsp page

I have three fields

<span class="formleft">LRN# <input type="text" name="lrnNo" size="20" value='<%= field1[i]%>' class="formstyle">  </span>

 <span class="formleft">Lab Test <input name="labTestDesc" type="text" class="formstyle" value='<%= field2[i]%>' size="20">  </span>

<span class="formleft">Lab Result <input name="labResultDesc" type="text" class="formstyle" value='<%= field3[i]%>' size="20">  </span>

the above three fields are getting values FROM DATABASE and getting displayed in one row. Now , i have three buttons under these three fields
 <input name="Submit1" type="button" class="formbutton" value="Add " onclick="addLRN();">
 <input name="Submit2" type="button" class="formbutton" value="Edit " onclick="editLRN();">
 <input name="Submit3" type="button" class="formbutton" value="Remove" onclick="removeLRN();">

my requirment:
the three buttons should  add(new row with three blank fields) , edit(current row fields) and delete(current row fields) respectively.
any idea how i can add a blank row with the above three fields ? any logic for edit and remove would be greatly appreciated.

thanks
J

Comment
Watch Question

Commented:
Hi jaggernat,

What html tag(s) appear after the  Lab Result  line?

<span class="formleft"></span>

Or something else?  Are you limited by other existing html constructs around this, or are these the only requirements?

Do you have any existing code for the required functions?

function addLRN() {
...
}

function editLRN() {
...
}

function removeLRN() {
...
}

Posting these would help the experts.

Peace and joy.  mvan
Commented:
Ok, here's a start.  Added reference in the call.  Added two identical rows.  Created the delete function.  There's more to do.

Peace and joy.  mvan


<script language="JavaScript">

function addLRN(anObj) {
// more challenging than the rest
}

function lockLRN() {
  // to be run onLoad;
  // step through all document elements, locking all text fields w/in 'labels' DIVs
}

function editLRN(anObj) {
  // for testing
  alert(anObj.name);
  alert(anObj.id);      // id returns labels - ID of the div
  alert(anObj.value);

  // unlock three text boxes on this row for editing

  // edit will look something like this ??
  anObj.focus(lrnNo);
  // and this ??  Neither work, both required w/ correct syntax
  anObj.lrnNo.select();
}

function removeLRN(anObj) {
  var ans = confirm('Are you sure you want to delete this row?');
  if (ans) anObj.parentNode.removeChild(anObj);
}

</script>

<table width="100%" border="2" cellspacing="0" cellpadding="0">
    <tr bgcolor="f0f3f9">
        <td width="100%">
            <div id="labels">
                <span class="formleft">LRN# <input type="text" name="lrnNo" size="20" value="<%= field1[i]%>" class="formstyle">  </span>
                <span class="formleft">Lab Test <input name="labTestDesc" type="text" class="formstyle" id="labtest" value="<%= field2[i]%>" size="20">  </span>
                <span class="formleft">Lab Result <input name="labResultDesc" type="text" class="formstyle" id="labResult" value="<%= field3[i]%>" size="20">  </span>
 <input name="Submit1" type="button" class="formbutton" value="Add " onclick="addLRN(this.parentNode);">
 <input name="Submit2" type="button" class="formbutton" value="Edit " onclick="editLRN(this.parentNode);">
 <input name="Submit3" type="button" class="formbutton" value="Remove" onclick="removeLRN(this.parentNode);">
            </div>
        </td>
    </tr>
    <tr bgcolor="f0f3f9">
        <td width="100%">
            <div id="labels">
                <span class="formleft">LRN# <input type="text" name="lrnNo" size="20" value="<%= field1[i]%>" class="formstyle">  </span>
                <span class="formleft">Lab Test <input name="labTestDesc" type="text" class="formstyle" id="labtest" value="<%= field2[i]%>" size="20">  </span>
                <span class="formleft">Lab Result <input name="labResultDesc" type="text" class="formstyle" id="labResult" value="<%= field3[i]%>" size="20">  </span>
 <input name="Submit1" type="button" class="formbutton" value="Add " onclick="addLRN(this.parentNode);">
 <input name="Submit2" type="button" class="formbutton" value="Edit " onclick="editLRN(this.parentNode);">
 <input name="Submit3" type="button" class="formbutton" value="Remove" onclick="removeLRN(this.parentNode);">
            </div>
        </td>
    </tr>
    <tr bgcolor="f0f3f9">
        <td width="100%">
            <div id="labels">
                <span class="formleft">LRN# <input type="text" name="lrnNo" size="20" value="<%= field1[i]%>" class="formstyle">  </span>
                <span class="formleft">Lab Test <input name="labTestDesc" type="text" class="formstyle" id="labtest" value="<%= field2[i]%>" size="20">  </span>
                <span class="formleft">Lab Result <input name="labResultDesc" type="text" class="formstyle" id="labResult" value="<%= field3[i]%>" size="20">  </span>
 <input name="Submit1" type="button" class="formbutton" value="Add " onclick="addLRN(this.parentNode);">
 <input name="Submit2" type="button" class="formbutton" value="Edit " onclick="editLRN(this.parentNode);">
 <input name="Submit3" type="button" class="formbutton" value="Remove" onclick="removeLRN(this.parentNode);">
            </div>
        </td>
    </tr>
</table>

Not the solution you were looking for? Getting a personalized solution is easy.

Ask the Experts

Author

Commented:
thanks for the code dude. it helped me a lot. Can you please help me out with other javascript questions i posted (html:radio validation ) and javascript calendar.


Regards
j
Access more of Experts Exchange with a free account
Thanks for using Experts Exchange.

Create a free account to continue.

Limited access with a free account allows you to:

  • View three pieces of content (articles, solutions, posts, and videos)
  • Ask the experts questions (counted toward content limit)
  • Customize your dashboard and profile

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.