We Keep Coding

Submit form data from selected radio button option only

I am working on a form where a user selects an option from radio buttons.
Then depending on option, a view of text fields appears. The user then inputs the required data and submits the form.
The options have different options and such data submitted should be different.
My challenge is how to submit only data from the selected radio button fields.
Anyone kindly help. Thank you
$(function () {
$('input[type="radio"]').on("click",function () {
$(".selections").hide(); // hide them all
if (this.value=="both") $(".selections").show(); // show both
else $("#"+this.value).show(); // show the one with ID=radio value
});
$('.selections input[type="checkbox"]').on("click",function() {
$(this).next().toggle(this.checked); // hide if not checked
});
$('.selections input[type="text"]').each(function() { // initialise
$(this).toggle($(this).prev().is(":checked"));
});
});
.selections { display:none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form-horizontal" role="form" method="POST" action="set-up-bill-details">
<div class="form-group">
<label for="billing" class="col-md-4 control-label"> Select Billing Option</label>
<div class="col-md-6">
<input type="radio" name="billing" value="percentage" >Percentage
<input type="radio" name="billing" value="flat_rate" >Flat Rate
<input type="radio" name="billing" value="variable" >Variable
</br>
</div>
</div>
<!-- percentage radio option -->
<div id="percentage" class="selections">
<input type="hidden" name="bill_type" value="percentage">
<div class="form-group">
<label for="rate" class="col-md-4 control-label">Rate</label>
<div class="col-md-4">
<input id="rate" placeholder="10" type="number" class="form-control" name="rate" autofocus>
</div>
</div>
<input type="date" class="form-control" name="send_at" placeholder="the invoicing date">
</div>
<!-- flat_rate radio button option -->
<div id="flat_rate" class="selections">
<input type="hidden" name="bill_type" value="flat_rate">
<div class="form-group">
<label for="rate" class="col-md-4 control-label">Rate</label>
<div class="col-md-4">
<input id="rate" placeholder="10" type="number" class="form-control" name="rate" autofocus>
</div>
</div>
<input type="date" class="form-control" name="send_at">
</div>
<!-- variable radio button option -->
<div id="variable" class="selections">
<input type="hidden" name="bill_type" value="variable">
<div class="form-group">
<label for="limit" class="col-md-4 control-label">Limit</label>
<div class="col-md-4">
<input id="limit" placeholder="10" type="number" class="form-control" name="limit" autofocus>
</div>
</div>
<div class="form-group">
<label for="rate" class="col-md-4 control-label">Rate</label>
<div class="col-md-4">
<input id="rate" placeholder="10" type="number" class="form-control" name="rate" autofocus>
</div>
</div>
<input type="date" name="send_at">
<br/>
</div>
<br/>
<br/>
<div class="form-group">
<div class="col-lg-8 col-md-8 col-sm-12 col-md-offset-2">
<button type="button" class="btn btn-sm btn-default btn-flat"
data-dismiss="modal">
<i class="fa fa-times" aria-hidden="true"> Close</i>
</button>
<button type="submit" class="btn btn-sm btn-facebook btn-flat pull-right">
<i class="fa fa-floppy-o" aria-hidden="true"> Save</i>
</button>
</div>
</div>
</form>

You should try to use Bootstrap Tabs [imho], but if you want to go with radios...
Disabling all inputs will prevent them from being submited:
$("#div :input").attr("disabled", true);
or
$('#div').find('input, textarea, button, select').attr('disabled','disabled');
Code from this post

Firstly you don't need same field repeatedly.Try like this
$(function () {
$('input[name="billing"]').on('change',function(){
$('#bill_type').val($(this).val());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form-horizontal" role="form" method="POST" action="set-up-bill-details">
<div class="form-group">
<label for="billing" class="col-md-4 control-label"> Select Billing Option</label>
<div class="col-md-6">
<input type="radio" name="billing" value="percentage" >Percentage
<input type="radio" name="billing" value="flat_rate" >Flat Rate
<input type="radio" name="billing" value="variable" >Variable
</br>
</div>
</div>
<!-- percentage radio option -->
<div id="percentage" class="selections">
<input type="hidden" id="bill_type" name="bill_type" value="">
<div class="form-group">
<label for="rate" class="col-md-4 control-label">Rate</label>
<div class="col-md-4">
<input id="rate" placeholder="10" type="number" class="form-control" name="rate" autofocus>
</div>
</div>
<input type="date" class="form-control" name="send_at" placeholder="the invoicing date">
</div>
<br/>
<br/>
<div class="form-group">
<div class="col-lg-8 col-md-8 col-sm-12 col-md-offset-2">
<button type="button" class="btn btn-sm btn-default btn-flat"
data-dismiss="modal">
<i class="fa fa-times" aria-hidden="true"> Close</i>
</button>
<button type="submit" class="btn btn-sm btn-facebook btn-flat pull-right">
<i class="fa fa-floppy-o" aria-hidden="true"> Save</i>
</button>
</div>
</div>
</form>
After submission you can do whatever based on the value of bill_type.

How to clear some forms fields on collapse

I have a form that includes a collapsing well with optional fields. I'm trying to figure out how to clear those optional fields if they choose to toggle the well shut or hit the cancel button which also toggles the well shut.
<form id="meeting">
<div class="form-group">
<label class="white" for="">Set Meeting Date & Time</label>
<input class="form-control" type="text" value="07/26/2017 09:05 pm" id="MeetingTime" name="MeetingTime" />
</div>
<button class="btn btn-primary" type="button" data-target="#offSiteMeeting" data-toggle="collapse" aria-pressed="false" autocomplete="off" aria-controls="offSiteMeeting">Offsite Meeting</button>
<div class="collapse" id="offSiteMeeting">
<div class="well">
<a class="btn btn-default pull-right" href="" data- toggle="collapse" data-target="#offSiteMeeting" aria-controls="offSiteMeeting">Cancel Offsite</a>
<div class="form-group">
<label class="" for="">Meeting Type</label>
<select id="meetingType" name="meetingType" class="form-control">
<option value="1">Meeting Type 1 </option>
<option value="2">Meeting Type 2 </option>
<option value="3">Meeting Type 3 </option>
</select>
</div><!-- close form-group -->
<div class="form-group">
<label class="" for="">Location Name</label>
<input class="form-control" type="text" value="" id="name" name="name" placeholder="ex. Jones Family Home" />
</div>
<div class="form-group">
<label class="" for="">Address</label>
<input class="form-control" type="text" value="" id="address" name="address" placeholder="1234 Some Street City, State Zip"/>
</div>
</div><!-- close well -->
</div><!-- close collapse -->
<div class="form-group">
<button type="submit" class="btn btn-default">Submit</button>
</div>
</form>
So the inputs I'd like to clear (in Form id="meeting") are
id=meetingType, id=name, id=address
when the well with id="offSiteMeeting" is collapsed
Here are the two buttons that collapse the well
<button class="btn btn-primary" type="button" data-target="#offSiteMeeting" data-toggle="collapse" aria-pressed="false" autocomplete="off" aria-controls="offSiteMeeting">Offsite Meeting</button>
<a class="btn btn-default pull-right" href="" data-toggle="collapse" data-target="#offSiteMeeting" aria-controls="offSiteMeeting">Cancel Offsite</a>

add this parameter to your buttons
onclick="function () { document.getElementById('meetingType').value = ''; document.getElementById('name').value = ''; document.getElementById('address').value = '';}"
or if you are into jquery
onclick="function () { $('#meetingType').val(''); $('#name').val(''); $('#address').val(''); }"

How to make div appear on button click using Javascript

I'm trying to make a div appear on button click which I've not succeeded from the below code.Please let me know if I've done any thing wrong in the code.
function showDiv() {
document.getElementById('sign-in').style.display = "block";
}
<a class="btn btn-default log-bar" href="#" role="button" onclick="showDiv()">Login</a>
<div id="sign-in" class="login" style="display: none;">
<form>
<div class="row">
<div class="col-md-3">
<div class="form-group inline-form">
<input type="email" class="form-control" id="email" Placeholder="email">
</div>
</div>
<div class="col-md-3">
<div class="form-group inline-form">
<input type="password" class="form-control" id="pwd">
</div>
</div>
<div class="col-md-3">
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
</div>
<div class="col-md-3">
<button type="submit" class="btn btn-default ">Submit</button>
</div>
</div>
</form>
</div>

change getElementByid to getElementById (i to I)
function showDiv() {
document.getElementById('sign-in').style.display = "block";
}
<a class="btn btn-default log-bar" href="#" role="button" onclick="showDiv()">Login</a>
<div id="sign-in" class="login" style="display: none;">
<form>
<div class="row">
<div class="col-md-3">
<div class="form-group inline-form">
<input type="email" class="form-control" id="email" Placeholder="email">
</div>
</div>
<div class="col-md-3">
<div class="form-group inline-form">
<input type="password" class="form-control" id="pwd">
</div>
</div>
<div class="col-md-3">
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
</div>
<div class="col-md-3">
<button type="submit" class="btn btn-default ">Submit</button>
</div>
</div>
</form>
</div>

Its Simple
<script>
function showDiv() {
document.getElementById('sign-in').style.display = "block";
}
</script>

getElementById() is a function and its case sensitive . You need to write getElementByid() as getElementById().
Note:- i in getElementById() should be capital .

You have typed wrong document.getElementByid it should be capital I document.getElementById
function showDiv() {
document.getElementById('sign-in').style.display = "block";
}
<a class="btn btn-default log-bar" href="#" role="button" onclick="showDiv()">Login</a>
<div id="sign-in" class="login" style="display: none;">
<form>
<div class="row">
<div class="col-md-3">
<div class="form-group inline-form">
<input type="email" class="form-control" id="email" Placeholder="email">
</div>
</div>
<div class="col-md-3">
<div class="form-group inline-form">
<input type="password" class="form-control" id="pwd">
</div>
</div>
<div class="col-md-3">
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
</div>
<div class="col-md-3">
<button type="submit" class="btn btn-default ">Submit</button>
</div>
</div>
</form>
</div>

Can I strongly, strongly suggest that you use jQuery to do this - it makes this task trivial on all browsers. To do this with jQuery, perform the following steps.
Include the jQuery script library in your web page <script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>.
Add an id property to your button <a class="btn btn-default log-bar" href="#" id="loginButton" role="button" onclick = "showDiv()" >Login</a>.
Add the following Javascript to your page:
<script>
$(function() {
$("#loginButton").click(function() {
$("#sign-in").show();
});
});
</script>

how to hide cc , bcc in mail box form initially

I have developed a mail box form where i want to hide cc , bcc option initially. cc, bcc will when i click on their option.
I am not able to do this.
<form class="inbox-compose form-horizontal" id="fileupload" action="#" method="POST" enctype="multipart/form-data">
<div class="inbox-compose-btn">
<button class="btn green">
<i class="fa fa-check"></i>Send</button>
<button class="btn default inbox-discard-btn">Discard</button>
<button class="btn default">Draft</button>
</div>
<div class="inbox-form-group mail-to">
<label class="control-label">To:</label>
<div class="controls controls-to">
<input type="text" class="form-control" name="to">
<span class="inbox-cc-bcc">
<span class="inbox-cc"> Cc </span>
<span class="inbox-bcc"> Bcc </span>
</span>
</div>
</div>
<div class="inbox-form-group input-cc display-hide">
<label class="control-label">Cc:</label>
<div class="controls controls-cc">
<input type="text" name="cc" class="form-control"> </div>
</div>
<div class="inbox-form-group input-bcc display-hide">
<label class="control-label">Bcc:</label>
<div class="controls controls-bcc">
<input type="text" name="bcc" class="form-control"> </div>
</div>
<div class="inbox-form-group">
<label class="control-label">Subject:</label>
<div class="controls">
<input type="text" class="form-control" name="subject"> </div>
</div>
<div class="inbox-form-group">
<textarea class="inbox-editor inbox-wysihtml5 form-control" name="message" rows="12"></textarea>
Please help me to make my form better

Initially hide the div like:
<span class="inbox-cc-bcc" style="display:none;">
<span class="inbox-cc"> Cc </span>
<span class="inbox-bcc"> Bcc </span>
</span>
and show it by adding an event listener on cc, bcc button using jquery show() method

You can use the hide class to hide sections that you would like to hide initially.
HTML
<form class="inbox-compose form-horizontal" id="fileupload" action="#" method="POST" enctype="multipart/form-data">
<div class="inbox-compose-btn">
<button class="btn green">
<i class="fa fa-check"></i>Send</button>
<button class="btn default inbox-discard-btn">Discard</button>
<button class="btn default">Draft</button>
</div>
<div class="inbox-form-group mail-to">
<label class="control-label">To:</label>
<div class="controls controls-to">
<input type="text" class="form-control" name="to">
<span class="inbox-cc-bcc">
<span class="inbox-cc" style="cursor: pointer;cursor: hand;"> Cc </span>
<span class="inbox-bcc" style="cursor: pointer;cursor: hand;"> Bcc </span>
</span>
</div>
</div>
<div id="divCC" class="inbox-form-group input-cc display-hide hide">
<label class="control-label">Cc:</label>
<div class="controls controls-cc">
<input type="text" name="cc" class="form-control"> </div>
</div>
<div id="divBCC" class="inbox-form-group input-bcc display-hide hide">
<label class="control-label">Bcc:</label>
<div class="controls controls-bcc">
<input type="text" name="bcc" class="form-control"> </div>
</div>
<div class="inbox-form-group">
<label class="control-label">Subject:</label>
<div class="controls">
<input type="text" class="form-control" name="subject"> </div>
</div>
<div class="inbox-form-group">
<textarea class="inbox-editor inbox-wysihtml5 form-control" name="message" rows="12"></textarea></div>
<div id="push"></div>
</form>
jQuery
$('.inbox-bcc').click(function(){
console.log('bcc');
$('#divBCC').toggleClass('hide');
});
});
Here is a working fiddle: http://www.codeply.com/go/iPH6UVoHkc
Hope this helps!

how to have 2 autocomplete in 2 different forms on same page bootstrap -3

i have 2 tabs on home page and both have search forms with an autocomplete feature for input of location.
html
<div class="row">
<div class="col-md-4 scolleft">
<div class="bs-example bs-example-tabs cstyle04">
<ul class="nav nav-tabs" id="myTab">
<li onclick="mySelectUpdate()" class="active"><a data-toggle="tab" href="#weekend"><span class="flight"></span> Weekend Holidays</a></li>
<li onclick="mySelectUpdate()" class=""><a data-toggle="tab" href="#holidays"><span class="hotel"></span>Holidays</a></li>
</ul>
<div class="tab-content2" id="myTabContent">
<div id="weekend" class="tab-pane fade active in">
<form action="" name = "weekend">
<div class="w50percent">
<div class="wh90percent textleft">
<span class="opensans size13"><b>Where</b></span>
<input type="text" name="location" class="form-control desktopDropDown autocomplete" id="location" />
</div>
</div>
<div class="clearfix"></div><br/>
<div class="w50percent">
<div class="wh90percent textleft">
<span class="opensans size13"><b>When</b></span>
<input type="text" class="form-control mySelectCalendar" id="datepicker" name="date" placeholder="mm/dd/yyyy"/>
</div>
</div>
<div class="clearfix"></div>
<div class="w50percent">
<input type="button" class="btn-search3" id="btnSearchHotels" name="btnSearchHotels" value="Search Hotels" /></div>
</form>
</div>
<div id="holidays" class="tab-pane fade active in">
<form name = "holidays" action="">
<div class="w50percent">
<div class="wh90percent textleft">
<span class="opensans size13"><b>Where</b></span>
<input type="text" name="location" class="form-control desktopDropDown autocomplete" id="location" />
</div>
</div>
<div class="clearfix"></div><br/>
<div class="w50percent">
<div class="wh90percent textleft">
<span class="opensans size13"><b>When</b></span>
<input type="text" class="form-control mySelectCalendar" id="datepicker2" name="date" placeholder="mm/dd/yyyy"/>
</div>
</div>
<div class="clearfix"></div>
<div class="w50percent">
<input type="button" class="btn-search3" value="Search Holiday" id="btnSearchHolidays" name="btnSearchHolidays" />
</form>
</div>
</div>
</div>
Autocomplete works fine in tab 1 but all the inputs for form 2 shows error.
i am aware of changing id to autocomplete2 but i donot know jquery/ js to impement it. kindly also tell in which js files changes needs to be made.
Thanks in Advance