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.
Related
I am attempting to format a form to look like the image below using flex:
<div class="wrapper">
<div class="user-info-container">
<div class="row">
<div class="flex-field">
<label for="fname" >First Name: </label>
<input type="text" class="firstname">
</div>
<div class="flex-field">
<label for="lname" >Last Name: </label>
<input type="text" class="lastname">
</div>
</div>
<div class="row2">
<div class="flex-field">
<label for="Email" >Email: </label>
<input type="text" class="email">
</div>
<div class="flex-field">
<label for="phonenumber" >Phone Number: </label>
<input type="text" class="phone-number">
</div>
</div>
</div>
<label for="request">Request Details:</label>
<div class="flex-field request">
<textarea class="rdetails"></textarea>
</div>
The above is the html code that I am using and I am having trouble styling it to look like the above using flex
Use an outer box with flex-column
Then make two new divs inside. The upper one with flex-row and the other one with flex-column again.
In the bottom one, you put in the text and the input field.
In the upper one, you put two identical (text differs) div with flex-column. In these two, you each put two div with flex-row and inside it the text and the input field.
Using tailwindcss you get something like this:
https://play.tailwindcss.com/lrP8uzlzkX
Hope this helps.
i have a case here. when clicked on button i want the class to be change for example if the button is clicked i want hide-tab to be removed and at the same time i want to add show-tab class this is my jquery code please help me with it
$(document).ready(function() {
$('#button').on('click', function() {
$('.form-group').removeClass('hide-tab');
$(this).addClass('show-tab');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-container">
<form class="fs-form fs-form-full">
<div class="form-group">
<label class="field">What is your name?</label>
<input type="text" class="form-control">
<div class="border"></div>
</div>
<div class="form-group hide-tab">
<label class="field">What is your mobile number?</label>
<input type="text" class="form-control">
<div class="border"></div>
</div>
<div class="form-group hide-tab">
<label class="field">What is your email address?</label>
<input type="email" class="form-control">
<div class="border"></div>
</div>
<div class="form-group hide-tab">
<label class="field">What type of event do you want us to organize?</label>
<select class="form-control">
<option>Dance Events</option>
<option>Birthday Events</option>
<option>Family Gathering Events</option>
<option>Marathon Events</option>
<option>Awards Ceremony</option>
<option>Art Competition</option>
</select>
<div class="border"></div>
</div>
<div class="form-group hide-tab">
<label class="field">Breif your thoughts</label>
<textarea class="form-control"></textarea>
<div class="border"></div>
</div>
<div class="form-group hide-tab">
<label class="field">Schdule Meeting</label>
<input type="date" class="form-control">
<div class="border"></div>
</div>
<div class="form_group">
<button type="submit" class="btn btn-primary" id="button">Continue</button>
</div>
</form>
</div>
Since your button type is submit.So changes happen but at-once form is processed and everything is reloaded. That's why you are unable to see the changes.
Use preventDefault() like below:-
$(document).ready(function() {
$('#button').on('click', function(e) {
e.preventDefault();
$('.form-group').removeClass('hide-tab'); // remove hide-tab class from all elements having form-group class
$(this).addClass('show-tab'); // this will add class to the button only not to others
});
});
So I have these radio buttons that a user can select and then I need a text input inside of it. How can I validate these inputs so that they are required to select a radio option, and if it is one of the first two, make sure they fill out the text inputs? I assume I need to use the jquery.validator.addMethod somehow, but i'm really lost on what I need to do. I'd really appreciate some help. Thanks so much!
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.1/additional-methods.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.1/jquery.validate.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div id="itemPricing" class="clearfix">
<div class="row">
<div class="col-sm-12" form-group>
<label for="itemPricing" class="required">Pricing</label>
<span id="helpBlock" class="help-block">Select how you want pricing to display on your website.</span>
</div>
<!-- Regular Price -->
<div class="col-sm-12 form-group">
<div class="form-inline radio-input-group">
<div class="radio">
<input type="radio" class="height-initial" name="pricingOptions" id="regularPrice" value="">
<label for="regularPrice" class="required">Regular Price</label>
</div>
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control money" id="productPrice" name="productPrice">
</div>
</div>
<div class="form-inline radio-input-group">
<div class="radio">
<input type="radio" class="height-initial" name="pricingOptions" id="salePrice" value="">
<label for="salePrice" class="required">Sale Price</label>
</div>
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control money" id="productPrice" name="productPrice">
</div>
</div>
<div class="form-inline radio-input-group">
<div class="radio">
<input type="radio" class="height-initial" name="pricingOptions" id="emailPrice" value="">
<label for="emailPrice" class="required">Email for Price</label>
</div>
</div>
</div>
</div>
</div>
<!-- end itemPricing -->
<button type="submit" class="btn btn-success save ladda-button" data-style="zoom-in">Save</button>
Yes, skipping server side validation is not an option, but you get a better user experience if you also validate on the client side too. Waiting for the round trip to the server before the user becomes aware of the problem is a sure way to piss the user off. The radio buttons can have onChange handlers that check to see if the button is selected and set the required status of the textbox accordingly.
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();
}
});
I'm displaying a list of input fields, which looks like the code below. What I want to do is change the input to a TinyMCE window on click() or hover(). To do this I wrote the javascript below, but that isn't working obviously since they're not <textarea's.
HTML
<div class="col-md-12">
<div class="col-md-3">
<input id="first" class="input-field" value="test1"/>
</div>
<div class="col-md-3">
<input id="second" class="input-field" value="test2"/>
</div>
<div class="col-md-3">
<input id="third" class="input-field" value="test3"/>
</div>
<div class="col-md-3">
<input id="fourth" class="input-field" value="test4"/>
</div>
<!--This continues for some time-->
<div class="col-md-3">
<input id="fiftyseventh" class="input-field" value="test57"/>
</div>
<div class="col-md-3">
<input id="fiftyeight" class="input-field" value="test58"/>
</div>
<div class="col-md-3">
<input id="fiftyninth" class="input-field" value="test59"/>
</div>
<div class="col-md-3">
<input id="sixtieth" class="input-field" value="test60"/>
</div>
</div>
javascript
$("body").on("click", "input.input-field" function() {
var id = $(this).attr("id");
tinymce.EditorManager.execCommand("mceRemoveEditor", true, id);
tinymce.EditorManager.execCommand("mceAddEditor", true, id);
});
I thing issue is in your javascript code.
Please check this line-
$("body").on("click", "input.input-field" function() {
there is no "," (comma) after adding input.input-field. i should be there.
$("body").on("click", "input.input-field", function() {
and i have checked your all code is working fine.
Here is a DEMO