I want to use radio buttons for making the appointment in a PHP web app.
I have a list of Radio Buttons as below, the user can select any of this radio button and its value stored in the database on be half of the appointment date and time.
<tr>
<td>
<label><input type="radio" name="book" value="1" required>11.00 AM</label>
</td>
<td>
<label><input type="radio" name="book" value="2" required>11.10 AM</label>
</td>
<td>
<label><input type="radio" name="book" value="3" required>11.20 AM</label>
</td>
<td>
<label><input type="radio" name="book" value="4" required>11.30 AM</label>
</td>
<td>
<label><input type="radio" name="book" value="5" required>11.40 AM</label>
</td>
<td>
<label><input type="radio" name="book" value="6" required>11.50 AM</label>
</td>
<td>
<label><input type="radio" name="book" value="7" required>12.00 PM</label>
</td>
</tr>
Also I want to disable the radio buttons which are already selected and stored in the database.
So on page load, i am getting previously stored radio button values using AJAX as below,
$( document ).ready(function() {
$.ajax({
type : 'POST',
url : 'http://localhost/design-ci/booking/abc',
dataType : 'json',
encode : true
});
});
and this reruns/response an array as below which contains radio button values that stored in the database,(I hope the coding for "http://localhost/design-ci/booking/abc" function/action is no need for this)
[{"value":"1"},{"value":"4"},{"value":"6"}]
and my question is how to disable the radio buttons which contains in the array.
The values in the array are the values which previous users selected and stored in the database and the current users cannot select them as they are booked already.
Thanks in advance.
Let me explain simply:
1) Get existing values from database. In your case 1, 4, 6.
2) Create an array of time slots as mentioned below.
3) Loop over the array and print the checkboxes.
4) If value is present in existing values, add disabled attribute, else, nothing.
<?php
$existingValues = array(1, 4, 6);
$timeSlots = array();
$timeSlots[1] = '11.00 AM';
$timeSlots[2] = '11.10 AM';
$timeSlots[3] = '11.20 AM';
$timeSlots[4] = '11.30 AM';
$timeSlots[5] = '11.40 AM';
$timeSlots[6] = '11.50 AM';
$timeSlots[7] = '12.00 AM';
if (! empty($timeSlots)) {
?>
<tr>
<?php
foreach ($timeSlots as $val => $display) {
$disabled = in_array($val, $existingValues) ? 'disabled' : '';
?>
<td><label><input type="radio" name="book" value="<?php echo $val;?>" required <?php echo $disabled;?>><?php echo $display;?></label></td>
<?php
}
?>
</tr>
<?php
}
?>
Reference of disabled
Also I want to disable the radio buttons which are already selected and stored in the database.
Do this directly from PHP,maybe in a separate file which you then include?Something like this,pseudo code..
<?php
$age = array("1"=>"0", "2"=>"1", "3"=>"0");
for loop with array length
if(key value==0)
print radio button with checkbox enabled
else
print radio button with checkbox disabled
?>
If u want to do this using java-script one simple way to do this, is use fetching element property of java-script
add id="some distinct name for each label not same as name are!" to your html code along with your name="book"
use:
document.getElementById("idname").disabled = true;
this will disable the radio buttons associated with the corresponding id.
so, whichever radio buttons are already booked u can fetch them form your db or maintain a log to disable the list of radio buttons just by iterating them in a loop
Related
I have an multiple category on my page to filter search.
http://localhost/shop/category/produkunggulan/CT0002
Example I have this category:
Brand
$qBrandList = mysqli_query($con, "SELECT P.productid, P.brandid_fk, B.Brandid, B.brand_name FROM tb_product P, tb_brand B WHERE P.brandid_fk = B.brandid AND P.categoryid_fk LIKE '%" . $getCategoryID . "%' GROUP BY B.brandid ORDER BY B.brand_name ASC");
while($dBrandList = mysqli_fetch_array($qBrandList))
{
?>
<div><label><input name="chkBrand[]" class="chkBrand" type="checkbox" value="<?php echo $dBrandList['brandid_fk']; ?>"/> <?php echo $dBrandList['brand_name']; ?></label></div>
<?php
}
Discount
<label><input type="checkbox" name="discount" value="Y"/> Diskon</label>
Now I want when user click the checkbox, it will be directly redirect to the url including the key of category (every click checkbox) and remove the value if uncheck.
Example I click EMORI then FOSSIL, so the URL should be:
http://localhost/shop/category/produkunggulan/CT0002?brand=BR0003,BR0010
<label><input type="checkbox" name="discount" value="Y"/> Diskon</label>
I don't think you need to use a checkbox to redirect. Simply use input type 'submit'.
<label><input type="submit" name="discount" value="Diskon"/>
or add onchange event to submit
<label><input type="checkbox" onChange="this.form.submit()" name="discount" value="Y"/> Diskon</label>
also use 'get' method in the tag to show your data at url.
One thing for sure your url wont look as you mentioned rather that it will look as
http://localhost/shop/category/produkunggulan/CT0002?chkBrand%5B%5D=BR0003& chkBrand%5B%5D=BR0010
Here %5B is for'[' and %5D is for ']'.
I have a table, in that table there have two radio button, and the table data populate from database, I am using foreach loop, the radio button is repeated in a row but when i select one radio button another is deselect automatically,
Here is my code through which i want achive my task.
$(document).ready(function() {
$(document).on('click', 'input[type=radio][name=test]', function()
{
var clicked = localStorage['clicked'];
$('.' + related_class).prop('disabled', false);
$('input[type=radio][name=test]').not(':checked').each(function()
{ var other_class = $(this).val();
$('.' + other_class).prop('disabled', true);
});
});
});
<table>
<c:forEach items="${List2}" var="as">
<tr>
<td><input type="hidden" name="Id" value="${as.id}"/>${as.id}</td>
<td><input type="hidden" name="RuleName" value="${as.ruleName}"/>${as.ruleName}</td>
<td> <input type="radio" name="fixed" value="Fixed"></td>
<td> <input type="radio" name="repeats" VALUE="radio20"><select name="Repeats" style="width: 80px;" >
<c:forEach items="${listfrequency}" var="freq">
<option value="${freq.frequencyName}"/>
<c:out value="${freq.frequencyName}" />
</c:forEach></select></td>
<td>
</tr>
</c:forEach>
</table>
It is because the name of the all radio inputs are same (repeats and fixed).
You need to make them unique for each row so that by selecting one radio button other doesn't deselect automatically. Best way to make them unique is append index value of foreach loop to the name of radio buttons.
I don't know the syntax how to get index/counter value of foreach loop in your example. But it would be as follow.
<td> <input type="radio" name="fixed${indexValue}" value="Fixed"></td>
<td> <input type="radio" name="repeats${indexValue}" VALUE="radio20"><select name="Repeats" style="width: 80px;" >
<c:forEach items="${listfrequency}" var="freq">
<option value="${freq.frequencyName}"/>
<c:out value="${freq.frequencyName}" />
</c:forEach></select></td>
${indexValue} replace this with your actual index/counter variable.
I have the following auto generated radio buttons with associated labels I would like to remove the text from the labels text and would liek to retain only the following text for each corresponding labels
Approved.
Reject.
Pending.
in the below auto generated HTML using javascript.
(This html is from SharePoint approve.aspx page)
<table id="ctl00_PlaceHolderMain_approveDescription_ctl01_RadioBtnApprovalStatus" class="ms-authoringcontrols">
<tbody><tr>
<td><input id="ctl00_PlaceHolderMain_approveDescription_ctl01_RadioBtnApprovalStatus_0" type="radio" name="ctl00$PlaceHolderMain$approveDescription$ctl01$RadioBtnApprovalStatus" value="0" checked="checked">
<label for="ctl00_PlaceHolderMain_approveDescription_ctl01_RadioBtnApprovalStatus_0">Approved. This item will become visible to all users.</label></td>
</tr><tr>
<td><input id="ctl00_PlaceHolderMain_approveDescription_ctl01_RadioBtnApprovalStatus_1" type="radio" name="ctl00$PlaceHolderMain$approveDescription$ctl01$RadioBtnApprovalStatus" value="1">
<label for="ctl00_PlaceHolderMain_approveDescription_ctl01_RadioBtnApprovalStatus_1">Rejected. This item will be returned to its creator and only be visible to its creator and all users who can see draft items.</label></td>
</tr><tr>
<td><input id="ctl00_PlaceHolderMain_approveDescription_ctl01_RadioBtnApprovalStatus_2" type="radio" name="ctl00$PlaceHolderMain$approveDescription$ctl01$RadioBtnApprovalStatus" value="2">
<label for="ctl00_PlaceHolderMain_approveDescription_ctl01_RadioBtnApprovalStatus_2">Pending. This item will remain visible to its creator and all users who can see draft items.</label></td>
</tr>
</tbody></table>
You need to strip the text after the "." like so:
s = s.substring(0, s.indexOf('.'));
Here's the script:
var labels = document.getElementsByTagName('label');
for (var i in labels) {
var text = labels[i].innerHTML;
if (text) labels[i].innerHTML = text.substring(0, text.indexOf('.'));
}
Here's a jsfiddle:
https://jsfiddle.net/mckinleymedia/c43hjohp/1/
Hi I have a form that has a button used to prefill my form with data from my database. Using Json It works fine to populate text inputs but how do I get it to select a radio button based on the value returned from my database?
FORM
<form action="#">
<select id="dropdown-select" name="dropdown-select">
<option value="">-- Select One --</option>
</select>
<button id="submit-id">Prefill Form</button>
<input id="txt1" name="txt1" type="text">
<input id="txt2" name="txt2" type="text">
<input type="radio" id="q1" name="q1" value="4.99" />
<input type="radio" id="q1" name="q1" value="7.99" />
<button id="submit-form" name="Submit-form" type="submit">Submit</button>
</form>
SCRIPT
<script>
$(function(){
$('#submit-id').on('click', function(e){ // Things to do when
.......
.done(function(data) {
data = JSON.parse(data);
$('#txt1').val(data.txt1);
$('#txt2').val(data.txt2);
$('#q1').val(data.q1);
});
});
});
</script>
/tst/orders2.php
<?php
// Create the connection to the database
$con=mysqli_connect("xxx","xxx","xxx","xxx");
........
while ($row = mysqli_fetch_assoc($result))
{
echo json_encode($row);
die(); // assuming there is just one row
}
}
?>
Don't use ID because you have same ID of both radio buttons
done(function(data) {
data = JSON.parse(data);
$('#txt1').val(data.txt1);
$('#txt2').val(data.txt2);
// Don't use ID because the name of id is same
// $('#q1').val(data.q1);
var $radios = $('input:radio[name=q1]');
if($radios.is(':checked') === false) {
$radios.filter('[value='+data.q1+']').prop('checked', true);
}
});
You currently have both radio buttons using the same ID. ID's should be unique.
You can use the [name] attribute to do this, or you can set a class on the element. Here is an example:
$('input[name=q1][value="'+ data.q1 +'"]').prop('checked', true);
You can do it based on the value of said input:
instead of
$('#q1').val(data.q1);
Try
$('input:radio[value="' + data.q1 + '"]').click();
On a side note, you have both radios with the same ID, the results of an id based selector are going to vary from browser to browser because an id should be UNIQUE
you can refer the following link to solve your problem. works fine for me
JQuery - how to select dropdown item based on value
Using jQuery 1.9.1 & getting XML returned from a query that needs to be displayed in a web page as shown in the picture below. I had asked a similar question several days ago but was all over the place in what I was asking. Hope to ask better questions this time.
For the items in the picture, the XML input would be:
<Classrooms>
<Room Number="3">
<Machine>310</Machine>
<Machine>320</Machine>
<Machine>340</Machine>
<Machine>350</Machine>
</Room>
<Room Number="8">
<Machine>810</Machine>
<Machine>820</Machine>
<Machine>840</Machine>
</Room>
<Room Number="10">
<Machine>1010</Machine>
<Machine>1020</Machine>
</Room>
</Classrooms>
The code below is a function that is called upon a successful AJAX GET and builds the checkboxes in a table on the web page.
var $roomList = $( items );
var roomListString = jQ_xmlDocToString( $roomList );
var roomListXML = $.parseXML(roomListString);
$(roomListXML).find("Row").each(function() {
var activeRooms = $( roomListXML ).find("Row").text();
var nbrRooms = $(activeRooms).find("Room").size();
$(activeRooms).find("Room").each(function() {
var roomNo = $(this).attr("Number");
var roomchk = "Room"+roomNo;
var $tr = $("<tr />");
$tr.append('<td><input type="checkbox" name="'+roomchk+'" id="'+roomchk+'" class="checkall" /><label for="'+roomchk+'">Room '+roomNo+'</td>');
$("#mytable").append( $tr );
$(this).children().each(function() {
var machID = $(this).text();
var idname = "Room"+roomNo+"Mach"+machID;
$tr.append('<td><input type="checkbox" name="'+idname+'" id="'+idname+'" /><label for="'+idname+'">'+machID+'</td>');
$("#mytable").append( $tr );
});
});
});
When the above code is run on the data, the HTML in the table is as shown below.
<tbody>
<tr>
<td>
<input name="Room3" id="Room3" class="checkall" type="checkbox" />
<label for="Room3">Room 3</label>
</td>
<td>
<input name="Room3Mach310" id="Room3Mach310" type="checkbox" />
<label for="Room3Mach310">310</label>
</td>
<td>
<input name="Room3Mach320" id="Room3Mach320" type="checkbox" />
<label for="Room3Mach320">320</label>
</td>
<td>
<input name="Room3Mach340" id="Room3Mach340" type="checkbox" />
<label for="Room3Mach340">340</label>
</td>
<td>
<input name="Room3Mach350" id="Room3Mach350" type="checkbox" />
<label for="Room3Mach350">350</label>
</td>
</tr>
<tr>
<td>
<input name="Room8" id="Room8" class="checkall" type="checkbox" />
<label for="Room8">Room 8</label>
</td>
<td>
<input name="Room8Mach810" id="Room8Mach810" type="checkbox" />
<label for="Room8Mach810">810</label>
</td>
<td>
<input name="Room8Mach820" id="Room8Mach820" type="checkbox" />
<label for="Room8Mach820">820</label>
</td>
<td>
<input name="Room8Mach840" id="Room8Mach840" type="checkbox" />
<label for="Room8Mach840">840</label>
</td>
</tr>
<tr>
<td>
<input name="Room10" id="Room10" class="checkall" type="checkbox" />
<label for="Room10">Room 10</label>
</td>
<td>
<input name="Room10Mach1010" id="Room10Mach1010" type="checkbox" />
<label for="Room10Mach1010">1010</label>
</td>
<td>
<input name="Room10Mach1020" id="Room10Mach1020" type="checkbox" />
<label for="Room10Mach1020">1020</label>
</td>
</tr>
</tbody>
Selection of any checkbox on the page will enable a SUBMIT button on the page, which when clicked will pass the value of the boxes checked into another function. The user can select any number of the individual boxes (the ones with the number beside them), regardless of the room those items are associated with. When the user selects a Room checkbox though, ALL the individual checkboxes for that room should also be checked. The individual values are the ones I want. When the SUBMIT button is clicked, the individual values are all that will be sent to that function.
I had looked at this topic about using a checkbox class to select all.
I'm using the code below to find what's checked. I can see when I select an individual box that it gets added to the array. I can also see when I select a Room that the checkall is found, but I can't seem to make the individual checkboxes get checked once I do. I had been attempting to use the Attribute Starts With jQuery selector, but haven't been able to get it to check the boxes.
$("#mytable").click(function(e) {
var ele = $(this).find(":checkbox");
var zall = $(this).find(":checkbox.checkall:checked");
if (zall) {
var zname = $(zall).attr("name");
var selectallmachines = "input[name^='" + zname +"']:checked:enabled";
$( $(selectallmachines), "#mytable");
}
var arr = [];
$(":checkbox:checked").each(function(i) {
arr[i] = $(this).val();
});
});
I'm sure that it is something that I'm overlooking, but what am I missing? Would appreciate any suggestions or guidance on what I'm doing wrong, or if there's perhaps a better way to do what I'm doing.
Thanks!
You can do something like this
$('.checkall').change(function(){
$('input[id^='+this.id+']').prop('checked',this.checked);
});
when .checkall is clicked/changes - set checked property on all inputs with an id that starts with the current clicked elements id
FIDDLE
Though you probably should delegate since you are using ajax to get the elements - this is assuming #mytable exists on DOM Ready - or replace with an ancestor element that does
$('#mytable').on('click','.checkall',function(){
$('input[id^='+this.id+']').prop('checked',this.checked);
});
another alternative is to give the checkall id as a class to the relative checkboxes
$tr.append('<td><input type="checkbox" name="'+idname+'" id="'+idname+'" class="'+roomchk+'"/><label for="'+idname+'">'+machID+'</td>');
then you can do
$('#mytable').on('click','.checkall',function(){
$('input.'+this.id).prop('checked',this.checked);
});
FIDDLE