So I've been working on a back-end interface for where I'm interning, and everything's been going smoothly mainly. I made a page where you insert a customer. there's a checkbox to add shipping information, and the fields are hidden, and only shown when the checkbox is ticked. it is also required when its showing. i did the same thing for a Tax Exempt check box, where it hides a field to enter a tax id, and is only required when its checked and showing, otherwise, it isn't required. both of these features work great on pc, and theyre coded exactly the same. However; when i go to try it on mobile, the shipping checkbox works, and drops down the fields to enter the info. Yet, the tax exempt box doesnt show the field to enter the Tax ID.
Shipping html:
<div id="changeShipInputs">
<div class="form-group">
<div class="col-md-12">
<input id="Sstreet" name="Sstreet" type="text" maxlength="150" placeholder="Street Name (required)" class="form-control">
</div>
</div>
<div class="form-group">
<div class="col-md-4">
<input id="Scity" name="Scity" type="text" maxlength="35" placeholder="City (required)" class="form-control">
</div>
<div class="col-md-4">
<input id="Sstate" name="Sstate" type="text" maxlength="35" placeholder="State (required)" class="form-control">
</div>
<div class="hidden-lg hidden-md"> </div>
<div class="col-md-4">
<input id="Szipcode" name="Szipcode" type="text" maxlength="15" placeholder="Zip (required)" class="form-control">
</div>
</div>
</div>
Tax html:
<div id="changeTaxInputs">
<div class="form-group">
<div class="col-md-3">
<input id="taxID" name="taxID" type="text" maxlength="15" placeholder="Tax ID: (required)" class="form-control">
</div>
</div>
</div>
<hr>
<div class="col-xs-12">
<div class="form-group">
<label for="comment">Notes:</label>
<textarea class="form-control" rows="5" maxlength="255" name="comment" id="comment"></textarea>
</div>
</div>
<div class="col-xs-12">
<br>
</div>
Javascript:
var form = $('#myForm'),
checkbox = $('#changeShip'),
chShipBlock = $('#changeShipInputs');
chShipBlock.hide();
checkbox.on('click', function() {
if($(this).is(':checked')) {
chShipBlock.show();
chShipBlock.find('input').attr('required', true);
} else {
chShipBlock.hide();
chShipBlock.find('input').attr('required', false);
}
});
var form = $('#myForm'),
checkbox = $('#changeTax'),
chTaxBlock = $('#changeTaxInputs');
chTaxBlock.hide();
checkbox.on('click', function() {
if($(this).is(':checked')) {
chTaxBlock.show();
chTaxBlock.find('input').attr('required', true);
} else {
chTaxBlock.hide();
chTaxBlock.find('input').attr('required', false);
}
});
The first script is the shipping, the second is the tax.
can anyone tell me why JUST THE TAX BOX wont work on mobile, yet the shipping box works fine on mobile. They both work great on desktop.
Since it's working on JSFiddle correctly, my guess is that maybe a containing div or element is not closed correctly. Compare the containers of the changeShipInputs and changeTaxInputs closely and report back.
Related
How can I write a method in cypress so that I search for the text content "Clinic location is active?" and after finding this text operate the button below it (you have a printscreen for guidance HERE ).
Until now I had written this method to operate the button to be active / inactive after the redClass class, but to be detected by its position on the page, which is slightly useless if a button appears in front of it in the future:
setToOn(value: number) {
cy.get(this.controlsSelector).eq(value).then(($button) => {
if ($button.hasClass('redClass')) {
cy.get(this.offSliderButton).eq(value).click({force:true});
}
})
}
Now I would like not to look for the button by its position (value in the case of the above method), called with the function cypress .eq(), but by the text that is above it, in the control-label class
<div class="form-group">
<label class="control-label" for="inputType">Clinic location is active?</label>
<div class="controls">
<div class="checkboxControl no-select">
<div class="checkboxSlider change greenClass">
<div class="checkboxSlider-state checkboxSlider-state-on">Yes</div>
<div class="checkboxSlider-state checkboxSlider-state-off">No</div>
<input checked="checked" class="form-control" data-val="true" data-val-required="The Clinic location is active? field is required." id="IsActive" name="IsActive" placeholder="Clinic location is active?" type="checkbox" value="true">
<input name="IsActive" type="hidden" value="true">
<label class="grey"></label>
</div>
</div>
</div>
</div>
So I want to call a method,from the test file, like:
clinicLocations.operateButtons('Clinic location is active?').setToOn();
Code for another button from that page:
<div class="form-group">
<label class="control-label" for="inputType">Allow Online Scheduling?</label>
<div class="controls">
<div class="checkboxControl no-select">
<div class="checkboxSlider change greenClass">
<div class="checkboxSlider-state checkboxSlider-state-on">Yes</div>
<div class="checkboxSlider-state checkboxSlider-state-off">No</div>
<input checked="checked" class="form-control" data-val="true" data-val-required="The Allow Online Scheduling? field is required." id="AllowOnlineScheduling" name="AllowOnlineScheduling" placeholder="Allow Online Scheduling?" type="checkbox" value="true"><input name="AllowOnlineScheduling" type="hidden" value="true">
<label class="grey"></label>
</div>
</div>
</div>
</div>
And another code structure for an inactive button (with redClass) :
<div class="form-group">
<label class="control-label" for="inputType">Use service facility NPI number in box 32a of HCFA form?</label>
<div class="controls">
<div data-toggle-selector=".NPInumberBox32a" class="checkboxControl no-select">
<div class="checkboxSlider redClass">
<div class="checkboxSlider-state checkboxSlider-state-on">Yes</div>
<div class="checkboxSlider-state checkboxSlider-state-off">No</div>
<input class="form-control" data-val="true" data-val-required="The Use service facility NPI number in box 32a of HCFA form? field is required." id="UseFacilityNPINoInHCFA" name="UseFacilityNPINoInHCFA" placeholder="Use service facility NPI number in box 32a of HCFA form?" type="checkbox" value="false"><input name="UseFacilityNPINoInHCFA" type="hidden" value="false">
<label class="grey"></label>
</div>
</div>
</div>
</div>
I hope I have provided all the necessary information.
In terms of Cypress commands it's just this
cy.contains('.form-group', 'Clinic location is active')
.find('input[type="checkbox"]')
.click()
I don't understand what clinicLocations.operateButtons refers to, or what your setOn() is doing exactly, but above is correct Cypress code for your requirement.
there I am working on a project for the login form.
I need to write a code that when the user pressed Enter on the Keyboard in input X code Call the function Y.
I saw Many Pages on Stackoverflow but theirs not working for me. I use Jquery In my project.
<div class="main">
<h2 class="title"><br> Wikipedia Image Finder!</h2>
<div class="form">
<label class="S_label" for="input_data"> <span class="Label_text">Image Title:</span> </label>
<div class="ll">
<input name="input" type="text" maxlength="999" id="input_data" minlength="1" placeholder="Query to Search" required>
<div class="img_btn" id="submit_div""></div>
</div>
</div>
</div>
Please try below code.
$("input").keyup(function(event){
// checking the pressed key is Enter
if(event.which == 13) {
search(event.target.value);
}
});
function search(text){
alert('called search with '+ text)
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main"> <h2 class="title"><br> Wikipedia Image Finder!</h2> <div class="form"> <label class="S_label" for="input_data"> <span class="Label_text">Image Title:</span> </label> <div class="ll"> <input name="input" type="text" maxlength="999" id="input_data" minlength="1" placeholder="Query to Search" required> <div class="img_btn" id="submit_div""></div> </div></div> </div>
So I've been working on a code that would try to pre-fill some disabled inputs with a keyup() function from another enabled input that are all enclosed in one div element. What happens is that upon key release, it tries to change the value of the disabled inputs from that specific row of divs. Here's what I currently have on my code
<div class="container-fluid" id="clonegrp">
<div class="row grpit">
<div class="col-md-7">
<input type="text" name="it[]" class="form-control" id="item" placeholder="Chemical/Equipment*" required="true">
</div>
<div class="col-md-2">
<input type="text" name="amount[]" class="form-control" placeholder="Amount*" required="true">
</div>
/<div class="col-md-1">
<input type="text" class="form-control" id="max" placeholder="Max" readonly="readonly">
</div>
<div class="col-md-1">
<input type="text" class="form-control" id="unit" placeholder="Unit" readonly="readonly">
</div>
</div>
so this group of inputs can be cloned by some button and through this JQuery code
var $button2=$('#add-item'),
$row2=$('.grpit').clone(),
$try2=$('#clonegrp');
$button2.click(function() {
$row2.clone().appendTo($try2);
});
the problem lies at the part where I try to do the live keyup function
$(document).ready(function() {
$('#clonegrp').on('keyup','#item', function() {
$('#max').val('some text');
});
});
I know that this is wrong since the id part would mess up which of the cloned inputs with the #max id gets to change the input. I can't seem to figure out how to get the #max sibling of the currently focused #item input. How do I do that?
I'm trying to change what text areas are visible depending on what radio button is checked.
I have followed various guides on google and none have worked.
This is what I currently have, using the click function but still nothing.
HTML:
<div class="row col-md-12">
<!-- Header Delimitation input settings -->
<div class="form-group col-md-4">
<label class="control-label" for="header_delimitation">Header delimitation</label>
<div class="col-md-12">
<div class="radio">
<label for="header_delimitation-0">
<input type="radio" name="header_delimitation" id="header_delimitation-0" value="0">
Fixed Column Width</label>
</div>
<div class="radio">
<label for="header_delimitation-1">
<input type="radio" name="header_delimitation" id="header_delimitation-1" value="1">
Character delimiter
</label>
</div>
</div>
<!-- Text input-->
<div class="form-group" id="header_col_form">
<label class="control-label" for="header_columns_num">Number of Columns</label>
<div class="">
<input id="header_columns_num" name="header_columns_num" type="text" placeholder="number" class="form-control input-md">
</div>
</div>
<!-- Text input-->
<div class="form-group" id="header_delim_form">
<label class=" control-label" for="header_delim">Header delimiter</label>
<div class="">
<input id="header_delim" name="header_delim" type="text" placeholder="delimiter" class="form-control input-md">
</div>
</div>
</div>
JS:
$(document).ready(function () {
$('#header_col_form').hide('fast');
$('#header_delim_form').hide('fast');
$('#header_delimitation-0').click(function () {
$('#header_col_form').show('fast');
$('#header_delim_form').hide('fast');
});
$('#header_delimitation-1').click(function () {
$('#header_delim_form').show('fast');
$('#header_col_form').hide('fast');
});
});
How it looks like now
So functionality wise, it should when header_delimitation_0 is selected, show header_col_form and hide header_delim_form. I will then add the reverse for when header_delimitation_1 is selected.
There is most likely a far simpler and cleaner way of completing this task, if so, any help would be greatly appreciated.
Ok, I've been having a really weird problem using a checkbox which collapses a hidden div using bootstrap.
if I have data-toggle="collapse" in the checkbox input attribute section, the Div Collapses but requires that every single one of the inputs inside it be filled out.
If data-toggle="collapse" is not there, the hidden div doesn't collapse, and if the checkbox is checked it requires the inputs to be entered and if it's left unchecked I can submit the form without the inputs being entered. (desired action, but the div doesn't hide or show when the checkbox is checked)
How do I hide/show the div when the checkbox is unchecked/checked AND only require the inputs if the box is checked?
I'm using this as the HTML:
<div class="col-md-1">
<input type="checkbox" onclick="ChangeShip()" href="#moreabout" data-toggle="collapse" aria-expanded="false" aria-controls="moreabout" class="form-control" id="chShipAdd" name="chShipAdd" value="no">
</div>
<label for="chShipAdd" class="col-md-3 control-label">Shipping Information?</label>
<div id="shipadddiv" style="visibility: hidden;">
<div class="collapse" id="moreabout" >
<div class="form-group">
<div class="col-md-12">
<br>
<input id="sStreet" name="sStreet" type="text" placeholder="Street Name (required)" class="form-control shipClass" required>
</div>
</div>
<div class="form-group">
<div class="col-md-4">
<input id="sCity" name="sCity" type="text" placeholder="City (required)" required class="form-control shipClass">
</div>
<div class="col-md-4">
<input id="sState" name="sState" type="text" placeholder="State (required)" required class="form-control shipClass">
</div>
<div class="hidden-lg hidden-md"> </div>
<div class="col-md-4">
<input id="sZipcode" name="sZipcode" type="text" placeholder="Zip (required)" required class="form-control shipClass">
</div>
</div>
</div>
</div>
and the javascript:
function ChangeShip() {
if (!(document.getElementById('chShipAdd').checked)) {
document.getElementById('shipadddiv').style.visibility="hidden";
$(".shipClass").prop("disabled",true);
}
else {
document.getElementById('shipadddiv').style.visibility="visible";
$(".shipClass").prop("disabled",false);
}
}
Any solution that WORKS will be acceptable. I've bashed my brain all day trying to do this simple action. I've tried .prop .attribute .setAttribute .removeAttribute, and much much more.
Any Advice?
You can use jquery to solve this quickly. You can wrap your inputs for change ship and give it and id. And let jquery do the rest.
var form = $('#myForm'),
checkbox = $('#changeShip'),
chShipBlock = $('#changeShipInputs');
chShipBlock.hide();
checkbox.on('click', function() {
if($(this).is(':checked')) {
chShipBlock.show();
chShipBlock.find('input').attr('required', true);
} else {
chShipBlock.hide();
chShipBlock.find('input').attr('required', false);
}
});
See this jsfiddle for your problem. This should help you.
your click event will toggle the display and the disabled, but when the form is loaded you will have hidden content that is not disabled.
simply call the function on document.ready
function ChangeShip() {
var show = $('#chShipAdd').prop('checked');
$('#shipadddiv').toggle(show);
$("#shipadddiv .shipClass").prop("disabled", !show);
}
$(ChangeShip); // call on document.ready
or simply add the disabled attribute to those elements so that the initial form state is valid
If the [required] attribute is still triggered on a [disabled] element you could juggle the attribute value
function ChangeShip() {
var show = $('#chShipAdd').prop('checked');
$('#shipadddiv').toggle(show);
$("#shipadddiv .shipClass").each(function(){
if (!('_required' in this))
this._required = this.required;
this.disabled = !show;
this.required = (show) ? this._required : false;
});
}
Try to do this :
HTML :
<div class="col-md-1">
<input type="checkbox" onclick="ChangeShip()" href="#moreabout" data-toggle="collapse" aria-expanded="false" aria-controls="moreabout" class="form-control" id="chShipAdd" name="chShipAdd" value="no">
</div>
<label for="chShipAdd" class="col-md-3 control-label">Shipping Information?</label>
<div id="shipadddiv" style="visibility: hidden;">
<div class="collapse" id="moreabout" >
<div class="form-group">
<div class="col-md-12">
<br>
<input id="sStreet" name="sStreet" type="text" placeholder="Street Name (required)" class="form-control shipClass" required>
</div>
</div>
<div class="form-group">
<div class="col-md-4">
<input id="sCity" name="sCity" type="text" placeholder="City (required)" required class="form-control shipClass">
</div>
<div class="col-md-4">
<input id="sState" name="sState" type="text" placeholder="State (required)" required class="form-control shipClass">
</div>
<div class="hidden-lg hidden-md"> </div>
<div class="col-md-4">
<input id="sZipcode" name="sZipcode" type="text" placeholder="Zip (required)" required class="form-control shipClass">
</div>
</div>
</div>
</div>
JQUERY :
$('#chShipAdd').change(function() {
if ($('#chShipAdd').prop('checked')) {
$('#shipadddiv').show();
} else {
$('#shipadddiv').hide();
}
});