Force Focusing on Sibling Input - javascript

I'm currently working with a contact form plugin through Wordpress and so the outputted HTML and JS looks like the following:
$('.form .form--field label').click(function() {
$(this).parents('.form--field').addClass('form--field--focus');
$('input').filter(':first').focus();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form--field form--field__firstname">
<label for="firstname" class="form--field__label">First Name</label>
<span>
<input type="text" name="firstname">
</span>
</div>
The design has caused me to get a bit hacky with it but in any event, I'm trying to figure out how to force focus on the respective input whenever the user clicks on a label. At the moment, this is where I'm at with it. If anyone has any input or suggestions, that would be greatly appreciated.

the for attribute on a <label> looks for an id not a name. Example below should work without JavaScript
<div class="form--field form--field__firstname">
<label for="firstname" class="form--field__label">First Name</label>
<span>
<input type="text" id="firstname" name="firstname">
</span>
</div>
Although if you really want to do this with JavaScript/JQuery and not be tied down to using a label you can do it this way using $(this).next().children().focus();
$('.form--field__label').click(function() {
$(this).next().children().focus();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form--field form--field__firstname">
<label class="form--field__label">First Name</label>
<span>
<input type="text">
</span>
</div>
<div class="form--field form--field__secondname">
<!-- using a span instead of label as an example !-->
<span class="form--field__label">Second Name</span>
<span>
<input type="text">
</span>
</div>

set input id="firstname" because you want focus on label click. This is builtin feature in html.
<input type="text" id="firstname" name="firstname">
More details here https://www.w3schools.com/tags/tag_label.asp
for multiple input you can use it like this
<form action="/action_page.php">
<label for="male">Male</label>
<input type="radio" name="gender" id="male" value="male"><br>
<label for="female">Female</label>
<input type="radio" name="gender" id="female" value="female"><br>
<label for="other">Other</label>
<input type="radio" name="gender" id="other" value="other"><br><br>
<input type="submit" value="Submit">
</form>
If you still persist you can use it like this
$('.form--field label').click(function() {
//It will look next sibling which is span and then find input in it and then focus it
//so it doesn't focus on other children elements
$(this).next('span').find('input').focus();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form--field form--field__firstname">
<label class="form--field__label">First Name</label>
<span>
<input type="text" name="firstname">
</span>
<br>
<label class="form--field__label">Last Name</label>
<span>
<input type="text" name="lastname">
</span>
</div>

Related

How to dynamically set checked state in radio button in Angular js

I am working with MEAN Stack and I have a form which is included radio
Button which is submitted successfully Now what I want is to edit the record. I want is that the record radio button should be checked according to database value.
How to do that.
my edit form is:-
<form id = "expensesCreate" class="form-horizontal" name="myForm">
<div class="form-group">
<label for="Phone_no" class="col-sm-3">Address</label>
<div class="col-sm-4 #if($errors->has('Phone_no')) has-error #endif">
<input class="form-control input-sm" placeholder="" autocomplete="off" id="address" name="address" ng-model="address" type="address" value ="{{registeruser.address}}" required>
<p class="error" ng-show=" myForm.password.$touched && myForm.password.$error.required" >Address is required.</p>
</div>
</div>
<div class="form-group">
<label for="Phone_no" class="col-sm-3">Sex</label>
<div class="col-sm-4 #if($errors->has('Phone_no')) has-error #endif">
Male <input type="radio" ng-model="sex" value="Male" >
FeMale<input type="radio" ng-model="sex" value="Female">
</div>
</div>
</form>
if sex is male of a particular record into database how to checked or selected male radio button.
You can evaluate the sex property to truthy in your view like so:
<td><input type='radio' ng-checked="p.sex=='male'"></td>
<td><input type="radio" ng-checked="p.sex=='female'" ></td>
Hope it helps.
Use ng-value property to set the radio button as checked.
ng-value="true"
<!DOCTYPE html>
<html ng-app="app">
<head>
<script data-require="angularjs#1.5.8" data-semver="1.5.8" src="https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="myCtr">
<form id="expensesCreate" class="form-horizontal" name="myForm">
<div class="form-group">
<label for="Phone_no" class="col-sm-3">Address</label>
<div class="col-sm-4 #if($errors->has('Phone_no')) has-error #endif">
<input class="form-control input-sm" placeholder="" autocomplete="off" id="address" name="address" ng-model="address" type="address" value="{{registeruser.address}}" required>
<p class="error" ng-show=" myForm.password.$touched && myForm.password.$error.required">Address is required.</p>
</div>
</div>
<div class="form-group">
<label for="Phone_no" class="col-sm-3">Sex</label>
<div class="col-sm-4 #if($errors->has('Phone_no')) has-error #endif">
Male
<input type="radio" name="gender" ng-model="sex" value="male"> FeMale
<input type="radio" name="gender" ng-model="sex" value="female">
</div>
</div>
</form>
<script>
angular.module('app', [])
.controller('myCtr', function($scope) {
$scope.sex = 'female'; // Instead of this use database value here
})
</script>
</body>
</html>

how can i select only last span element in a div ? it should not select if only one span in the div

I have HTML like this
$('.elementContainers').find('.labelText:last:not(".labelText:first")').css('margin-left','150px');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div class="elementContainers">
<span class="labelText mandatory" >First Name</span>
<span class="spacing"></span>
<input type="text" class="customInput" id="firstName" name="firstName" value="" pattern="[A-Za-z]{2,}" required/>
<span class="labelText" >Last Name</span>
<span class="spacing"></span>
<input type="text" class="customInput" id="lastName" value="" name="lastName" pattern="[A-Za-z]{1,}" required/>
</div>
<div class="elementContainers">
<span class="labelText mandatory" >Gender</span>
<span class="spacing"></span>
<input type="radio" name="gender" >Male
<input type="radio" name="gender" >Female
</div>
I want to select last labelText in every elementContainer
$('.elementContainers').find('.labelText:last')
This gives me exactly what i need,but i need to check that first and last should not be the same(elementContainer should contain two elements )
How can i check that with :not selector or any other selector.
I have tried something like this
$('.elementContainers').find('.labelText:last:not(".labelText:first")')
But its not working,its returning no elements.
Thanks :)
If you want to select the last span in a div, but only where there is more than one span in the div, then the following selector should work.
$('div').find('span:gt(0):last').addClass('selected');
It's finding any span's at an index > 0 (https://api.jquery.com/gt-selector/), and then getting the last of those.
http://jsfiddle.net/daveSalomon/vnorunwm/
Your code could look something like this....
$('.elementContainers').find('.labelText:gt(0):last').css('margin-left','150px');
http://jsfiddle.net/daveSalomon/qoebk8j9/
If there is as option to change html I will make a try using label instead of span and without using jquery at all only with css:
.elementContainers label:last-of-type:not(:first-child) {
margin-left: 150px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div class="elementContainers">
<label class="labelText mandatory">First Name</label>
<span class="spacing"></span>
<input type="text" class="customInput" id="firstName" name="firstName" value="" pattern="[A-Za-z]{2,}" required/>
<label class="labelText">Last Name</label>
<span class="spacing"></span>
<input type="text" class="customInput" id="lastName" value="" name="lastName" pattern="[A-Za-z]{1,}" required/>
</div>
<div class="elementContainers">
<label class="labelText mandatory">Gender</label>
<span class="spacing"></span>
<input type="radio" name="gender">Male
<input type="radio" name="gender">Female
</div>
References
:last-of-type
Check that the length of your collection is greater than 1 before proceeding...
if ($('.elementContainers').find('.labelText').length > 1) {
$('.elementContainers').find('.labelText:last').css('margin-left','150px');
}
Try this
$('.elementContainers .labelText:last').not($('.elementContainers .labelText:first'))
Try this
$('.elementContainers').each(function(){
if($(this).find('.labelText').length > 1 ){
$(this).find('.labelText:last').css('margin-left','150px');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div class="elementContainers">
<span class="labelText mandatory" >First Name</span>
<span class="spacing"></span>
<input type="text" class="customInput" id="firstName" name="firstName" value="" pattern="[A-Za-z]{2,}" required/>
<span class="labelText" >Last Name</span>
<span class="spacing"></span>
<input type="text" class="customInput" id="lastName" value="" name="lastName" pattern="[A-Za-z]{1,}" required/>
</div>
<div class="elementContainers">
<span class="labelText mandatory" >Gender</span>
<span class="spacing"></span>
<input type="radio" name="gender" >Male
<input type="radio" name="gender" >Female
</div>
You can use .filter() method and you can return that element which have .labelText length of 2:
$('.elementContainers').filter(function(){
return $(this).find('.labelText').length == 2
}).find('.labelText').last().css('margin-left','150px');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="elementContainers">
<span class="labelText mandatory" >First Name</span>
<span class="spacing"></span>
<input type="text" class="customInput" id="firstName" name="firstName" value="" pattern="[A-Za-z]{2,}" required/>
<span class="labelText" >Last Name</span>
<span class="spacing"></span>
<input type="text" class="customInput" id="lastName" value="" name="lastName" pattern="[A-Za-z]{1,}" required/>
</div>
<div class="elementContainers">
<span class="labelText mandatory" >Gender</span>
<span class="spacing"></span>
<input type="radio" name="gender" >Male
<input type="radio" name="gender" >Female
</div>
you have to first check the length of span element inside div if length is greater then 1 then get the last span inside div ,
you can get the length using
var span_lenght = $( ".elementContainers span" ).length;
if(span_lenght>1)
{
// write your code here
}

how do i hide elements without using the visibility function [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I am trying to write a code that gives the user more options whenever a button is clicked.
for example say i have a page with two buttons, one "search for books" and another "search for events". If a user clicks on "search for books" button, on the same page right beneath the search button i want different options to appear. I tried using the css visibility:hidden function and switching it back to visibility:visible using a javascript function. It did work but a huge space from the screen was reserved for the hidden elements. The main window buttons were far apart from each other. on one side there was the "search for books" button and far from it there was the "search for events" button.
Here is part of the code
</head>
<div class ="buttons">
<div id="visible">
<input type="button" value="Click To Search Faculty Members" onclick="swapform()" class="button">
</div>
</div>
<div class = "form" id="theform" style="visibility: hidden">
<form name = "type" value="fm" action="http://localhost:8080/278Project/search.php" method="post" onsubmit="return goto();">
<table>
<span style="box-shadow: 0 0 0 1px white inset;">
<select name="type" >
<option value="fm"> Faculty Members Search </option>
</select>
<tr><td><label class ="textClick">List all Faculty Members<input type="radio" name="select" value=1 ></label>
<div>
<label class="textClick"> List By Id<input type="radio" name="select" value=2 > </label>
<input class="text" type="text" size = "8" placeholder="Insert Id" name="listById" > </div>
<div>
<label class="textClick">List By First Name <input type="radio" name="select" value=3 ></label>
<input class="text" type="text" placeholder="Insert Name" name="list" >
</div>
<div>
<label class="textClick">List By Last Name<input type="radio" name="select" value=4 ></label>
<input class="text" type="text" placeholder="Insert Last Name" name="lname" >
</div>
</div>
<!-- <input type="button" value="Hide" onclick="swapform2()" class="button"> !-->
<input type="submit" value="Get Info">
</table>
</div>
</span>
</form>
<!-- Book Search !-->
<div class="buttons">
<div id="bvisible">
<input class ="button" type="button" value="Click To Search Books" onclick="swapbooks()" class="button">
</div>
</div>
<div id="thebookform" style="visibility: hidden">
<form name = "type" value="ch" action="http://localhost:8080/278Project/search.php" method="post" onsubmit="return goto();">
<table>
<select name="type">
<option value="ch"> Search for Books</option>
</select>
<tr><td><label class ="textClick">List all available Books<input type="radio" name="select" value=1 ></label>
<div>
<label class="textClick"> List By Id<input type="radio" name="select" value=2 > </label>
<input class="text" type="text" size = "8" placeholder="Insert Id" name="listById" > </div>
<div>
<label class="textClick">List By Publishers name <input type="radio" name="select" value=3 ></label>
<input class="text" type="text" placeholder="Insert Name" name="list" >
</div>
<div>
<label class="textClick">List Books by year<input type="radio" name="select" value=4 ></label>
<input class="text" type="text" placeholder="Insert Last Name" name="lname" >
</div>
</div>
<input type="submit" value="Get Info">
</table>
Use this instead
display : none
This does the same thing, except the empty space the element takes up.
And looking at the tags, you have jQuery there. You can use .hide() and .show() instead.

How to focus on the text in top of page

I have a simple form which has has to be accessible. If someone misses a mandatory field, the a error should show on the top of the page where I placed a div tag. Now, after I click the submit button, it should show an error message on the top of page and then have a focus so that the screen reader can read it without refreshing the page. I am just not being able to focus on that error. Any suggestion would be really appreciated.
Thanks
My code looks like this
<!DOCTYPE html>
<html>
<head>
<title>TEST</title>
<script>
function myFunction() {
document.getElementById("errors").innerHTML = "ERROR ON THE FORM";
}
function getfocus() {
document.getElementById("errors").focus();
}
function printnfocus() {
if (myFunction()) {
getfocus();
}
}
</script>
</head>
<body>
<div id="errors"></div>
<fieldset>
<legend>Eligibility</legend> <input type="checkbox" id="citizen"> <label for="citizen">I am a U.S. citizen</label><br>
<input type="checkbox" id="18"> <label for="18">I am a 18 years old</label>
</fieldset>
<p>
<br>
</p>
<form id="sex" name="sex">
<fieldset>
<legend>Sex:</legend> <label for="male">Male</label> <input type="radio" name="sex" id="male" value="male"><br>
<label for="female">Female</label> <input type="radio" name="sex" id="female" value="female"><br>
<br>
</fieldset>
</form>
<fieldset>
<legend>Personal Information</legend>
<form>
<label for="lname">Last Name</label> <span title="lblAstrisk" class="asterisk" style="color:red">*</span> <input type="text" name="lname" id="lname" required=""><br>
<br>
</form>
</fieldset>
<p>
<button type="button" onclick="printnfocus()">Submit</button>
</p>
</body>
</html>
You are looking for window.scrollTo(). You can get the location of the errors div with this:
document.getElementById('errors').offsetTop

onSubmit not working in any browser

I have a simple form. I want to calculate the value of hidden field of form using my simple formula (divide rate from drop down by 100 and then multiply it with the estimated pay from text field.
However for some strange reason onSubmit is not working on the form. I want to calculate the above value when form is submitted but it is not being called on any browser. It is really strange problem.
Here is the code:
<script type="text/javascript">
function calc1()
{
var a= document.getElementById('inf_custom_FLRaterClassCode0').value;
var b = document.getElementById('inf_custom_FLRaterEstimatedPayroll').value;
document.getElementById('inf_custom_EstimatedQuote').value=parseFloat(a)/100 * parseFloat(b) ;
}
</script>
<form accept-charset="UTF-8" action="https://kg933.infusionsoft.com/app/form/process/968a6b704587136af8684f30cc8c5cf4" class="infusion-form" method="GET" onSubmit="calc1();">
<input name="inf_form_xid" type="hidden" value="968a6b704587136af8684f30cc8c5cf4" />
<input name="inf_form_name" type="hidden" value="Full Quote - Florida Rate" />
<input name="infusionsoft_version" type="hidden" value="1.28.7.21" />
<div class="infusion-field">
<label for="inf_field_FirstName">First Name *</label>
<input class="infusion-field-input-container" id="inf_field_FirstName" name="inf_field_FirstName" type="text" />
</div>
<div class="infusion-field">
<label for="inf_field_LastName">Last Name *</label>
<input class="infusion-field-input-container" id="inf_field_LastName" name="inf_field_LastName" type="text" />
</div>
<div class="infusion-field">
<label for="inf_field_Company">Company *</label>
<input class="infusion-field-input-container" id="inf_field_Company" name="inf_field_Company" type="text" />
</div>
<div class="infusion-field">
<label for="inf_field_Email">Email *</label>
<input class="infusion-field-input-container" id="inf_field_Email" name="inf_field_Email" type="text" />
</div>
<div class="infusion-field">
<label for="inf_field_Phone1">Phone 1 *</label>
<input class="infusion-field-input-container" id="inf_field_Phone1" name="inf_field_Phone1" type="text" />
</div>
<div class="infusion-field">
<label for="inf_custom_FLRaterClassCode0">FL Rater - Class Code #2 *</label>
<select id="inf_custom_FLRaterClassCode0" name="inf_custom_FLRaterClassCode0"><option value="">Please select one</option><option value="9519">9519</option><option value="5473">5473</option><option value="5472">5472</option><option value="9516">9516</option><option value="8393">8393</option><option value="8380">8380</option><option value="5188">5188</option></select>
</div>
<div class="infusion-field">
<label for="inf_custom_FLRaterEstimatedPayroll">FL Rater - Estimated Payroll *</label>
<input class="infusion-field-input-container" id="inf_custom_FLRaterEstimatedPayroll" name="inf_custom_FLRaterEstimatedPayroll" type="text" />
</div>
<input name="inf_custom_EstimatedQuote" type="hidden" value="" />
<div class="infusion-submit">
<input type="submit" value="Submit" />
</div>
</form>
The problem is that you're trying to access an element by id but should do it by name.
Replace
document.getElementById('inf_custom_EstimatedQuote').value=parseFloat(a)/100 * parseFloat(b) ;
with
document.getElementsByName('inf_custom_EstimatedQuote')[0].value=parseFloat(a)/100 * parseFloat(b) ;
or give an id to the input you want to change before sending the form.
Its "onsubmit" not "onSubmit"
event_form_onsubmit
calc1() runs right before submitting the form. However, when you submit your form, you reload your page (to "https://kg933.infusionsoft.com/app/form/process/968a6b704587136af8684f30cc8c5cf4") and thus you never get to see the calculated results because a new webpage is opened.

Categories

Resources