I am currently trying to make an entire Bootstrap input-group to be able to clickable so that the checkbox will be clicked when any part of the input-group is clicked, and it should be able to uncheck the checkbox as well when the input-group is clicked. The current code I have working right now is this:
$(document).ready(function(){
$('.input-group,#opt_in').click(function(){
if ($('#opt_in').is(':checked')) {
$('#opt_in').prop('checked', false);
}
else{
$('#opt_in').prop('checked', true);
}
});
});
<div class="input-group mb-3">
<div class="input-group-prepend">
<div class="input-group-text">
<input type="checkbox" name="opt_in" id="opt_in" value="true">
<label class="form-check-label">I CONFIRM</label>
</div>
</div>
<p class="form-control" aria-label="Text input with checkbox" id="consent">that all of my info is accurate and consent to be called as provided above</p>
</div>
But for some reason that I am unaware of, it's not working. Any reason why? I'm using jQuery here but I can also use vanilla javascript. I'm just not sure where my code is freaking out!
Related
I am using WEBDRIVERIO framework. I have a dropdown in this html syntax. I tried to expand it using ID=question-3
After that I tried all the options using SELECT by options, values, text. But as it is obviously not SELECT DROPDOWN, none worked. I tried to click the locator based on the input or label option, but getting "element not visible" error message.
<div id="question-3" class="question ">
<div class="single-dropdown">
<input type="text" name="input-3" class="js-single-selection" placeholder="gender" data-question-id="3" data-index="3" readonly="" style="width: 77px;">
<div class="single-select-container" style="display: none;">
<div class="single-select-item" data-image="">
<label for="option-0-3" data-open="exampleModal1" class="option-0-3-modal">man</label>
<input type="checkbox" id="option-0-3" data-answer-type="single" data-question-id="3" value="man" data-index="3">
</div>
<div class="single-select-item checked" data-image="">
<label for="option-1-3" data-open="exampleModal1" class="option-1-3-modal">woman</label>
<input type="checkbox" id="option-1-3" data-answer-type="single" data-question-id="3" value="woman" data-index="3">
</div>
</div>
</div>
.</div>
Since html shows an input tag. I would suggest to :
1. type the value in that input box (placeholder="gender")
2. wait for options to appear (Label tag)
3. click the appeared item.(Appeared label)
Also if your scenario fails please provide stack trace for the failure.
I suggest clicking the Select Item (the input in this case), then implementing a wait (See docs: http://webdriver.io/api/utility/waitForVisible.html). And then clicking the dropdown item after you have waited for it to be visible on the screen. Like so...
browser.click(selectItem);
browser.waitForVisible(dropdownItem);
browser.click(dropdownItem);
I'm trying to disable a materializecss button if the value of a particular input in a form is blank, but I can only successfully disable it using ng-disable if the form is $pristine, not on the input.
This works:
data-ng-disabled="mainDetailsForm.$pristine"
but this doesn't:
data-ng-disabled="mainDetailsForm.niNumberInput.$pristine"
and this doesn't:
data-ng-disabled="niNumberInput.$pristine"
-
JSFiddle: https://jsfiddle.net/6qswosh8/.
-
Full HTML:
<form id="mainDetailsForm" name="mainDetailsForm">
<div class="row">
<div input-field class="input-field col-xs-12 col-md-4">
<input id="niNumberInput" name="niNumberInput" type="text" class="validate" pattern=".{9}" placeholder="National Insurance Number">
<label for="niNumberInput" data-error="National Insurance number must be 9 characters long">National Insurance Number</label>
</div>
<div input-field class="input-field col-xs-12 col-md-1">
<button data-ng-disabled="mainDetailsForm.niNumberInput.$pristine" class="btn button waves-effect"><span class="fa fa-search"></span>Verify</button>
</div>
</div>
</form>
To access the properties of individual inputs through the form you need to give the input an ng-model. The ng-model property is what binds it. I updated your jsfiddle https://jsfiddle.net/dougefresh/6qswosh8/1/ ( I also had to get angular working properly in the fiddle).
<input id="niNumberInput" name="niNumberInput" ng-model="niNumberInput" type="text" class="validate" pattern=".{9}" placeholder="National Insurance Number">
This small line in the docs is important "To allow styling of form as well as controls, ngModel adds these CSS classes:" It lists $dirty, $pristine, etc.. The docs specifically say they are bound to ng-model.
https://docs.angularjs.org/guide/forms
I am trying to set up a set of radio buttons using Bootstrap in javascript
The code I am trying is:
var viewedFilterButtons = $("<div>").addClass("btn-group").attr("data-toggle", "buttons");
viewedFilterButtons.append($("<label>").addClass("btn").addClass("btn-primary").append($("<input>").attr("id", "viewed-important").attr("type","radio").attr("name","viewed-filter").attr("value","important").attr("autocomplete","off").append($("<label for=\"viewed-important\">").text("Important"))));
viewedFilterButtons.append($("<label>").addClass("btn").addClass("btn-primary").append($("<input>").attr("id", "viewed").attr("type","radio").attr("name","viewed-filter").attr("value","viewed").attr("autocomplete","off").text("Reviewed")));
(note that I'm trying 2 different things to get the text into the button -- in the first input I'm embedding a label and in the second I'm just trying to set the text of the input. Neither is working right now.)
This generates the following HTML:
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input id="viewed-important" name="viewed-filter" value="important" autocomplete="off" type="radio">
<label for="viewed-important">Important</label>
</input>
</label>
<label class="btn btn-primary">
<input id="viewed" name="viewed-filter" value="viewed" autocomplete="off" type="radio">Reviewed
</label>
</div>
Note that the input doesn't seem to be closed in the second case. I'm getting this HTML from the Web Console Inspector in Firefox.
What I'm getting is a set of tiny radio buttons with no text. The toggle behavior works fine.
What am I missing here? When I manually generate a set of labels for radio buttons like this directly in the HTML it works fine.
<label class="btn btn-primary">
<input id="viewed" name="viewed-filter" value="viewed" autocomplete="off" type="radio">Reviewed</input>
</label>
This is because you append the <label> inside the <input/>.
You're trying to do this :
<input> <label>Important</label> </input>
However, <input/> is a self-closing tag, not a container like a <div>.
You should design your structure like this :
<label> <input/> Important </label>
input elements cannot have children w3 specification. Put the label after it.
var viewedFilterButtons = $("#mainDiv").addClass("btn-group").attr("data-toggle", "buttons");
var inputElem = $("<input>").attr("id", "viewed-important").attr("type","radio").attr("name","viewed-filter").attr("value","important").attr("autocomplete","off");
viewedFilterButtons.append(inputElem)
.append($("<label for=\"viewed-important\">").addClass("btn").addClass("btn-primary").text("Important"));
<link href="https://github.com/twbs/bootstrap/blob/v4-dev/dist/css/bootstrap.css" rel="stylesheet"/>
<div id="mainDiv"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
I'm using bootstrap and I find it confusing when trying to extract the label name. How do I get the selected label text? (e.g. Furniture or Fruits)
<div class="input-group">
<span class="input-group-addon">
<input type="radio" name="radioGroup" value="myval1" /></span>
<input class="form-control" value="Furniture" disabled>
</div>
<div class="input-group">
<span class="input-group-addon">
<input type="radio" name="radioGroup" value="myval2" /></span>
<input class="form-control" value="Fruits" disabled>
</div>
I tried these but did not give the label text:
alert($( $(":radio[name=radioGroup]:checked").prop("labels") ).text());
alert($('input[name="radioGroup"]:checked').text());
alert($('input[name="radioGroup"]:checked + label').text());
In your scenario you just need to get the value of selected radio button.
For your better understanding have a lookto this JS Fiddle link
You can use the selected DOM element as::
alert($("input[name='radioGroup']:checked").closest(".input-group").find(".form-control").val())
Try using .val() then follow the tree from the checkbox up to its containing div and back down to the value in the associated input.
alert($("input[name=radioGroup]:checked").parent(".input-group-addon").parent(".input-group").children("input.form-control").val());
You can try this...
$('input[name="radioGroup"]:checked').parents('.input-group').find('.form-control').val()
OR
$('input[name="radioGroup"]:checked').parent().next().val()
I'm struggling to find a solution for this anywhere on Google, maybe i'm searching incorrectly but thought I would come and ask the ever trustworthy members of StackOverflow.
I'm wanting to use an html button to check an html check box. There reason I don't want to use the check box will be purely for accessibility reasons because the application i'm developing will be on a terminal and used as via a touch-screen so an HTML check box is too small.
The only issue is that the list of check box's is dynamic as it is populated using an SQL query. Obviously however I can do the same for creating HTML buttons.
Im guessing it will require JavaScript (which I'm perfectly happy using now as I'm finding a lot of the functionality I need in this application needs JavaScript) to do this functionality.
So to clarify: I want to click on a button, say it has a value of "Fin Rot" and that checks the check box with the value "Fin Rot". And then if I clicked another button, say it has a value of "Ich" then it also checks the check box with the value "Ich"
While you can use a button and JavaScript for this, might I suggest a much simpler approach? Just use a <label> that's designed just for this, and style it like a button, for example:
<input type="checkbox" id="finRot" name="something" value="Fin Rot">
<label for="finRot">Some text here, could be "Fin Rot"</label>
or (if you don't want to use id on checkbox and for on label):
<label>
<input type="checkbox" name="something" value="Fin Rot">
Some text here, could be "Fin Rot"
</label>
....then with CSS you can hide the checkbox if needed, but either are clickable to toggle the checkbox.
You can test out a demo here, also showing some button-ish CSS on the label if needed.
This example uses a button to toggle the checkbox on/off.
http://jsfiddle.net/DnEL3/
<input type="checkbox" id="finRot" name="something" value="Fin Rot">
<button onclick="document.getElementById('finRot').checked=!document.getElementById('finRot').checked;">Fin Rot</button>
How about a HTML solution.
<p><input type="checkbox"
value="Another check box"
name="cboxwithlabel" id="idbox"><label
for="idbox">Another
checkbox</label></p>
<label> Creates label for the checkbox or radio buttons.
If you are looking for bootstrap solution, I just created this:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-md-6">
<!-- Here starts the component -->
<label class="input-group">
<span class="input-group-addon">
<input type="checkbox">
</span>
<span class="form-control btn btn-primary">
Click to toggle checkbox
</span>
</label>
<!-- Here ends the component -->
</div>
</div>
</div>