Updating header based on radio, checkbox and select input text - javascript

I have the following form on my page JSBin
Each option on the page has a text associated with it(like option1: R50, where R is the currency) with the total price of the product is on top of the page (R500). I want that price to be updated based on the option text value. Like selecting weight- 30kg should add R50 to the total value at the top and update it and deselecting it should update again. I need to use Javascript take the price from the option text-split the currency from the numerical value-add id to the base price; but I can't figure out how to do it and for all the three option types.
html
<div class="col-sm-4">
<ul class="list-unstyled">
<li id="thisIsOriginal">
<h2>R500</h2>
</li>
</ul>
<div id="product">
<hr>
<h3>Available Options</h3>
<div class="form-group required">
<label class="control-label">Radio</label>
<div id="input-option218">
<div class="radio">
<label>
<input type="radio" name="option[218]" value="5">
Small (+R12)
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="option[218]" value="6">
Medium (+R45)
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="option[218]" value="7">
Large (+R50)
</label>
</div>
</div>
</div>
<div class="form-group required">
<label class="control-label">Checkbox</label>
<div id="input-option223">
<div class="checkbox">
<label>
<input type="checkbox" name="option[223][]" value="8">
Checkbox 1 (+R50)
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="option[223][]" value="9">
Checkbox 2 (+R44)
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="option[223][]" value="10">
Checkbox 3 (+R22)
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="option[223][]" value="11">
Checkbox 4 (+R65)
</label>
</div>
</div>
</div>
<div class="form-group required">
<label class="control-label" for="input-option227">weight</label>
<select name="option[227]" id="input-option227" class="form-control">
<option value=""> --- Please Select --- </option>
<option value="19">30kg (+R50)</option>
<option value="17">10kg</option>
<option value="18">20kg (+R24)</option>
</select>
</div>

You could use jQuery, and change the text like this:
$(".thisIsOriginal h2").text(//new value)
Now that you know this, you can achieve what you want by doing some basic if/else statements based on a "change" event in your form groups (see Monitoring when a radio button is unchecked)

Here you need to attach onchnage handler on all the controls.
I have done for the radio button. You can try similar things for other contols.
http://jsbin.com/garibomohi/1/edit?html,js,output
Hope this helps you out.

Related

One div's checkbox input affecting another div's checkbox input

I am using basic HTML to create two different divs, each having some checkboxes as options.(Basically I'm creating a test module). I have checked some checkboxes of the first div. Now, when I go to the second div, and click on the text i.e the label of some checkboxes, the corresponding checkboxes of the first div are getting unchecked. This should not happen. Please help me out
Sorry guys. Did not post the code. These are two different divs
First One:
<div class="form-check">
<input class="form-check-input" type="checkbox" name="csuite_2" id="opB" value="B">
<label class="form-check-label" >
Daily
</label>
</div>
<br/>
<div class="form-check">
<input class="form-check-input" type="checkbox" name="csuite_2" id="opC" value="C">
<label class="form-check-label" >
Once a month
</label>
</div>
Second One
<div class="form-check">
<input class="form-check-input" type="checkbox" name="expectation_3" id="opB" value="B">
<label class="form-check-label" >
Fund Manager
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" name="expectation_3" id="opD" value="D">
<label class="form-check-label" >
Launching my own startup
</label>
</div>
<br/>
I have tried not wrapping the label to the checkbox and it works fine. But is there a way I can do it by wrapping the label and stopping this thing from happening?
I hope this is your problem.
Basically its because of the similar id & for.
As you can see in the below code I have used Bike & Car as id in "div1" and the same id's are being used in the "div2". So make sure to give a unique id and corresponding for values.
<!DOCTYPE html>
<html>
<body>
<div class="div1">
<label for="Bike">
<input id="Bike" type="checkbox"> I have a bike
</label><br>
<label for="Car">
<input id="Car" type="checkbox"> I have a car
</label><br>
<div>
<br><br><br>
<div class="div2">
<label for="Bike">
<input id="Bike" type="checkbox"> I have a bike
</label><br>
<label for="Car">
<input id="Car" type="checkbox"> I have a car
</label><br>
<div>
</body>
</html>

Is there a way to find the closest element that isn't label and does not have a class

Giving an element, I need to find the closest element that isn't label and isn't an element that has a class of radio or checkbox
Here is what I have done
$parent = element.closest('div');
if($parent.hasClass('checkbox') || $parent.hasClass('radio'))
{
$parent = $parent.parent();
}
error.appendTo($parent);
The above code works for the most part except it only looks for a div not any element.
Also, is there a shorter way to write this code where I can avoid the condition statement? Perhaps, use the find() method to search but not sure how to use it.
Here is the html code that I am trying to search
<div class="form-group has-error">
<label for="gender" class="col-md-2 control-label">Gender</label>
<div class="col-md-10">
<div class="radio">
<label for="gender_">
<input id="gender_" required="1" name="gender" value="" aria-required="true" aria-describedby="gender-error" type="radio">
Please select your gender
</label>
</div>
<div class="radio">
<label for="gender_1">
<input id="gender_1" required="1" name="gender" value="1" aria-required="true" type="radio">
Male
</label>
</div>
<div class="radio">
<label for="gender_2">
<input id="gender_2" required="1" name="gender" value="2" aria-required="true" type="radio">
Female
</label>
</div>
</div>
</div>
I want to be able to appent to the div with the class "col-md-10".
Not it is not always a div or event the same class which is why I want to search for the closest element that isn't label of checkbox or radio class
Use :not(input, label, .checkbox, .radio) in the .closest() selector. I've added the input because .closest() starts the check with the element it's been used on (the input).
Note: If you know that you are looking for an element with the .col-md-10 class, you can use .closest('.col-md-10').
var result = $('input').closest(':not(input, label, .checkbox, .radio)');
console.log(result[0]);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group has-error">
<label for="gender" class="col-md-2 control-label">Gender</label>
<div class="col-md-10">
<div class="radio">
<label for="gender_">
<input id="gender_" required="1" name="gender" value="" aria-required="true" aria-describedby="gender-error" type="radio">
Please select your gender
</label>
</div>
<div class="radio">
<label for="gender_1">
<input id="gender_1" required="1" name="gender" value="1" aria-required="true" type="radio">
Male
</label>
</div>
<div class="radio">
<label for="gender_2">
<input id="gender_2" required="1" name="gender" value="2" aria-required="true" type="radio">
Female
</label>
</div>
</div>
</div>

Default checked button

Below code is html produced from opencart 2
No radio button is selected when loading page.
How can i have selected the Value="2" as default checked. (javascript or CSS)
<div id="payment-custom-field1" class="form-group custom-field" data-sort="0">
<label class="control-label">Invoice</label>
<div id="input-payment-custom-field1">
<div class="radio">
<label>
<input type="radio" value="2" name="custom_field[1]">
Receipt
</label>
</div>
<div class="radio">
<label>
<input type="radio" value="1" name="custom_field[1]">
Invoice
</label>
</div>
</div>
</div>
Solution with javascript
(function() {
document.getElementsByName("custom_field[1]")[0].checked=true;
})();
<input type="radio" id="sample" value="2" name="custom_field[1]">
Receipt
</label>
Using javascript:
document.getElementById("sample").checked = true;
Using html:
You can simply add checked attribute to your html element
Using the element name:
(function() {
document.getElementsByName("custom_field[1]")[0].checked=true;
})();
https://jsfiddle.net/pandiyancool/vb73q59w/
You can simply add checked attribute
<input type="radio" value="2" name="custom_field[1]" checked>
The solution with javascript was the below code:
document.getElementsByName("custom_field[1]")[0].checked=tru‌​e;
Thank you Pandiyan Cool

How to change the checked value using javascript

I am trying to change the radio button that is checked by default and I cannot access the html to do so, but I can use javascript. Here is the html
<div class="row" id="courseSearchAvailability">
<div class="col-xs-12">
<fieldset class="accessibility">
<legend>
Filter By Course Availability
</legend>
<div class="radio">
<label>
<input type="radio" name="courseSearch.filterString" value="availforreg" id="searchAvailable">
Search scheduled courses
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="courseSearch.filterString" value="all" checked="checked" id="searchAll">
Search all courses
</label>
</div>
</fieldset>
</div>
</div>
I want to make the searchAvailable the default and here is the javascript that I'm using and it doesn't seem to work. I'm new to this so be nice lol.
var sel = document.getElementById('searchAvailable');
sel.searchALL.removeAttribute('checked');
sel.searchAvailable.setAttribute('checked', 'checked');
document.forms[0].reset();
Just these two lines should be enough:
var sel = document.getElementById('searchAvailable');
sel.checked = true;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row" id="courseSearchAvailability">
<div class="col-xs-12">
<fieldset class="accessibility">
<legend>Filter By Course Availability</legend>
<div class="radio">
<label>
<input type="radio" name="courseSearch.filterString" value="availforreg" id="searchAvailable">Search scheduled courses</label>
</div>
<div class="radio">
<label>
<input type="radio" name="courseSearch.filterString" value="all" checked="checked" id="searchAll">Search all courses</label>
</div>
</fieldset>
</div>
</div>

checked for angularjs not working properly for radio type input field

I have a simple form for gathering text and choice data like -
HTML Form -
<div class="form-group">
<label class="col-sm-2 control-label">Event Name<span class="asterisk">*</span></label>
<div class="col-sm-1">
<input type="text" placeholder="Music Concert at Las Vegas" ng-model="event.name" required="required" class="form-control">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Is Active<span class="asterisk">*</span></label>
<div class="col-sm-1">
<input type="radio" name="is_active" ng-model="event.is_active" value="yes" checked="checked" class="form-control"> Yes
</div>
<div class="col-sm-3">
<input type="radio" name="is_active" ng-model="event.is_active" value="no" class="form-control"> No
</div>
</div>
And in my controller -
$scope.event.is_active = "yes";
Now the problem I am facing is -
If I remove the $scope.event.is_active = "yes" from the controller "Yes" option should remain works due to the presence of checked="checked" HTML attribute set, but it won't.
Now If I remove the checked="checked" attribute so whether do I have $scope.event.is_active = "yes" in my controller or not it won't work i.e not of the option is pre checked.
Let me know what I am missing with here with the angular way.

Categories