Hi I have multiple checkboxes of similar kind. I am applying javascript on the checkbox to show hidden fields. I have created a js code which works for a single checkbox, I want to apply a code that will work for all checkboxes.
<div class="row">
<div class="col-md-12">
<div class="form-group">
<div class="col-md-2">
<label>Practical Course:</label>
<input id="checkbox" type="checkbox">
</div>
<div class="col-md-4" id="box" style="display: none;">
<input type="number" name="practical1" class="form-control">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<div class="col-md-2">
<label>Practical Course:</label>
<input id="checkbox" type="checkbox">
</div>
<div class="col-md-4" id="box" style="display: none;">
<input type="number" name="practical2" class="form-control">
</div>
</div>
</div>
</div>
JS Code :-
var checkbox = document.getElementById('checkbox');
var box = document.getElementById('box');
checkbox.onclick = function() {
console.log(this);
if (this.checked) {
box.style['display'] = 'block';
} else {
box.style['display'] = 'none';
}
};
Now the thing is i can make individual javascript for all checkboxes but that will contain numerous js code, I want that a single javascript function can unhide the elements from every checkbox when clicked. A single js code should work for all checkboxes. Kindly please provide a way of doing it with plain javascript or jquery.
Try this
on your check box's onchange event call function onchange="showHiddenField(this)"
and function is like
function showHiddenField(currentObject) {
var inputDiv = $(currentObject).parent().next();
if ($(currentObject).is(":checked")) {
$(inputDiv).show().focus();
}
else {
$(inputDiv).hide();
}
}
Use javascript function to make it.
function toggleFields(boxId, checkboxId) {
var checkbox = document.getElementById(checkboxId);
var box = document.getElementById(boxId);
checkbox.onclick = function() {
console.log(this);
if (this.checked) {
box.style['display'] = 'block';
} else {
box.style['display'] = 'none';
}
};
}
toggleFields('box1', 'checkbox1');
toggleFields('box2', 'checkbox2');
<link href="//cdn.bootcss.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-md-12">
<div class="form-group">
<div class="col-md-2">
<label>Practical Course:</label>
<!--<input id="checkbox" type="checkbox">-->
<input id="checkbox1" type="checkbox">
</div>
<!--<div class="col-md-4" id="box" style="display: none;">-->
<div class="col-md-4" id="box1" style="display: none;">
<input type="number" name="practical1" class="form-control">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<div class="col-md-2">
<label>Practical Course:</label>
<!--<input id="checkbox" type="checkbox">-->
<input id="checkbox2" type="checkbox">
</div>
<!--<div class="col-md-4" id="box" style="display: none;">-->
<div class="col-md-4" id="box2" style="display: none;">
<input type="number" name="practical2" class="form-control">
</div>
</div>
</div>
</div>
Okay this is how this works, each checkbox will have the id of its box as a class, so that when ever that checkbox is clicked, we will use its class to make its box visible. This will work even if you have 1000 checkboxes
var checkbox = document.querySelectorAll("#check1, #check2");
for (i = 0; i < checkbox.length; i++) {
checkbox[i].onclick = function() {
if (this.checked) {
document.getElementById(this.getAttribute('class')).style['display'] = 'block';
} else {
document.getElementById(this.getAttribute('class')).style['display'] = 'none';
}
};
}
<div class="row">
<div class="col-md-12">
<div class="form-group">
<div class="col-md-2">
<label>Practical Course:</label>
<input id="check1" type="checkbox" class="box">
</div>
<div class="col-md-4" id="box" style="display: none;">
<input type="number" name="practical1" class="form-control">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<div class="col-md-2">
<label>Practical Course:</label>
<input id="check2" type="checkbox" class="box2">
</div>
<div class="col-md-4" id="box2" style="display: none;">
<input type="number" name="practical2" class="form-control">
</div>
</div>
</div>
</div>
Yes you can do this. Solution in below code. i did this using JQuery.
$('input[type="checkbox"]').click(function(){
console.log(this);
// $(this).parent().next().css('display','block');
$(this).parent().next().toggle('show');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<div class="col-md-2">
<label>Practical Course:</label>
<input name="chkbox" type="checkbox">
</div>
<div class="col-md-4" data-box="box" style="display: none;">
<input type="number" name="practical1" class="form-control">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<div class="col-md-2">
<label>Practical Course:</label>
<input name="chkbox" type="checkbox">
</div>
<div class="col-md-4" data-box="box" style="display: none;">
<input type="number" name="practical2" class="form-control">
</div>
</div>
</div>
</div>
First Please note down in your mind "id" is only apply on a single elemnt on each page for multiple element you can apply a "class"
id="checkbox" replace with class="checkbox"
in Jquery
$(document).ready(function(){
$(".checkbox").change(function(){
if($(this).prop("checked")){
$(this).parents(".row").find(".box").show();
}else{
$(this).parents(".row").find(".box").hide();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<div class="col-md-2">
<label>Practical Course:</label>
<input class="checkbox" type="checkbox">
</div>
<div class="col-md-4 box" style="display: none;">
<input type="number" name="practical1" class="form-control">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<div class="col-md-2">
<label>Practical Course:</label>
<input class="checkbox" type="checkbox">
</div>
<div class="col-md-4 box" style="display: none;">
<input type="number" name="practical2" class="form-control">
</div>
</div>
</div>
</div>
You can use querySelectorAll("[type='checkbox']") to select all checkbox and iterate through the elements using for loop.
Note : The id should be unique for each element.
var checkbox = document.querySelectorAll("[type='checkbox']");
for (i = 0; i < checkbox.length; i++) {
checkbox[i].onclick = function() {
if (this.checked) {
document.getElementById(this.getAttribute('class')).style['display'] = 'block';
} else {
document.getElementById(this.getAttribute('class')).style['display'] = 'none';
}
};
}
<div class="row">
<div class="col-md-12">
<div class="form-group">
<div class="col-md-2">
<label>Practical Course:</label>
<input id="check1" type="checkbox" class="box">
</div>
<div class="col-md-4" id="box" style="display: none;">
<input type="number" name="practical1" class="form-control">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<div class="col-md-2">
<label>Practical Course:</label>
<input id="check2" type="checkbox" class="box2">
</div>
<div class="col-md-4" id="box2" style="display: none;">
<input type="number" name="practical2" class="form-control">
</div>
</div>
</div>
</div>
The most narrowed (static) suggestion from your code:
$(document).ready(function() {
$('input[type=checkbox]').change(function(){
if($(this).prop('checked')){
$(this).parent().next().show();
}else{
$(this).parent().next().hide();
}
});
});
Use class attribute to get dynamic process.
Tested on google Chrome works.
gets id of input takes the number after "checkbox(gets_target)" string. creates a id with adding this number to end of "box"+number string
HTML :
<input onChange="display_hidden_field(this)" id="checkbox2" type="checkbox">
<div id="box2" style="display:none;">content</div>
Javascript :
function display_hidden_field(checkbox){
var box_id = checkbox.id;
var search_pattern = /checkbox(.*?)$/g;
var number = search_pattern.exec(box_id);
number = number[1];
box_id = 'box'+number;
var box = document.getElementById(box_id);
if(checkbox.checked){
box.style.display = 'block';
}else{
box.style.display = 'none';
}
}
You can use code like this what i did in this your every checkbox id create like this "checkbox_1" and your box id like this box_1 and so on other numbers please check below code you will get idea what you need to do with your html and java script.
<div class="row">
<div class="col-md-12">
<div class="form-group">
<div class="col-md-2">
<label>Practical Course:</label>
<input id="checkbox_1" type="checkbox" onclick="myfunction(this);">
</div>
<div class="col-md-4" id="box_1" style="display: none;">
<input type="number" name="practical1" class="form-control">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<div class="col-md-2">
<label>Practical Course:</label>
<input id="checkbox_2" type="checkbox" onclick="myfunction(this);">
</div>
<div class="col-md-4" id="box_2" style="display: none;">
<input type="number" name="practical2" class="form-control">
</div>
</div>
</div>
</div>
<script>
function myfunction(obj)
{
var element_index = obj.id.split("_");
console.log('box_'+element_index[1]);
var box = document.getElementById('box_'+element_index[1]);
if(obj.checked) {
box.style['display'] = 'block';
} else {
box.style['display'] = 'none';
}
}
</script>
Here in script i have given function name myfunction but you can set your function name as per your need. may this is helpful for you.
Related
I have two radio buttons and one Bootstrap-select Dropdown.I want to enable/disable dropdown using javascript with the help of two radio buttons.
My Html Code is Given Below:
<div class="container" style="margin-top: 5px;background-color: wheat;">
<div class="card" style="background-color: white;margin: 1em">
<!--<div class="card-header"></div>-->
<div class="card-body">
<div class="row">
<div class="col-lg-2">
<label style="margin-top: 1.2em;margin-left: 1em">Type</label>
</div>
<div class="row" >
<div class="col-sm-1">
<div class="form-check" style="margin-top: 1.1em;margin-left: 1em">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="rbType" id="typeNew" value="enable" >New
</label>
</div>
</div>
<div class="col-sm-2">
<div class="form-check" style="margin-top: 1.1em;margin-left: 1em">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="rbType" id="typeVisisting" value="disable">Visiting
</label>
</div>
</div>
</div>
</div>
<div class="row" >
<div class="col-lg-2">
<label style="margin-top: 1.2em;margin-left: 1em" for="selectCustomer" >Customer Name</label>
</div>
<div class="col-lg-10">
<div class="form-group" style="margin-top: .5em;margin-right: 1em">
<select class=" form-control input-lg" data-live-search="true" title="-- Select a Customer --" name="selectCustomer" id="selectCustomer" >
<!--<option value="none">-- Select a Customer --</option>-->
#foreach($customers as $customer)
<option value="{{$customer->customer_id}}">{{$customer->customer_id}} {{$customer->customer_name}}</option>
#endforeach
</select>
</div>
</div>
</div>
</div>
</div>
Please help me to solve this problem.I am working at this upto three days.
Add the jquery below
$('input[name="rbType"]').change(function(){
if(this.value == "enable"){
$('#selectCustomer').removeAttr('disabled')
}
if(this.value == "disable"){
$('#selectCustomer').attr('disabled','true')
}
})
Try this in your javascript tag using jquery
$('input[name="rbType"]').change(function(){
if(this.value == "enable"){
$('#selectCustomer').prop('disabled',false)
}
if(this.value == "disable"){
$('#selectCustomer').prop('disabled','true')
}
})
I am trying to create a form that will be enabled and disable depending on the checkbox tick mark.
<div class="row">
<div class="col-md-12">
<p>Is this client user</p>
<input
type="checkbox"
name="is_user"
id="is_user"
onclick="enableCreateUser()"
/>
</div>
</div>
<div class="row" id="user_register">
<div class="form-group row">
<div class="col-md-6">
<label class="" for="username">Username:</label>
</div>
<div class="col-md-6">
<input class="form-control" type="text" name="username" id="" />
</div>
</div>
<div class="form-group row">
<div class="col-md-6">
<label class="" for="password">Password:</label>
</div>
<div class="col-md-6">
<input class="form-control" type="password" name="password" id="" />
</div>
</div>
</div>
I am trying to make this javascript or jquery function that will allow me to disable or enable this portion with id="user_register".
Here is the code that I tried.
function enableCreateUser() {
if(document.getElementById("is_user").checked){
document.getElementById("user_register").disabled = true;
}
if(!document.getElementById("is_user").checked){
document.getElementById("user_register").disabled = flase;
}
}
Please help me complete this function. Thank you.
You can simply use classList with add and remove function to add custom class .disable_section to show disabled on your section.
Live Demo:
function enableCreateUser() {
if (document.getElementById("is_user").checked) {
document.getElementById("user_register").classList.add('disable_section')
} else {
document.getElementById("user_register").classList.remove('disable_section')
}
}
.disable_section {
pointer-events: none;
opacity: 0.4;
}
<div class="row">
<div class="col-md-12">
<p>Is this client user</p>
<input type="checkbox" name="is_user" id="is_user" onclick="enableCreateUser()" />
</div>
</div>
<div class="row" id="user_register">
<div class="form-group row">
<div class="col-md-6">
<label class="" for="username">Username:</label>
</div>
<div class="col-md-6">
<input class="form-control" type="text" name="username" id="" />
</div>
</div>
<div class="form-group row">
<div class="col-md-6">
<label class="" for="password">Password:</label>
</div>
<div class="col-md-6">
<input class="form-control" type="password" name="password" id="" />
</div>
</div>
</div>
If you want to disable the inputs specifically then you can simply assign ids to your inputs and disable them individually.
Live Demo
function enableCreateUser() {
if (document.getElementById("is_user").checked) {
document.getElementById("user_res").disabled = true;
document.getElementById("pass").disabled = true;
} else {
document.getElementById("user_res").disabled = false;
document.getElementById("pass").disabled = false;
}
}
<div class="row">
<div class="col-md-12">
<p>Is this client user</p>
<input type="checkbox" name="is_user" id="is_user" onclick="enableCreateUser()" />
</div>
</div>
<div class="row" id="user_register">
<div class="form-group row">
<div class="col-md-6">
<label class="" for="username">Username:</label>
</div>
<div class="col-md-6">
<input class="form-control" type="text" name="username" id="user_res" />
</div>
</div>
<div class="form-group row">
<div class="col-md-6">
<label class="" for="password">Password:</label>
</div>
<div class="col-md-6">
<input class="form-control" type="password" name="password" id="pass" />
</div>
</div>
</div>
function enableCreateUser() {
if (document.getElementById("is_user").checked) {
disableForm(true);
}
if (!document.getElementById("is_user").checked) {
disableForm(false);
}
}
function disableForm(flag) {
var elements = document.getElementsByClassName("form-control");
for (var i = 0, len = elements.length; i < len; ++i) {
elements[i].readOnly = flag;
elements[i].disabled = flag;
}
}
<div class="row">
<div class="col-md-12">
<p>Is this client user</p>
<input type="checkbox" name="is_user" id="is_user" onclick="enableCreateUser()" />
</div>
</div>
<div class="row" id="user_register">
<div class="form-group row">
<div class="col-md-6">
<label class="" for="username">Username:</label>
</div>
<div class="col-md-6">
<input class="form-control" type="text" name="username" id="" />
</div>
</div>
<div class="form-group row">
<div class="col-md-6">
<label class="" for="password">Password:</label>
</div>
<div class="col-md-6">
<input class="form-control" type="password" name="password" id="" />
</div>
</div>
</div>
use .hidden() for control div
function enableCreateUser() {
var status = document.getElementById("is_user").checked;
document.getElementById("user_register").hidden = status;
}
<div class="row">
<div class="col-md-12">
<p>Is this client user</p>
<input
type="checkbox"
name="is_user"
id="is_user"
onclick="enableCreateUser()"
/>
</div>
</div>
<div class="row" id="user_register">
<div class="form-group row">
<div class="col-md-6">
<label class="" for="username">Username:</label>
</div>
<div class="col-md-6">
<input class="form-control" type="text" name="username" id="" />
</div>
</div>
<div class="form-group row">
<div class="col-md-6">
<label class="" for="password">Password:</label>
</div>
<div class="col-md-6">
<input class="form-control" type="password" name="password" id="" />
</div>
</div>
</div>
You can do it like this :
NOTE : Remove onclick on checkbox.
<input type="checkbox" name="is_user" id="is_user" />
$('#is_user').on("change", function() {
if ($(this).is(":checked")) {
$('#user_register input').prop("disabled", true);
} else {
$('#user_register input').prop("disabled", false);
}
});
Check out this snippet:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PURFECT MATCH</title>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="styles.css">
<link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght#0,700;1,900&display=swap" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<script type="text/javascript">
function enableCreateUser() {
var form_elements = document.getElementById("myForm").elements;
if (document.getElementById("is_user").checked){
for (var i = 0; i < form_elements.length; ++i)
form_elements[i].readOnly = true;
} else {
for (var i = 0; i < form_elements.length; ++i)
form_elements[i].readOnly = false;
}
}
</script>
</head>
<body onload="enableCreateUser();">
<div class="row">
<div class="col-md-12">
<p>Is this client user</p>
<input
type="checkbox"
name="is_user"
id="is_user"
onclick="enableCreateUser()"
/>
</div>
</div>
<div class="row" id="user_register">
<form id="myForm" >
<div class="form-group row">
<div class="col-md-6">
<label class="" for="username">Username:</label>
</div>
<div class="col-md-6">
<input class="form-control" type="text" name="username" id="" />
</div>
</div>
<div class="form-group row">
<div class="col-md-6">
<label class="" for="password">Password:</label>
</div>
<div class="col-md-6">
<input class="form-control" type="password" name="password" id="" />
</div>
</div>
</form>
</div>
</body>
</html>
I have added form having id myForm. In the JavaScript section, using this id function enableCreateUser() access the form and we iterates over the elements of the form, setting their read-only status based on the value of checkbox is_user.
To initialize form elements we calling function enableCreateUser() just after the loading of document is done using onload in <body>.
I know that this might be an old question, but you can also use an event listener for the checkbox, and simply toggle the attribute disabled on and off for the desired input. Like this:
yourCheckbox.addEventListener('change', () => {
yourInput.toggleAttribute('disabled');
});
Using the code you posted, it might look like this:
const yourCheckbox = document.querySelector('#is_user');
yourCheckbox.addEventListener('change', () => {
const yourInput = document.querySelector('#user_register');
yourInput.toggleAttribute('disabled');
});
I am creating the fields dynamically in HTML using this JS, and in multiselect I'm using bootstrap multiselect here is the code https://bootsnipp.com/snippets/Ekd8P when I click on the add more button it creates the form dynamically.
js code for creating a form dynamically :
$(function() {
// Remove button
$(document).on(
'click',
'[data-role="dynamic-fields"] > .form-horizontal [data-role="remove"]',
function(e) {
e.preventDefault();
$(this).closest('.form-horizontal').remove();
}
);
// Add button
var i = 1;
$(document).on(
'click',
'[data-role="dynamic-fields"] > .form-horizontal [data-role="add"]',
function(e) {
e.preventDefault();
var container = $(this).closest('[data-role="dynamic-fields"]');
new_field_group = container.children().filter('.form-horizontal:first-child').clone();
new_field_group.find('input').each(function() {
if (this.name == 'tags[0]') {
$(this).tagsinput('destroy');
$(this).tagsinput('removeAll');
this.name = this.name.replace('[0]', '[' + i + ']');
var new_container = $(this).closest('[class="form-group"]');
new_container.find(".bootstrap-tagsinput:first").remove();
} else {
$(this).val('');
}
});
new_field_group.find('select').each(function() {
if (this.name == 'addons[0]') {
$(this).multiselect('rebuild');
this.name = this.name.replace('[0]', '[' + i + ']');
var new_container = $(this).closest('[class="multiselect-native-select"]');
new_container.find(".multiselect-native-select > .multi").remove();
} else {
$(this).val('');
}
});
i += 1;
container.append(new_field_group);
}
);
});
and html code for form elements:
<form action="" method="post" novalidate="novalidate" enctype="multipart/form-data">
{{ csrf_field() }}
<div data-role="dynamic-fields">
<div class="form-horizontal">
<div class="row">
<div class="col-sm-4">
<div class="form-group">
<label for="Firstname5" class="col-sm-3">Enter Dish Name</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="Name1" name="Name[]" required data-rule-minlength="2">
</div>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="Firstname5" class="col-sm-3">Enter Dish Price</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="Price" name="Price[]" required data-rule-minlength="2">
</div>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="Firstname5" class="col-sm-3">Select Food Type</label>
<div class="col-sm-8">
<select id="select1" class="form-control" name="select[]" required>
#foreach($types as $type)
<option value="{{$loop->iteration}}">{{$type->food_type_name}}</option>
#endforeach
</select>
<p class="help-block" data-toggle="tooltip" data-placement="bottom" title="xyz"><i class="md md-info"></i></p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div class="form-group">
<label for="Firstname5" class="col-sm-3">Dish Description</label>
<div class="col-sm-8">
<textarea name="Description[]" id="field-value" class="form-control" rows="1"></textarea>
</div>
</div>
</div>
<div class="col-sm-4 contacts">
<div class="form-group">
<label class="col-sm-3" for="rolename">Add Addons</label>
<div class="col-sm-8">
<select id="dates-field2" class="multiselect-ak form-control" name="addons[0]" id="trigger3" data-role="multiselect" multiple="multiple">
#foreach($addons as $addon)
<option value="{{$addon->addonid}}">{{$addon->addon_name}}</option>
#endforeach
</select>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="Firstname5" class="col-sm-3">Enter Tags</label>
<div class="col-sm-8">
<input type="text" value="" name="tags[0]" class="form-control" data-role="tagsinput" placeholder="e.g. spicy, healthy" />
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div class="col-sm-4">
<div class="checkbox checkbox-styled">
<label><em>Half Plate Price</em>
<input type="checkbox" value="" class="trigger2" id="trigger2" name="question">
</label>
</div>
</div>
<div class="col-sm-4">
<div id="hidden_fields2" class="hidden_fields2" style="display:none;">
<input type="text" id="hidden_field2" name="Price2[]" placeholder="Please Enter" class="form-control">
</div>
</div>
</div>
<div class="col-sm-4">
<div class="col-sm-5">
<div class="checkbox checkbox-styled">
<label><em>Quarter Plate Price</em>
<input type="checkbox" value="" class="trigger" id="trigger" name="question">
</label>
</div>
</div>
<div class="col-sm-4">
<div id="hidden_fields" class="hidden_fields" style="display:none;">
<input type="text" id="hidden_field" name="Price3[]" placeholder="Please Enter" class="form-control">
</div>
</div>
</div>
</div>
<br>
<button class="btn btn-delete" data-toggle="tooltip" data-placement="bottom" title="Delete Field" data-role="remove">
Delete Item
</button>
<button class="btn ink-reaction btn-raised btn-primary" data-toggle="tooltip" data-placement="bottom" title="Add More Field" data-role="add">
Add More Items
</button>
</div>
<!-- /div.form-inline -->
</div>
<!-- /div[data-role="dynamic-fields"] -->
<div class="form-group">
<button type="submit" name="submit" href="#" class="btn ink-reaction btn-raised btn-primary" style="margin-top: -62px;margin-left: 160px;">Submit Items</button>
</div>
<!--end .form-group -->
</form>
The issue is that when I click on the add more item it reflects the multiselect dropdown twice as you see in this image.
I want that if I click on the add more item button it restates the multiselect dropdown as in the first state.
see this jsfiddle.net/akshaycic/svv742r7/7 it will clear all your doubt. on click plus button it is not reflect to "none selected" state it will remain in its initial state.
Any leads would be helpful. Thank you in advance.
I have printing textbox, labels and dropdown values on print preview page. Here I've attached Codepen link as well as code what I have done yet.
HTML
<form>
<div class="container no-print">
<div class="row" id="DivDate">
<div class="col-lg-12">
<div class="col-lg-12">
<div class="pull-right">
<input type="text" name="CreatedDate" placeholder="DD/MM/YYYY" class="form-control" />
</div>
</div>
</div>
</div>
<div id="DivDoc">
<div class="row">
<div class="col-lg-12">
<div class="form-group">
<label class="col-md-2 col-xs-4">
Respected Dr.
</label>
<div class="col-md-10 col-xs-8">
<input type="text" name="txtDoctor" placeholder="Doctor Name" class="form-control" />
</div>
</div>
</div>
</div>
</div>
<div id="DivData">
<div class="row">
<div class="col-lg-12">
<div class="form-group">
<label class="col-xs-2">
Referring
</label>
<div class="col-xs-4 col-md-2">
<select name="ddlGender" class="form-control">
<option value="Mr.">Mr.</option>
<option value="Mrs.">Mrs.</option>
<option value="Miss">Miss</option>
</select>
</div>
<div class="col-xs-6 col-md-8">
<input type="text" name="txtPatient" placeholder="Patient Name" class="form-control" />
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="form-group">
<label class="col-xs-9 col-sm-8 col-md-6">
to you for the favour of your kind consultation of
</label>
<div class="col-xs-3 col-sm-4 col-md-6">
<select name="ddlGender" class="form-control">
<option value="his">his</option>
<option value="her">her</option>
</select>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="form-group">
<div class="col-xs-3">
<select name="ddlOption" class="form-control">
<option value="C/O">C/O</option>
</select>.
</div>
<label class="col-xs-9">
<input type="text" class="form-control" />
</label>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="form-group">
<label class="col-xs-9 col-sm-8 col-md-6">
Please do the needful to evaluate the case and treat
</label>
<div class="col-xs-3 col-sm-4 col-md-6">
<select name="ddlGender" class="form-control">
<option value="him">him</option>
<option value="her">her</option>
</select>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="form-group">
<label class="col-xs-9 col-sm-8 col-md-6">
accordingly.
</label>
</div>
</div>
</div>
</div>
<div class="row" id="DivFooter">
<div class="col-lg-12">
<div class="col-lg-12">
<div class="pull-right text-center">
<label>
Regards and Respect<br />
from<br />
Dr. Jayesh Hathi
</label>
</div>
</div>
</div>
</div>
<br />
<div class="row">
<div class="col-lg-12">
<div class="col-xs-4">
<input type="button" value="Save" class="btn btn-block btn-primary" id="BtnSave" />
</div>
<div class="col-xs-4">
<input type="button" value="Print" class="btn btn-block btn-primary" />
</div>
<div class="col-xs-4">
<input type="button" value="Cancel" class="btn btn-block btn-default" />
</div>
</div>
</div>
</div>
</form>
<div class="print">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="col-lg-12">
<div class="pull-right" id="PrintDate">
</div>
</div>
</div>
</div>
<br />
<br />
<div class="row">
<div class="col-lg-12">
<div class="form-group" id="PrintDoc">
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="form-group" id="PrintData">
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="col-lg-12">
<div class="pull-right text-center">
<label>
Regards and Respect<br />
from<br />
Dr. Jayesh Hathi
</label>
</div>
</div>
</div>
</div>
<br />
</div>
</div>
And Jquery:
$("#BtnSave").click(function() {
var values1 = [];
$('#DivDate').find("input,select,label").each(function() {
if ($(this).attr('type') == 'button') return true;
if ($(this).val() != "") {
values1.push($(this).val().trim());
} else {
values1.push($(this).text().trim());
}
});
$("#PrintDate").text(values1.join(" "));
var values2 = [];
$('#DivDoc').find("input,select,label").each(function() {
if ($(this).attr('type') == 'button') return true;
if ($(this).val() != "") {
values2.push($(this).val().trim());
} else {
values2.push($(this).text().trim());
}
});
$("#PrintDoc").text(values2.join(" "));
var values3 = [];
$('#DivData').find("input,select,label").each(function() {
if ($(this).attr('type') == 'button') return true;
if ($(this).val() != "") {
values3.push($(this).val().trim());
} else {
values3.push($(this).text().trim());
}
});
$("#PrintData").text(values3.join(" "));
window.print();
});
CodePen:https://codepen.io/anon/pen/GmjmBr
I want underscore under input text like doctorname and patient name. Can I add HTML any how in preview mode?
As I am getting value of all input in array and joining it, I don't think I can save HTML code in array.
I've attached Image for better clarification
I want to instantly display the user's input so each input has a corresponding display div.
the html:
<div class="row">
<div class="col-lg-3">
<?php echo $this->Form->input('contact_person'); ?>
</div>
<div class="col-lg-3">
<?php echo $this->Form->input('mobile'); ?>
</div>
<div class="col-lg-3">
<label for=""><?php echo __('Contact Person'); ?></label>
<div id="test1"></div>
</div>
<div class="col-lg-3">
<label for=""><?php echo __('Mobile'); ?></label>
<div id="test2"></div>
</div>
</div>
the javascript:
$('#PostContactPerson').keyup(function(){
$('#test1').html(this.value);
});
$('#PostMobile').keyup(function(){
$('#test2').html(this.value);
});
I am new to Javascript.. is there a way to combine all these same scripts so one key function handles all instant input display?
$('input').keyup(function(){
var outputId = null;
switch ($(this).attr('name')) {
case 'contact_person': outputId = '#test1'; break;
case 'mobile': outputId = '#test2'; break;
}
$(outputId).html($(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="row">
<div class="col-lg-3">
<input name='contact_person' type="text" />
</div>
<div class="col-lg-3">
<input name='mobile' type="text" />
</div>
<div class="col-lg-3">
<label for="">Contact Person</label>
<div id="test1"></div>
</div>
<div class="col-lg-3">
<label for="">Mobile</label>
<div id="test2"></div>
</div>
</div>
Consider this (I changed the HTML for the example to work, but your HTML is just fine)
But you may want to change the ID of your output fields:
$('input').keyup(function(){
$('#output_'+$(this).attr('name')).html($(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="row">
<div class="col-lg-3">
<input name='contact_person' type="text" />
</div>
<div class="col-lg-3">
<input name='mobile' type="text" />
</div>
<div class="col-lg-3">
<label for="">Contact Person</label>
<div id="output_contact_person"></div>
</div>
<div class="col-lg-3">
<label for="">Mobile</label>
<div id="output_mobile"></div>
</div>
</div>
In this case the ID of the output field is the same as the name of your input field, but with a prepended "output_"
Or if you have some fields which shoudl not work with output field, consider telling the input-fields that they have an output field:
$('input').keyup(function(){
var outputId = $(this).data('output');
if (outputId) {
$(outputId).html($(this).val());
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="row">
<div class="col-lg-3">
<input name='contact_person' type="text" data-output="#test1" />
</div>
<div class="col-lg-3">
<input name='mobile' type="text" data-output="#test2" />
</div>
<div class="col-lg-3">
<label for="">Contact Person</label>
<div id="test1"></div>
</div>
<div class="col-lg-3">
<label for="">Mobile</label>
<div id="test2"></div>
</div>
</div>
Notice the data-output-attribute to link to output-div.
You can find out the source of the event of the handler function two ways: this or event.target:
<div>first</div>
<div>second</div>
<script>
var divs = document.getElementsByTagName("div");
for(var i=0; i<divs.length; ++i) divs[i].addEventListener("click",function(e) {
alert(e.target.innerHTML);
alert(this.innerHTML);
});
</script>
Try clicking the divs on the fiddle.
There are many methods for DOM traversal, but if you want to use ids, you can create dictionary:
var targets = {
"PostContactPerson": "test1",
"PostMobile": "test2"
};
and the handler function would be
function(e) {
$('#'+targets[this.id]).html(this.value);
}