Develop Reference

Fill in radio input with database data

When I query the form returns the input radio filled with the data of the database, as shown:
<input type="radio" id="Estado" name="Estado" value="Pendente" ' . ( ($row6["Estado"]=='Pendente') ? 'checked' : '' ) .' readonly="true"> Pendente <input type="radio" id="Estado" name="Estado" value="Concluído" ' . ( ($row6["Estado"]=='Concluído') ? 'checked' : '' ) .' readonly="true"> Concluído
I also show in the completed image:
But when I click the edit button it changes the filled input radio and should not, because it no longer fills according to the data of the database, as I show in the image:
script:
$(document).on('click', '.edit_data6', function(){
var employee_id6 = $(this).attr("Id");
$.ajax({
url:"./fetch26",
method:"POST",
data:{employee_id6:employee_id6},
dataType:"json",
success:function(data){
$('#data6').val(data.data6);
$('#Colaborador6').val(data.Colaborador6);
$('#Observacao6').val(data.Observacao6);
$('#Estado1').prop("checked", data.Estado);
$('#Conclusao').val(data.Conclusao);
$('#employee_id6').val(data.Id6);
$('#insert6').val("Gravar");
$('#exampleModal6').modal('show');
}
});
});
$('#insert_form6').on("submit", function(event){
event.preventDefault();
if($('#Colaborador6').val() == "")
{
alert("Colaborador é necessário");
}
else
{
$.ajax({
url:".conexao26",
method:"POST",
data:$('#insert_form6').serialize()
,
beforeSend:function(){
$('#insert6').val("Inserting");
},
success:function(data){
$('#insert_form6')[0].reset();
$('#exampleModal6').modal('hide');
$('#employee_table').html(data);
location.reload("exampleModal6");
}
});
}
});
HTML:
<form method="post" id="insert_form6">
<div class="col-md-4 col-xs-4">
<div class="form-group">
<h6><label for="Data-name" class="col-form-label">Data</label></h6>
<h6><input type="date" name="data6" id="data6" value="<?php echo date("Y-m-d");?>"></h6>
</div>
</div>
<div class="col-md-4 col-xs-4">
<div class="form-group">
<h6><label for="Colaborador-text" class="col-form-label">Colaborador</label></h6>
<h6><select style="width:150px" name="Colaborador6" id="Colaborador6" required>
<option></option>
<?php
$sql = "SELECT Funcionario FROM centrodb.InfoLuvas WHERE Ativo = '1' AND Funcao = 'Limpeza' AND Valencia = 'LAR'";
$qr = mysqli_query($conn, $sql);
while($ln = mysqli_fetch_assoc($qr)){
echo '<option value="'.$ln['Funcionario'].'">'.$ln['Funcionario'].'</option>';
}
?>
</select></h6>
</div>
</div>
<div class="row">
</div>
<div class="col-md-6 col-xs-6">
<div class="form-group">
<h6><label for="Observacao-name" class="col-form-label">Tarefa Pendente</label></h6>
<textarea type="text" id="Observacao6" name="Observacao6" class="form-control"></textarea>
</div>
</div>
<div class="col-md-6 col-xs-6">
<div class="form-group">
<h6><label for="Observacao-name" class="col-form-label">Estado</label></h6>
<div style="clear:both;"></div>
<h6><input type="radio" id="Estado1" name="Estado" value="Pendente"> Pendente <input type="radio" id="Estado1" name="Estado" value="Concluido"> Concluído</h6>
</div>
</div>
<div class="row">
</div>
<div class="col-md-6 col-xs-6">
<div class="disabled form-group">
<h6><label for="Observacao-name" class="col-form-label">Conclusão</label></h6>
<textarea type="text" id="Conclusao" name="Conclusao" class="form-control"></textarea>
</div>
</div>
<div class="col-md-2 col-xs-2">
<div class="form-group">
<h6><input type="hidden" name="Nome6" id="Nome6" value="Ana Ribeiro" readonly="true"></h6>
</div>
</div>
<div class="col-md-2 col-xs-2">
<div class="form-group">
<h6><input type="hidden" name="NomeConc" id="NomeConc" value="Ana Ribeiro" readonly="true"></h6>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Sair</button>
<input type="hidden" name="employee_id6" id="employee_id6" />
<input type="submit" name="insert6" id="insert6" value="Registo" data-toggle="modal" class="btn btn-success" />
</div>
</form>
I'm trying these ways but I still do not solve the problem:
1st form:
var tipo_conta = $('.tipo_conta').val(data.Estado);
if(tipo_conta == 'Pendente'){
$('#Estado1').prop('checked' , true);
}else{
$('#Estado2').prop('checked' ,true);
}
2st form:
var radios = document.getElementsByName("Estado");
if (radios.value == "Pendente") {
radios.checked = true;
}else{
radios.checked = true;
}
Can anyone help?

I found the issue inside the HTML file. As #daddygames suggested you have used the same ID in both Radio button. see below
<h6>
<input type="radio" id="Estado1" name="Estado" value="Pendente"> Pendente
<input type="radio" id="Estado1" name="Estado" value="Concluido"> Concluído
</h6>
An ID must be unique. Update the ID and make it unique. Then change the code in .ajax script according to your need. This will help you.

First I created the variable lis to receive the value that the radio input receives from the database:
var lis = $("#Estado").val();
Then inside the data function I created another variable with the value that the radio input receives from the function:
var teste = data.Estado;
and finally I check with if:
if(lis == teste){
$('#Estado').prop('checked' , true);
}else{
$('#Estado1').prop('checked' ,true);
}
Full Code:
$(document).on('click', '.edit_data6', function(){
var employee_id6 = $(this).attr("Id");
var lis = $("#Estado").val();
$.ajax({
url:"./fetch26",
method:"POST",
data:{employee_id6:employee_id6},
dataType:"json",
success:function(data){
var teste = data.Estado;
$('#data6').val(data.data6);
$('#Colaborador6').val(data.Colaborador6);
$('#Observacao6').val(data.Observacao6);
if(lis == teste){
$('#Estado').prop('checked' , true);
}else{
$('#Estado1').prop('checked' ,true);
}
$('#Conclusao').val(data.Conclusao);
$('#employee_id6').val(data.Id6);
$('#insert6').val("Gravar");
$('#exampleModal6').modal('show');
}
});
});

Select Option Doesn't Set on Button Click with jQuery

I've tried following a couple of answers with no success. I am trying to get the select box to go back to the "Please Select One Option" when the Add Exercise button is clicked. I got it to work in a simple scenario like this:
<div id="retro_add_exercises">
<div class="row">
<div class="input-field col s12">
<div class="select-wrapper initialized">
<select class="initialized" id="exercise_category">
<option value="0" disabled="" selected="">Please Select One</option>
<option value="1">Cardio</option>
<option value="2">Weight Lifting</option>
<option value="3">Stretching</option>
</select>
</div>
</div>
</div>
<!-- CARDIO SELECT FIELD -->
<div class="row" id="select_cardio">
<form method="POST" id="cardio_form">
<div class="input-field col s12">
<button class="btn waves-effect waves-light" id="add_exercise_from_cardio" type="submit" name="action" value="ADD">Add Exercise from cardio</button>
</div>
</form>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#add_exercise_from_cardio').click(function() {
$('#exercise_category').val('0').change();
});
});
</script>
But in my main project, it isn't working when I have the row show and hide on button click too. Any help would be appreciated.
$(document).ready(function() {
$('#retroactive_date_form').submit(function(e) {
e.preventDefault();
var date = $('#retroactive_date_picker');
var exercise_date = date.val();
if (exercise_date !== '') {
var exercise_category;
var weight_set_type;
console.log(exercise_date);
date.prop('disabled', true);
$('#retroactive_date_submit').addClass('disabled');
$('#retro_add_exercises').show();
//Exercise Category Function
$('#exercise_category').on('change', function() {
exercise_category = $('#exercise_category').val();
console.log(exercise_category);
if (this.value === '1')
{
$('#select_cardio').show();
$('#drop_or_reg_set_select_exercise').hide();
$('#super_set_select_exercises').hide();
$('#drop_and_regular_set_action_btn').hide();
$('#super_set_action_btn').hide();
$('#super_set_table_row').hide();
$('#drop_or_reg_set_table_row').hide();
}
else
$('#select_cardio').hide();
if (this.value === '2')
{
$('#select_weight').show()
}
else
$('#select_weight').hide();
if (this.value === '3')
{
$('#select_stretch_fields').show();
$('#select_cardio').hide();
$('#drop_or_reg_set_select_exercise').hide();
$('#super_set_select_exercises').hide();
$('#drop_and_regular_set_action_btn').hide();
$('#super_set_action_btn').hide();
$('#super_set_table_row').hide();
$('#select_weight').hide();
$('#drop_or_reg_set_table_row').hide();
}
else
$('#select_stretch_fields').hide();
return exercise_category;
});
///////////Cardio Training Functions///////////////
//Selecting Cardio Exercise
$('#cardio_exercise').on('change', function (e) {
var cardio_exercise;
cardio_exercise = $('#cardio_exercise').val();
console.log(cardio_exercise);
});
//Adding Another Exercise After Done Adding Current Cardio Exercise
$('#add_exercise_from_cardio').on('click', function(e) {
e.preventDefault();
$('#exercise_category option[value="0"]').attr('selected', true);
$('#select_cardio').hide();
$('#drop_or_reg_set_select_exercise').hide();
$('#super_set_select_exercises').hide();
$('#drop_and_regular_set_action_btn').hide();
$('#super_set_action_btn').hide();
$('#super_set_table_row').hide();
$('#drop_or_reg_set_table_row').hide();
});
//Error Handling If No Date is Selected Before Starting
else {
alert('Please select date')
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="retro_add_exercises" style="display:none">
<div class="row">
<div class="input-field col s12">
<div class="select-wrapper initialized"><span class="caret">▼</span>
<select class="initialized" id="exercise_category">
<option value="0" disabled="" selected="">Please Select One</option>
<option value="1">Cardio</option>
<option value="2">Weight Lifting</option>
<option value="3">Stretching</option>
</select>
</div>
<label>Choose Exercise Type</label>
</div>
</div>
<!-- CARDIO SELECT FIELD -->
<div class="row" style="display:none" id="select_cardio">
<form method="POST" id="cardio_form">
<div class="input-field col s12">
<div class="select-wrapper initialized"><span class="caret">▼</span>
<select id="cardio_exercise" name="cardio_exercise" class="initialized">
<option value="0" disabled selected>Choose Cardio Exercise</option>
<option value="1">Jumping Jacks</option>
<option value="2">Jump Rope</option>
<option value="3">Precor</option>
<option value="4">Running (outside)</option>
<option value="5">Swimming</option>
<option value="6">Treadmill</option>
</select>
</div>
<input type="date" style="display:none" id="cardio_exercise_date" name="cardio_exercise_date">
<input placeholder="Duration (minutes)" name="cardio_duration" id="cardio_duration" type="number" class="validate">
<input placeholder="Distance (optional)" name="cardio_distance" id="cardio_distance" type="number" class="validate">
<button class="btn waves-effect waves-light" id="add_exercise_from_cardio" type="submit" name="action" value="ADD">Add Exercise</button>
<button class="btn waves-effect waves-light" id="finish_tracking" type="submit" name="action" value="FINISH">Finish Workout</button>
<label for="cardio_exercise">Choose Exercise</label>
</div>
</form>
</div>

The jQuery documentation dictates that since jQuery 1.6, attr will not update the dynamic state of a DOM element. In addition, it appears your select is disabled after being selected. Try:
$('#exercise_category option[value="0"]').prop('disabled', false);
$('#exercise_category option[value="0"]').prop('selected', true);

There is probably a better and more efficient way to solve it, but I figured it out. I wrapped the select option in form wrappers and gave the form an ID. Then on the button click I triggered reset of the form using
$('#button_id').on('click', function(e) {
e.preventDefault();
$('#form_id').trigger('reset');
});
Although I'm sure there is a better way, this method worked for me and hopefully it works for someone else too.

How to only validate a form when toggled

I have a form with bootstrap toggles for each day of the week. When toggled "yes", a div with two select boxes appears. When toggled "no", the div disappears. This is functioning perfectly, but I want to use JavaScript to validate the form.
However, if one or more of the days are toggled "no", I don't want to validate that section of the form.
$('#mycheckbox').change(function() {
$('#mycheckboxdiv').toggle("fast");
});
I have tried multiple suggestions from online mostly using :visible, but I still cant get it to work.
I'm still new to JavaScript.
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
<input name="everyday" name="mycheckbox" id="mycheckbox" type="checkbox" data-toggle="toggle" data-on="Yes" data-off="No" data-onstyle="success" data-offstyle="danger" value="0">
<div id="mycheckboxdiv" style="display:none">
<select class="btn btn-default" name="ed_from" id="ed_from" method="post">
<option disabled selected>From</option>
<?php for($i = 1; $i < 25; $i++): ?>
<option value="<?= $i; ?>"><?= $i % 12 ? $i % 12 : 12 ?>:00 <?= $i >= 12 ? 'pm' : 'am' ?></option>
<?php endfor ?>
</select>
<select class="btn btn-default" name="ed_to" method="post">
<option disabled selected>Until</option>
<?php for($i = 1; $i < 25; $i++): ?>
<option value="<?= $i; ?>"><?= $i % 12 ? $i % 12 : 12 ?>:00 <?= $i >= 12 ? 'pm' : 'am' ?></option>
<?php endfor ?>
</select>
<div><label class=" err2 err" id="ed_from_error">Please select your availability</label></div>
<br><br>
</div>
<div class="form-group">
<input type="submit" class="btn btn-primary btn-lg btn-block" id="submit" method="post" value="next">
</div>

There are many errors in the HTML. method="post" attribute not available for select DOM. Use <form method="POST"></form> element to submit your data. Here is the example but I not used the <form> tag.
HTML Code
<input name="everyday" id="mycheckbox" type="checkbox" value="1" >
<div id="mycheckboxdiv" style="display:none">
<select class="btn btn-default" name="ed_from" id="ed_from">
<option disabled selected value="">From</option>
<option value="1">1:00 AM</option>
</select>
<select class="btn btn-default" name="ed_to" id="ed_to">
<option disabled selected value="">Until</option>
<option value="1">1:00 AM</option>
</select>
<div><label class=" err2 err" id="ed_from_error">Please select your availability</label></div>
<br><br>
</div>
<div class="form-group">
<input type="submit" class="btn btn-primary btn-lg btn-block" id="submit" method="post" value="next">
</div>
jQuery Code
$('#mycheckbox').change(function() {
$('#mycheckboxdiv').toggle("fast");
});
$('#submit').click(function() {
if($('#mycheckbox').val()){
if($('#ed_from option:selected').val() == '' || $('#ed_to option:selected').val() == ''){
$('#ed_from_error').show();
}else
$('#ed_from_error').hide();
}
});
https://fiddle.jshell.net/LLayz0k3/
If you want to try with <form> tag
$( "#target" ).submit(function( event ) {
event.preventDefault();
// Add your validation here
....
....
});

You might try to use one of the solutions for checking for visibility from this question.
This is only if you are doing manual validation of some kind. If you are using some library you will need to provide more specifics if you need more help on how to unregister the validation when your submit is pressed.
Edit: More closely match posted snippet.
// unhide if checkbox is checked on page load (probably not needed)
if ($("#mycheckbox")[0].checked) {
$("#mycheckboxdiv").show("fast")
}
// toggle when checkbox changes
$("#mycheckbox").change(function() {
$("#mycheckboxdiv").toggle("fast");
});
// validation
$("#submit").click(function() {
if ($("#mycheckboxdiv").is(":visible")) { // jquery
//if ($("#mycheckboxdiv")[0].offsetParent != null) { // non jquery
// do validation here
if ($("#ed_to").val() == null || $("#ed_from").val() == null) {
$("#ed_from_error_1").show("fast");
return false;
} else {
$("#ed_from_error_1").hide("fast");
}
if ($("#ed_to").val() <= $("#ed_from").val()) {
$("#ed_from_error_2").show("fast");
return false;
} else {
$("#ed_from_error_2").hide("fast");
}
}
// alter just for snippet
alert("All good");
return true;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
<input name="everyday" name="mycheckbox" id="mycheckbox" type="checkbox" data-toggle="toggle" data-on="Yes" data-off="No" data-onstyle="success" data-offstyle="danger" value="0">
<div id="mycheckboxdiv" style="display:none">
<select class="btn btn-default" name="ed_from" id="ed_from" method="post">
<option disabled selected>From</option>
<option value="1">01:00</option>
<option value="2">02:00</option>
<option value="3">03:00</option>
<option value="4">04:00</option>
</select>
<select class="btn btn-default" name="ed_to" id="ed_to" method="post">
<option disabled selected>Until</option>
<option value="1">01:00</option>
<option value="2">02:00</option>
<option value="3">03:00</option>
<option value="4">04:00</option>
</select>
<div>
<label class="err2 err" id="ed_from_error_1" style="display:none">Please select your availability</label>
<label class="err2 err" id="ed_from_error_2" style="display:none">Until must be later than from</label>
</div>
<br><br>
</div>
<div class="form-group">
<input type="submit" class="btn btn-primary btn-lg btn-block" id="submit" method="post" value="next">
</div>

Ok after plenty of research I've figured out what I was missing. A lot of the different JavaScript I was trying out was actually perfectly valid and would have worked fine however I discovered the underlying issue was actually with not initializing the bootstrap toggle before running any other JavaScript.
$('#mycheckbox').bootstrapToggle('off');
http://www.bootstraptoggle.com/
I now have a code that displays the selects and validates them when toggle is on, or hides and does not validate them when the toggle is off.
//initialize bootstrap.
$('#mycheckbox').bootstrapToggle('off');
//Show/Hide div when toggled.
$('#mycheckbox').change(function() {
$('#mycheckboxdiv').toggle("fast");
});
$(function availability(){
$('.err').hide();
$("#submit").click(function() {
//If toggle is checked:
if ($('#mycheckbox').prop("checked")){
//validate.
var ed_from = $("#ed_from").val();
if (ed_from == null) {
$("label#ed_from_error").show();
$("#ed_from").focus();
document.getElementById('ed_from').style.borderColor = "red";
return false;
}else{
if (ed_from != null) {
document.getElementById('ed_from').style.borderColor = "green";
}
}
}
});
});

Auto populate dropdown fields doesn't work

I have 2 drop down fields which both auto populated.
Example :
car_model -> dropdown_field1
car_model_variants -> dropdown_field2
When I select a model in car_model field, car_model_variants must update its values.
In my case, I have index.php where you can click a button that will show the modal box and you'll find the auto populated drop down fields.
First attempt, when selecting a car_model it works the car_model_variants field is updating its values. But it doesn't work if I submit a form when car_model_variants is empty, If I try to select a car_model again? the dropdown 2 field is not updating. Below is my code.
(function ($) {
$('.edit').formPopup({
'modalParams': {
'parent_container': $('div.autodeal')
},
'callback': function (settings)
{
$('.modal')
.addClass('large')
.css({'z-index': 101});
$('#used_car_car_model').change(function () {
var select = $(this);
$.ajax({
'url': '{{ path("autodeal_backend_filter_select") }}',
'data': {'carModelId': select.val(), 'carGuideOnly': 0, 'isVerified': 1, 'showCompleteName': 1},
success: function (html)
{
$('#used_car_car_model_variant').html(html);
}
});
});
},
'formSubmitParams': {
'retainFormUrl': false,
'submit_callback': function ()
{
window.location.reload();
},
'error_callback': function (form, settings)
{
$('.close, .exit', $(settings.container))
.click(function () {
window.location.reload();
});
}
}
});
})(jQuery);
Here's the full code.
<form novalidate="" action="/app_dev.php/used-car-listings/164/edit" method="POST">
<div class="marginbottom row gutters">
<div class="col span_12">
<div>
<div>
<label for="used_car_plate_number" class="required">Plate number</label>
<input type="text" id="used_car_plate_number" name="used_car[plate_number]" required="required" value="GS0909">
</div>
<div>
<label for="used_car_year" class="required">Year</label>
<input type="text" id="used_car_year" name="used_car[year]" required="required" value="2015">
</div>
<div>
<label for="used_car_car_model" class="required">Car Model</label>
<select id="used_car_car_model" name="used_car[car_model]" required="required">
<option value="">Select A Model</option><option value="102">Mercedes-Benz A-Class</option><option value="401" selected="selected">Mercedes-Benz AMG</option><option value="103">Mercedes-Benz B-Class</option><option value="105">Mercedes-Benz C-Class Coupe</option><option value="104">Mercedes-Benz C-Class Sedan</option><option value="115">Mercedes-Benz CLA-Class</option><option value="576">Mercedes-Benz CLC-Class</option><option value="577">Mercedes-Benz CLK-Class</option><option value="106">Mercedes-Benz CLS-Class</option><option value="107">Mercedes-Benz E-Class</option><option value="578">Mercedes-Benz G-Class</option><option value="108">Mercedes-Benz GL-Class</option><option value="109">Mercedes-Benz GLK-Class</option><option value="110">Mercedes-Benz M-Class</option><option value="111">Mercedes-Benz S-Class</option><option value="112">Mercedes-Benz SL-Class</option><option value="113">Mercedes-Benz SLK-Class</option><option value="114">Mercedes-Benz SLS-Class</option><option value="579">Mercedes-Benz Viano</option></select>
</div>
<div>
<label for="used_car_car_model_variant" class="required">Car Model Variant</label>
<select id="used_car_car_model_variant" name="used_car[car_model_variant]" required="required"><option value="">Select Mercedes-Benz A-Class Variant</option><option value="343">2014 Mercedes-Benz A-Class A 250 Sport 4MATIC</option><option value="344">2014 Mercedes-Benz A-Class A 45 AMG</option></select>
</div>
<div>
<label for="used_car_mileage" class="required">Mileage</label>
<input type="text" id="used_car_mileage" name="used_car[mileage]" required="required" value="1700">
</div>
<div>
<label for="used_car_price" class="required">Price</label>
<input type="text" id="used_car_price" name="used_car[price]" required="required" value="3288300">
</div>
<div>
<label for="used_car_used_car_color" class="required">Color</label>
<select id="used_car_used_car_color" name="used_car[used_car_color]" required="required">
<option value="">Select A Color</option><option value="1">Red</option><option value="2">Blue</option><option value="3">Black</option><option value="4">White</option><option value="5">Green</option><option value="6">Silver</option><option value="7" selected="selected">Grey</option><option value="8">Yellow</option><option value="9">Brown</option><option value="10">Beige</option><option value="11">Orange</option><option value="12">Purple</option><option value="13">Pink</option><option value="14">Turquoise</option><option value="15">Bronze</option></select>
</div>
<div>
<label for="used_car_description" class="required">Description</label>
<textarea id="used_car_description" name="used_car[description]" required="required" cols="4" rows="3">Body color, Tenorite Gray</textarea>
</div>
<div>
<label class="required">City</label>
<input type="hidden" id="used_car_city_id" name="used_car[city][id]" value="20"><input type="text" id="used_car_city_text" name="used_car[city][text]" required="required" autocomplete="off" value="San Juan, Metro Manila">
</div>
<div>
<label class="required">Is service record submitted</label>
<div id="used_car_is_service_record_submitted"><label class="marginleft marginright"><input type="radio" id="used_car_is_service_record_submitted_0" name="used_car[is_service_record_submitted]" required="required" value="1">Yes
</label><label class="marginleft marginright"><input type="radio" id="used_car_is_service_record_submitted_1" name="used_car[is_service_record_submitted]" required="required" value="0" checked="checked">No</label></div>
</div>
<div>
<label class="required">Is LTO verified</label>
<div id="used_car_is_lto_verified"><label class="marginleft marginright"><input type="radio" id="used_car_is_lto_verified_0" name="used_car[is_lto_verified]" required="required" value="1" checked="checked">Yes
</label><label class="marginleft marginright"><input type="radio" id="used_car_is_lto_verified_1" name="used_car[is_lto_verified]" required="required" value="0">No
</label></div>
</div>
<div>
</div>
</div>
<input type="hidden" id="used_car__token" name="used_car[_token]" value="4e4UOHBr5SmtV7Pb0WoWv4xSz90LoVarNG8hw0dy_RY"> <hr class="nomargin marginbottom30 margintop20">
<div class="row">
<button type="submit" class="button">Save</button>
</div>
</form>

how to call multiple function on each value of select box

here is my code. I want to call showdefault() function on every option value of select box and MaxSize() when value == "Address" and
EnableRangeSearch() when value == "Checkbox". I am enable to perform this. Can any one suggest where i am wrong
$(document).ready(function(){
$("select").change(function(){
if(document.getElementById("data_type").value=="Address"){
//MaxSize() is function defined in function.php page
MaxSize();
}
if(document.getElementById("data_type").value=="Checkbox"){
//EnableRangeSearch() is function defined in function.php page
EnableRangeSearch();
}
});
});
<select class="form-control" name="data_type" id="data_type">
<option value="Text Fields" id="TextFields">Text Fields</option>
<option value="Address" id="Address">Address</option>
<option value="Checkbox">Checkbox</option>
<option value="Currency">Currency</option>
</select>
<?php include 'function.php';
//fields is a class name
$qwerty=new fields;
$qwerty->showdefault();
?>

Try this
$("#data_type").change(function () {
showdefault();
if ($(this).val() == "Address") {
MaxSize();
} else if ($(this).val() == "Checkbox") {
EnableRangeSearch();
}
});
you need define javascript function for showdefault(), MaxSize() and EnableRangeSearch().

First create function for all select options then call showdefault() function in which you call selected option's functions. For example: see below
//this script for sending `id` of dropdown option to results.php page
$('#data_type option').on('click', function(){
$.get('miniresults.php',
{
option: this.id
},
function(data){
$('.show_contain').html(data); //do something with whatever data is returned
});
});
IN home.php
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<form class="form-horizontal" name="apply" id="apply" method="post">
<div class="form-group">
<label class="col-xs-3 control-label">Data type</label>
<div class="col-xs-6">
<select class="form-control" name="data_type" id="data_type">
<option value="Text_Fields" id="TextFields">Text Fields</option>
<option value="Address" id="Address">Address</option>
<option value="Checkbox" id="Checkbox">Checkbox</option>
<option value="Currency" id="Currency">Currency</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">Field Name</label>
<div class="col-xs-6">
<input type="text" class="form-control" name="FieldName" placeholder="Field Name">
</div>
</div>
<div class="show_contain" id="show_contain">
<div class="form-group">
<label class="col-xs-3 control-label">Display Label</label>
<div class="col-xs-6">
<input type="text" class="form-control" name="DisplayLabel" placeholder="Display Label">
</div>
</div>
</div>
</form>
IN miniresults.php
<?php
class fields
{
public function showdefault()
{
$viewdefault='<div class="form-group"><label class="col-xs-3 control-label">Display Label</label><div class="col-xs-6"><input type="text" class="form-control" name="DisplayLabel" placeholder="Display Label"></div></div><div class="form-group"><label class="col-xs-3 control-label">System Label</label><div class="col-xs-6"><input type="text" class="form-control" name="SystemLabel" placeholder="System Label"></div></div><div class="form-group"><label class="col-xs-3 control-label">Help Text</label><div class="col-xs-6"><input type="text" class="form-control" name="HelpText" placeholder="Help Text"></div></div>';
return $viewdefault;
}
public function get_default_value()
{
$set_default_vals='<div class="form-group"><label class="col-xs-3 control-label">Default Value</label><div class="col-xs-6"><input type="text" class="form-control" name="DefaultValue" placeholder="Default Value"></div></div>';
return $set_default_vals;
}
public function get_msize()
{
$addr="<div class='form-group'><label class='col-xs-3 control-label'>Max Size</label><div class='col-xs-6'><input type='text' class='form-control' name='MaxSize' placeholder='Max Size' value='255'></div></div>";
return $addr;
}
public function get_range()
{
$range="<div class='form-group'><label class='col-xs-3 control-label'>Enable Range Search</label><div class='checkbox col-xs-6'><label><input type='checkbox' class='checkbox' name='EnableRangeSearch' value='Yes' /></label></div></div>";
return $range;
}
}
//this class for different datatypes
class drop_type extends fields
{
function show_Text_Fields()
{
echo $this->showdefault();
echo $this->get_default_value();
echo $this->get_msize();
}
function show_Address()
{
echo $this->showdefault();
echo $this->get_default_value();
echo $this->get_msize();
}
function show_Checkbox()
{
echo $this->showdefault();
echo $this->get_default_value();
}
function show_Currency()
{
echo $this->showdefault();
echo $this->get_default_value();
echo $this->get_range();
}
}
//Object declaration of class drop_type()
$show_drop = new drop_type();
//$_GET['option'] contain `id` of dropdown option
switch($_GET['option']){
//case include name of options in dropdown
case 'TextFields':
echo $show_drop->show_text_fields();
break;
case 'Address':
echo $show_drop->show_Address();
break;
case 'Checkbox':
echo $show_drop->show_Checkbox();
break;
case 'Currency':
echo $show_drop->show_Currency();
break;
default:
//default contain textfields contain
echo $show_drop->show_text_fields();
break;
}
?>