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

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

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

Related

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.

jQuery clone and bind event issue

I m trying to clone one div with some elements on a tag click event when clone is happening I am changing a tag to delete and bind click event. Whenever I add more clone I will remove a delete tag from all previous clone and keep it on last clone. when user click on last a tag with click event, I will remove last clone tag and add delete to previous clone which will become last clone.
Every thing works until when "delete to previous clone which will become last clone" but my delete a tag will stop working. Kindly let me know what I am doing wrong.
My jsfiddle https://jsfiddle.net/milindsaraswala/6mt29a6x/ (Sorry for not putting any css in my jsfiddle as it is huge)
Sample code of jQuery
$(document).ready(function () {
$(".addFlightBtn").click(function () {
$(".flightRows").append($(".flightRow:first").clone());
$(".flightRow").find(".exclude").removeClass("exclude");
var flightLength = $(".flightRows").children(".flightRow").length;
$(".flightRow:last").find("#lbFlight").html("Flight " + flightLength);
$(".flightRow:last").find(".addFlightBtn").addClass("exclude delFlightBtn").removeClass("addFlightBtn").html("Delete Flight");
$(".flightRow").not(':first').find('a').not('.exclude').remove();
$(".flightRow:last").find(".delFlightBtn").bind("click", function () {
$(this).closest(".flightRow").prev().find(".searchBtnHolder").html('Delete Flight');
$(this).closest(".flightRow").remove();
});
});
});

Your code is fine except use delegate event binding when you adding html
dynamically.
I have only changed your delete event handler this is how. Here's Working Fiddle
$(document).on("click", ".delFlightBtn", function() {
if ($(".flightRow").length > 2) {
$(this).closest(".flightRow").prev()
.find(".searchBtnHolder")
.html('Delete Flight');
}
$(this).closest(".flightRow").remove();
});
After fixing the event handler you will find another problem which is fixed by this line
if ($(".flightRow").length > 2) {
$(this).closest(".flightRow").prev()
.find(".searchBtnHolder")
.html('Delete Flight');
}
$(document).ready(function() {
$(".addFlightBtn").click(function() {
$(".flightRows").append($(".flightRow:first").clone());
$(".flightRow").find(".exclude").removeClass("exclude");
var flightLength = $(".flightRows").children(".flightRow").length;
$(".flightRow:last").find("#lbFlight").html("Flight " + flightLength);
$(".flightRow:last").find(".addFlightBtn").addClass("exclude delFlightBtn").removeClass("addFlightBtn").html("Delete Flight");
$(".flightRow").not(':first').find('a').not('.exclude').remove();
});
$(document).on("click", ".delFlightBtn", function() {
if ($(".flightRow").length > 2) {
$(this).closest(".flightRow").prev().find(".searchBtnHolder").html('Delete Flight');
}
$(this).closest(".flightRow").remove();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="midcontainer pad20">
<div class="content-area fullWidth whiteBg">
<div class="pad15">
<div class="flightRows">
<div class="row flightRow">
<p><strong><span id="lbFlight">Flight 1</span></strong></p>
<div class="depCol1">
<label for="seldcity1" id="lbDeptCity">Departure city</label>
<br>
<select>
<option>Abu Dhabi (AUH)</option>
<option>Amman (AMM)</option>
<option>Bahrain (BAH)</option>
<option>Bangkok (BKK)</option>
<option>Beirut (BEY)</option>
<option>Cairo (CAI)</option>
<option>Thiruvananthapuram (TRV)</option>
</select>
</div>
<div class="depCol1">
<label for="seldcity2" id="lbArvlCity">Arrival city</label>
<br>
<select>
<option>Abu Dhabi (AUH)</option>
<option>Amman (AMM)</option>
<option>Bahrain (BAH)</option>
<option>Bangkok (BKK)</option>
<option>Beirut (BEY)</option>
<option>Cairo (CAI)</option>
<option>Thiruvananthapuram (TRV)</option>
</select>
</div>
<div class="depCol1">
<label for="selddate1" id="lbDeptDate">Departing</label>
<br />
<input name="selddate1" type="text" id="selddate1" autocomplete="off" class="datepicker calIcon hasDatepicker">
</div>
<div class="searchBtnHolder">Add another Flight</div>
<div class="clear"></div>
<hr />
</div>
</div>
<!--<div class="row">
<p><strong>Flight 2</strong></p>
<div class="depCol1">
<label for="seldcity1" id="lbDeptCity">Departure city</label><br>
<select>
<option>Abu Dhabi (AUH)</option>
<option>Amman (AMM)</option>
<option>Bahrain (BAH)</option>
<option>Bangkok (BKK)</option>
<option>Beirut (BEY)</option>
<option>Cairo (CAI)</option>
<option>Thiruvananthapuram (TRV)</option>
</select>
</div>
<div class="depCol1">
<label for="seldcity2" id="lbArvlCity">Arrival city</label><br>
<select>
<option>Abu Dhabi (AUH)</option>
<option>Amman (AMM)</option>
<option>Bahrain (BAH)</option>
<option>Bangkok (BKK)</option>
<option>Beirut (BEY)</option>
<option>Cairo (CAI)</option>
<option>Thiruvananthapuram (TRV)</option>
</select>
</div>
<div class="depCol1">
<label for="selddate1" id="lbDeptDate">Departing</label><br />
<input name="selddate1" type="text" id="selddate1" autocomplete="off" class="datepicker calIcon hasDatepicker">
</div>
<div class="searchBtnHolder">Delete Flight</div>
<div class="clear"></div>
<hr />
</div>-->
<div class="row">
<p><strong>Passengers</strong></p>
<div class="depCol1">
<label for="seladults" id="lbAdults">Adults</label>
<br>
<select name="seladults" id="seladults" class="wth70 noMargin">
<option value="1" selected="">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
<br>
<span class="ageCount" id="lbAge12">(Age 12+)</span>
</div>
<div class="depCol1">
<label for="selchildren" id="lbChildren">Children</label>
<br>
<select name="selchildren" id="selchildren" class="wth70">
<option value="0" selected="">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select>
<br>
<span class="ageCount" id="lbChild">(Age 2-11)</span>
</div>
<div class="depCol1">
<label for="selinfants" id="lbInfants">Infants</label>
<br>
<select name="selinfants" id="selinfants" class="wth70">
<option value="0" selected="">0</option>
<option value="1">1</option>
</select>
<br>
<span class="ageCount" id="lbInfant">(Age <2)</span>
</div>
<div class="depCol1">
<label for="class" id="lbClass">Class</label>
<br>
<select name="selcabinclass" id="class" class="wth150">
<option selected="" value="0">Economy Class</option>
<option value="1">Business Class</option>
<option value="2">First Class</option>
</select>
</div>
<div class="depCol1">
<label for="payBy" id="lbpayBy">Pay By</label>
<br>
<select name="payBy" id="payBy" class="wth130">
<option value="KNET">K-Net</option>
<option selected="" value="CC">Credit Card</option>
</select>
</div>
<div class="depCol2">
<label for="promocode" id="lbPromoCode">Promo Code</label>
<br>
<input type="text" name="promocode" id="promocode" class="wth100 margin10">
</div>
<div class="clear"></div>
<br />
<br />
<div>
<input name="btnFindFlight" type="button" class="searchBtn" id="btnFindFlight" value="Find Flights">
</div>
<div class="clear"></div>
<hr />
</div>
</div>
</div>
</div>

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>

HTML form with JS does not work properly in PHP

I have a form with JS where I hide and show form's fields after choosing option with radiobuttons.
<?php require_once 'resources/menus/adminMenu.php'; ?>
<div class="col-lg-offset-3 col-lg-6 ">
<div class="well bs-component">
<form class="form-group" method="post">
<fieldset>
<legend>Wyszukaj</legend>
<div class="form-group" style="display: block" id="queryIndex">
<label for="index" class="control-label">Indeks</label>
<input class="form-control" id="index" name="index" type="text">
</div>
<div class="form-group" style="display: none" id="queryName">
<label for="name" class="control-label">Imię</label>
<input class="form-control" id="name" name="name" type="text">
<label for="surname" class="control-label">Nazwisko</label>
<input class="form-control" id="surname" name="surname" type="text">
</div>
<div class="form-group" style="display: none" id="queryFaculty">
<label for="faculty" class="control-label">Wydział</label>
<select class="form-control" id="faculty" name="faculty" required="required">
<option value=""></option>
<option value="Wydział A">Wydział A</option>
<option value="Wydział B">Wydział B</option>
<option value="Wydział C">Wydział C</option>
<option value="Wydział D">Wydział D</option>
<option value="Wydział E">Wydział E</option>
</select>
</div>
<div class="form-group" style="display: none" id="querySubject">
<label for="subject" class="control-label">Kierunek</label>
<select class="form-control" id="subject" name="subject" required="required">
<option value=""></option>
<option value="Kierunek AA">Kierunek AA</option>
<option value="Kierunek AB">Kierunek AB</option>
<option value="Kierunek AC">Kierunek AC</option>
<option value="Kierunek BA">Kierunek BA</option>
<option value="Kierunek BB">Kierunek BB</option>
<option value="Kierunek BC">Kierunek BC</option>
<option value="Kierunek CA">Kierunek CA</option>
<option value="Kierunek CB">Kierunek CB</option>
<option value="Kierunek CC">Kierunek CC</option>
<option value="Kierunek DA">Kierunek DA</option>
<option value="Kierunek DB">Kierunek DB</option>
<option value="Kierunek DC">Kierunek DC</option>
<option value="Kierunek EA">Kierunek EA</option>
<option value="Kierunek EB">Kierunek EB</option>
<option value="Kierunek EC">Kierunek EC</option>
</select>
</div>
<div class="form-group" style="display: none" id="querySystem">
<label for="system" class="control-label">System</label>
<select class="form-control" id="system" name="system" required="required">
<option value=""></option>
<option value="st">Stacjonarne</option>
<option value="nst">Niestacjonarne</option>
</select>
</div>
<div class="form-group" style="display: none" id="queryDegree">
<label for="degree" class="control-label">Stopień</label>
<select class="form-control" id="degree" name="degree" required="required">
<option value=""></option>
<option value="I">1. stopień (inżynierskie/licencjat)</option>
<option value="II">2. stopień (magisterskie)</option>
</select>
</div>
<div class="form-group" style="display: none" id="querySemester">
<label for="semester" class="control-label">Semestr</label>
<select class="form-control" id="semester" name="semester" required="required">
<option value=""></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select>
</div>
<div class="form-group">
<input type="radio" name="search" value="index" checked="checked"
onClick="changeForm('queryIndex')"> Indeks
<input type="radio" name="search" value="name"
onClick="changeForm('queryName')"> Imię i nazwisko
<input type="radio" name="search" value="faculty"
onClick="changeForm('queryFaculty')"> Wydział
<input type="radio" name="search" value="subject"
onClick="changeForm('querySubject')"> Kierunek
<input type="radio" name="search" value="system"
onClick="changeForm('querySystem')"> System
<input type="radio" name="search" value="degree"
onClick="changeForm('queryDegree')"> Stopień
<input type="radio" name="search" value="semester"
onClick="changeForm('querySemester')"> Semestr
</div>
<script type="text/javascript">
function changeForm(element) {
document.getElementById('queryIndex').style.display = 'none';
document.getElementById('queryName').style.display = 'none';
document.getElementById('queryFaculty').style.display = 'none';
document.getElementById('querySubject').style.display = 'none';
document.getElementById('querySystem').style.display = 'none';
document.getElementById('queryDegree').style.display = 'none';
document.getElementById('querySemester').style.display = 'none';
document.getElementById(element).style.display = 'block';
}
</script>
<div class="form-group col-lg-4">
<div class="control-label">
<button type="submit" class="btn btn-primary" name="submit" value="searchStudent">Szukaj
</button>
</div>
</div>
</fieldset>
</form>
</div>
</div>
Also I have PHP file, where I get data from this form.
function studentWindow()
{
$this->setView("AdminPanel", "StudentWindow");
if (isset($_POST['submit']) && $_POST['submit'] == 'searchStudent') {
$query="";
$data=array();
if($_POST['search']=='index'){
$data['index']=sanitizeString($_POST['index']);
$query="st_index LIKE '?%'";
}
elseif($_POST['search']=='name'){
$data['name']=sanitizeString($_POST['name']);
$data['surname']=sanitizeString($_POST['surname']);
$query="name LIKE '?%' AND surname LIKE '?%'";
}
elseif($_POST['search']=='faculty'){
$data['faculty']=$_POST['faculty'];
$query='AS st INNER JOIN subject AS s ON st.id_subject=s.id_subject INNER JOIN faculty AS f ON s.id_faculty=f.id_faculty WHERE f.name=?';
}
elseif($_POST['search']=='subject'){
$data['subject']=$_POST['subject'];
$query='AS st INNER JOIN subject AS s ON st.id_subject=s.id_subject WHERE s.name=?';
}
elseif($_POST['search']=='system'){
$data['system']=$_POST['system'];
$query='system=?';
}
elseif($_POST['search']=='degree'){
$data['degree']=$_POST['degree'];
$query='degree=?';
}
elseif($_POST['search']=='semester'){
$data['semester']=$_POST['semester'];
$query='semester=?';
}
$this->loadModel("AdminPanel");
$model = new AdminPanelModel();
$model->getStudents($query,$data);
}
}
This is a problem. I can't get data from forms and also the button doesn't work. I made other forms like this but without JS. This may be the cause. Do you have any suggestions or solutions?
P.S. Sorry for my English ;)

The problem is using required='required' when the form fields are not required.
The user can submit at any time and it is not evident that you must click each radio button in turn to fill out that portion, if that was the intention.
I ran your code as plain HTML and examined the POST data in the Chrome Dev Tools and it works fine if you fill out all fields with required...
You will get an error in console that says the following:
An invalid form control with name='faculty' is not focusable.
Chrome is trying to focus the field to add error messages, but you set style.display = 'none' so it can't.

$(this).closest(("select[name*='FIELD2']") not working

I have this form:
<div id="div_id_form-0-FIELD1" class="form-group">
<label for="id_form-0-FIELD1" class="control-label col-sm-2">
Amount Type
</label>
<div class="controls col-sm-3">
<select class="select form-control" id="id_form-0-FIELD1" name="form-0-FIELD1">
<option value="">---------</option>
<option value="d" selected="selected">Dollars</option>
<option value="p">Percent of</option>
</select>
</div>
</div>
<div id="div_id_form-0-FIELD2" class="form-group">
<label for="id_form-0-FIELD2" class="control-label col-sm-2">
Deduct from total
</label>
<div class="controls col-sm-3">
<select class="select form-control" id="id_form-0-FIELD2" name="form-0-FIELD2">
<option value="" selected="selected">---------</option>
<option value="g">Gross Pay</option>
<option value="n">Net Pay</option>
<option value="h">Hourly Rate</option>
</select>
</div>
</div>
I haveFIELD1 in ($this), I want to get FIELD2. This is not getting it for me:
$(this).closest(("select[name*='FIELD2']")

Use the .next() method, like so:
$(this)
.closest("div.form-group")
.next("div.form-group")
.find("select[name*='FIELD2']");

We Keep Coding

JavaScript is the programming language of the Web.

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

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

Related

Comboboxes do not select given value using Javascript

jQuery clone and bind event issue

JavaScript hide a corresponding field with specific delimiter

HTML form with JS does not work properly in PHP

$(this).closest(("select[name*='FIELD2']") not working

Categories

Resources