i am putting together some javascript form validation and i cant figure out how to get this onfocus to take hold of my div... i just need it to alert me that my onfocus function is making contact with my last name imput... :(
html:
<div id="contact">
<form name="form1" action="send.php" method="post" id="contact_f">
<table id="contact_table">
<tr>
<td class="col1" colspan="2">
<h1 class="center_text">Contact Aron</h1>
<div id="error_messages">
errors
</div>
</td>
</tr>
<tr>
<td class="col1">
<label for="first_name">First Name*</label><br>
<input id="first_name" required name="Name" type="text" pattern="[a-zA-Z]+">
</td>
<td class="col2">
<label for="last_name">Last Name*</label><br>
<input id="last_name" required type="text">
</td>
</tr>
<tr>
<td class="col1">
<label for="email">Email*</label><br>
<input id="email" required type="email">
</td>
<td class="col2">
<label for="confirm_email">Confirm Email*</label><br>
<input id="confirm_email" required type="text">
</td>
</tr>
<tr>
<td class="col1">
<label for="phone">Phone Number <span id="color_gray">xxx-xxx-xxxx</span></label><br>
<input id="phone" type="tel" pattern="\d{3}[\-]\d{3}[\-]\d{4}">
</td>
<td class="col2">
</td>
</tr>
<tr class="col2">
<td class="col1" colspan="2">
<label for="message">Message*</label><br>
<textarea id="message" required type="text"></textarea>
</td>
</tr>
<tr>
<td class="col1" colspan="2">
<button id="submit_button" type="submit" value="submit">Submit Form</button>
</td>
</tr>
</table>
</form>
javascript in question:
document.getElementById("last_name").onfocus=function() {
alert("last name");
};
Actually your code is working fine. You can try it with using jquery, like this -
$(document).ready(function() {
$( "#last_name" ).focus(function() {
alert("Last name");
});
});
You need to use:
document.getElementById("last_name").onfocus=function() {
alert(this.value);
};
Try this
window.addEventListener('load',function(){
document.getElementById("last_name").addEventListener('focus',function() {
alert(this.value);
});
});
Related
form field screenshot
I am collecting nominees data from users for nomination in my organization. The form fields have been attached as image for your reference.
I use iondatepicker for the date field. In case the date of birth chosen by the users for the nominee works out to be the age of a minor i want the fields of the minors' guardian data to be enabled. else they should remain as disabled or with the value 'NA'. Please find below the codes for the form fields.
<table>
<tr>
<td>
<div id="result-1">
<input style="width: 600px;" type="text" value="" name="dob" id="mydate"
data-lang="en" data-years="1925-2018" size="10" maxlength="10"
placeholder='date of birth of nominee (dd/mm/yyyy)' data-format="DD/MM/YYYY"
class="form-control"/>
</div>
</td>
</tr>
<tr>
<td style="text-align: left;">
<b>If Nominee is a Minor, give
GUARDIAN's Particulars</b>
</td>
</tr>
<tr>
<td>
<input style="width: 600px;"
type="text" name="g_name" id="g_name" size="30" maxlength="200"
placeholder='Guardian Name' class="form-control"/>
</td>
</tr>
<tr>
<td>
<input style="width: 600px;"
type="text" name="g_relation" id="g_relation" size="30" maxlength="200"
placeholder='Guardian Relationship with you' class="form-control"/>
</td>
</tr>
<tr>
<td>
<input style="width: 600px;"
type="text" name="g_address" id="g_address" size="30" maxlength="200"
placeholder='Guardian Address' class="form-control"/>
</td>
</tr>
</table>
You can try following solution (assuming you are not using any libraries like jQuery or moment.js, it's in plain javascript):
var myDate = document.getElementById('mydate')
myDate.addEventListener('change', function(e){
var val = e.target.value
var date = new Date(val)
if ( isNaN( date.getDate()) ){
alert('Wrong date format!')
return;
}
var compareDate = new Date()
compareDate.setFullYear(compareDate.getFullYear()-18)
if(compareDate < date){
document.getElementById('g_name').value=""
document.getElementById('g_relation').value=""
document.getElementById('g_address').value=""
document.getElementById('g_name').disabled=false
document.getElementById('g_relation').disabled=false
document.getElementById('g_address').disabled=false
}else{
document.getElementById('g_name').value="NA"
document.getElementById('g_relation').value="NA"
document.getElementById('g_address').value="NA"
document.getElementById('g_name').disabled=true
document.getElementById('g_relation').disabled=true
document.getElementById('g_address').disabled=true
}
})
<table>
<tr>
<td>
<div id="result-1">
<input style="width: 600px;" type="text" value="" name="dob" id="mydate"
data-lang="en" data-years="1925-2018" size="10" maxlength="10"
placeholder='date of birth of nominee (dd/mm/yyyy)' data-format="DD/MM/YYYY"
class="form-control"/>
</div>
</td>
</tr>
<tr>
<td style="text-align: left;">
<b>If Nominee is a Minor, give
GUARDIAN's Particulars</b>
</td>
</tr>
<tr>
<td>
<input style="width: 600px;"
type="text" name="g_name" id="g_name" size="30" maxlength="200" disabled
placeholder='Guardian Name' class="form-control"/>
</td>
</tr>
<tr>
<td>
<input style="width: 600px;"
type="text" name="g_relation" id="g_relation" size="30" maxlength="200" disabled
placeholder='Guardian Relationship with you' class="form-control"/>
</td>
</tr>
<tr>
<td>
<input style="width: 600px;"
type="text" name="g_address" id="g_address" size="30" maxlength="200" disabled
placeholder='Guardian Address' class="form-control"/>
</td>
</tr>
</table>
Hello I have developed a form where input boxes value of table should not be greater then input box outside of table.
<form>
<div class="form-group">
<label class="label1 col-md-4">Total number of sanctioned seats
<span class="required"> * </span>
</label>
<div class="col-md-7">
<input type="text" class="form-control" id="sanctionedSeatsSummary">
</div>
</div>
<table class="eduleveles table table-bordered table-hover">
<thead>
<th></th>
<th>Faculty</th>
<th>Enter sanctioned seats</th>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox" name="Check" class="cbxenable">
</td>
<td>
</td>
<td>
<input type="text" class="form-control seats" name="seats">
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="Check" class="cbxenable">
</td>
<td>
</td>
<td>
<input type="text" class="form-control seats" name="seats">
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="Check" class="cbxenable">
</td>
<td>
</td>
<td>
<input type="text" class="form-control seats" name="seats">
</td>
</tr>
</tbody>
</table>
</form>
in above jsfiddle all ENTER SANCTIONED SEATS sum will not be greater then "Enter total number of sanctioned seats" in onchange.
You need to use jquery keyup event as I mentioned in fiddle.
Please check this fiddle
Here I just made textbox value blank if sum of three sanctioned seats are greater than total.
Also i have cleare 3 textbox if you chane total textbox
Open this link : https://jsfiddle.net/5y6na3wr/7/
$(document).ready(function(){
$(".seats").on('keyup',function(){
var total = parseInt(0) ;
$( ".seats" ).each(function( index ) {
if($(this).val()){
total = total + parseInt($(this).val());
}
});
if(total > $("#sanctionedSeatsSummary").val()){
alert("total sanctioned Seats are greater then given sanctioned Seats");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form>
<div class="form-group">
<label class="label1 col-md-4">Total number of sanctioned seats
<span class="required"> * </span>
</label>
<div class="col-md-7">
<input type="text" class="form-control" id="sanctionedSeatsSummary">
</div>
</div>
<table class="eduleveles table table-bordered table-hover">
<thead>
<th></th>
<th>Faculty</th>
<th>Enter sanctioned seats</th>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox" name="Check" class="cbxenable">
</td>
<td>
</td>
<td>
<input type="text" class="form-control seats" name="seats">
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="Check" class="cbxenable">
</td>
<td>
</td>
<td>
<input type="text" class="form-control seats" name="seats">
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="Check" class="cbxenable">
</td>
<td>
</td>
<td>
<input type="text" class="form-control seats" name="seats">
</td>
</tr>
</tbody>
</table>
</form>
check below snippet
$(document).ready(function(){
var ttl, val;
$("input[name=seats]").on('keyup', function(){
val = 0;
$("input[name=seats]").each(function(){
if(parseInt($(this).val().trim()) > 0)
val += parseInt($(this).val().trim());
});
ttl = parseInt($("#sanctionedSeatsSummary").val().trim());
if(val > ttl)
alert("your alert");
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<div class="form-group">
<label class="label1 col-md-4">Total number of sanctioned seats
<span class="required"> * </span>
</label>
<div class="col-md-7">
<input type="text" class="form-control" id="sanctionedSeatsSummary">
</div>
</div>
<table class="eduleveles table table-bordered table-hover">
<thead>
<th></th>
<th>Faculty</th>
<th>Enter sanctioned seats</th>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox" name="Check" class="cbxenable">
</td>
<td>
</td>
<td>
<input type="text" class="form-control seats" name="seats">
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="Check" class="cbxenable">
</td>
<td>
</td>
<td>
<input type="text" class="form-control seats" name="seats">
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="Check" class="cbxenable">
</td>
<td>
</td>
<td>
<input type="text" class="form-control seats" name="seats">
</td>
</tr>
</tbody>
</table>
</form>
I have two divs containing same input fields. When I enter the vales in both the div fields, all the values get submitted. what I want is, only the value of selected div (using radio button) should pass. Any help will be appreciated :-)
$(document).ready(function() {
console.log('called');
$('input[type=radio][name=cancel_policy]').change(function() {
if (this.value == '0') {
$("#fixedPolicyDiv").css("display", "block");
$("#percentagePolicyDiv").css("display", "none");
$("#percentagePolicyDiv").get(0).reset();
} else if (this.value == '1') {
$("#fixedPolicyDiv").css("display", "none");
$("#fixedPolicyDiv").get(0).reset();
$("#percentagePolicyDiv").css("display", "block");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<label class="custom-control custom-control-primary custom-radio">
<input class="custom-control-input" type="radio" name="cancel_policy" value="0"> <span class="custom-control-indicator"></span>
<span class="custom-control-label">Fixed price</span>
</label>
<label class="custom-control custom-control-primary custom-radio">
<input class="custom-control-input" type="radio" name="cancel_policy" value="1"> <span class="custom-control-indicator"></span>
<span class="custom-control-label">Percentage wise</span>
</label>
<div id="fixedPolicyDiv" style="display:none;">
<div class="form-group">
<div class="col-lg-11 col-lg-offset-1">
<div class="table-responsive">
<table class="table" id='cancel_tbl'>
<tr>
<td width='30%'>Days</td>
<td width='30%'>Amount</td>
<td> </td>
</tr>
<tr>
<td>
<input type="number" name="cancel_policy_days[]" class="form-control" placeholder="days" value="<?= set_value('cancel_policy_days[]') ?>" required="required" />
</td>
<td>
<input type="number" name="cancel_policy_amount[]" class="form-control" placeholder="cancellation amount" value="<?= set_value('cancel_policy_amount[]') ?>" required="required" />
</td>
<td> </td>
</tr>
<tr>
<td colspan="6" align="center">
<input type="button" value="Add More" id="cancel_addmorebtn1" class="btn btn-outline-info">
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
<div id="percentagePolicyDiv" style="display:none;">
<div class="form-group">
<div class="col-lg-11 col-lg-offset-1">
<div class="table-responsive">
<table class="table" id='cancel_tb2'>
<tr>
<td width='30%'>Days</td>
<td width='30%'>Percentage</td>
<td> </td>
</tr>
<tr>
<td>
<input type="number" name="cancel_policy_days[]" class="form-control" placeholder="days" value="<?= set_value('cancel_policy_days[]') ?>" required="required" />
</td>
<td>
<input type="number" name="cancel_policy_amount[]" class="form-control" placeholder="cancellation percentage" value="<?= set_value('cancel_policy_amount[]') ?>" required="required" />
</td>
<td> </td>
</tr>
<tr>
<td colspan="6" align="center">
<input type="button" value="Add More" id="cancel_addmorebtn2" class="btn btn-outline-info">
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
You can add the disabled property to the inputs you do not want to sent.
for exemple :
$("#percentagePolicyDiv").find('input').prop('disabled');
If reset() is not only JS method you accept, we can make it with setting value of input fields such way:
$(document).ready(function() {
console.log('called');
$('input[type=radio][name=cancel_policy]').change(function() {
if (this.value == '0') {
$("#percentagePolicyDiv").find('input').val('');
$("#fixedPolicyDiv").css("display", "block");
$("#percentagePolicyDiv").css("display", "none");
} else if (this.value == '1') {
$("#fixedPolicyDiv").find('input').val('');
$("#fixedPolicyDiv").css("display", "none");
$("#percentagePolicyDiv").css("display", "block");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<label class="custom-control custom-control-primary custom-radio">
<input class="custom-control-input" type="radio" name="cancel_policy" value="0"> <span class="custom-control-indicator"></span>
<span class="custom-control-label">Fixed price</span>
</label>
<label class="custom-control custom-control-primary custom-radio">
<input class="custom-control-input" type="radio" name="cancel_policy" value="1"> <span class="custom-control-indicator"></span>
<span class="custom-control-label">Percentage wise</span>
</label>
<div id="fixedPolicyDiv" style="display:none;">
<div class="form-group">
<div class="col-lg-11 col-lg-offset-1">
<div class="table-responsive">
<table class="table" id='cancel_tbl'>
<tr>
<td width='30%'>Days</td>
<td width='30%'>Amount</td>
<td> </td>
</tr>
<tr>
<td>
<input type="number" name="cancel_policy_days[]" class="form-control" placeholder="days" value="<?= set_value('cancel_policy_days[]') ?>" required="required" />
</td>
<td>
<input type="number" name="cancel_policy_amount[]" class="form-control" placeholder="cancellation amount" value="<?= set_value('cancel_policy_amount[]') ?>" required="required" />
</td>
<td> </td>
</tr>
<tr>
<td colspan="6" align="center">
<input type="button" value="Add More" id="cancel_addmorebtn1" class="btn btn-outline-info">
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
<div id="percentagePolicyDiv" style="display:none;">
<div class="form-group">
<div class="col-lg-11 col-lg-offset-1">
<div class="table-responsive">
<table class="table" id='cancel_tb2'>
<tr>
<td width='30%'>Days</td>
<td width='30%'>Percentage</td>
<td> </td>
</tr>
<tr>
<td>
<input type="number" name="cancel_policy_days[]" class="form-control" placeholder="days" value="<?= set_value('cancel_policy_days[]') ?>" required="required" />
</td>
<td>
<input type="number" name="cancel_policy_amount[]" class="form-control" placeholder="cancellation percentage" value="<?= set_value('cancel_policy_amount[]') ?>" required="required" />
</td>
<td> </td>
</tr>
<tr>
<td colspan="6" align="center">
<input type="button" value="Add More" id="cancel_addmorebtn2" class="btn btn-outline-info">
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
Otherwise you should implement desired ID to <form> elements.
formObject.reset() is JS method of FORM-object
What I am trying to do is to dynamically replace the corresponding text with the string from input field.(field1>field11, field2>field22)
http://jsfiddle.net/c2CUE/3/
Can you give me any clue on how to do it in jquery?
<table>
<tr>
<td><h2>Field 1</h2>
<input type="text" name="field1" value="qwerty" class="field1"></td>
<td><span class="field11">asdasd</span></td>
</tr>
<tr>
<td><h2>Field 1</h2>
<input type="text" name="field2" value="qwerty"></td>
<td><span class="field22">asdasd</span></td>
</tr>
</table>
this should do the trick
$(document).ready(function () {
$("input.field1").on("keyup",function () {
$("span.field11").html($(this).val());
});
});
or in live
http://jsfiddle.net/u8EB9/
you could also hook the function to the "change" event but than youll get your text only updated, after you left the input!
this depends on your needs!
Try this:
<form id="form" method="post">
<table>
<tr>
<td><h2>Field 1</h2>
<input type="text" name="field1" value="qwerty" class="field1"></td>
<td><span class="field11">asdasd</span></td>
</tr>
<tr>
<td><h2>Field 1</h2>
<input type="text" name="field2" value="qwerty"></td>
<td><span class="field22">asdasd</span></td>
</tr>
</table>
</form>
and jquery:
$(document).ready(function(){
$('#form').submit(function(e){
e.preventDefault();
$('.field11').html($('.field1').val());
$('.field22').html($('.field2').val());
});
}
if your intention is to use this code multiple times it might be better to use classs rather than id's to stop you needing to create a bunch of bind events.
html:
<table>
<tr>
<td>
<h2>Field 1</h2>
<input type="text" name="field1" value="qwerty" class="replacer" />
<input type="button" class="replace" value="replace" />
</td>
<td>
<span class="replacee field11">asdasd</span>
</td>
</tr>
<tr>
<td>
<h2>Field 1</h2>
<input type="text" class="replacer" name="field2" value="qwerty" />
<input type="button" class="replace" value="replace" />
</td>
<td>
<span class="replacee field22">asdasd</span>
</td>
</tr>
</table>
JS:
$('.replace').on('click', function(){
var parentRow = $(this).closest('tr');
parentRow.find('.replacee').text(parentRow.find('.replacer').val());
});
http://jsfiddle.net/c2CUE/4/
HTML:
<table>
<tr>
<td><h2>Field 1</h2>
<input type="text" name="field1" value="qwerty" class="field1"></td>
<td><span class="field11">asdasd</span></td>
</tr>
<tr>
<td><h2>Field 1</h2>
<input type="text" name="field2" value="qwerty"></td>
<td><span class="field22">asdasd</span></td>
</tr>
</table>
JQuery:
$("input[type='text']").on("keyup",function () {
$(this).parent().next().find('span').html($(this).val());
});
Demo:
http://jsfiddle.net/F74ec/
I'm creating a plugin where I'm wanting the owner of the company to be able to log in and be able to add employees/contractors and upon creating them, have them added to the wpdb. Right now, I've copied over the the html that was in the source code for the Add New User (I don't want to use the add new user format) and I've got the form there (minus what I'm guessing is the ajax and javascript bits). When I click submit it just returns to the page.
Here is the code that is being called in... I'm wondering if I'm missing some includes or something along those lines, thanks in advance! :)
<?php
function e34s_tc_add_staff()
{
global $wbdb;
?>
<div class="wrap">
<?php screen_icon(); ?>
<h2 id="add-new-user"> Add New Staff Member</h2>
<div id="ajax-response"></div>
<p>Create a new staff member for this site.</p>
<form action="" method="post" name="createuser" id="createuser" class="validate">
<input name="action" type="hidden" value="createuser" />
<input type="hidden" id="_wpnonce_create-user" name="_wpnonce_create-user" value="5ebe2973f8" /><input type="hidden" name="_wp_http_referer" value="/wordpress/wp-admin/user-new.php" /><table class="form-table">
<tr class="form-field form-required">
<th scope="row"><label for="user_login">Username <span class="description">(required)</span></label></th>
<td><input name="user_login" type="text" id="user_login" value="" aria-required="true" /></td>
</tr>
<tr class="form-field form-required">
<th scope="row"><label for="email">E-mail <span class="description">(required)</span></label></th>
<td><input name="email" type="text" id="email" value="" /></td>
</tr>
<tr class="form-field">
<th scope="row"><label for="first_name">First Name </label></th>
<td><input name="first_name" type="text" id="first_name" value="" /></td>
</tr>
<tr class="form-field">
<th scope="row"><label for="last_name">Last Name </label></th>
<td><input name="last_name" type="text" id="last_name" value="" /></td>
</tr>
<tr class="form-field form-required">
<th scope="row"><label for="pass1">Password <span class="description">(required)</span></label></th>
<td>
<input class="hidden" value=" " /><!-- #24364 workaround -->
<input name="pass1" type="password" id="pass1" autocomplete="off" />
</td>
</tr>
<tr class="form-field form-required">
<th scope="row"><label for="pass2">Repeat Password <span class="description">(required)</span></label></th>
<td>
<input name="pass2" type="password" id="pass2" autocomplete="off" />
<br />
<div id="pass-strength-result">Strength indicator</div>
<p class="description indicator-hint">Hint: The password should be at least seven characters long. To make it stronger, use upper and lower case letters, numbers and symbols like ! " ? $ % ^ & ).</p>
</td>
</tr>
<tr>
<th scope="row"><label for="send_password">Send Password?</label></th>
<td><label for="send_password"><input type="checkbox" name="send_password" id="send_password" /> Send this password to the new user by email.</label></td>
</tr>
<tr class="form-field">
<th scope="row"><label for="role">Staff Type</label></th>
<td><select name="role" id="role">
<option value='employee'>Employee</option>
<option value='contractor'>Contractor</option>
</select>
</td>
</tr>
</table>
<p class="submit"><input type="submit" name="createuser" id="createusersub" class="button button-primary" value="Add New Staff Member " /></p>
</form>
</div>
<?php
}