I'm making a form with a submit button to check login and a link to make a new user!
I'm coding this with:
<script language="javascript">
function new_user()
{
document.getElementById("login").value='registo';
}
</script>
<form id="frmLogin" name="frmLogin" method="post" action="#">
<table>
<tr>
<td><label for="username">Nome do utilizador</label></td>
<td><input type="text" name="username" id="username" /></td>
</tr>
<tr>
<td><label for="password">Palavra-passe</label></td>
<td><input type="text" name="password" id="password" /></td>
</tr>
<tr>
<td></td>
<td><input type="submit" name="OK" id="OK" value="Submit"/></td>
</tr>
<tr>
<td><input type="hidden" name="login" id="login" value="login"/></td>
<td>Novo Utilizador</td>
</tr>
</table>
</form>
I want to use a hidden field to know if the user pressed the button or the link.
To make the code smaller I'd like to use this code instead:
<form id="frmLogin" name="frmLogin" method="post" action="#">
<table>
<tr>
<td><label for="username">Nome do utilizador</label></td>
<td><input type="text" name="username" id="username" /></td>
</tr>
<tr>
<td><label for="password">Palavra-passe</label></td>
<td><input type="text" name="password" id="password" /></td>
</tr>
<tr>
<td></td>
<td><input type="submit" name="OK" id="OK" value="Submit"/></td>
</tr>
<tr>
<td><input type="hidden" name="login" id="login" value="login"/></td>
<td>Novo Utilizador</td>
</tr>
</table>
</form>
Can anyone explain me why this doesn't work?
You might be having a quote clash in the definition of the onclick event handler. Your browser is interpreting it as onclick="document.getElementById(".
Try enclosing the argument of the document.getElementById sentence in single quotes.
onclick="document.getElementById('login').value='registo';document.frmLogin.submit();">
You can use it as below
<td>Novo Utilizador</td>
use single quote for getElementById that will solve it.
Related
I have Full name in my form as one input box but I want to make it split in two input boxes
box1= First Name
box2= Last Name
and when submit button is pressed, the value is saved as box1+box2 in the same old full name data scheme in my mysql database.
Here is my current code.
<td colspan="2"><span class="smalltext"><label for="username">{$lang->username}</label></span></td>
</tr>
<tr>
<td colspan="2"><input type="text" class="textbox" name="username" id="username" style="width: 100%" value="" /></td>
</tr>
and here is full page code
<form action="member.php" method="post" id="registration_form"><input type="text" style="visibility: hidden;" value="" name="regcheck1" /><input type="text" style="visibility: hidden;" value="true" name="regcheck2" />
{$regerrors}
<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder">
<tr>
<td class="thead" colspan="2"><strong>{$lang->registration}</strong></td>
</tr>
<tr>
<td width="50%" class="trow1" valign="top">
<fieldset class="trow2">
<legend><strong>{$lang->account_details}</strong></legend>
<table cellspacing="0" cellpadding="{$theme['tablespace']}" width="100%">
<tr>
<td colspan="2"><span class="smalltext"><label for="fullname">{$lang->fullname}</label></span></td>
</tr>
<tr>
<td colspan="2"><input type="text" class="textbox" name="fullname" id="fullname" style="width: 100%" value="fullname" /></td>
</tr>
{$passboxes}
<tr>
<td><span class="smalltext"><label for="email">{$lang->email}</label></span></td>
<td><span class="smalltext"><label for="email2">{$lang->confirm_email}</label></span></td>
</tr>
<tr>
<td><input type="text" class="textbox" name="email" id="email" style="width: 100%" maxlength="50" value="{$email}" /></td>
<td><input type="text" class="textbox" name="email2" id="email2" style="width: 100%" maxlength="50" value="{$email2}" /></td>
</tr>
<tr>
<td colspan="2" style="display: none;" id="email_status"> </td>
</tr>
{$hiddencaptcha}
</table>
</fieldset>
<div align="center">
<input type="hidden" name="step" value="registration" />
<input type="hidden" name="action" value="do_register" />
<input type="submit" class="button" name="regsubmit" value="{$lang->submit_registration}" />
</div>
</form>```
You can concatenate the values in your php file and store them in your database column.
I can explain it more in detail if you share your php file.
I'm going to give you a frontend solution (because of the tags attached to the question), which could work if:
You just need a quick fix
This is a one-time problem
You know that this won't create complications in the future
Other than that, I highly recommend you do this in the backend.
The idea here is to create a hidden fullname input and use javascript to concatenate the first and last name.
const name = {
firstName: '',
lastName: ''
}
document.querySelector('[name="firstName"]').addEventListener('input', (e) => {
name.firstName = e.target.value
updateFullName()
})
document.querySelector('[name="lastName"]').addEventListener('input', (e) => {
name.lastName = e.target.value
updateFullName()
})
function updateFullName() {
document.querySelector('[name="fullname"]').value = `${name.firstName} ${name.lastName}`
}
<form>
<input type="text" name="firstName">
<input type="text" name="lastName">
<input type="hidden" name="fullname">
</form>
I have used a contact form in php and added google recaptcha on it. But I can submit the form without recaptcha validation. How can I make this recaptcha as required. I have already tried some solutions, but none of them worked for me. I appreciate your answers, Thanks
<form name="contact" method="post" action="" id="fsrep-contact-form">
<table cellspacing="0" cellpadding="1" border="0">
<tr id="fname">
<td>First Name <span>*</span></td>
<td><input type="text" name="fname" required></td>
</tr>
<tr id="lname">
<td>Last Name</td>
<td><input type="text" name="lname"></td>
</tr>
<tr id="emailid">
<td>Email <span>*</span></td>
<td><input type="email" name="email" id="mail" required></td>
</tr>
<tr id="phone-no">
<td>Cell Phone <span>*</span></td>
<td><input type="number" name="phone" required></td>
</tr>
<tr>
<td>Please give us any other details you would like, that would help us to help you find your next home</td>
<td><textarea name="message"></textarea></td>
</tr>
<tr>
<td>
<div class="g-recaptcha" id="rcaptcha" name="googlecaptcha" required data-sitekey="6LffZpsUAAAAAEC_KyN4KauhSSmKdRf9SVR5aVJD" data-callback="correctCaptcha"></div>
</td>
</tr>
<tr>
<td><input type="submit" name="submit" value="SUBMIT INQUIRY" id="submit"></td>
</tr>
</table>
</form>
I have tried this one and it works for me:
You have a "data-callback" attribute
<div class="g-recaptcha" id="rcaptcha" name="googlecaptcha" required data-sitekey="YOUR KEY" **data-callback="correctCaptcha"**></div>
simply create a function with the name correctCaptcha
var recaptchachecked=false;
function correctCaptcha() {
recaptchachecked = true;
}
Then with your form you hold it til you validate if the recaptchachecked variable is true, then proceed.
<form method="post" onsubmit="return isreCaptchaChecked(event)">
..
..
</form>
function isreCaptchaChecked()
{
e.preventDefault();
return recaptchachecked;
}
I hope this helps you.
I want to display data stored in an array in form-
for example:
var users =
[
{
'name':'John',
'age':'10'
},
{
'name':'Rose',
'age':'18'
}
];
and I want to display name and age of users logged in, in the form below:
<form id="myform">
<div>
</div>
<h2 align="center"> Edit Details</h2>
<table id="table1"; cellspacing="5px" cellpadding="5%"; align="center">
<tr>
<td align="right" class="style1">First Name:</td>
<td class="style1"><input id="firstname" type="text" placeholder="FirstName" /></td>
</tr>
<tr>
<td align="right">Last Name:</td>
<td><input id="lastname" type="text" placeholder="LastName" /></td>
</tr>
<tr>
<td align="right">Email ID:</td>
<td><input id="email" type="text" placeholder="Email" /></td>
</tr>
<tr>
<td align="right">User Name:</td>
<td><input id="username" type="text" placeholder="UserName" /></td>
</tr>
<tr>
<td align="right">Password:</td>
<td><input id="password" type="password" placeholder="Password" /></td>
</tr>
<tr>
<td> <input type="button" value="Edit" onclick="edit()" />
<td> <input type="button" value="Reset" />
</td>
</tr>
</table>
</form>
You can just change the text content with pure javascript.
name.textContent = 'First name' + users[0].name;
Of course, you will need to select all the fields you want to change.
I tried to make this span button toggle hide / show an element it is not a parent of. Is it possible or does it have to be a parent of the element it is trying to toggle .show()/.hide() ?
HTML:
<div id="log_reg">
<span class="btn" id="Log">Log In</span>
<span class="btn" id="Reg">Register</span>
</div>
<div id="log_box">
<table>
<form name="login" action="logsys.php" method="post">
<tr>
<td>Username:</td>
<td><input type="text" name="user" /></td>
</tr>
<tr>
<td>Password:</td>
<td><input type="password" name="pass" /></td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="Log In" /></td>
</tr>
</form>
</table>
</div>
jQuery:
$(document).ready(function(){
$("#log_box").hide();
$("log").click(function(){
$("#log_box").show();
});
});
Your selector is incorrect. Its Log and You missed #
Use
$("#Log").click(function () {
$("#log_box").show();
});
In my html page, there exists a link to sign up and a div which holds the signup form.
<img src="images/logo2.png" alt="LOGO">
<div>
<form method="POST" action="signup.php">
<table>
<tr>
<td>First Name</td>
<td><input type="text" name="fname"></input></td>
</tr>
<tr>
<td>Last Name</td>
<td><input type="text" name="lname"></input></td>
</tr>
<tr>
<td>Email</td>
<td><input type="text" name="email"></input></td>
</tr>
<tr>
<td>Re-enter Email</td>
<td><input type="text" name="remail"></input></td>
</tr>
<tr>
<td>Password</td>
<td><input type="password" name="pwd"></input></td>
</tr>
<tr>
<td>Confirm Password</td>
<td><input type="text" name="cpwd"></input></td>
</tr>
<tr>
<td>Birthday</td>
<td><input type="text" name="bday"></input></td>
</tr>
<tr>
<td>Sex</td>
<td><input type="text" name="sex"></input></td>
</tr>
<tr>
<td><input type="submit" value="Signup"></input></td>
<td><input type="button" value="Cancel"></input></td>
</tr>
</table>
</form>
</div>
I need to scroll down to the div when the user clicks on the signup link.
Can somebody plz explain how to do that.
Thanx in advance....
To use just HTML, you can use an anchor tag.
<div><a id='form'></a>
<form method="POST" action="signup.php">
...
</div>
Then your link will be the following: Click here to sign up
Explanation: That link goes to the a anchor tag with the id of form.
Use the following,
<img src="images/logo2.png" alt="LOGO">
Sign Up
<div id="test">
<form method="POST" action="signup.php"> ... </form>
</div>
By using simple HTML,using anchor tag you can scroll page to your SignUp div.
"#" in href is used to redirect within the page.
Hope this helps
Sign Up
<div id="mySignUpDiv">
</div>