I would like to create a webform which gives users the opportunity to create tickets more easily.
In this webform I have two input forms and a checkbox:
What I would like to have is the following (created via PowerPoint):
So if the users click the checkbox the webform should automatically disable the second input form and copy the value and/or the placeholder of the first input form. So briefly speaking: If the users click the checkbox the second input form should be exactly like the first one, except that it is disabled.
Unfortunately I have no clue how to do this. By now my code looks like this:
Input field 1 (key user) + checkbox:
<div class="form-group">
<label class="control-label col-sm-2" for="keyuser">Key-User:</label>
<div class="col-sm-10">
<input type="keyuser" class="form-control" id="keyuser" placeholder="Username Key-User">
<div class="checkbox">
<label onclick="checkbox()">
<input type="checkbox">
</label>Is the affected user
</div>
</div>
Input field 2 (affected user):
<div class="form-group">
<label class="control-label col-sm-2" for="affuser">Affected User:</label>
<div class="col-sm-10">
<input type="affuser" class="form-control" id="affuser" placeholder="Username affected user">
</div>
Checkbox() [it does not work at all right now]:
function checkbox() {
"use strict";
if (check === "False") {
check = "True";
$('#affuser').attr('placeholder', 'Username Key-User');
} else {
check = "False";
$('#affuser').attr('placeholder', 'Username affected user');
}
}
How can I implement the functions mentioned above?
There are some changes that I would want to implement to your script rightaway:
Do not use inline JS. Instead, create an onchange event handler for the checkbox (not the label element)
Use IDs for your checkbox so that your <label> will be functioanlly attached to it.
For the JS, it's quite simple: When an onchange event is registered on the checkbox element, evaluate if it is checked or not, by simply evaluating the .is(':checked') boolean:
If checked:
disable the #affuser element using .prop('disabled', true)
update the placeholder attribute using .attr('placeholder', ...)
If unchecked:
enable the aforementioned element using .prop('disabled', false)
update the placeholder attribute using, again, .attr('placeholder', ...)
$(function() {
$('#checkbox1').on('change', function() {
if($(this).is(':checked')) {
$('#affuser')
.prop('disabled', true)
.attr('placeholder', $('#keyuser').attr('placeholder'));
} else {
$('#affuser')
.prop('disabled', false)
.attr('placeholder', 'Username affected user');
}
});
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<label class="control-label col-sm-2" for="keyuser">Key-User:</label>
<div class="col-sm-10">
<input type="keyuser" class="form-control" id="keyuser" placeholder="Username Key-User">
<div class="checkbox">
<label for="checkbox1">
<input type="checkbox" id="checkbox1">
</label>Is the affected user
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="affuser">Affected User:</label>
<div class="col-sm-10">
<input type="affuser" class="form-control" id="affuser" placeholder="Username affected user">
</div>
</div>
Related
I have a modal and in this modal, I have a checkbox, The checkbox function can only be used on the first line table.
Code is like this, the checkbox function works but only on the first row of the table, henceforth the modal process doesn't work, I've tried adding
<?php echo $data['id_user']; ?>
to the ID but it still doesn't work.
<div class="form-group">
<label for="ubah_password">Ubah Password</label>
<div class="form-group">
<input type="checkbox" id="ubah_password" name="ubah_password" value="1">
<label class="prevent-select" for="ubah_password"> Ya, saya ingin mengubah password</label>
</div>
</div>
<div id="form_password" style="display: none;">
<div class="form-group">
<label for="editPassAdmin">Password Baru</label>
<input type="password" class="form-control form-control-sm" id="editPassAdmin" name="editPassAdmin" placeholder="Masukkan password baru">
</div>
<div class="form-group">
<label for="password_confirm">Konfirmasi Password</label>
<input type="password" class="form-control form-control-sm" id="password_confirm" name="password_confirm" placeholder="Masukkan kembali password baru">
</div>
</div>
<script>
var checkbox = document.getElementById("ubah_password");
var formPassword = document.getElementById("form_password");
checkbox.addEventListener("change", function() {
if (this.checked) {
formPassword.style.display = "block";
} else {
formPassword.style.display = "none";
}
});
</script>
The HTML ID attribute is designed to be unique, so even if you repeat it, you need to select them all, then individually in your JavaScript to load the modal.
Also, the name attributes should probably be unique enough for your form PHP code to tell which password you are changing.
For example, you could change the ID attributes to something like:
id="ubah_password[<?php echo $data['id_user']; ?>]"
I made a function, which should check whether my input field, with type checkbox has been checked or not... but whenever I check my input field the input fields I wish to make required do not get the required attributes.
I basically tried everything from this topic: jQuery add required to input fields
and read this topic in hopes of finding something: .prop() vs .attr()
but unfortunately none of the topics has helped me much further. So either I made a mistake somewhere in my code, or the required attribute is a bit buggy.
I call the function via my input field (onclick event).
I have already checked whether selectors were correct, and they are.
this is how my HTML looks like:
<div class="row" style="margin: auto;">
<div class="custom-control custom-checkbox col-md-4">
<input class="custom-control-input" onclick="is_required()" type="checkbox" id="fruittariër" value="fruittariër" name="vegetarisch[]">
<label class="custom-control-label" for="fruittariër"> fruittariër</label>
</div>
<div class="col-md-4 input-group leftVeganPadding">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">€</span>
</div>
<input type="number" step="0.01" class="form-control" placeholder="Kosten" name="vegCosts[]">
</div>
<div class="input-group col-md-4 leftVeganPadding">
<div class="input-group-prepend">
<span class="input-group-text" id="veganDatePicker"><i class="fas fa-calendar-alt"></i></span>
</div>
<input type="text" class="form-control" name="veganEindDatum[]" id="shutDateFruittariër" placeholder="Sluit Datum" aria-label="veganDatePicker" aria-describedby="veganDatePicker">
</div>
</div>
this is how I call my function:
<input class="custom-control-input" onclick="is_required()" type="checkbox" value="vegan" name="vegetarisch[]">
function is_required() {
//check whether the checkbox has been checked or not
//if yes, make the other input fields inside the row required
// variable odin = the row wrapped around the cols
$('input[name="vegetarisch[]"]').each(function(index, thisElement) {
if($(thisElement).is(':checked')) {
let odin = $(thisElement).closest('.row');
odin.find('input[name="vegCosts[]"]').attr('required', true);
odin.find('input[name="veganEindDatum[]"]').attr('required', true);
} else {
odin = $(thisElement).closest('.row');
odin.find('input[name="vegCosts[]"]').attr('required', false);
odin.find('input[name="veganEindDatum[]"]').attr('required', false);
}
});
}
So what I wish to achieve: When the checkbox is checked I want to have the 2 other input fields inside the row to gain the attribute 'required'.
No need for an each you can pretty much do this in one line with an event handler.
Below, the closest .row is found for the button that was clicked. Then one selector is used to find both inputs that will be required. Then the required prop is set based on the status of the check button.
$(document).ready(function() {
//Handle events on the checkbox
$('input[name="vegetarisch[]"]').on('click', function() {
//get the nearst row
$(this).closest('.row')
//Find the check boxes
.find('input[name="vegCosts[]"],input[name="veganEindDatum[]"]')
//set the required propery if the checkbox is checked
.prop('required', $(this).is(":checked"));
});
});
:required {
border-color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="row" style="margin: auto;">
<div class="custom-control custom-checkbox col-md-4">
<input class="custom-control-input" type="checkbox" id="fruittariër" value="fruittariër" name="vegetarisch[]">
<label class="custom-control-label" for="fruittariër"> fruittariër</label>
</div>
<div class="col-md-4 input-group leftVeganPadding">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">€</span>
</div>
<input type="number" step="0.01" class="form-control" placeholder="Kosten" name="vegCosts[]">
</div>
<div class="input-group col-md-4 leftVeganPadding">
<div class="input-group-prepend">
<span class="input-group-text" id="veganDatePicker"><i class="fas fa-calendar-alt"></i></span>
</div>
<input type="text" class="form-control" name="veganEindDatum[]" id="shutDateFruittariër" placeholder="Sluit Datum" aria-label="veganDatePicker" aria-describedby="veganDatePicker">
</div>
</div>
You may want to try using the onchange event:
<input class="custom-control-input" id="myCheckbox" type="checkbox" value="vegan" name="vegetarisch[]">
$('#myCheckbox').change(function () {
is_required();
});
function is_required() {
let odin = $(thisElement).closest('.row');
$('input[name="vegetarisch[]"]').each(function (index, thisElement) {
if ($(thisElement).is(':checked')) {
odin.find('input[name="vegCosts[]"]').attr('required', true);
odin.find('input[name="veganEindDatum[]"]').attr('required', true);
} else {
odin.find('input[name="vegCosts[]"]').attr('required', false);
odin.find('input[name="veganEindDatum[]"]').attr('required', false);
}
});
}
Want the toggle switch to control the form fields when check, below is the sample code please suggest
<div class="form-group row">
<label for="lot-1" class="col-sm-2 col-form-label">x</label>
<div class="col-md-4">
<input type="text" class="form-control numbersOnly" name="lot-1" id="lot-1" placeholder="Result" min="4"
max="4">
<div class="toggleWrapper">
<input type="checkbox" name="toggle1" class="mobileToggle" id="toggleField" checked value="true"
data-id="lot-1">
<label for="toggle1"></label>
</div>
</div>
<div class="col-md-4">
<input type="text" class="form-control numbersOnly" name="lot-2" id="lot-2" placeholder="Result" min="4"
max="4">
<div class="toggleWrapper">
<input type="checkbox" name="toggle1" class="mobileToggle" id="toggleField" checked value="true"
data-id="lot-2">
<label for="toggle1"></label>
</div>
</div>
<div class="col-md-4">
<input type="text" class="form-control numbersOnly" name="lot-3" id="lot-3" placeholder="Result" min="4"
max="4">
</div>
<div class="toggleWrapper">
<input type="checkbox" name="toggle1" class="mobileToggle" id="toggleField" checked value="true" data-id="lot-3">
<label for="toggle1"></label>
</div>
</div>
And below is my jquery handler to make it functional
var fieldValue = false;
$('#toggleField').on('change', function(e) {
var fieldId = $("#toggleField").attr('data-id');
// console.log(fieldValue+fieldId);
if (fieldValue === true) {
// $("input[id=name]").attr('readonly',true);
$('#lot-'+fieldId).attr('readonly',true);
} else {
$('#lot-'+fieldId).attr('readonly',false);
}
});
I was testing to read the attribute data-id for each selected it will make the field disabled / read-only when unchecked by comparing the id with the data-id of respective input.
you can use the following code I changed the selector of change event $('#toggleField') to class name $('.mobileToggle') you have to remove Id attributes from checkboxes because it has the same id which is wrong
and get checked value dynamically to add and remove readonly attribute according to its value selector for inputs was wrong also $('#lot-'+fieldId) it has to be $('#'+fieldId) finally I fired change event manually to run it on first time page load you can add all this code inside document ready
$('.mobileToggle').on('change',function(e){
var fieldId = $(this).attr('data-id');
var fieldValue = $(this).is(':checked');
if(fieldValue == true){
$('#'+fieldId).attr('readonly', 'readonly');
}else{
$('#'+fieldId).removeAttr('readonly');
}
});
$('.mobileToggle').change();
I am pretty new in HTML 5 and I have the following doubt.
I have a form like this:
<form class="form-horizontal" action="/IDES/salvaRegistrazione" method="POST" name="formRegistrazione">
<div class="form-group">
<label class="control-label col-sm-2" for="inputNome">Nome</label>
<div class="col-sm-10">
<input id="inputNome" class="form-control" type="text" value="" required="required" placeholder="Nome" name="nome">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="inputEmail">E-mail</label>
<div class="col-sm-10">
<input id="inputEmail" class="form-control" type="email" value="" required="required" placeholder="E-mail" name="email">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="inputEmail2">E-mail</label>
<div class="col-sm-10">
<input id="inputEmail2" class="form-control" type="email" placeholder="Inserisci nuovamente E-mail" name="inputEmail2">
</div>
</div>
<input id="submitRegistrazione" class="btn btn-default pull-right" type="submit" value="Registrati" name="submitRegistrazione">
</form>
As you can see the input tag have setted the required="required" attribute and as you can see in this JSFiddle if you don't insert the value into the input tag it is automatically shown an HTML error message popup:
https://jsfiddle.net/fntwyn9j/
Now my problem is that into my form I have also 2 field having type="email".
My problem is that I want that if the second email value (the one inserted in the field having id="inputEmail2") is not equal to the first email value (the one inserted into the field having id="inputEmail") appear a custom message (in the same HTML5 style) that say to me that the 2 fields have not the same value and the form is not submitted.
Searching on the web I found this example that use event listener to add custom message: http://jsfiddle.net/B4hYG/9/
But is seems to me that don't work and I have no idea about how to implement the previous requirement.
How can I solve this issue and implement this kind of HTML5 custom validation?
Solved by myself:
$(document).ready(function() {
document.getElementById("inputEmail2").addEventListener("input", function (e) {
valoreInpitEmail = $('#inputEmail').val();
valoreInpitEmail2 = $('#inputEmail2').val();
//alert("value inputEmail: " + valoreInpitEmail + " value inputEmail2: " + valoreInpitEmail2);
//if (e.target.value != "") {
if(valoreInpitEmail != valoreInpitEmail2) {
alert("EMAIL DIVERSE");
//alert("BLABLABLA");
e.target.setCustomValidity("Le E-mail inserite non corrispondono, per favore inserirle nuovamente");
}
else {
// Let the browser decide whether this is a valid email address
// This actually prevents that the call of setCustomValidity()
// in the IF doesn't get removed thus the user cannot submit the form
//alert("ELSE");
e.target.setCustomValidity("");
}
});
});
I have a script that is supposed to copy once set of form fields to another when a radio button is checked. It works on Safari, firefox (mac) but not on FF (PC) or IE.
function checkFirstDirAddrs() {
var i;
//checking which radio button selected
for ( i = 0; i < FirstCorpDirAddOption.length; i++) {
if (FirstCorpDirAddOption[i].checked == true) {
switch(i)
{
case 0:
document.getElementById("First_Corp_Director_Address1").value = document.getElementById("Corp_Address1").value;
document.getElementById("First_Corp_Director_Address2").value = document.getElementById("Corp_Address2").value;
document.getElementById("First_Corp_Director_City").value = document.getElementById("Corp_City").value;
document.getElementById("First_Corp_Director_Postal").value = document.getElementById("Corp_Postal").value;
break
case 1:
document.getElementById("First_Corp_Director_Address1").value = '';
document.getElementById("First_Corp_Director_Address2").value = '';
document.getElementById("First_Corp_Director_City").value = '';
document.getElementById("First_Corp_Director_Postal").value = '';
break
}
}
}
}
The html....
<div class="form-group">
<div class="col-sm-10"><strong>*Director Address</strong></div>
<div class="col-sm-6">
<div class="radio">
<label>
<input name="FirstCorpDirAddOption" id="FirstCorpDirAddOption" type="radio" value="Same as Corporate Address" onClick="checkFirstDirAddrs();">
Same as Corporate Address<br>
</label>
<label>
<input name="FirstCorpDirAddOption" id="FirstCorpDirAddOption" type="radio" value="Other" onClick="checkFirstDirAddrs();">
Other <em>(provided below)</em>
</label>
</div>
</div>
</div>
<div class="form-group">
<label for="First_Corp_Director_Address1" class="col-sm-2 control-label">*Address:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="First_Corp_Director_Address1" name="First_Corp_Director_Address1" maxlength="80">
</div>
</div>
<div class="form-group">
<label for="First_Corp_Director_Address2" class="col-sm-2 control-label">Address 2:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="First_Corp_Director_Address2" name="First_Corp_Director_Address2" maxlength="80">
</div>
</div>
<div class="form-group">
<label for="First_Corp_Director_City" class="col-sm-2 control-label">*City:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="First_Corp_Director_City" name="First_Corp_Director_City" maxlength="50">
</div>
</div>
<div class="form-group">
<label for="First_Corp_Director_Postal" class="col-sm-2 control-label">*Postal/Zip:</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="First_Corp_Director_Postal" id="First_Corp_Director_Postal" maxlength="7">
<span class="help-block">(enter NA if not from Canada/USA)</span>
</div>
</div>
If anyone can shed some more light on the issue that would be great. It works fine on most Mac based browsers I tested on and throws no errors in the Console of dev tools.
As I know there is no standard for treating same ids in one document via global variable.
It's good to know about reference between ids and global variable they initialize. But God please, do not use it. You can use any selector or create different ids instead of trying to get ids with 'FirstCorpDirAddOption'. Just like this, for example:
document.querySelectorAll('.radio input')
Just check what you get via global variable:
Here is Chrome
Here is FF
They are different. Thus you can't use same code for them.
You need to get rid of the duplicate IDs as they are causing you trouble.
You have 3 options if you get rid of the duplicate IDs to still have a 'hook' that JavaScript can use to access the elements.
Option 1: access the elements by name
Option 2: access the elements by a new CSS class name
Option 3: access the elements by some other "loosely defined" method
For simplicity I'm going to recommend #1, but #2 is just as good.
<div class="radio">
<label>
<input type="radio" name="FirstCorpDirAddOption" value="Same as Corporate Address" onclick="checkFirstDirAddrs();"/>
Same as Corporate Address
</label>
<br/>
<label>
<input type="radio" name="FirstCorpDirAddOption" value="Other" onclick="checkFirstDirAddrs();"/>
Other <em>(provided below)</em>
</label>
</div>
Now the JavaScript to access the input(s):
function checkFirstDirAddrs(){
var i;
//checking which radio button selected
var firstCorpDirOptions = document.querySelectorAll('input[name="FirstCorpDirAddOption"]');
for(i=0;i<firstCorpDirOptions.length;i++){
if(firstCorpDirOptions[i].checked == true){
//...