Im using this kind of jsp script together with jquery. I would like to retrieve the value of a current element with id. Can any one help me to solve this. Below is my code:
1. Onload displays two phone numbers. -
I got it
2. Then I want to update DB for the selected phone. -
I got it
3. But for this update an authorization step is required which is the inline content. Once authorized the id of the selected phone will be carried to action class (
which gives me wrong, infact always give me id from first form).
Note: Both forms are dynamically generated in jsp, to make it easy for your reference I paste it in this way.
<form name="form1" method="post" action="/myAction.do">
<tr>
<td width="20%" valign="top">Phone1</td>
<td width="67%">
<input type="text" name="info_value" size="35" value="1111111111" readonly="readonly">
<input type="hidden" id="info_id" value="100" />
<a class="modalbox" href="#inline" ><img src="Image/img.png" align="absmiddle"></a>
</td>
</tr>
</form>
<form name="form1" method="post" action="/myAction.do">
<tr>
<td width="20%" valign="top">Phone2</td>
<td width="67%">
<input type="text" name="info_value" size="35" value="2222222222" readonly="readonly">
<input type="hidden" id="info_id" value="200" />
<a class="modalbox" href="#inline" ><img src="Image/img.png" align="absmiddle"></a>
</td>
</tr>
</form>
<script type="text/javascript">
function validateAuthForm(usr,pwd) {
var usernamelen = usr.length;
var passwordlen = pwd.length;
if( (usernamelen >= 1) && (passwordlen >= 1) ) {
return 1;
}else{
return 0;
}
}
$(document).ready(function() {
$(".modalbox").fancybox();
$("#contact").submit(function() { return false; });
$("#invalidate").on("click", function(){ // triggers(popsup) inline content which is at bottom
var usernameval = $("#username").val();
var passwordval = $("#password").val();
var validFlag = validateAuthForm(usernameval,passwordval);
if(validFlag != 1) {
$("#msg").html("Authentication Failed !");
}else{
$("#invalidate").replaceWith("<em>sending...</em>");
$.ajax({
type: 'POST',
url: 'AuthenticatePassword.jsp',
data: $("#contact").serialize(),
success: function(data) {
if(data.length == 7) {
$("#contact").fadeOut("fast", function(){
$(this).before("<p><strong>Authentication Success! :)</strong></p>");
setTimeout("$.fancybox.close()", 1000);
});
var info_id = $("#info_id").val();
alert('info_id: '+info_id)
document.forms[0].action="./myAction.do?mode=InvalidateInfo?info_id="+info_id;
document.forms[0].submit();
}
}
});
}
});
});
</script>
<div id="inline">
<h2 align="center">Authorize Invalidation</h2>
<form id="contact" action="#" method="post" name="contact">
<label>Username</label>
<input id="username" class="txt" type="text" name="username" />
<label>Password</label>
<input id="password" class="txt" type="password" name="password" />
<button class="invBtn" id="invalidate">Invalidate</button>
</form>
</div>