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>
Related
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 have a form which i want to bypass. Is there a way to bypass this using javascript or any other technique? Also how can i make out that this form is sql vulnerable?
<form method="post" action="/auth/login/">
<input type="hidden" name="next" value="">
<input type="hidden" name="csrfmiddlewaretoken" value="Tpy2uWI03EnzWIN3COSUvuVh5GrcUICo">
<fieldset class="fieldset_main">
<table>
<tbody><tr>
<th class="requiredfield">
<label for="id_username">Username:</label></th>
<td colspan="2"><input id="id_username" maxlength="254" name="username" type="text">
</td>
</tr>
<tr>
<th class="requiredfield">
<label for="id_password">Password:</label></th>
<td colspan="2"><input id="id_password" name="password" type="password">
</td>
</tr>
<tr>
<th>
<label for="id_rememberme">Keep me logged in:</label></th>
<td colspan="2"><input id="id_rememberme" name="rememberme" type="checkbox">
</td>
</tr>
</tbody></table>
</fieldset>
<input type="submit" value="login" class="button">
</form>
OK. Here is the serious answer. it's not the FORM that needs to be secure, it's the back-end code that handles the data. If you enter non-sanitized content into queries, or don't properly handle/process/use the entered data, that's where the vector will be. The form is purely aesthetic
I need a message to pop up to tell the user that their enquiry has been submitted. The validation works, however I had to remove my old popup message as it was conflicting with the validation code. I need to know where to put the pop up message code in that exisiting javascript code that I am using to validate. The code i was using to make a pop up message was:
<script>
function EnquireButton() {
alert("Thank you for your enquiry!");
}
</script>
I'm sure it's simple enough, I have tried to implement it into the validation code, however it just reloads the page without showing the pop up.
HTML:
<form name="Contact_Us_Form" method="post" action="">
<table width="450px">
<p>One time Message</p>
<tr>
<td valign="top">
<label for="full_name">Full Name *</label>
</td>
<td valign="top">
<input type="text" name="full_name" maxlength="50" size="30" placeholder="First Name and Last Name" title="Your name here" required/>
</td>
</tr>
<tr>
<td valign="top">
<label for="landline">Landline Number *</label>
</td>
<td valign="top">
<input type="text" name="landline" maxlength="50" size="30" placeholder="(01206)" title=" YourLandline Number" required/>
</td>
</tr>
<tr>
<td valign="top">
<label for="Email">Email Adress *</label>
</td>
<td valign="top">
<input type="text" name="email" maxlength="80" size="30" placeholder="you#yourdomain.com" title="Your email" required/>
</td>
</tr>
<tr>
<td valign="top">
<label for="house_number">House Number *</label>
</td>
<td valign="top">
<input type="text" name="house_number" maxlength="30" size="30" placeholder="House Number" title="Your House Number" required/>
</td>
</tr>
<tr>
<td>
<label for="postal_code">Post Code *</label>
</td>
<td>
<input type="text" name="postal_code" maxlength="30" size="30" placeholder="CO5 " title="Your Postal Code" required/>
</td>
</tr>
<tr>
<td valign="top">
<label for="">Enquiry</label>
</td>
<td valign="top">
<textarea name="Enquiry" maxlength="1000" cols="28" rows="6" placeholder="Write your enquiry here."></textarea>
</td>
</tr>
<tr>
<td colspan="2" style="text-align:center">
<button onclick="Enquirebutton()">Enquire</button>
<script>
$(document).ready(function (){
validate();
$('#full_name, #landline, #Email').change(validate);
});
function validate(){
if ($('#full_name').val().length > 0 &&
$('#landline').val().length > 0 &&
$('#Email').val().length > 0) {
$("input[type=Enquirebutton()]").prop("disabled", false);
}
else {
$("input[type=Enquirebutton()]").prop("disabled", true);
}
}
</script>
</td>
</tr>
</table>
</form>
Just add one property to form tag onsubmit="EnquireButton()"
that is
<form name="Contact_Us_Form" method="post" action="" onsubmit="EnquireButton()">
First, make your button a submit one:
<button type="submit">Enquire</button>
Then you can either use the onclick="Enquirebutton()" in your submit button or the onsubmit="Enquirebutton()" in your form.
Take a look at onsubmit Event for more information.
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.
i got an example here at http://www.kriesi.at/archives/create-simple-tooltips-with-css-and-jquery/comment-page-2#comment-2746
it creates a effect in style sheet and masks the default tooltip of any tag that is passed through this function
$(document).ready(function() {
simple_tooltip("img","tooltip");
});
function simple_tooltip(target_items, name){
$(target_items).each(function(i){
$("body").append("<div class='"+name+"' type='img' id='"+name+i+"'><p>"+$(this).attr('title')+"</p></div>");
var my_tooltip = $("#"+name+i);
$(this).removeAttr("title").mouseover(function(){
my_tooltip.css({opacity:0.8, display:"none"}).fadeIn(400);
}).mousemove(function(kmouse){
my_tooltip.css({left:kmouse.pageX+15, top:kmouse.pageY+15});
}).mouseout(function(){
my_tooltip.fadeOut(400);
});
});
}
but the problem is it shows tooltip on each an every image tag of the page where as i only wanted to show it on form validation help icon. here is my form
<form id="form1">
<table id="tblSignUp" border="0" cellpadding="2" cellspacing="5"
style="border: 0px solid black; color: #FFFFFF;">
<div id="inputs">
<tr>
<td>First Name<font class="AsterikLabel">*</font> :</td>
<td><input id="firstname" size="35" maxlength="50" type="text"
style="width: 175px;"
onblur="checkError(this);" name="fname" />
<img title="Alphabets, numbers and space(' ') , no special characters min 3 and max 20 characters."
src="PsychOImages/20.png" align="bottom" /></td>
<td id="firstName1"></td>
</tr>
<tr>
<td>Last Name<font class="AsterikLabel">*</font> :</td>
<td><input type="text" id="lastname" style="width: 175px;"
name="lastname"
onblur="checkError(this);" />
<img title="Alphabets, numbers and space(' ') , no special characters min 3 and max 20 characters."
src="PsychOImages/20.png" align="bottom" />
</td>
<td id="lastname1"></td>
</tr>
<tr>
<td>Email<font class="AsterikLabel">*</font> :</td>
<td><input id="email" type="text" style="width: 175px;"
name="email"
onblur="checkError(this);" />
<img title=" The Email address format is yourname#example.com." src="PsychOImages/20.png" align="bottom" /></td>
<td id="email1"></td>
</tr>
<tr>
<td>Telephone<font class="AsterikLabel">*</font> :</td>
<td><input id="phone" type="text" style="width: 175px;"
name="phone"
onblur="checkError(this);" maxlength="16"/>
<img title="Format : 339-4248 or (095) 2569835 or +7 (095)1452389"
src="PsychOImages/20.png" align="bottom" /></td>
<td id="phone1"></td>
</tr>
<tr>
<td>Choose a Password<font class="AsterikLabel">*</font> :</td>
<td><input id="password" type="password" style="width: 175px;"
name="password" onblur="checkError(this);" />
<img title="Password feild can only contains 7 to 15 characters" src="PsychOImages/20.png" align="bottom" /></td>
<td id="password1"></td>
</tr>
<tr>
<td>Re-Type Password<font class="AsterikLabel">*</font> :</td>
<td><input id="repassword" type="password"
style="width: 175px;"
name="retype" onblur="checkError(this);" />
<img title="Retype teh password same as above for confirmation" src="PsychOImages/20.png" align="bottom" /></td>
<td id="repassword1"></td>
</tr>
</div>
</table>
</form>
i have tried putting my form into a div and then giving that Div id to the function
`simple_tooltip("","")` but it stops working then.... please help!
$(function() {
simple_tooltip("#form1 img", "tooltip");
});
First argument of the simple_tooltip function is a selector so you can use it to find any elements you want to.
Also, You have to remove the <div id="inputs"> (and corresponding </div>) tag because your html isn't valid. You can't put a div directly inside the table element.