Adding 1 to row value onsubmit - javascript

I want to know how to add 1 to a value in a nested div anytime the form is submitted.
<form id="form1" name="form1" method="post" action="" class="submit">
<table width="30%" border="0" cellspacing="4" cellpadding="4">
<tr>
<td width="58%"><div class="fav_count">1</div></td>
<td width="42%"><input type="submit" name="button" id="button" value="Submit" /></td>
</tr>
</table>
</form>
<form id="form2" name="form1" method="post" action="" class="submit">
<table width="30%" border="0" cellspacing="4" cellpadding="4">
<tr>
<td width="58%"><div class="fav_count">2</div></td>
<td width="42%"><input type="submit" name="button2" id="button2" value="Submit" /></td>
</tr>
</table>
</form>
<form id="form3" name="form1" method="post" action="" class="submit">
<table width="30%" border="0" cellspacing="4" cellpadding="4">
<tr>
<td width="58%"><div class="fav_count">3</div></td>
<td width="42%"><input type="submit" name="button3" id="button3" value="Submit" /></td>
</tr>
</table>
</form>
<form id="form4" name="form1" method="post" action="" class="submit">
<table width="30%" border="0" cellspacing="4" cellpadding="4">
<tr>
<td width="58%"><div class="fav_count">4</div></td>
<td width="42%"><input type="submit" name="button4" id="button4" value="Submit" /></td>
</tr>
</table>
</form>
here's a fiddle
https://jsfiddle.net/fgu42nxr/
Any help with jquery will be appreciated. Thanks

As mentioned in comments above, you can't do it when you submitting the form, because it leads to page reloading. However, you can cancel default form submit behaviour and reimplement it with ajax or something. If so, you can do it like this:
$("#form1").on('submit', function(e){
e.preventDefault();
// do some stuff here...
$(this).find(".fav_count").each(function() {
$(this).text(+($(this).text()) + 1)
})
})

You can do this by adding a class to your submit buttons and writing a click event of the same to update the value of fav_count.
Change your submit button to follow.
<input type="submit" class="cSubmitBtn" name="button4" id="button4" value="Submit" />
Now write a click event for above button to get the current value of fav and update it.
In the following code we're getting current fav value using parent() function of the jQuery then increase the current value by one.
And in last we're setting the value as text to the same span element using .text(value) function of jQuery.
$('.cSubmitBtn').click(function(e) {
e.preventDefault();
var favDiv=$(this).parents('tr').find('.fav_count');
var currentValue=parseInt(favDiv.text());
currentValue++;
favDiv.text(currentValue);
});
https://jsfiddle.net/fgu42nxr/3/
Please note above code will prevent your submit button to submit the form on click. If you still want to submit the form you can do in the same jQuery code.

Here you have a solution => plunkr
$(document).ready(function() {
$("form").submit(function(event) {
event.preventDefault();
$div = $(this).find(".fav_count");
var count = parseInt($div.html());
count++;
$div.html(count.toString());
});
});

Related

Unable to use .find() to get value from table/form

Trying to wrap my head around this for a while now. Some guru needs to help me out, it would be greatly appreciated. I don't know why it is not working.
$(".form").on('submit', function(event) {
event.preventDefault(); //prevent the forms default action
var surname = $(this).find(".surname");
console.log(surname);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<form class="form" method="post" action="nextpage.php">
<tr>
<td class="name">john</td>
<td class="surname">smith</td>
<td>british</td>
<td><button type="submit" class="btn btn-info btn-sm">Submit</button></td>
</tr>
</form>
<form class="form" method="post" action="nextpage.php">
<tr>
<td class="name">bob</td>
<td class="surname">doe</td>
<td>american</td>
<td><button type="submit" class="btn btn-info btn-sm">Submit</button></td>
</tr>
</form>
</table>
So if i click on the first submit button i should see john, and the second, bob.
As statet in the comments your HTML semantics is wrong. That's the first reason why it doesn't work. The second thing is you might want to use jQuerys .text() to get the "value" of a HTML element.
To make it work, see the example <table> element is now moved inside the <form> element. Depending on your needs this is one possible solution.
$(".form").on('submit', function(event) {
event.preventDefault(); //prevent the forms default action
var surname = $(this).find(".surname");
console.log(surname.text()); // here .text() is the only change in your js code
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="form" method="post" action="nextpage.php">
<table>
<tr>
<td class="name">john</td>
<td class="surname">smith</td>
<td>british</td>
<td><button type="submit" class="btn btn-info btn-sm">Submit</button></td>
</tr>
</table>
</form>
<form class="form" method="post" action="nextpage.php">
<table>
<tr>
<td class="name">bob</td>
<td class="surname">doe</td>
<td>american</td>
<td><button type="submit" class="btn btn-info btn-sm">Submit</button></td>
</tr>
</table>
</form>
Read more about permitted elements inside the <table> element here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table
Read more about permitted elements inside <form> tag here:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form
I fixed your code:
The <form> wraps around the <table>
Catch the clicks on <buttons> and get the surname relatively to the clicked row (<tr>)
$("button[type=submit]").on('click', function(event) {
event.preventDefault(); //prevent the forms default action
var surname = $(this).closest('tr').find(".surname");
console.log(surname.text());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="form" method="post" action="nextpage.php">
<table>
<tr>
<td class="name">john</td>
<td class="surname">smith</td>
<td>british</td>
<td><button type="submit" class="btn btn-info btn-sm">Submit</button></td>
</tr>
<tr>
<td class="name">bob</td>
<td class="surname">doe</td>
<td>american</td>
<td><button type="submit" class="btn btn-info btn-sm">Submit</button></td>
</tr>
</table>
</form>
JSFiddle: https://jsfiddle.net/v9k3sL1f/
just put the class="form" and action inside the tr tag and it'll works.

Use href to submit into a php file

I want to make a login form which should provide 2 ways to submit , one through the login button which should submit the info into the login.php and another through the href (Forgot password) which should redirect the user and submit the info to the forgotpassword.php file. So far I have tried this code but it doesn't work:
<script type="text/javascript">
function forgotpassword()
{
document.getElementById("ee").action="project_forgotpassword.php";
document.getElementById("ee").submit();
}
</script>
<form id="ee" method="POST" action="login.php">
<table>
<tr>
<th>Username</th>
<td><input type="text" name="username"></td>
</tr>
<tr>
<th>Password</th>
<td><input type="password" name="password"></td>
</tr>
<tr>
<th>Forgot Password</th>
</tr>
<tr>
<td></td>
<td>
<input type="submit" name="submit" value="Submit">
</td>
</tr>
</table>
</form>
First issue as I have commented was the typo mistake.
Second issue is submit button name. Refer to following post.
JSFiddle
Code
function forgotpassword() {
var form = document.getElementById("ee");
form.action = "project_forgotpassword.php";
console.log(form)
form.submit();
}
<form id="ee" method="POST" action="login.php">
<table>
<tr>
<th>Username</th>
<td>
<input type="text" name="username">
</td>
</tr>
<tr>
<th>Password</th>
<td>
<input type="password" name="password">
</td>
</tr>
<tr>
<th>Forgot Password
</th>
</tr>
<tr>
<td></td>
<td>
<input type="submit" name="btnSubmit" value="Submit">
</td>
</tr>
</table>
</form>
Changes
<input type="submit" name="btnSubmit" value="Submit">
When calling the javascript function you can omit the javascript: from the onclick handler. You might wish to use that syntax when invoking the function from a standard hyperlink, such as <a href='javascript:func()'>link</a> but that is not common.
In the amended forgotpassword function I use setAttribute rather than trying to call the attribute directly - I think it is more reliable that way. Also, unless in the js function, you prevent the default action of the hyperlink it will simply try to go to the value in the href attribute.
<script type="text/javascript">
/*
function forgotpassword(){
document.getElementById("ee").action="project_forgotpassword.php";
document.getElementById("ee").submit();
}
*/
/* I would tend to use this approach to setting an attribute */
function forgotpassword(){
var form=document.getElementById("ee");
form.setAttribute('action','project_forgotpassword.php');
form.submit();
}
</script>
<form id="ee" method="POST" action="login.php">
<table>
<tr>
<th>Username</th>
<td><input type="text" name="username"></td>
</tr>
<tr>
<th>Password</th>
<td><input type="password" name="password"></td>
</tr>
<tr>
<th>Forgot Password</th>
</tr>
<tr>
<td></td>
<td>
<input type="submit" name="subform" value="Submit">
</td>
</tr>
</table>
</form>
One final thing - change the name of the submit button ~ it shouldn't be called submit - especially when trying to invoke form submission using javascript.
Try this,
$('#forgetpassword').click(function(){
$("form[name='form_name']").attr("action", "project_forgotpassword.php");
$("form[name='form_name']").submit();
});
Change the forget Password link as below,
<a id="forgetpassword">Forgot Password</a>

Automatic form submission using JS

I am developing a code, which takes a value as input and the form when submitted, displays the result and the code is as follows:
<script>
function submitme()
{
document.forms["myform"].submit();
}
</script>
<body onload="submitme()">
<FORM name="performance" id="myform" method="post" action="http://www.pvpsiddhartha.ac.in/index.sit" >
<INPUT type="hidden" name="service" value="STU_PERFORMANCE_MARKS_DISPLAY">
<TABLE border="0" width="100%" cellspacing="0" cellpadding="0">
<TR>
<TD colspan="2" align="center"><STRONG><U>Student Marks Performance Display Form</U></STRONG></TD>
</TR>
<TR><TD> </TD></TR>
<TR>
<TD align="right" width="40%">Regd. No:</TD>
<TD><INPUT type="text" name="stid" value="<?php echo $_GET['x']; ?>"></TD>
</TR>
<TR><TD> </TD></TR>
<TR>
<TD align="right"><INPUT type="submit" name="submit" value="Submit"></TD>
<TD align="center"><INPUT type="reset" value="Clear"></TD>
</TR>
</TABLE>
</FORM>
</body>
The problem is, when the page is loaded completely, the form should be submitted , but the form cannot be submitted. What is the problem , Help me!! Thanks in advance
Try this pure javascript,
<body>
<FORM name="performance" id="myform" method="post" action="http://www.pvpsiddhartha.ac.in/index.sit" >
<INPUT type="hidden" name="service" value="STU_PERFORMANCE_MARKS_DISPLAY">
<TABLE border="0" width="100%" cellspacing="0" cellpadding="0">
<TR>
<TD colspan="2" align="center"><STRONG><U>Student Marks Performance Display Form</U></STRONG></TD>
</TR>
<TR><TD> </TD></TR>
<TR>
<TD align="right" width="40%">Regd. No:</TD>
<TD><INPUT type="text" name="stid" value=""></TD>
</TR>
<TR><TD> </TD></TR>
<TR>
<TD align="right"><INPUT type="submit" name="submit_button" value="Submit"></TD>
<TD align="center"><INPUT type="reset" value="Clear"></TD>
</TR>
</TABLE>
</FORM>
<script>
window.onload = function(){
document.getElementById('myform').submit();
};
</script>
To access this document.getElementById('myform').submit(), you should change <INPUT type="submit" name="submit" value="Submit"> to <INPUT type="submit" name="submit_button" value="Submit">. Don't use other element with name of submit or id.
And also the better one is,
<script>
window.ready = function(){
document.getElementById('myform').submit();
};
</script>
It should help:
$(document).ready(function () {
$('#myform').trigger('submit'); });
Still I don't get what is the point of submitting the form after page loads.
try
<script>
function submitme()
{
document.forms["performance"].submit();
}
</script>
or
<script>
function submitme()
{
document.forms[0].submit();
}
</script>

Struts 1 Delete Confirmation using display tag in jsp

Im trying to show a delete confirmation box once the user clicks the delete button within the display:column. I have the dialog to show up but once the user confirms that he wants to delete the action is not getting called. The page just reloads without the row being deleted. Without the delete confirmation the row will be deleted successfully. Im doing something wrong with the confirmation. Any help would be appreciated, Thanks
What I have right now is:
jQuery:
$(".btnShowDeleteConfirmation").click(function (e)
{
ShowDialog(true);
e.preventDefault();
});
$("#btnClose, #btnNo").click(function (e)
{
HideDialog();
e.preventDefault();
});
$("#btnYes").click(function (e)
{
});
Javascript:
function deleteEntry(rowId)
{
document.getElementById('rowId').value=rowId;
document.forms['myForm'].action='/myAction/deleteAction.action?method=deleteRow';
document.forms['myForm'].submit;
}
display tag table:
<form action="" method="POST" id="mainForm" name="MyFormBean">
<display:table requestURIcontext="true" requestURI="/unavailability/loadUnavailability.action?method=loadForm" uid="myList" name="requestScope.unavailList" class="simple" pagesize="10" defaultsort="2" sort="list" cellspacing="0" excludedParams="*">
<display:column property="startDate" title="Start Date" width="18%" decorator="com.mhngs.util.DisplayTagDateWrapper" sortable="true" headerClass="sortable"/>
<display:column property="endDate" title="End Date" width="18%" decorator="com.mhngs.util.DisplayTagDateWrapper" sortable="true" headerClass="sortable" />
<display:column property="reason" title="Comments" width="30%" sortable="true" headerClass="sortable" />
<display:column media="html" width="10%" class="btnShowDeleteConfirmation">
Delete
</display:column>
</display:table>
<input type="hidden" name="rowId" id="rowId" />
</form>
HTML: This will be displayed once user clicks the delete button
<div id="overlay" class="delete_overlay"></div>
<div id="dialog_delete" class="delete_overlay">
<form method="post" action="">
<table style="width: 100%; border: 0px;" cellpadding="3" cellspacing="0">
<tr>
<td class="web_dialog_title">Delete Row Confirmation</td>
<td class="web_dialog_title align_right">Close</td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="2" style="padding-left: 15px;">
<label>You seleted a row to be deleted</label>
</td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="2" style="text-align: center;">
<input id="btnYes" type="submit" value="Yes" onClick="javascript:deleteEntry('<c:out value="${myList.rowId}"/>')"/>
<input id="btnNo" type="button" value="No" />
</td>
</tr>
</table>
</form>
</div>
You haven't specified form name in html. Where have you mentioned "myForm" name in the form tag?
<form name="myForm" .. >

Replace default placeholder after form submit

How can I replace the default placeholder in a form (using JQuery or JavaScript) with the submitted value? Thank you!
Here is a sample code:
<form name="" id="RegForm" method="post" action="">
<table cellpadding="0" cellspacing="0" width="260" align="center">
<tr>
<td align="center" colspan="2" height="45" valign="middle"><input type="text" name="username" id="username" class="text" placeholder="Your Username here" style="background:url(img/bg_text.png) no-repeat;" /></td>
</tr>
<tr>
<td align="left" width="120" height="50" valign="middle"><input type="image" id="submitbtn" src="img/but_register.png" class="submit" onclick="checkPreReg()"/></td>
</tr>
</table>
Javascript:
<script>
function checkPreReg() {
var form = $("#RegForm");
var u = $("#username", form).val();
$('#username',form).attr('placeholder',u);
}
</script>
It doesn't work at all. I tried other scripts but the value goes back to the default Placeholder after the new one appears briefly.
I would say this question might need some clarification, however I will give it a shot.
if you mean:
<input type="text" placeholder="default_placeholder" />
Then I would try:
$(document).ready(function(){
$('#FORM').submit(function(){
$('#INPUT_ID').attr('placeholder','new text here');
});
});

Categories