Use href to submit into a php file - javascript

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>

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.

Showing Information on button click java web application

My project is java dynamic web application. I have servlets & jsp pages in my projects. On one of jsp pages, I showed table as below:
<table border="2" bordercolor="#81BEF7">
<tr bordercolor="#81BEF7">
<td>Customer Name</td>
<td>Address</td>
<td>Contact Number</td>
</tr>
<tr bordercolor="#81BEF7">
<td>AA</td>
<td>AA Address</td>
<td>1111</td>
<td>
<form name="detail" action="./custInfo" method="post">
<input type="submit" name="btnCustomerInfo" value="Detail.." />
</form>
</td>
</tr>
<tr bordercolor="#81BEF7">
<td>BB</td>
<td>BB Address</td>
<td>2222</td>
<td>
<form name="detail" action="./custInfo" method="post">
<input type="submit" name="btnCustomerInfo" value="Detail.." />
</form>
</td>
</tr>
</table>
Once user clicks on button, I want to show customer detail information as below:
<table><tr><td>First Address</td><td>AAA</td></tr>
<tr><td>Second Address</td><td>BBB</td></tr></table>
I don't want to go another page, I prefer showing with message box. Those customer detail information are in array. how can I achieve this.
Thanks,
You can implement this in different ways
Option 1 (Preferred in your scnerio): As your requirement doesn't need for any server data, You can simply use any client side script or javascript library to generate the output as a function of the input.
For instance, You can use JQuery as below :
HTML
<table border="2" bordercolor="#81BEF7">
<tr bordercolor="#81BEF7">
<td>Customer Name</td>
<td>Address</td>
<td>Contact Number</td>
</tr>
<tr bordercolor="#81BEF7">
<td class="custemorName1">AA</td>
<td class="address1">AA Address</td>
<td>1111</td>
<td>
<form id = "target" name="detail" action="./custInfo" method="post">
<input type="submit" name="btnCustomerInfo" value="Detail.." />
</form>
</td>
</tr>
<tr bordercolor="#81BEF7">
<td class="custemorName2">BB</td>
<td class="address2">BB Address</td>
<td>2222</td>
<td>
<form id = "target" name="detail" action="" method="post">
<input type="button" name="btnCustomerInfo" value="Detail.." />
</form>
</td>
</tr>
</table>
<div id="output"></div>
jQuery
$(document).ready(function() {
$( "#target" ).click(function( event ) {
var address1 =$(".address1").text();
var address2 =$(".address2").text();
$("#output").append(
"<table><tr><td>First Address</td><td>"+address1+"</td></tr>" +
"<tr><td>Second Address</td><td>"+address2+"</td></tr></table>" );
});
});
Option 2 : If you really need to hit the servlet in your server, You can use either ajax call (with out reloading the page) or you can add the values into request object attributes while forwarding the request from your servlet into your jsp page.

Implementing submit event in a form

How do I get the data of a form upon clicking the a submit type button like so:
var x = form_submit.username;
var y = form_submit.password;
var z = form_submit.full_name;
and also stop the form from disappearing upon clicking the "Submit" button with the code below?
<form id="form_submit">
<input type="text" id="username" name="username" required>
<table>
<tr>
<th align="left">Full Name</th><td><input type="text" id="full_name" required></td>
</tr>
<!--<tr>
<th align="left">Username</th><td><input type="text" id="username" required></td>
</tr>-->
<tr>
<th align="left">Password</th><td><input type="password" id="full_name" required></td>
</tr>
<tr>
<th align="left">Confirm Password</th><td><input type="password" id="confirm_password" required></td>
</tr>
<tr>
<th align="left">Department</th><td><input type="text" id="department" required></td>
</tr>
<tr>
<th align="left">Supervisor</th>
<td>
<select id="supervisor">
<? for(var i in supervisors){ ?>
<option value="<?=supervisors[i] ?>"><?=supervisors[i]?></option>
<?}?>
</select>
</td>
</tr>
<tr>
<th align="left">E-mail Address</th><td><input type="email" id="email" required></td>
</tr>
<tr>
<td colspan="2" align="right"><input type="submit" value="Create Account" id='btn_create'></td>
</tr>
</table>
</form>
<?!= HtmlService.createHtmlOutputFromFile('CSS').getContent(); ?>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#form_submit').submit(function(e){
e.preventDefault();
var username = $('input[name="username"]', this).val();
alert(username);
});
});
}
</script>
I'm guessing that I should be using the "event.preventDefault()" method but I don't know where to place it.
P.S. I am using Google Sites, if it would make any difference. Thank you.
P.P.S.
Edited my post to show the right answer.
How about something as simple as that - it seems to be working - perhaps it will fit your needs
update:
From what I checked you can address the form children easily if you give them id. for example you can currently do form_submit.children.username and get the value. if you will put IDs also on all the other tags like table, tr, th, etc. you will be able to dig deeper
var form_submit = document.getElementById("form_submit");
var username = form_submit.children.username.value;
update 2:
I`ve moved the script to the bottom of the body tag so I could get refernce to the submit button. Once got the button I registered to the "click" event using addEventListener. Now the PreventDefault method worked
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form id="form_submit">
<input type="text" id="username" name="username" required/>
<table>
<tr>
<th align="left">Full Name</th>
<td>
<input type="text" id="full_name" required/>
</td>
</tr>
<tr>
<th align="left">Password</th>
<td>
<input type="password" id="full_name" required/>
</td>
</tr>
<tr>
<th align="left">Confirm Password</th>
<td>
<input type="password" id="confirm_password" required/>
</td>
</tr>
<tr>
<th align="left">Department</th>
<td>
<input type="text" id="department" required/>
</td>
</tr>
<tr>
<th align="left">Supervisor</th>
</tr>
<tr>
<th align="left">E-mail Address</th>
<td>
<input type="email" id="email" required/>
</td>
</tr>
<tr>
<td colspan="2" align="right">
<input type="submit" value="Create Account" id='btn_create'/>
</td>
</tr>
</table>
</form>
<script>
var button = document.getElementById("btn_create");
if (button)
button.addEventListener('click', createAccount, false);
function createAccount(evt){
var form_submit = document.getElementById("form_submit");
var isValid = form_submit.checkValidity();
alert('isValid: ' + isValid);
var username = form_submit.children.username.value;
evt.preventDefault();
return false;
}
</script>
</body>
</html>
To prevent the form to actually been submitted and process the data, you must cancel the event by returning false in your called function, pay special attention that you need to use the return statement in your onClick parameter.
onclick="createAccount(this.parentNode)"
=>
onclick="return createAccount(this.parentNode)"
function createAccount(frmData){
alert(document.getElementById("form_submit").elements.namedItem("username").value);
return false;
}

I need each row of the table is separate and can be clickable and view some information. It is possible to be hundreds of rows entered by the users

//input field where user submit data into mysql database and immediately it shows in table
<form name="form" action="" method="post">
<input type="text" name="pitanje" class="search-input" placeholder="Pitajte..." />
<input class="search-btn" type="submit" value="Go" />
</form>
<table class='table'>
<tr>
<th>ID</th>
<th>Question</th>
<th>Date</th>
<th>Like</th>
<th>Views</th>
<th>Answer??</th>
</tr>
<tr>
<td>1</td>
<td>Question</td>
<td>Date</td>
<td>Views</td>
<td>Like</td>
<td>
<button>Press</button>
</td>
</td>
</tr>
</table>
Best example of that is http://www.incredibox.com/top-50 try to click on some row and you will see. Every row

Insert data in to the table and submit like a form

I need to create a table with two rows and three columns.
<table border="1">
<tr>
<td>Male</td>
<td>Female</td>
<td>Total</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
Here I need the second row table data's as a input field like a form. I need to fill them by my own and submit it. How can this be done.
Thank You
if your sending your form to serverside then there is no need to take hidden field. Instead give name attribute to your fields. It will be available on the serverside page.
<form id="FormName" action="server.php">
<table border = "1">
<tr>
<td> Male </td>
<td> Female </td>
<td> Total </td>
</tr>
<tr>
<td> <input type="text" id="name" name="name" /></td>
<td> </td>
<td> </td>
</tr>
</table>
<input type="button" value="Submit Data" onclick="submitForm()" />
</form>
function submitForm(){
if(false)//check for errors
{
}else{
$('#FormName').submit();
}
}
Create a form
<form name="myform" action="xxx.php">
//create 3 hidden fields here
</form>
HTML
<table border = "1" id="mytable">
<tr>
<td> Male </td>
<td> Female </td>
<td> Total </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<input type="button" value="Submit Data" onclick="submitTableData()" />
On your button click, get the values of each td and assign it to the hidden fields and then call submit
function submitTableData()
{
$('#hidden1').val('value of td1'); //$('#mytable tr:nth-child(2)').find('td:nth-child(1)').text()
$('#hidden2').val('value of td2'); //$('#mytable tr:nth-child(2)').find('td:nth-child(2)').text()
$('#hidden3').val('value of td3'); //$('#mytable tr:nth-child(2)').find('td:nth-child(3)').text()
$('#myform').submit();
}
<form action="submit.php" method="post">
<table width="100%">
<tr>
<td>Male</td>
<td>Female</td>
<td>Total</td>
</tr>
<tr>
<td><input type="text" name="textnamehere" /></td>
<td><input type="text" name="textnamehere" /></td>
<td><input type="text" name="textnamehere" /></td>
</tr>
</table>
<input type="submit" value="submit" />
</form>
function addForm {
if{
somecodes here if true
}else{
$('variablenamehere') .submit();
}
}
In the cells of the second row just put some inputs:
<tr>
<td><input type="text" name="male"></td>
<td><input type="text" name="female"></td>
<td><input type="text" name="total"></td>
</tr>
When submitting the form, you will have 3 additional parameters: male, female and total in your request which will contain the values.
You can go on even further and - if i understood it right - since you have only numbers, you can specify the input type as being number and, with a small javascript function, you can make the total be calculated automatically.

Categories