We Keep Coding

button not working when placed inside form

In the below code when button is placed just outside the form it works in ajax but when button is placed inside the form the button doesn't works.
HTML code
<div class="container">
<div class="row">
<form class="form-inline">
<label for="from">From:</label>
<input type="text" class="form-control" id="from" placeholder="Enter start date" name="from">
<label for="to">To:</label>
<input type="text" class="form-control" id="to" placeholder="Enter end date" name="to">
<label for="chart_type">Type : </label>
<select id="chart" name="chart">
<option value="1">option 1</option>
<option value="2">option 2</option>
<option value="3">option 3</option>
<option value="4">option 4</option>
<option value="5">option 5</option>
<option value="6">option 6</option>
</select>
</form>
<button id="date-submit-btn" class="btn btn-primary">Submit</button>
</div>
</div>
Ajax request on click of button
$(document).ready(function () {
$("#date-submit-btn").click(function(event){
var chartId = $("#chart").val();
var toDate = $("#to").val().split("/").reverse().join("-");
var fromDate = $("#from").val().split("/").reverse().join("-");
$("#chart1").empty();
$.ajax({
url:"action.php",
method:"POST",
data:{to:toDate,from:fromDate,chart:chartId},
success:function(returnData){
myDrawChart(returnData);
},
error:function(err){
console.log(err);
}
});
});
});

You can keep your button in your form and add type="button" so that the form will not be sent from the click on the button.
<div class="container">
<div class="row">
<form class="form-inline">
<label for="from">From:</label>
<input type="text" class="form-control" id="from" placeholder="Enter start date" name="from">
<label for="to">To:</label>
<input type="text" class="form-control" id="to" placeholder="Enter end date" name="to">
<label for="chart_type">Type : </label>
<select id="chart" name="chart">
<option value="1">option 1</option>
<option value="2">option 2</option>
<option value="3">option 3</option>
<option value="4">option 4</option>
<option value="5">option 5</option>
<option value="6">option 6</option>
</select>
<button type="button" id="date-submit-btn" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
Another way to prevent the form from submitting would be using onsubmit="return false;" :
<div class="row">
<form onsubmit="return false;" class="form-inline">
//...
</form>
</div>
Or even modifying the button to an input type button would work as well :
<input type="button" id="date-submit-btn" class="btn btn-primary" value="Submit">

Try to add type="button" to your button in form.
Because default button type is "submit".

You can use button as type submit or take input as submit. Try like below:
$( "#target" ).submit(function( event ) {
alert( "Handler for .submit() called." );
event.preventDefault();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="target" action="destination.html">
<label for="from">From:</label>
<input type="text" class="form-control" id="from" placeholder="Enter start date" name="from">
<label for="to">To:</label>
<input type="text" class="form-control" id="to" placeholder="Enter end date" name="to">
<label for="chart_type">Type : </label>
<select id="chart" name="chart">
<option value="1">option 1</option>
<option value="2">option 2</option>
<option value="3">option 3</option>
<option value="4">option 4</option>
<option value="5">option 5</option>
<option value="6">option 6</option>
</select>
<button type="submit" value="Go">Go</button>
</form>

Comboboxes do not select given value using Javascript

I have 2 comboboxes and I want to select a specific item by specifying a value using JS but they don't seem to work.
these are the Comboboxes:
<div class="row">
<div class="col-sm-6 form-group">
<label for="email"> Estado:</label>
<select class="form-control" id="Estado" name="cbmEstado" required>
<option value="" selected="selected"></option>
<option value="1">Activo</option>
<option value="0">Inactivo</option>
</select>
</div>
<div class="col-sm-6 form-group">
<label for="email"> Exonerado:</label>
<select class="form-control" id="Exonerado" name="cbmExonerado" required>
<option value="" selected="selected"></option>
<option value="1">Sí</option>
<option value="0">No</option>
</select>
</div>
</div>
this is the code to select the item in the Combobox:
<script type="text/javascript">
window.onload = function() {
document.getElementById('Exonerado').value =1;
document.getElementById('Estado').value =1;
}
</script>

Chrome seems to do exactly what you wanted. But I suspect that the real problem here is that you pass a Number and not a String.
If you wrap them in quotes like in the following code snippet, it works like a charm.
window.onload = function() {
document.getElementById('Exonerado').value = "1";
document.getElementById('Estado').value = "0";
}
<div class="row">
<div class="col-sm-6 form-group">
<label for="email"> Estado:</label>
<select class="form-control" id="Estado" name="cbmEstado" required>
<option value="" selected="selected"></option>
<option value="1">Activo</option>
<option value="0">Inactivo</option>
</select>
</div>
<div class="col-sm-6 form-group">
<label for="email"> Exonerado:</label>
<select class="form-control" id="Exonerado" name="cbmExonerado" required>
<option value="" selected="selected"></option>
<option value="1">Sí</option>
<option value="0">No</option>
</select>
</div>
</div>

window.onload = function() {
document.getElementById('Exonerado').value = "1";
document.getElementById('Estado').value = "1";
}
<div class="row">
<div class="col-sm-6 form-group">
<label for="email"> Estado:</label>
<select class="form-control" id="Estado" name="cbmEstado" required>
<option value="" selected="selected"></option>
<option value="1">Activo</option>
<option value="0">Inactivo</option>
</select>
</div>
<div class="col-sm-6 form-group">
<label for="email"> Exonerado:</label>
<select class="form-control" id="Exonerado" name="cbmExonerado" required>
<option value="" selected="selected"></option>
<option value="1">Sí</option>
<option value="0">No</option>
</select>
</div>
</div>
Now this will help you out from your query

There is no problem in the code so far, it should work without any problem.

JavaScript hide a corresponding field with specific delimiter

I want to hide the corresponding textarea field of a dropdown, It will be used in a lot of instance that's why I want it on a function.
<div id="formElement1" class="field">
<label for="field1">Start and end date defined</label>
<select id="field1" name="campaign-dd1">
<option value="" >Please Select</option>
<option value="Yes" >Yes</option>
<option value="No" >No</option>
<option value="N/A" >N/A</option>
</select>
</div>
<div class="clear"></div>
<div id="formElement2" class="field">
<label for="field2">Comment(s)</label>
<textarea id="field2" name="campaign-comment1" ></textarea>
</div>
<div id="formElement3" class="field">
<label for="field3">Content and workflow are compliant to requirements</label>
<select id="field3" name="campaign-dd2">
<option value="" >Please Select</option>
<option value="Yes" >Yes</option>
<option value="No" >No</option>
<option value="N/A" >N/A</option>
</select>
</div>
<div class="clear"></div>
<div id="formElement4" class="field">
<label for="field4">Comment(s)</label>
<textarea id="field4" name="campaign-comment2" ></textarea>
</div>
<div id="formElement5" class="field">
<label for="field5">Flow working as planned</label>
<select id="field5" name="campaign-dd3">
<option value="" >Please Select</option>
<option value="Yes" >Yes</option>
<option value="No" >No</option>
<option value="N/A" >N/A</option>
</select>
</div>
<div class="clear"></div>
<div id="formElement6" class="field">
<label for="field6">Comment(s)</label>
<textarea id="field6" name="campaign-comment3" ></textarea>
</div>
As you can see in the code the dropdown name=campaign-dd# has a specific textarea name=campaign-comment#.

On initial load. I want to hide it. And will display it once YES is selected
In this case you can put a common class on all the .field elements which contains the comment fields, in my example below I used .comment and hide them in CSS. Then in JS you can put a change event handler on the select elements which shows/hides the related comment field based on the selected option. Try this:
$('select').change(function() {
$(this).closest('.field').nextAll('.field:first').toggle($(this).val() == 'Yes');
});
.field.comment {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="formElement1" class="field">
<label for="field1">Start and end date defined</label>
<select id="field1" name="campaign-dd1">
<option value="">Please Select</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
<option value="N/A">N/A</option>
</select>
</div>
<div class="clear"></div>
<div id="formElement2" class="field comment">
<label for="field2">Comment(s)</label>
<textarea id="field2" name="campaign-comment1"></textarea>
</div>
<div id="formElement3" class="field">
<label for="field3">Content and workflow are compliant to requirements</label>
<select id="field3" name="campaign-dd2">
<option value="">Please Select</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
<option value="N/A">N/A</option>
</select>
</div>
<div class="clear"></div>
<div id="formElement4" class="field comment">
<label for="field4">Comment(s)</label>
<textarea id="field4" name="campaign-comment2"></textarea>
</div>
<div id="formElement5" class="field">
<label for="field5">Flow working as planned</label>
<select id="field5" name="campaign-dd3">
<option value="">Please Select</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
<option value="N/A">N/A</option>
</select>
</div>
<div class="clear"></div>
<div id="formElement6" class="field comment">
<label for="field6">Comment(s)</label>
<textarea id="field6" name="campaign-comment3"></textarea>
</div>

Adding classes that makes more sense would be easier, but you can construct the name for the textarea from the name given to the select, to hide it etc.
$('.field select').on('change', function() {
var parts = this.name.split('-');
var numb = parts[1].replace(/\D/g, '');
$('[name="' + parts[0] + '-comment' + numb + '"]').toggle(this.value !== 'Yes')
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<em>Select "Yes" to hide comment</em>
<br><br><br>
<div id="formElement1" class="field">
<label for="field1">Start and end date defined</label>
<select id="field1" name="campaign-dd1">
<option value="">Please Select</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
<option value="N/A">N/A</option>
</select>
</div>
<div class="clear"></div>
<div id="formElement2" class="field">
<label for="field2">Comment(s)</label>
<textarea id="field2" name="campaign-comment1"></textarea>
</div>
<div id="formElement3" class="field">
<label for="field3">Content and workflow are compliant to requirements</label>
<select id="field3" name="campaign-dd2">
<option value="">Please Select</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
<option value="N/A">N/A</option>
</select>
</div>
<div class="clear"></div>
<div id="formElement4" class="field">
<label for="field4">Comment(s)</label>
<textarea id="field4" name="campaign-comment2"></textarea>
</div>
<div id="formElement5" class="field">
<label for="field5">Flow working as planned</label>
<select id="field5" name="campaign-dd3">
<option value="">Please Select</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
<option value="N/A">N/A</option>
</select>
</div>
<div class="clear"></div>
<div id="formElement6" class="field">
<label for="field6">Comment(s)</label>
<textarea id="field6" name="campaign-comment3"></textarea>
</div>

Input focus doesnt work / can't select radio button - Bootstrap

I have the following html code which uses twitter bootstrap framework, where I am not able to select the input fields,its focus gets removed when I click on it and also I am not able to select a radio button.Even if I select one,it moves to the first radio button and Im not able to select the second one.Please help me resolve this issue.And the main thing is that this is happening in firefox browser and in chrome and IE its working fine!
<form action="test.php" style="border: solid 1px #eee;box-shadow: 10px 10px 5px #888888;margin-top:20px" class="panel-body" method="POST" id="myForm" data-validate="parsley">
<div id="alert" style="display:none" class="alert alert-danger text-center">Please enter a valid card number !</div>
<div>
<div class="col-md-4">
<input type="radio" data-required="true" name="cardType" id="one" class="" value="CC"><label for="radio43" class="css-label cb3">Credit Card</label>
</div>
<div class="col-md-4">
<input type="radio" name="cardType" id="one" class="" value="DB"><label for="radio53" class="css-label cb3">Debit Card</label>
</div>
<div class="col-md-4">
<img src="certificate.png" width="120" class="bw">
</div>
</div>
<!-- Card Payment -->
<div id="a">
<br>
<br>
<br>
<input type="hidden" id="ccType" name="ccType">
<ul style="float:right;display:none" class="cards">
<li class="visa"></li>
<li class="visa_electron"></li>
<li class="mastercard"></li>
<li class="maestro"></li>
</ul>
<div class="col-md-8">
<div class="form-group">
<label for="exampleInputEmail1">Card number</label>
<div class="fake-input">
<input type="text" class="form-control zwitch_data" autocomplete="off" data-required="true" data-trigger="change" id="ccnumber" name="ccnumber" onblur="testCreditCard () ">
</div>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="exampleInputPassword1">CVV</label><input type="password" maxlength="4" class="form-control" data-required="true" data-trigger="change">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="exampleInputPassword1">Expiry Month</label>
<select name="expiry_month" class="form-control" data-required="true" data-trigger="change">
<option value="01">January</option>
<option value="02">February</option>
<option value="03">March</option>
<option value="04">April</option>
<option value="05">May</option>
<option value="06">June</option>
<option value="07">July</option>
<option value="08">August</option>
<option value="09">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="exampleInputPassword1">Expiry Year</label>
<select name="expiry_year" class="form-control" data-required="true" data-trigger="change">
<option selected="" value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
<option value="2021">2021</option>
<option value="2022">2022</option>
<option value="2023">2023</option>
<option value="2024">2024</option>
<option value="2025">2025</option>
<option value="2026">2026</option>
<option value="2027">2027</option>
<option value="2028">2028</option>
<option value="2029">2029</option>
<option value="2030">2030</option>
<option value="2031">2031</option>
<option value="2032">2032</option>
<option value="2033">2033</option>
<option value="2034">2034</option>
<option value="2035">2035</option>
<option value="2036">2036</option>
</select>
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label for="exampleInputPassword1">Name on Card</label><input type="text" class="form-control" name="name_on_card" data-required="true" data-trigger="change">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input type="hidden" name="ak" value="">
<input type="hidden" name="amount" value="10.00">
<input type="hidden" name="app" value="Checkout">
<input type="hidden" name="orderID" value="123456">
<input type="hidden" name="email" value="">
<input type="hidden" name="mobileNo" value="9999999999">
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<button type="submit" class="btn btn-primary btn-block m-b-sm">Pay</button>
</div>
</div>
</div><!-- Card payments ends here -->

I don't see anything wrong with the code you posted, per se.
I personally prefer to wrap radio input buttons in the label tag without the for="" attribute. This makes it so clicking on the text also selects the radio button. Like so:
<label class="css-label cb3">
<input type="radio" data-required="true" name="cardType" id="one" class="" value="CC">
Credit Card
</label>
I tested your code in this jsfiddle (granted, I added my radio button change) and it seems to work. There must be something else in your code that is causing the issue. You could try posting a link to your development website.

I encountered probably same problem. Don't use "contenteditable='true'" property.
ERROR EXAMPLE:
<div class="input" contenteditable="true">
<label for="RadioOne"><input type="radio" value="val1" name="radio" id="RadioOne">Radio 1</label>
<label for="RadioTwo"><input type="radio" value="val2" name="radio" id="RadioTwo">Radio 2</label>
</div>
In your case if it isn't "contenteditable" search for other attributes which could interfere.

I think the problem is in your question, not in the code. Radio buttons all have the same name and are treated as a group. This is why the first one is selected with a tab, then to get to individual buttons with the arrow keys. I might have misunderstood the question but I hope its useful.
g

Hide And show html tab with a drop down menu

here is my code ..i code a php page where i want, if we select scholarship status yes then some options show below like bank name , branch etc and if we select scholarship status no , then not show any option.
<div class="controls">
<select id="" name="Scholarship info">
<option value="">select</option>
<option value="yes">yes</option>
<option value="no">no</option>
</select>
</div>
and if we select yes then show that options otherwise if we select no ..not show below options....
<div class="controls">
<select id="" name="Bank name">
<option value="">select</option>
<option value="state bank">State bank</option>
<option value="Canera Bank">Canera bank</option>
</select>
</div>
<div class="controls">
<select id="" name="Branch name">
<option value="">select</option>
<option value="amethi">amethi</option>
<option value="lucknow">lucknow</option>
</select>
</div>
<div class="controls">
<select id="" name="account number">
<input type="text" class="span6 typeahead" name="acoountnumber" placeholder="account number" value="<?php echo
set_value('accountnumber'); ?>" />
</div>

LIVE DEMO
$(document).ready(function() {
$("select[name='Bank name']").hide();
$("select[name='Branch name']").hide();
$("select[name='account number']").hide();
$("input[name='acoountnumber']").hide();
});
$("select[name='Scholarship info']").change(function() {
var selectedVal = $(this).val();
if(selectedVal == 'yes') {
$("select[name='Bank name']").show();
$("select[name='Branch name']").show();
$("select[name='account number']").show();
$("input[name='acoountnumber']").show();
} else {
$("select[name='Bank name']").hide();
$("select[name='Branch name']").hide();
$("select[name='account number']").hide();
$("input[name='acoountnumber']").hide();
}
});

If you add an extra class, withScholarship to the divs you want to show and hide, it is gets even easier. See this JSFiddle
<div class="controls">
<select id="" name="Scholarship info">
<option value="">select</option>
<option value="yes">yes</option>
<option value="no">no</option>
</select>
</div>
<div class="controls withScholarship">
<select id="" name="Bank name">
<option value="">select</option>
<option value="state bank">State bank</option>
<option value="Canera Bank">Canera bank</option>
</select>
</div>
<div class="controls withScholarship">
<select id="" name="Branch name">
<option value="">select</option>
<option value="amethi">amethi</option>
<option value="lucknow">lucknow</option>
</select>
</div>
<div class="controls withScholarship">
<input type="text" class="span6 typeahead" name="acoountnumber" placeholder="account number" value="121"/>
</div>
<script type="text/javascript">
$(".withScholarship").hide();
$("select[name='Scholarship info']").change(function() {
var flag = $(this).val() == "yes";
$(".withScholarship").toggle(flag);
})
</script>