How to create a single function that handles checkbox selection? - javascript

I'm working on this simple checkbox selection that works just fine when selecting a single row or selecting all the rows. However, I would like to have only one function that handles the checkbox selection. As of right now I have 3 functions called: customer_name_func , customer_lastname_func and customer_email_func. Can someone help me on this please? Here's my code that works just fine:
$(document).ready(function() {
$("#checkAll").change(function() {
$("input:checkbox").prop('checked', $(this).prop("checked"));
$(customer_name_func);
$(customer_lastname_func);
$(customer_email_func);
});
var customer_name_func = function() {
if ($("#customer-name-checkbox").is(":checked")) {
$('#customer-name-inputField').prop('disabled', false);
} else {
$('#customer-name-inputField').prop('disabled', 'disabled');
}
};
$(customer_name_func);
$("#customer-name-checkbox").change(customer_name_func);
var customer_lastname_func = function() {
if ($("#customer-lastname-checkbox").is(":checked")) {
$('#customer-lastname-inputField').prop('disabled', false);
} else {
$('#customer-lastname-inputField').prop('disabled', 'disabled');
}
};
$(customer_lastname_func);
$("#customer-lastname-checkbox").change(customer_lastname_func);
var customer_email_func = function() {
if ($("#customer-email-checkbox").is(":checked")) {
$('#customer-email-inputField').prop('disabled', false);
} else {
$('#customer-email-inputField').prop('disabled', 'disabled');
}
};
$(customer_email_func);
$("#customer-email-checkbox").change(customer_email_func);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form>
<input type="checkbox" id="checkAll" />Select All
<br/>
<input type="checkbox" id="customer-name-checkbox" name="customer-name-checkbox" value="yes">
<!---echo php customerName value from WS--->
<label for="pizza">Name LastName Phone Number</label>
<input type="email" name="name" id="customer-name-inputField" />
<br/>
<br/>
<input type="checkbox" id="customer-lastname-checkbox" name="customer-lastname-checkbox" value="yes">
<!---echo php customerLastName value from WS--->
<label for="pizza">Name LastName Phone Number</label>
<input type="email" name="email" id="customer-lastname-inputField" />
<br/>
<br/>
<input type="checkbox" id="customer-email-checkbox" name="customer-email-checkbox" value="yes">
<!---echo php customerPhoneNumber value from WS--->
<label for="pizza">Name LastName Phone Number</label>
<input type="email" name="email" id="customer-email-inputField" />
<br/>
<br/>
<input type="submit" value="Send" />
</form>

Use HTML-5 data-* attribute to store custom information on the element.
Add data-target attribute on each checkbox and the value of this attribute should be the corresponding textbox ID
data-target="customer-name-inputField" name="customer-name-checkbox" value="yes"
Add a common class to all the checkboxes.
class="myCheckbox"
Bind events on all the checkboxes using the common class.
$('.myCheckbox').change(function() {
Inside event handler use $(this) and data() to get the elements data-* attribute value.
$(this).data('target')
Use trigger('change') to trigger the change event on the checkboxes.
Live Demo:
$(document).ready(function() {
$("#checkAll").change(function() {
$('.myCheckbox').prop('checked', this.checked).trigger('change');
});
$('.myCheckbox').change(function() {
$('#' + $(this).data('target')).prop('disabled', !this.checked);
}).trigger('change');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<div>
<input type="checkbox" id="checkAll" />Select All
<input type="checkbox" id="customer-name-checkbox" data-target="customer-name-inputField" name="customer-name-checkbox" value="yes" class="myCheckbox">
<label for="pizza">Name LastName Phone Number</label>
<input type="email" name="name" id="customer-name-inputField" />
</div>
<div>
<input type="checkbox" id="customer-lastname-checkbox" data-target="customer-lastname-inputField" name="customer-lastname-checkbox" value="yes" class="myCheckbox">
<label for="pizza">Name LastName Phone Number</label>
<input type="email" name="email" id="customer-lastname-inputField" />
</div>
<div>
<input type="checkbox" id="customer-email-checkbox" data-target="customer-email-inputField" name="customer-email-checkbox" value="yes" class="myCheckbox">
<!---echo php customerPhoneNumber value from WS--->
<label for="pizza">Name LastName Phone Number</label>
<input type="email" name="email" id="customer-email-inputField" />
</div>
<input type="submit" value="Send" />
</form>

Write a single function that operates on a checkbox, getting the ID of the input field by modifying its own name. Give all the checkboxes that need this a class so you can operate on them all with .each().
$(document).ready(function() {
$("#checkAll").change(function() {
$(".input_checkbox").prop('checked', $(this).prop("checked")).each(function() {
enable_disable_input(this);
});
});
function enable_disable_input(checkbox) {
var input_id = checkbox.id.replace('-checkbox', '-inputField');
$("#" + input_id).prop('disabled', !checkbox.checked);
}
$(".input_checkbox").change(function() {
enable_disable_input(this);
});
$(".input_checkbox").each(function() {
enable_disable_input(this);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form>
<input type="checkbox" id="checkAll" />Select All
<br/>
<input type="checkbox" id="customer-name-checkbox" class="input_checkbox" name="customer-name-checkbox" value="yes">
<!---echo php customerName value from WS--->
<label for="pizza">Name LastName Phone Number</label>
<input type="email" name="name" id="customer-name-inputField" />
<br/>
<br/>
<input type="checkbox" id="customer-lastname-checkbox" class="input_checkbox" name="customer-lastname-checkbox" value="yes">
<!---echo php customerLastName value from WS--->
<label for="pizza">Name LastName Phone Number</label>
<input type="email" name="email" id="customer-lastname-inputField" />
<br/>
<br/>
<input type="checkbox" id="customer-email-checkbox" class="input_checkbox" name="customer-email-checkbox" value="yes">
<!---echo php customerPhoneNumber value from WS--->
<label for="pizza">Name LastName Phone Number</label>
<input type="email" name="email" id="customer-email-inputField" />
<br/>
<br/>
<input type="submit" value="Send" />
</form>

Related

JavaScript: location.replace doesn't work in the function

I'm making a web app and I'm struggling with replacing the page.
In the function myPage(), when I put the location.replace("file.html"); in the start, it works if I don't insert inputs on the web app, but when I put the location.replace("file.html"); in the if statement then doesn't work at all, and is there where I need to put the location.replace.
Please help me.
js code:
var submit = document.getElementById("submit");
submit.addEventListener("click",myPage);
function myPage(){
//location.replace("file.html"); // here this is working
var name=document.formId.nameRadio.value;//name="abc"
if (name=="abc"){
location.replace("file.html");//but here not
}
}
html code:
<form id="formId" name="formId" >
<label>sth </label><br><br>
<label for="name"> name </label>
<input type="text" id="name" name="name" required>
<fieldset>
<legend>sth</legend>
<ul class="class-radio" >
<li> <input type="radio" name="nameRadio" id="abc" value="abc" required><label for="abc">abc</label></li>
<li> <input type="radio" name="nameRadio" id="cdf" value="cdf"><label for="cdf">cdf</label></li>
</ul>
</fieldset>
<input id="submit" type="submit" value="next" >
</form>
change your button type to button. your browser submits first.
var submit = document.getElementById("submit");
submit.addEventListener("click",myPage);
function myPage(){
//location.replace("file.html"); // here this is working
var name=document.formId.nameRadio.value;//name="abc"
alert(name);
if (name=="abc"){
location.replace("file.html");//but here not
}
}
<form id="formId" name="formId" >
<label>sth </label><br><br>
<label for="name"> name </label>
<input type="text" id="name" name="name" required>
<fieldset>
<legend>sth</legend>
<ul class="class-radio" >
<li> <input type="radio" name="nameRadio" id="abc" value="abc" required><label for="abc">abc</label></li>
<li> <input type="radio" name="nameRadio" id="cdf" value="cdf"><label for="cdf">cdf</label></li>
</ul>
</fieldset>
<input id="submit" type="button" value="next" >
</form>
You can stop the usual form submission by adding preventDefault() to your onClick function.
var submit = document.getElementById("submit");
submit.addEventListener("click", myPage);
function myPage(e) {
//prevent form submission
e.preventDefault();
var name = document.getElementById('formId').nameRadio.value;
if (name == "abc") {
location.replace("file.html");
}
}
<form id="formId" name="formId">
<label>sth </label><br><br>
<label for="name"> name </label>
<input type="text" id="name" name="name" required>
<fieldset>
<legend>sth</legend>
<ul class="class-radio">
<li> <input type="radio" name="nameRadio" id="abc" value="abc" required><label for="abc">abc</label></li>
<li> <input type="radio" name="nameRadio" id="cdf" value="cdf"><label for="cdf">cdf</label></li>
</ul>
</fieldset>
<input id="submit" type="submit" value="next">
</form>
It seems that you want more control over the form submit.
You can change the input type from submit to button; Also rename that button to avoid confusion with submit method of the form.
You can also simplify the code, by using the click event directly on the input.
Here is something you can try:
<html>
<body>
<form id="formId" name="formId">
<label>sth</label><br><br>
<label for="name">name</label>
<input type="text" id="name" name="name" required>
<fieldset>
<legend>sth</legend>
<ul class="class-radio">
<li><input type="radio" name="nameRadio" id="abc" value="abc" required><label for="abc">abc</label></li>
<li><input type="radio" name="nameRadio" id="cdf" value="cdf"><label for="cdf">cdf</label></li>
</ul>
</fieldset>
<input id="btnSubmit" type="button" value="next" onclick="mySubmit()">
</form>
<script>
function mySubmit()
{
var name = document.formId.nameRadio.value;
if (name == "abc"){
location.replace("file.html");
} else {
// Submit a form
document.formId.submit();
}
}
</script>
</body>
</html>

Checkbox not display element when checked in meteor

I am working in meteor and am trying to display a block of code when a checkbox is checked. I am new to JS and jquery, but I have research different ways of writing the JS. This is what I came up with:
<div class="recipient">
<div class="toRecipient-container">
<label class="toRecipient">TO:</label>
<input class="toRecipient" type="text" size="45">
</div>
<br>
<div id="checkbox-container" class="checkbox-container">
<label for="newClient">New Client
<input id="newClient" class="newInfo" type="checkbox" onclick="toggle()"></label>
<label for="newBilling" style="padding-left: 20px;">New Billing
<input id="newBilling" class="newInfo" type="checkbox"></label>
</div>
</div>
<div id="billingDetails-container" class="billingDetails-container">
<div class="billingDetails">
<label>Billing Contact:</label>
<input class="billingContact" type="text" size="45">
<label>Billing Phone:</label>
<input class="billingPhone" type="text" size="45">
<div>
<label>Billing Address:</label>
<input class="billingAddress" type="text" placeholder="Street Address" size="45">
<input class="billingAddress" type="text" placeholder="City" size="45">
<input class="billingAddress" type="text" placeholder="State" size="45">
<input class="billingAddress" type="text" placeholder="Zip Code" size="45">
</div>
<label>Billing Email:</label>
<input class="billingEmail" type="text" size="45">
</div>
</div>
And my JS:
Template.InvoicePage.onCreated(function () {
this.state = new ReactiveVar();
});
Template.InvoicePage.helpers({
toggle: ()=>{
var checkBox = document.getElementById("newClient");
var displayBlock = document.getElementById("billingDetails-container");
if (checkBox.checked == true) {
displayBlock.style.display = "block";
} else {
displayBlock.style.display = "none";
}
},
});
Template.InvoicePage.events({
'change #newClient'(event, instance) {
instance.state.set('newClient', event.target.checked)
},
});
When I check the box, I get an error that 'toggle' is undefined. Should this be a template event instead of a helper? What am I missing?
I've never done anything with meteor. There is a lot of different frameworks listed on the website. I'm not sure which one you use (if any). You can't possibly use angular, react and vuejs all at the same time.
Unless I'm wrong and there is a particular reason for the whole
Template.InvoicePage.helpers({...});
simply do
function toggle() {
var checkBox = document.getElementById("newClient");
var displayBlock = document.getElementById("billingDetails-container");
if (checkBox.checked == true) {
displayBlock.style.display = "block";
} else {
displayBlock.style.display = "none";
}
}
It has nothing to do with a framework. Just vanilla javascript and html.
I believe you are trying to show the billingDetails-container when the user selects the New-Client check-box. If that is correct, the below should work
HTML
<div class="recipient">
<div class="toRecipient-container">
<label class="toRecipient">TO:</label>
<input class="toRecipient" type="text" size="45">
</div>
<br>
<div id="checkbox-container" class="checkbox-container">
<label for="newClient">New Client
<input id="newClient" class="newInfo" type="checkbox"></label>
<label for="newBilling" style="padding-left: 20px;">New Billing
<input id="newBilling" class="newInfo" type="checkbox"></label>
</div>
</div>
{{#if showBillingDetails}}
<div id="billingDetails-container" class="billingDetails-container">
<div class="billingDetails">
<label>Billing Contact:</label>
<input class="billingContact" type="text" size="45">
<label>Billing Phone:</label>
<input class="billingPhone" type="text" size="45">
<div>
<label>Billing Address:</label>
<input class="billingAddress" type="text" placeholder="Street Address" size="45">
<input class="billingAddress" type="text" placeholder="City" size="45">
<input class="billingAddress" type="text" placeholder="State" size="45">
<input class="billingAddress" type="text" placeholder="Zip Code" size="45">
</div>
<label>Billing Email:</label>
<input class="billingEmail" type="text" size="45">
</div>
</div>
{{/if}}
JS
Template.InvoicePage.events({
'change #newClient'(event, instance) {
instance.state.set({
'newClient': event.target.checked //Here, we are set the newclient property of state object based on client's selection.
});
}
});
Template.InvoicePage.helpers({
showBillingDetails() {
const state = Template.instance().state.get();
return state && state.newClient; //Here, we use the newclient property of state to decide whether or not to display the billingDetails-container
}
});

When I push an object in array it remains empty

Whenever my form is submitted nothing happens and when I check my array on
the console it remains empty. In order to target values of input I need to put it in a function I also use return in function but nothing happens. Actually I want user data collected in object and push into array whenever I click on submit button...
var labelsarray = document.getElementsByTagName("label");
var inputsarray = document.getElementsByTagName("input");
var array = [];
function subm() {
var users = {
FirstName: inputsarray[0].value,
LastName: inputsarray[1].value,
UserName: inputsarray[2].value,
Password:  inputsarray[3].value,
DateofBirth: inputsarray[4].value,
Age: inputsarray[5].value,
Gender: inputsarray[6, 7].checked,
Purpose: inputsarray[8, 9, 10].checked
};
array.push(users);
}
<div>
<center>
<form method="post" onsubmit="subm();">
<label for="fname">First Name:</label> 
<input type="text" id="fname" />
<br/>
<label for="lname">Last Name:</label> 
<input type="text" id="lname" />
<br/>
<label for="uname">User Name:</label> 
<input type="text" id="uname" />
<br/>
<label for="pass">Password:</label>  
<input type="text" id="pass" />
<br/>
<label for="dob">Date of Birth:</label>  
<input type="date" id="dob" />
<br/>
<label>Age:</label>     
<input type="text" id="age" />
<br/>
<span>Gender:</span>     
<input type="radio" name="gender" id="male" />
<label for="male">Male</label>
<input type="radio" name="gender" id="female" />
<label for="female">Female</label>
<br/>
<p>For what purpose(s) you are making account?</p>
<input type="checkbox" id="app" name="purpose" value="storingapps" />
<label for="app">Storing Apps</label>
<input type="checkbox" id="site" name="purpose" value="storingsites" />
<label for="site">Storing Sites</label>
<input type="checkbox" id="fun" name="purpose" value="fun" />
<label for="fun">Fun</label>
<br/>
<input type="submit" value="Submit" class="button" />
</form>
</center>
</div>
When you push the submit button, you start the form submission process.
First the onsubmit function runs. This modifies your array.
Then the form submits and loads a new page.
This is (presumably) the same page that the user is already looking at. It's a fresh copy of it though, so it doesn't contain the array from the old version of it.
You can return false; at the end of the onsubmit function to prevent form submission.
Modern code would use addEventListener (introduced about two decades ago) and call the preventDefault method of the event object.
document.querySelector("form").addEventListener("submit", subm);
function subm(event) {
event.preventDefault();
// etc
}

jQuery to populate array-named form fields based on first entered text box value

I have a form with variable number of inputs as an array
<form>
<label for="same">all the same as first?</label>
<input type="text" id="foo[1]" name="foo[1]" value="" />
<input type="text" id="foo[2]" name="foo[2]" value="" />
<input type="text" id="foo[3]" name="foo[3]" value="" />
<input type="text" id="foo[4]" name="foo[4]" value="" />
<input type="text" id="foo[5]" name="foo[5]" value="" />
</form>
The idea is when i put some value in the first field (foo[1]) i need the jQuery or Javascript copy the value from #foo[1] into #foo[2], #foo[3], etc depending on the array.
Do you need following behavior :
$(document).ready(function(){
$("input[id^=foo\\[]").prop("disabled",true); //disable all elements first
$("input#foo\\[1\\]").prop("disabled",false); //then enable the first one
$("input#foo\\[1\\]").change(function(){
var source = $(this);
var currentVal = $(source).val();
$("input[id^=foo\\[]").each(function(){
if(!$(this).is(source))
$(this).val(currentVal);
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form>
<label for="same">all the same as first?</label>
<input type="text" id="foo[1]" name="foo[1]" value="" />
<input type="text" id="foo[2]" name="foo[2]" value=""/>
<input type="text" id="foo[3]" name="foo[3]" value=""/>
<input type="text" id="foo[4]" name="foo[4]" value=""/>
<input type="text" id="foo[5]" name="foo[5]" value=""/>
</form>
$('input').on('input', function(){
$(this).siblings().val($(this).val());
});
Couldn't tell if you just wanted the first or all. If just the first, you can target with an id or jQuery.
$('input').eq(0).on('input', function(){});
Something like this
HTML
<form>
<label for="same">all the same as first?</label>
<input type="text" id="foo[1]" name="foo[1]" value="" />
<input type="text" id="foo[2]" name="foo[2]" value="" />
<input type="text" id="foo[3]" name="foo[3]" value="" />
<input type="text" id="foo[4]" name="foo[4]" value="" />
<input type="text" id="foo[5]" name="foo[5]" value="" />
</form>
JavaScript
$("input[id=foo\\[1\\]").on("input", function (){
$(this).siblings().val($(this).val());
});
And if you want the other to be readonly:
$("input[id^=foo\\[]:not([id=foo\\[1\\]])").attr("readonly", "readonly");

create a textarea dynamically with javascript

I want create textarea with javascript when I click on the "yes" radio button in a appropriate div place with id?
<div class="controls">
<input type="radio" name="name" id="optionsRadios" value="no" checked><b>NO</b>
<input type="radio" name="name" id="optionsRadios" value="yes" ><b>YES</b>
</div>
<div id="positiontext"></div>
help me
Instead of creating & removing the textarea, I would set its display like
function nameChange(el) {
document.getElementById('positiontext').style.display = el.value == 'yes' ? '' : 'none';
}
<div class="controls">
<input type="radio" name="name" id="optionsRadios" value="no" onchange="nameChange(this)" checked /><b>NO</b>
<input type="radio" name="name" id="optionsRadios" value="yes" onchange="nameChange(this)" /><b>YES</b>
</div>
<div id="positiontext" style="display: none;">
<textarea name=""></textarea>
</div>
Try this by adding the onclick event to the yes radio button,
<input type="radio" name="name" id="optionsRadios" value="yes" onchange="addDIV()">
In javascript,
<script>
function addDIV() {
document.getElementById('positiontext').innerHTML = "<input type='textarea' name='myText' />"
}
</script>
FIDDLE DEMO
i think you should need to do this by using gome function which are specially made for this:
<div class="controls">
<input type="radio" name="name" id="optionsRadios" value="no" checked><b>NO</b>
<input type="radio" name="name" id="optionsRadios" value="yes" onclick="addtxt();" ><b>YES</b>
</div>
<div id="positiontext"></div>
javascript:
var addtxt = function(){
var positiontext(parent) = document.getElementById("positiontext");
var textarea(child) = document.createElement("textarea");
textarea(child).addAttribute("style", "(some properties)") //there are other ways also to add some attribute but for now use this
positiontext(parent) .appendChild("textarea(child)")
}

Categories

Resources