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>
Related
I have the following dynamic table
I want to compare the value of submit Quantity textbox and Stock textbox together to check if Submit Quantity value is greater than stock value for all rows.
When submit Quantity textbox loses focus I want check, if Submit Quantity value is greater than stock, I want show an alert that "Not enough goods exist in stock" and Submit Quantity textbox must receive focus again.
My HTML and C#
<tbody>
#{ var i = 0;}
#foreach (var item in Model)
{
<tr>
<td></td>
<td>
<input type="text" name="[#i].GoodsName" readonly="readonly" asp-for="#item.GoodsName" class="form-control" />
</td>
<td>
<input type="text" name="[#i].BrandName" readonly="readonly" asp-for="#item.BrandName" class="form-control" />
</td>
<td>
<input type="text" name="[#i].Quantity" readonly="readonly" asp-for="#item.Quantity" class="form-control" />
</td>
<td>
<input type="number" onblur="compare()" id="submitQ" class="form-control" />
</td>
<td>
<input type="text" name="stock" id="stock" readonly="readonly" class="form-control" />
</td>
</tr>
}
I have no idea how to do that
Any help will be appreciated
Thanks in advance
Edit:
This is what I have done to achieve the result but it only works on first row Submit Quantity textbox not on second row
function compare() {
$('#submitQ').each(function () {
let submit = $('#submitQ').val();
let quantity = $('#stock').val();
if (submit > quantity) {
alert('Not enough goods!')
$('#submitQ').select();
return false
}
})
You cannot have mutliple elements with same ids instead use class selector .Then , just get value of submit quantity using $(this).val() and stock value using .closest('tr').find('.stock').. then simply compare these values .
Demo Code :
$('.submitQ').on("blur", function() {
//get value of submit qnty
let submit = $(this).val();
//get stock
let quantity = parseInt($(this).closest('tr').find('.stock').val());
if (submit > quantity) {
alert('Not enough goods!')
$(this).focus(); //show focus
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<thead>
<th>No</th>
<th>Name</th>
<th>Brand</th>
<th>Requested Quantity</th>
<th>Submit Quantity</th>
<th>Stock</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>
<input type="text" name="[#i].GoodsName" readonly="readonly" asp-for="#item.GoodsName" value="something" class="form-control" />
</td>
<td>
<input type="text" name="[#i].BrandName" readonly="readonly" asp-for="#item.BrandName" class="form-control" />
</td>
<td>
<input type="text" name="[#i].Quantity" readonly="readonly" asp-for="#item.Quantity" class="form-control" />
</td>
<td>
<!--use class-->
<input type="number" class="submitQ" class="form-control" />
</td>
<td>
<input type="text" name="stock" value="8" class="stock" readonly="readonly" class="form-control" />
</td>
</tr>
<tr>
<td>2</td>
<td>
<input type="text" name="[#i].GoodsName" readonly="readonly" asp-for="#item.GoodsName" value="something" class="form-control" />
</td>
<td>
<input type="text" name="[#i].BrandName" readonly="readonly" asp-for="#item.BrandName" class="form-control" />
</td>
<td>
<input type="text" name="[#i].Quantity" readonly="readonly" asp-for="#item.Quantity" class="form-control" />
</td>
<td>
<input type="number" class="submitQ" class="form-control" />
</td>
<td>
<input type="text" name="stock" value="5" class="stock" readonly="readonly" class="form-control" />
</td>
</tr>
</tbody>
</table>
I have a dynamic knockout table that has a check box for "Qualification gained" when this is ticked i am looking to add a class to the inputs of traininglevelselect and trainingDateSelect (rows 0 and 4)
Table -
<tbody data-bind="foreach: TrainingItems" id="trainingPadding" class="tdPadding">
<tr>
<td class="col-md-1">#Html.DropDownList("Train Level", EnumHelper.GetSelectList(typeof(TrainingLevel)), new { #class = "form-control site-level-ddl trainingLevelSelect", data_bind = "value: TrainLevel" })</td>
<td class="col-md-2"><input type="text" data-bind="value: TrainCourseTitle" class="form-control" /></td>
<td class="col-md-2"><input type="text" data-bind="value: TrainProviderName" class="form-control" /></td>
<td class="col-md-1"><input type="text" data-bind="date: TrainDateStarted" class="form-control datepicker" placeholder="dd/mm/yyyy" id="datepicker2" /></td>
<td class="col-md-1"><input type="text" data-bind="date: TrainDateCompleted" class="form-control trainingDateSelect datepicker hasDatepicker" placeholder="dd/mm/yyyy" /></td>
<td class="col-md-1"><input type="text" data-bind="value: TrainHoursAttended" class="form-control" onkeyup="calculateTrainingCost()" /></td>
<td class="col-md-1"><input type="text" id="trainCost" data-val="true" data-val-required="Please enter a cost" data-bind="value: TrainCost" class="form-control trainingCost" onkeyup="calculateTrainingCost(), calculateOverallTotal()" /></td>
<td class="col-md-1" style="text-align: center"><input type="checkbox" data-bind="checked: QualificationGained" class="" onchange="addClass()"/></td>
<td class="col-md-1" style="width: 4%; text-align: center"><a href="#" data-bind="click: $root.removeTrainingRow" class="glyphicon glyphicon-trash text-danger" /></td>
</tr>
</tbody>
To do this I am currently using jQuery to add the classes -
$('.trainingDateSelect').addClass('trainingDateCompleted');
$('.trainingLevelSelect').addClass('trainingLevel');
The issue -
This works fine if I only add one row. Dynamically adding a second row and clicking the checkbox adds classes to both rows.
I looking to just add classes to the current row the checkbox is on not all.
I have tried something along the lines of -
function addClass(){
$(this).closest('tr').children('input:eq(4)').addClass('trainingDateCompleted');
}
Which fires when the checkbox is clicked however it does not work.
There is a mismatch in the function name used in on change event in your code:
Pass this to the function so that you can refer that inside the function. You can use find() on the closest tr like the following way:
function addClass(el){
$(el).closest('tr').find('input:eq(4)').addClass('trainingDateCompleted');
}
function calculateTrainingCost(){}
.trainingDateCompleted{
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tbody data-bind="foreach: TrainingItems" id="trainingPadding" class="tdPadding">
<tr>
<td class="col-md-1">test</td>
<td class="col-md-2"><input type="text" data-bind="value: TrainCourseTitle" class="form-control" /></td>
<td class="col-md-2"><input type="text" data-bind="value: TrainProviderName" class="form-control" /></td>
<td class="col-md-1"><input type="text" data-bind="date: TrainDateStarted" class="form-control datepicker" placeholder="dd/mm/yyyy" id="datepicker2" /></td>
<td class="col-md-1"><input type="text" data-bind="date: TrainDateCompleted" class="form-control trainingDateSelect datepicker hasDatepicker" placeholder="dd/mm/yyyy" /></td>
<td class="col-md-1"><input type="text" data-bind="value: TrainHoursAttended" class="form-control" onkeyup="calculateTrainingCost()" /></td>
<td class="col-md-1"><input type="text" id="trainCost" data-val="true" data-val-required="Please enter a cost" data-bind="value: TrainCost" class="form-control trainingCost" onkeyup="calculateTrainingCost(), calculateOverallTotal()" /></td>
<td class="col-md-1" style="text-align: center"><input type="checkbox" data-bind="checked: QualificationGained" class="" onchange="addClass(this)"/></td>
<td class="col-md-1" style="width: 4%; text-align: center"><a href="#" data-bind="click: $root.removeTrainingRow" class="glyphicon glyphicon-trash text-danger" /></td>
</tr>
</tbody>
</table>
I am creating a dynamic form in a Backbone.js view. I want to get all the JSON data from the form in my view without using jQuery. Is there any way to get the data?
For example: When You check the checkbox, I only want the data for the checked field.
<table class="table">
<thead>
<tr>
<th></th>
<th>{{labels.selectImage}}</th>
<th>{{labels.nameVisibleToShop}}</th>
<th>{{labels.sourceCode}}</th>
<th>{{labels.pricePerItem}}</th>
</tr>
</thead>
<tbody>
<tr id ="school-imageId-{{categoryImage.cmsId}}">
<td><input type="checkbox" class="form-control mz-embrodiary-enable"/></td>
<td><img width="40px" src="{{categoryImage.imageUrl}}" /></td>
<td>
<input type="text" name="name" class="form-control" placeholder="{{labels.nameVisibleToShop}}" disabled/>
<span class="mz-validationmessage hidden" data-mz-validationmessage-for="name">{{labels.genericRequired}}</span>
</td>
<td>
<input type="text" name="sourceCode" class="form-control" placeholder="{{labels.sourceCode}}" disabled/>
<span class="mz-validationmessage hidden" data-mz-validationmessage-for="name">{{labels.genericRequired}}</span>
</td>
<td>
<input type="text" name="price" class="form-control" placeholder="{{labels.enterPrice}}" disabled/>
<span class="mz-validationmessage hidden" data-mz-validationmessage-for="price">{{labels.genericRequired}}</span>
</td>
</tr>
<tr id ="school-imageId-{{categoryImage.cmsId}}">
<td><input type="checkbox" class="form-control mz-embrodiary-enable"/></td>
<td><img width="40px" src="{{categoryImage.imageUrl}}" /></td>
<td>
<input type="text" name="name" class="form-control" placeholder="{{labels.nameVisibleToShop}}" disabled/>
<span class="mz-validationmessage hidden" data-mz-validationmessage-for="name">{{labels.genericRequired}}</span>
</td>
<td>
<input type="text" name="sourceCode" class="form-control" placeholder="{{labels.sourceCode}}" disabled/>
<span class="mz-validationmessage hidden" data-mz-validationmessage-for="name">{{labels.genericRequired}}</span>
</td>
<td>
<input type="text" name="price" class="form-control" placeholder="{{labels.enterPrice}}" disabled/>
<span class="mz-validationmessage hidden" data-mz-validationmessage-for="price">{{labels.genericRequired}}</span>
</td>
</tr>
<tr id ="school-imageId-{{categoryImage.cmsId}}">
<td><input type="checkbox" class="form-control mz-embrodiary-enable"/></td>
<td><img width="40px" src="{{categoryImage.imageUrl}}" /></td>
<td>
<input type="text" name="name" class="form-control" placeholder="{{labels.nameVisibleToShop}}" disabled/>
<span class="mz-validationmessage hidden" data-mz-validationmessage-for="name">{{labels.genericRequired}}</span>
</td>
<td>
<input type="text" name="sourceCode" class="form-control" placeholder="{{labels.sourceCode}}" disabled/>
<span class="mz-validationmessage hidden" data-mz-validationmessage-for="name">{{labels.genericRequired}}</span>
</td>
<td>
<input type="text" name="price" class="form-control" placeholder="{{labels.enterPrice}}" disabled/>
<span class="mz-validationmessage hidden" data-mz-validationmessage-for="price">{{labels.genericRequired}}</span>
</td>
</tr>
</tbody>
</table>
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);
});
});
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
}