How can I cause the return key on the iPad's keyboard to behave as the tab key when in an HTML form?
My current solution is this:
$('input[type=text]').keydown(function(e)
{
if (e.keyCode == 13)
{
e.preventDefault();
$(this).nextAll('input[type=text]:first').focus();
}
});
I found this solution in the link below, which works in the JSFiddle included in the comments of the answer.
jQuery how to make Enter (Return) act as Tab key through input text fields but in the end trigger the submit button
This solution is not working in my case though (on iPad or PC). Based on the comments, I think it might be my HTML structure that is causing trouble though I am not sure how I could alter it to achieve the same layout.
How else can I cause the return key to jump to the next input field?
My form's HTML block is below (skip to avoid long HTML read):
<div class="row">
<div class="span6">
<div class="control-group" id="GuestName_group">
<label class="control-label" for="textbox_Name"><i class="icon-user"></i> Guest Name</label>
<div class="controls controls-row">
<input type="text" class="span6" id="textbox_Name" data-provide="typeahead" placeholder="Lastname, Firstname">
</div>
</div>
<div class="control-group">
<label class="control-label" for="textbox_Group"><i class="icon-home"></i> Organization</label>
<div class="controls controls-row">
<input type="text" class="span6" id="textbox_Group" placeholder="Organization">
</div>
</div>
</div>
<div class="span6">
<div class="control-group">
<label class="control-label" for="select_Host"><i class="icon-star"></i> AOELab Host Name</label>
<div class="controls controls-row">
<select class="span6" id="select_Host">
{% for person in host_names %}
<option value="{{ person.bems }}">{{ person.name }}</option>
{% endfor %}
</select>
</div>
</div>
<div class="control-group">
<label class="control-label" for="textarea_Purpose"><i class="icon-question-sign"></i> Purpose</label>
<div class="controls controls-row">
<label class="radio inline">
<input type="radio" name="optionsPurpose" id="radio_Purpose1" value="meeting" checked>
Meeting
</label>
<label class="radio inline">
<input type="radio" name="optionsPurpose" id="radio_Purpose2" value="tour">
Tour
</label>
<label class="radio inline">
<input type="radio" name="optionsPurpose" id="radio_Purpose3" value="other">
Other...
</label>
</div>
<div class="controls controls-row">
<textarea class="span6" id="textarea_Purpose" placeholder="Why are you here?"></textarea>
</div>
</div>
</div>
</div>
$('input[type=text]').on('keydown', function (e) {
if (e.which == 13) {
var tabables = $("*[tabindex != '-1']:visible"),
index = tabables.index(this);
tabables.eq(index + 1).focus();
e.preventDefault();
}
});
FIDDLE
Related
I have the following HTML code:
<form class="row g-3 needs-validation" novalidate>
<div class="col-md-4">
<label for="validationCustom01" class="form-label">First name</label>
<input type="text" class="form-control" id="validationCustom01" value="Mark" required>
<div class="valid-feedback">
Looks good!
</div>
</div>
<div class="col-md-4">
<label for="validationCustom02" class="form-label">Last name</label>
<input type="text" class="form-control" id="validationCustom02" value="Otto" required>
<div class="valid-feedback">
Looks good!
</div>
</div>
<div class="col-md-4">
<label for="validationCustomUsername" class="form-label">Username</label>
<div class="input-group has-validation">
<span class="input-group-text" id="inputGroupPrepend">#</span>
<input type="text" class="form-control" id="validationCustomUsername" aria-describedby="inputGroupPrepend" required>
<div class="invalid-feedback">
Please choose a username.
</div>
</div>
</div>
<div class="col-md-6">
<label for="validationCustom03" class="form-label">City</label>
<input type="text" class="form-control" id="validationCustom03" required>
<div class="invalid-feedback">
Please provide a valid city.
</div>
</div>
<div class="col-md-3">
<label for="validationCustom04" class="form-label">State</label>
<select class="form-select" id="validationCustom04" required>
<option selected disabled value="">Choose...</option>
<option>...</option>
</select>
<div class="invalid-feedback">
Please select a valid state.
</div>
</div>
<div class="col-md-3">
<label for="validationCustom05" class="form-label">Zip</label>
<input type="text" class="form-control" id="validationCustom05" required>
<div class="invalid-feedback">
Please provide a valid zip.
</div>
</div>
<div class="col-12">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
<label class="form-check-label" for="invalidCheck">
Agree to terms and conditions
</label>
<div class="invalid-feedback">
You must agree before submitting.
</div>
</div>
</div>
<div class="col-12">
<button class="btn btn-primary" type="submit">Submit form</button>
</div>
</form>
With the following JavaScript code, to validate the user input. If there are any invalid fields, it should the user stop submitting his request:
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function () {
'use strict'
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.querySelectorAll('.needs-validation')
// Loop over them and prevent submission
Array.prototype.slice.call(forms)
.forEach(function (form) {
form.addEventListener('submit', function (event) {
if (!form.checkValidity()) {
event.preventDefault()
event.stopPropagation()
}
form.classList.add('was-validated')
// putting alert here does not work..?
// something like alert('successfully validated your request!')
}, false)
})
})()
The problem is: I want to alert the user, if the submission was successfully, with the alert() function. But I can't figure out where to put the alert function. I marked the code where I tried putting the alert function into, but it's always triggering even when it's not even validated. Does somebody know what am I doing wrong here? Thank you very much.
I have problem with getting data from a div tag. This is my div
<div id="log">
<div class="form-group" style="border-bottom:1px solid black;">
<div class="form-group">
<label class="col-sm-2 control-label"> Log Name <sup style="color:red">(*)</sup></label>
<div class="col-sm-2">
<input type="text" class="form-control text banner_value" id="banner_value" />
<div class="help-block with-errors"></div>
</div>
<label class="col-sm-2 control-label"> Start Day <sup style="color:red">(*)</sup></label>
<div class="col-sm-2">
<input type="date" class="form-control text" id="start_day" />
<div class="help-block with-errors"></div>
</div>
<label class="col-sm-2 control-label"> End Day <sup style="color:red">(*)</sup></label>
<div class="col-sm-2">
<input type="date" class="form-control text" id="end_day" />
<div class="help-block with-errors"></div>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label"> Filter Condition <sup style="color:red">(*)</sup></label>
</div>
<div id="banner_input" class="form-group">
<label class="col-sm-2 control-label"> Banner </label>
<div class="col-sm-3">
<input type="text" class="form-control text" id="banner_value" />
<div class="help-block with-errors"></div>
</div>
<div class="col-sm-3">
<input type="checkbox" class="control-label" id="banner_split"> <lable> split </lable><br>
</div>
</div>
<div id="domain_input" class="form-group">
<label class="col-sm-2 control-label"> Domain </label>
<div class="col-sm-3">
<input type="text" class="form-control text" id="domain_value" />
<div class="help-block with-errors"></div>
</div>
<div class="col-sm-3">
<input type="checkbox" class="control-label" id="domain_split"> <lable> split </lable><br>
</div>
</div>
</div>
</div>
and here it's on browser :
after i click Add :
I'm using document.getElementById("log").textContent to get data that i filled to this div, but it didn't work. How can I get my data ??? Please help. Thanks for reading my question.
function getValues() {
var inputs = document.getElementById("log").getElementsByTagName("input");
var values = [];
for (i in inputs) {
values.push(inputs[i].value);
}
console.log(values);
}
<div id="log">
<div class="form-group" style="border-bottom: 1px solid black;">
<div class="form-group">
<label class="col-sm-2 control-label">
Log Name <sup style="color: red;">(*)</sup></label
>
<div class="col-sm-2">
<input
type="text"
class="form-control text banner_value"
id="banner_value"
/>
<div class="help-block with-errors"></div>
</div>
<label class="col-sm-2 control-label">
Start Day <sup style="color: red;">(*)</sup></label
>
<div class="col-sm-2">
<input type="date" class="form-control text" id="start_day" />
<div class="help-block with-errors"></div>
</div>
<label class="col-sm-2 control-label">
End Day <sup style="color: red;">(*)</sup></label
>
<div class="col-sm-2">
<input type="date" class="form-control text" id="end_day" />
<div class="help-block with-errors"></div>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">
Filter Condition <sup style="color: red;">(*)</sup></label
>
</div>
<div id="banner_input" class="form-group">
<label class="col-sm-2 control-label"> Banner </label>
<div class="col-sm-3">
<input type="text" class="form-control text" id="banner_value" />
<div class="help-block with-errors"></div>
</div>
<div class="col-sm-3">
<input type="checkbox" class="control-label" id="banner_split" />
<lable> split </lable><br />
</div>
</div>
<div id="domain_input" class="form-group">
<label class="col-sm-2 control-label"> Domain </label>
<div class="col-sm-3">
<input type="text" class="form-control text" id="domain_value" />
<div class="help-block with-errors"></div>
</div>
<div class="col-sm-3">
<input type="checkbox" class="control-label" id="domain_split" />
<lable> split </lable><br />
</div>
</div>
</div>
</div>
<button onclick="getValues()">click me</button>
var inputs = document.getElementById("log").getElementsByTagName("input");
var values = [];
for (i in inputs) {
values.push(inputs[i].value);
}
console.log(values);
you can use this JS code after click a button
if you want to get data from input tag
function myFunction() {
console.log(document.getElementById("myText").value)
}
<!DOCTYPE html>
<html>
<body>
Name: <input type="text" id="myText" value="">
<button onclick="myFunction()">Try it</button>
</body>
</html>
I think what you want to get is the whole information. In that case you need to use the
form
tag instead of div. Div doesn't have a meaning related to data. It is just a container displayed as block.
If You want to get the value of input fields, try to put this in your html:
<script>
const logYourLog = (e) => {
console.log('Here is your value', document.getElementById("banner_value").value);
}
</script>
If you want to get data from the form, and you are using jquery. There is function called serialize() already in there. But, if you are in plain javascript, I guess you should use library for easy purpose. You can also make your own function.
serialize library but I have not tested it. Just check if you get what you need.
You must be able to do sthg like this after you add that library:
var allData = serialize(document.getElementById("log"));
Note:- if allData is not stored, try changing div to form, that should do work.
I want to seriliaze json like this in my form fields:
{FinalResult: [{"id":1,"organizationNameGE":"პსდა2","organizatio…":"02-16-2018","$$hashKey":"0Q0","priority":"1"}]"}
and for this reason i use this code:
<script cam-script type="text/form-script">
camForm.on('form-loaded', function() {
// tell the form SDK to fetch the variable named 'document'
camForm.variableManager.fetchVariable('selectedDocuments');
});
camForm.on('variables-fetched', function() {
// work with the variable (bind it to the current AngularJS $scope)
$scope.selectedDocuments =ConvertToJsonArray(camForm.variableManager.variableValue('selectedDocuments'));
});
function ConvertToJsonArray(arr){
var jsonArray=arr.FinalResult;
return jsonArray;
}
</script>
<div class="container" ng-repeat="item in selectedDocuments track by $index">
<div class="control-group" >
<label for="id" class="control-label">საიდენტიფიკაციო კოდი</label>
<div class="controls">
<input id="id" class="form-control" type="number" ng-model="item.id" required readonly/>
</div>
</div>
<div class="control-group" >
<label for="cardNumber" class="control-label">ბარათის ნომერი</label>
<div class="controls">
<input id="cardNumber" class="form-control" type="text" ng-model="item.cardNumber" required />
</div>
</div>
<div class="control-group" >
<label for="organizationNameGE" class="control-label">კომპანიის სახელი ქართულად</label>
<div class="controls">
<input id="organizationNameGE" class="form-control" type="text" ng-model="item.organizationNameGE" required />
</div>
</div>
<div class="control-group" >
<label for="organizationNameEN" class="control-label">კომპანიის სახელი ლათინურად</label>
<div class="controls">
<input id="organizationNameEN" class="form-control" type="text" ng-model="item.organizationNameEN" required />
</div>
</div>
<div class="control-group" >
<label for="Approved" class="control-label">Approved</label>
<input type="checkbox"
class="form-control"
cam-variable-name="Approved"
cam-variable-type="Boolean"/>
</div>
<div class="form-group">
<label for="refusalComment" class="control-label">კომენტარი უარზე</label>
<input type="text"
class="form-control"
cam-variable-type="String"
cam-variable-name="refusalComment"
name="კკომენტარი უარზედ"/>
</div>
</div>
But this doesn't doesn't seem to be enough, what should i change to display this json data into my form? should i use ng-for instead of ng-repeat?
(p.s there is no any internal errors in console)
It looks you are taking data in the array FinalResult.
Iam not sure why you used selectedDocuments .
<div class="container" ng-repeat="item in selectedDocuments track by $index">
Use this isntead of selectedDocuments
<div class="container" ng-repeat="item in FinalResult track by $index">
Please let me know if it helps.
I'm using the Bootstrap Toggle plugin to change my checkboxes into toggle switches. I'm also using AngularJS. When I set the checked value, it toggles fine. But when I don't, it does not toggle. You can see in the link to my results, that checkboxes are checked, but they are not toggling. Does anyone know why it's not binding using Angular?
HTML:
<div class="form-group">
<label class="col-sm-7 control-label">
<span>Working Toggle </span>
</label>
<div class="col-sm-5">
<input id="toggle-one" checked type="checkbox">
</div>
</div>
<div class="form-group">
<label class="col-sm-7 control-label">
<span>Color Review Check</span>
</label>
<div class="col-sm-5">
<input type="checkbox" class="pull-right" ng-model="colorReview" >
</div>
</div>
<div class="form-group">
<label class="col-sm-7 control-label">
<span>Type Review Check</span>
</label>
<div class="col-sm-5">
<input type="checkbox" class="pull-right" ng-model="typeReview">
</div>
</div>
<div class="form-group">
<label for=color-review" class="col-sm-7 control-label">
<span>Color Review </span>
</label>
<div class="col-sm-5">
<input type="checkbox" id="color-review" class="pull-right" ng-model="colorReview" >
</div>
</div>
<div class="form-group">
<label for="type-review" class="col-sm-7 control-label">
<span>Type Review </span>
</label>
<div class="col-sm-5">
<input type="checkbox" id="type-review" class="pull-right" ng-model="typeReview">
</div>
Javascript:
// Set The Review Checkboxes To Toggle Switches
$('#color-review').bootstrapToggle();
$('#type-review').bootstrapToggle();
$('#toggle-one').bootstrapToggle();
Results: Here is a link to a picture of my results:
Results
Have you taken a look at https://github.com/cgarvis/angular-toggle-switch?
$scope.topics:[{"on":true,"offLabel":"Off","onLabel":"On"}];
<div ng-repeat="t in topics">
<toggle-switch model="t.switch.on" on-label="t.switch.onLabel" off-label="t.switch.offLabel" switched="doSomethingToggle(t, $index)"></toggle-switch>
</div>
I am trying to hide and/or show form elements when a user selects certain values.
For example, if the user selects "yes" to the consent question, I need it to show a few questions, However, if they change their response to the consent question, I need it to hide those questions.
Here is what I have come up with so far...
$(document).ready(function () {
var input = document.getElementById('consent');
var consent_responses = [{ "0": hideConsent },{ "1": showConsent }];
input.addEventListner('click', function () {
var consent_response;
if (consent_responses[this.value]) {
content_response = consent_responses[this.Function()]
}
else {
content_response = consent_responses[this.Function]
}
});
function showConsent(){
$("#date").show(),
$("#referrer").show(),
$("#f_name").show(),
$("#phone_num").show(),
$("#leave_msg").show(),
$("#email").show(),
};
function hideConsent(){
$("#date").hide(),
$("#referrer").hide(),
$("#f_name").hide(),
$("#phone_num").hide(),
$("#leave_msg").hide(),
$("#email").hide(),
}; });
Fiddle here: http://jsfiddle.net/7jX47/1/
You could do it like this: JSFiddle
Basically I only fixed a few typos (did you actually try your code before you posted here?) and added event listeners to the radio buttons with
document.getElementById(...).addEventListener(...)
I also gave your radio buttons unique IDs.
This can be simplified:
var input = document.getElementById('consent');
// Let's use the value as key, and the functions as values
var consent_responses = {
"0" : hideConsent,
"1" : showConsent
};
input.addEventListener("click", function () {
// Get the appropriate function given the value, and invoke it
consent_responses[this.value]();
});
function hideConsent() {
// ...
}
function showConsent() {
// ...
}
It's better to envelop your questions (that needs to be hidden) by a div with a class ".hidden" or style "display: none;". And simplify your code by simply asking that div to show() or hide() when needed.
Like so:
<form id="screening">
<div class="col-md-12 col-sm-12 col-xs-12 nopad" id="create">
<div class="form-group text-center">
<b>Do you agree to answer the screening questions?</b><br />
<div class="radio" id="consent">
<label>
<input type="radio" name="consent" id="consent" value="1">
Yes, I consent
</label>
</div><br />
<div class="radio">
<label>
<input type="radio" name="consent" id="consent" value="0">
No, I do not consent
</label>
</div>
</div>
<!-- simplify by using this -->
<div id="questions" style="display: none;">
<div class="form-group" id="date">
<label for="date">What is today's date?</label>
<input type="date" class="form-control" id="date" name="date" />
</div>
<div class="form-group" id="referrer">
<label for="referrer">How did you hear about us/our studies?</label>
<select class="form-control" name="referrer" id="referrer">
<option></option>
<option value="1">Flyers</option>
<option value="2">Print Media</option>
<option value="3">A friend</option>
<option value="4">Online (e.g., Craigslist)</option>
<option value="5">Other</option>
</select>
</div>
<div class="form-group" id="other_explain">
<label for="other_explain">Please specify other source.</label>
<textarea class="form-control" rows="3" id="other_explain" name="other_explain"></textarea>
</div>
<div class="form-group" id="f_name">
<label for="f_name">What is your first name?</label>
<input type="text" class="form-control" id="f_name" name="f_name" />
</div>
<div class="form-group" id="phone_num">
<label for="phone_num">What is a phone number at which you can be contacted? </label>
<input type="tel" class="form-control" id="phone_num" name="phone_num" />
</div>
<div class="form-group" id="leave_msg">
<label for="leave_msg">If we call and you are not available, may we leave a message?</label><br />
<div class="radio">
<label>
<input type="radio" name="leave_msg" id="leave_msg" value="1">
Yes
</label>
</div><br />
<div class="radio">
<label>
<input type="radio" name="leave_msg" id="leave_msg" value="0">
No
</label>
</div>
</div>
<div class="form-group" id="email">
<label for="email">What is an e-mail at which you can be contacted?</label>
<input type="email" class="form-control" id="email" name="email" />
</div>
</div>
</div>
</form>
and in your javascript instead of using this:
function showConsent(){
$("#date").show(),
$("#referrer").show(),
$("#f_name").show(),
$("#phone_num").show(),
$("#leave_msg").show(),
$("#email").show(),
};
you use:
function showConsent(){
$("#questions").show(),
};