Sorry if this seems a simple question but I can't figure it out or find a solution anywhere. I am new to angularJS and have a webpage which has two radio buttons and a "Details" button.
Obviously the website is written in angularJS and also using twitter bootstrap.
The question is a "Has the details been checked?" with a "Yes" and "No" radio button.
Clicking the "Details" button opens a modal with a "Close" button on it and details in it.
What I'm after is for these radio buttons to be disabled until the "Details" button has been clicked or once the "Close" button has been clicked from the modal (which ever is the best solution).
The only code I can provide is my HTML. I need it to be done without using JQuery.
<div class="row" style="margin-bottom: 5px">
<label class="col-sm-6 col-md-5" style="padding-top: 10px;">Have sufficient checks been performed?</label>
<div class="col-sm-2" style="padding-top: 6px;">
<input name="amlcheckgroup" type="radio" ng-model="withdrawalitems.checkscompleted" value="Yes" required />Yes
<input name="amlcheckgroup" type="radio" ng-model="withdrawalitems.checkscompleted" value="No" required />No
</div>
<div class="col-sm-2" style="padding-left: 0px">
<button type="button" class="btn btn-success" ng-click="opendatachecksmodal()" title="Click to see details.">Data Checks</button>
</div>
</div>
You have to look for the ngDisabled directive.
<input type="radio" ng-disabled="!enableRadioButton">
<button ng-click="enableRadioButton = true">Details</button>
Edit
Since you added a code example, something like this should do the trick:
<div class="row" style="margin-bottom: 5px">
<label class="col-sm-6 col-md-5" style="padding-top: 10px;">Have sufficient checks been performed?</label>
<div class="col-sm-2" style="padding-top: 6px;">
<input name="amlcheckgroup" type="radio" ng-model="withdrawalitems.checkscompleted" value="Yes" required ng-disabled="enableRadioButtons" />Yes
<input name="amlcheckgroup" type="radio" ng-model="withdrawalitems.checkscompleted" value="No" required ng-disabled="enableRadioButtons" />No
</div>
<div class="col-sm-2" style="padding-left: 0px">
<button type="button" class="btn btn-success" ng-click="opendatachecksmodal()" title="Click to see details.">Data Checks</button>
</div>
</div>
Add $scope.enableRadioButtons = true; to the opendatachecksmodel() method.
You could set the flag true when you close the modal as well.
Related
I am having difficulty figuring out the following error:
Uncaught TypeError: Cannot read property 'split' of undefined
The HTML:
<div id="content" class="col-xs-12 col-sm-12">
<p>Please select your preferred payment method.</p>
<div class="radio">
<label>
<input type="radio" name="payment_method" value="authorizenet" checked="checked">
Credit Card/Debit Card (Authorize.Net) </label>
</div>
<div class="radio">
<label>
<input type="radio" name="payment_method" value="affirm">
Credit Card/Debit Card (Affirm) </label>
</div>
<p><strong>Add comments about your order.</strong></p>
<p>
<textarea name="comment" rows="8" class="form-control"></textarea>
</p>
<div class="cart-module">
<div class="cart-content">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<h4 for="input-coupon">Coupon Code</h4>
<div class="input-group">
<input type="text" name="coupon" value="" placeholder="Coupon Code" id="input-coupon" class="form-control">
<span class="input-group-btn">
<input type="button" value="Apply" data-code="coupon" data-loading-text="Loading..." class="btn btn-primary">
</span>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<h4 for="input-voucher">Gift Certificate Code</h4>
<div class="input-group">
<input type="text" name="voucher" value="" placeholder="Gift Certificate Code" id="input-voucher" class="form-control">
<span class="input-group-btn">
<input type="button" value="Apply" data-code="voucher" data-loading-text="Loading..." class="btn btn-primary">
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="buttons">
<div class="pull-right">I have read and agree to the <b>Shipping and Returns</b>. <input type="checkbox" name="agree" value="1">
<input type="button" value="Continue" id="button-payment-method" data-loading-text="Loading..." class="btn btn-primary">
</div>
</div>
The Script:
var newtext = "affirm";
selector = $("input[type=radio][value=affirm]").closest("label");
var line = selector.html().split(">")[0] + ">" + newtext;
selector.html(line);
The Goal:
I have two radio buttons on the checkout page.
Credit Card/Debit Card (Authorize.Net)
Credit Card/Debit Card (Affirm)
I am unable to edit the HTML directly. Thus rebuilding the html line with the above code to give me the output I want. I am trying to change the HTML text of the 2nd radio input to just "Affirm".
The script works in a fiddle, but not on the page.
I once encountered a similar bug when trying to maintain a page without access to the source files. I was using jQuery to attempt to delete a p element sentence but was coming up undefined because it was running on the homepage before the application even got to generate that part of the html. It was an SPA. I fixed it by adding a listener on the document to the router something along like this: $(document).on("pageshow", "#checkoutPage", function() {//your jquery function});
I tried it both on CodePen and locally with VS Code and both time I got the intended effect. Have you tried maybe making sure youre using the right version of JQuery and that is linked to the html in the proper oder, also debugging via console logs? See below:
CodePen
enter code here
I have a form that implements 3 buttons. Each button offers a different option for the user to select. The page only renders two of the buttons, the last one is hidden. I want to change the ones that display depending on the radio button input.
This is the HTML document that I am working with:
.hidden{
display: none;
}
<label for="pay">Payment Option</label>
<div class="row check">
<div class="col-sm-6">
<input type="radio" id="gcash" name="pay" value="gcash" checked="checked"/>
<label for="gcash" class="pay">Gcash</label>
</div>
<div class="col-sm-6">
<input type="radio" id="walk" name="pay" value="unpaid"/>
<label for="walk" class="pay">Walk In</label>
</div>
</div>
<div class="buttons">
Back
Proceed payment
<input type="submit" class="res-btn hidden" name="btn-submit" value="Submit">
</div>
radio.addEventListener('change', function() {
console.log(this.value)
});
use this handler for getting data of radio
then, find your element and use
element.classList.toggle("hidden");
for toggle class name, which uses in your css
I would like to find a way on how to link bootstrap button classes in the following manner?
<!-- HTML -->
<div class="col-md-6 col-sm-6">
<label class="btn btn-primary">
<input type="checkbox">
<i class="flaticon-groceries"></i>
<span>Grocery</span>
<a>select</a>
</label>
</div>
<div class="col-md-6 col-sm-6">
<label class="btn btn-primary">
<input type="checkbox">
<i class="flaticon-cooking"></i>
<span>Cooking</span>
<a>select</a>
</label>
</div>
<div class="col-md-6 col-sm-6">
<label class="">
<input type="checkbox">
<i class="flaticon-house-cleaning"></i>
<span>Cleaning</span>
<a>select</a>
</label>
</div>
<div class="col-md-6 col-sm-6>
<label class="">
<input type="checkbox" ng-model="mySelfHandyman" >
<i class="flaticon-handyman-1"></i>
<span>Handyman</span>
<a>select</a>
</label>
</div>
<!-- jquery -->
$('input[type="checkbox"]).on('change',function(){
$('input[type="checkbox"]').not(this).prop('checked', false);
});
using input as radio type is not an option. they have to be checkbox. Results that are desired is that when checkbox = true, button (label in this case) should be active and when we select a different checkbox previous button should got to its default state and the current one should be active. Situation also call for only 1 checkbox to be selected at one time. jquery is in place to solve that problem, but I am unable to toggle the buttons between default and active states on checkbox clicks. Currently I have to click on the buttons twice to remove the active class. First click makes the checkbox = true and button class=active, if i click on second checkbox, it makes previous checkbox = false and (this) = true, but it also makes the current button class=active without changing the previous button's class to default.
I would really appreciate any help in this matter.
Thanks
The way to handle an exclusive state is to make all of the objects one state (ex. off)and then go back and change the state of the active one to it's unique state (ex. on). So use jQuery selector :checkbox to make your life easier and this to filter in the checkbox/button that was actually clicked.
Also, I changed the HTML somewhat. It's following the pattern when Bootstrap is properly done.
.container~~~▼
~~~~~~~~~~~.row~~~▼
~~~~~~~~~~~~~~.col-md-6~~~~~~~.col-md-6
The children of a row must add up to x=12, (ex. .col-lg-4, .col-lg-4, .col-lg-4)
SNIPPET
$(':checkbox').on('change', function() {
$(':checkbox').prop('checked', false);
$(this).prop('checked', true);
});
<link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'>
<link href='https://cdnjs.cloudflare.com/ajax/libs/flat-ui/2.3.0/css/flat-ui.min.css' rel='stylesheet'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<main class='container'>
<section class='row'>
<div class="col-md-12 col-sm-12">
<label class="btn btn-primary">
<input type="checkbox">
<i class="flaticon-groceries"></i>
<span>Grocery</span>
<a>select</a>
</label>
<label class="btn btn-primary">
<input type="checkbox">
<i class="flaticon-cooking"></i>
<span>Cooking</span>
<a>select</a>
</label>
</div>
</section>
<section class='row'>
<div class="col-md-12 col-sm-12">
<label class="btn btn-primary">
<input type="checkbox">
<i class="flaticon-house-cleaning"></i>
<span>Cleaning</span>
<a>select</a>
</label>
<label class="btn btn-primary">
<input type="checkbox" ng-model="mySelfHandyman">
<i class="flaticon-handyman-1"></i>
<span>Handyman</span>
<a>select</a>
</label>
</div>
</section>
</main>
I have normal radio buttons that I am using to change looks around the page. And it works perfectly fine. I am using knockout js binding to give it functionality.
Here is the HTML and the JS part all together.
<h4 class="radio-inline" data-bind="visible: loggedIn() == 'true'"><input type="radio" value="Borrow" data-bind="checked: radioSelectedOptionValue">Money1</h4>
<h4 class="radio-inline" data-bind="visible: loggedIn() == 'true'"><input type="radio" value="Invest" data-bind="checked: radioSelectedOptionValue">Money2</h4>
Here is the JS file for the checkedbinding.
self.radioSelectedOptionValue = ko.observable(radioSelectedOptionValue);
All the codes Above work perfectly like it should but now I wanted to make the normal looking radio buttons into proper buttons by using bootstrap js buttons but now the radio buttons do not function anymore.
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary" data-bind="visible: loggedIn() == 'true'">
<input type="radio" value="Borrow" data-bind="checked: radioSelectedOptionValue" >Money1
</label>
<label class="btn btn-primary" data-bind="visible: loggedIn() == 'true'">
<input type="radio" value="Invest" data-bind="checked: radioSelectedOptionValue" > Money2
</label>
</div>
I got an image positioned in container and 3 radio buttons. I would like to add another images appear over the container main image when some of the radio buttons is chosen. Each of the buttons will have different positions of the images shown when they are active.
So far I got that:
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default">
<input type="radio" id="q156" name="quality[25]" value="1" /> 1
</label>
<label class="btn btn-default">
<input type="radio" id="q157" name="quality[25]" value="2" /> 2
</label>
<label class="btn btn-default">
<input type="radio" id="q158" name="quality[25]" value="3" /> 3
</label>
</div>
</div>
</div>
<div class="col-md-8 col-fl">
<div id="img_box">
<img style="width: 100%;" src="img/other/rounded_corners.png" />
</div>
You could add the image sources as data attr. to the radio button.
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default">
<input type="radio" id="q156" name="quality[25]" value="1" data-img="http://placehold.it/350x150/ff0000" /> 1
</label>
<label class="btn btn-default">
<input type="radio" id="q157" name="quality[25]" value="2" data-img="http://placehold.it/350x150/00ff00"/> 2
</label>
<label class="btn btn-default">
<input type="radio" id="q158" name="quality[25]" value="3" data-img="http://placehold.it/350x150/0000ff" /> 3
</label>
</div>
<div class="col-md-8 col-fl">
<div id="img_box"></div>
The img box is empty but size and image are set by css:
#img_box{
width: 350px;
height: 150px;
background: url('http://placehold.it/350x150/ff0000')
}
Then add a event that append a img overlay on click (using source from radio buttons):
$(function(){
$('input[type=radio]').click(function(){
$this = $(this)
$img_box = $('#img_box')
$overlay = $('<img/>').attr('src',$this.data('img'))
$img_box.html('').append($overlay)
});
})
See this example: https://jsfiddle.net/fmytsjv7/1/
You can achieve that using jQuery, and binding event handler to your radio buttons.
Like this one:
$('input:radio[name="quality[25]"]').change(function(){ });
Then add the handler to alter the attributes/css properties of the target image container or the image element directly.
You can use jQuery .css() to alter css properties of your target element
Like:
$("#img_box").css({"height":"100px","width":"100px",background:"red"});
While, you can use jQuery .attr() to alter the attributes of your target element.
Like: (in this case its the img's "src" attribute)
$("#img_box > img").attr("src","path/to/whatever/image");
HERE'S A SAMPLE IN JSFIDDLE
I see that you included jQuery tag in your question, so I assume you are interested in jQuery based solution.