get radio button value (PhP MySQL and ajax) - javascript

Newbie here..
I have this code for my displaying the database records in a table,
I want to know how do i get the value of radio button (the radio button contains the id of selected row). I tried doing it in javascript but no luck.
table.php
<table border="1">
<th></th>
<th>Particulars</th>
<th>Amount</th>
<?php
include('includes/config.php');
$qry = $con->prepare('SELECT * FROM fees');
$qry->execute();
$row = $qry->rowCount();
while ($row = $qry->fetch(PDO::FETCH_ASSOC)) {
$id = $row['fee_id'];
$fee = $row['fee_name'];
$amt = $row['amount'];
?>
<?php echo "
<tr title='Click to edit or delete record'>
<td><input type = 'radio' name = 'radio' class ='radio' value = $row[fee_id]></td>
<td>$fee</td>
<td>$amt</td>
</tr>
"; ?>
<?php } ?>
</table>
<input type="button" value="Delete Selected Fee" style="width:250px; height:40px;font-weight:bold;" onclick="delete();"><br><br>
javascript code
<script type="text/javascript">
function delete(){
if (document.getElementsByClassName(this.class).checked){
var val = document.getElementsByClassName(this.class).value;
alert (val);
}
}
</script>

Use this
function delete(){
if($('input[name="radio"]').is(':checked')){
var val = $('input[name="radio"]').val();
console.log(val);
}
}

I suggest you to use hidden field instead if you don't want to show. The property of radio buttons is to show only true / false value. It may be on / off or yes / no, according to your uses. Use like
<input type = 'hidden' name = 'whatever' class ='radio' value =<?php echo $row['fee_id']; ?>>

You can try this, this should get your radio button value using your input name.
<script type="text/javascript">
function delete(){
if($('input[name="radio"]').is(':checked')){
var val = $('input[name="radio"]').val();
alert (val);
}
}
</script>

Following code will give you your radio button value
<script type="text/javascript">
function delete(){
if($('input[name="radio"]').is(':checked')){
var val = $('input[name="radio"]').val();
alert (val);
}
}
</script>
you can use console.log(val);

Related

Radio button value not stored in database

I created a radio button in which when user click on yes value then text box is shown to user otherwise they remain hide.
My question when user select yes then I am able to store yes value in sql but when user click on no value that value is not stored in datbase
<script>
$(document).ready(function(){
$(function() {
$('input[name="yeshave"]').on('click', function() {
if ($(this).val() == 'yes') {
$('#textboxes').show();
} else {
$('#textboxes').hide();
}
});
});
});
</script>
no radio button code:
<table>
<tr>
<td>Do you haver passport:</td>
<td><input type="radio" name="yeshave" value="yes"> Yes</td>
<td><input type="radio" name="yeshave" value="no"> No</td>
</tr>
</table>
SQL code is:
if(isset($_POST['yeshave']))
{
$selectedValue=$_POST['yeshave'];
}
$query = "INSERT INTO upload (name, size, type, image,passport_no,dateofissue,dateofexpiry,placeofissue, having_passport ) ".
"VALUES ('$fileName', '$fileSize', '$fileType', '$image','".$passno."','".$doi."','".$doe."','".$poi."','".$selectedValue."')";
mysqli_query($conn,$query) or die('Error, query failed');
Set check one of them. Try with -
$selectedValue = isset($_POST['yeshave']) ? $_POST['yeshave'] : 'no';
JavaScript:
$(document).ready(function() {
$('input[name="yeshave"]').on('click', function() {
$('#textboxes').toggle($(this).val() == 'yes');
});
});
In PHP:
$selectedValue = $_POST['yeshave'] ? $_POST['yeshave'] : 'no';
You don't need $(function() inside ready
Use toggle to hide/show #textboxes
In PHP, check if value is present, if not use default no

Dynamically add text box in javascript

I dynamically add a text box whenever a user clicks a button to add more, which works fine. However, in PHP when I get the submitted field values by $_POST['skills'] , I only receive the first text box value, not the dynamically added ones. I'm almost positive there is something wrong with the way I am adding the text boxes in javascript.
I use the following method to add a text box field:
function addTextBoxField()
{
var input = document.createElement('input');
input.type = "text";
input.name = "skills[]";
input.size = "30";
var container = document.getElementById("skillfield");
container.appendChild(input);
}
The HTML code I have for the text box is :
...
<td>
<div id="skillfield">
<input type="text" size="30" name="skills[]" />
</div>
</td>
<td><div class="button">+ Add</div></td>
Here is the php code as well:
if ($_SERVER["REQUEST_METHOD"] == "POST")
{
$allskills = $_POST['skills'];
$size = count($_POST['skills']);
print_r($allskills);
}
The output is the following, even though I inputted three values
Array ( [0] => java )
Your field name is skills not skill .So it should be $_POST['skills'].$_POST['skills'] is an array in this case. So access try with var_dump($_POST['skills']); and you will see all the values.
As far as the $_POST['skills'] is an array, Try this..
$skill = $_POST['skills'];
foreach($skill as $value){
echo $value;
}
do you mean the values of $_POST['skills']
i dont think there is something wrong with your javascript, what is wrong is how you read the post data in your php. The post data will be an array in this case, so you access it like this $_POST['skills'][0] //value of 1st input $_POST['skills'][1] //value of 2nd input
$_POST['skills'] is an array,So use print_r() to view the array.You may use as follows
<script type="text/javascript">
function addTextBoxField()
{
var input = document.createElement('input');
input.type = "text";
input.name = "skills[]";
input.size = "30";
var container = document.getElementById("skillfield");
container.appendChild(input);
}
</script>
<form method ="post">
<td>
<div id="skillfield">
<input type="text" size="30" name="skills[]" />
</div>
</td>
<td>
<input type="submit" name="submit" value="Submit"/>
</td>
</form>
<td><div class="button">+ Add</div></td>
<?php
if(isset($_POST['submit']) && $_POST['submit'] == 'Submit'){
echo "<pre>";
print_r($_POST['skills']);
echo "</pre>";
}
?>
you could use the array length. Try to this
for($i=0;$i<=count($skills)-1;$i++)
{
$per=$skills[$i]*$skills[$i];
echo $per;
}

php javascript change innerHTML with select value from table

I've got a form with a input field(FIELD1). When the user types in FIELD1 it filters values in FIELD2. Then they click on FIELD2 and it display's the value selected via javascript (this tutorial: http://www.tizag.com/javascriptT/javascript-innerHTML.php). The problem I'm having is that the value of FIELD2 is the companyID in the table - how do I include the javascript to lookup the company name from the table. Picture attached.
<script type="text/javascript">
function changeText2(){
var userInput = document.getElementById('cv_bus').value;
document.getElementById('boldStuff2').innerHTML = userInput;
document.getElementById('filterTxt').innerHTML = userInput;
}
</script>
<table style="width:500px;border:1px solid #000;">
<tr><td>2</td><td>Type in the box below to narrow the list of names:</td></tr>
<tr><td></td><td><input type="text" name="filterTxt" id="filterTxt" tabindex="2" style="width: 400px"></td></tr>
<tr><td></td><td><p>SELECTED: <font color=red><b id='boldStuff2'>NONE</b> </p></font></td></tr>
<tr><td></td><td>Select the apropriate name:</td></tr>
<tr><td></td><td><select autocomplete="off" id="cv_bus" name="cv_bus" size=15 tabindex="2" style="width: 400px" onclick="changeText2()">
<?php
include 'cv_con.php';
$get = mysqli_query($con,"SELECT * FROM cv_companies order by compname");
$result = mysqli_query($con,"SELECT * FROM cv_companies order by compname");
//$option = '';
while($row = mysqli_fetch_array($result)) {
$option .= '<option value = "'.$row['id'].'">'.$row['compname'].'</option>';
}
?>
<?php echo $option; ?></select>
var el = document.getElementById('cv_bus');
var text = el.options[el.selectedIndex].innerHTML;
Try this example, first get the ID then access to the options label.
replace this
var userInput = document.getElementById('cv_bus').value;
with
var userInput = cv_bus.options[cv_bus.selectedIndex].text;
another way is pass this in function:
<select autocomplete="off" id="cv_bus" name="cv_bus" size=15 tabindex="2" style="width: 400px" onclick="changeText2(this);">
function changeText2(selObj){
var userInput = selObj.options[selObj.selectedIndex].text;
document.getElementById('boldStuff2').innerHTML = userInput;
document.getElementById('filterTxt').innerHTML = userInput;
}

How to disable a table if two values are equal?

I tried to disable a table by using JavaScript if two input values are equal.
My code:
<script type="text/javascript" charset="utf-8">
function checkEnableTable() {
var totalacceptedload = document.getElementById('totalacceptedload'),
var maximumload = document.getElementById('maximumload'),
tablecoursedistribution = document.getElementById('tablecoursedistribution');
tablecoursedistribution.disabled = (totalacceptedload.value = maximumload.value);
}
window.onload = checkEnableTable;
</script>
What am I doing wrong?
My Html
<input id="totalacceptedload" class ="alert alert-success" value ="<?php if (!isset($count_course_choice)):?><?php else: echo $count_course_choice['contact_hours'];?><?php endif ?>"/>
<input id="maximumload" class ="alert alert-danger" value ="<?php if (!isset($eee_setting)): ?><?php else:echo $eee_setting['maximum_course_choice'];?><?php endif ?>"/>
<table id="tablecoursedistribution" >
</table>
this statement first check both values if equal then assign true to tablecoursedistribution.disabled otherwise false to tablecoursedistribution.disabled
tablecoursedistribution.disabled = (totalacceptedload.value == maximumload.value) ? "true" : "false" ;
You can do it like this:
function checkEnableTable() {
tablecoursedistribution.style.visibility = (totalacceptedload.value == maximumload.value) ? "hidden" : "visible"
}
var totalacceptedload = document.getElementById('totalacceptedload'),
maximumload = document.getElementById('maximumload'),
tablecoursedistribution = document.getElementById('tablecoursedistribution');
window.onload = checkEnableTable;
Here's a fiddle.
I made it so that if you enter two equal values in the box, then click the button, the table is hidden, otherwise it is shown.
HTH

Unable to check if a javascript checkbox array element is checked or not?

What is want is - when the checkbox is checked option no. 5 in select list will be selected and when the checkbox is unchecked option no. 0 will be selected in the select list.
The select list and the checkboxes are generated dynamically in the php code as below :
echo "<select name='coupons".$i."' id='coupons".$i."'>";
------- All Options --------
echo "</select>";
<input type='checkbox' name='myCheckbox[]' value='<?php echo $i."_".$row->id; ?>' onclick='setCCode("myCheckbox[]",<?php echo $i;?>)'>
-----------------------------------------------------------------------------
Solved the second requirement on my own now ..... thanks to all for your inputs
just added the following line in the checkAll() within the for loop
setCCode(children[i],i+1);
The javascript function :
function setCCode(checkbox_name,i)
{
var form_object = document.getElementsByName(checkbox_name+"["+i+"]");
var selname = document.getElementsByName("coupons"+i)[0];
if(form_object.checked) {
selname.selectedIndex = 5;
}
else {
selname.selectedIndex = 0;
}
}
The above issue is solved....... thanks to all
Now what i need to do is when a user checks a checkbox to select or deselect all the dynamically generated checkboxes on the form the above logic should work.
<input type='checkbox' name='checkall' onChange="checkAll(this, 'myCheckbox[]')">
<span class="chkall">Check / Uncheck All</span>
<input type='checkbox' name='myCheckbox[]' value='<?php echo $i."_".$row->id; ?>' onclick='setCCode(this,<?php echo $i;?>)'>
The javascript code i am using to select/deselect all checkboxes on form is as below :
function checkAll(parent, field)
{
var children = document.getElementsByName(field);
var newValue = parent.checked;
for (i = 0; i < children.length; i++){
if (children[i].disabled == false) {
children[i].checked = newValue;
}
}
}
function setCCode(Sender,i)
{
document.getElementsByName("coupons"+i)[0].selectedIndex = Sender.checked ? 5 : 0;
}
getElementsByName returns an array of objects. Replace the line with:
var form_object = document.getElementsByName(checkbox_name+"["+i+"]")[0];
You can pass refference to the checkbox itself as a parameter
<input type='checkbox' name='myCheckbox[]' value='<?php echo $i."_".$row->id; ?>' onclick='setCCode(this,<?php echo $i;?>)'>
function setCCode(Sender,i)
{
document.getElementsByName("coupons"+i)[0].selectedIndex = Sender.checked ? 5 : 0;
}
If you have a reference to the form that the checkbox is in, and it has a unique name in the form, then you can access it as:
form_object = form.elements[ checkbox_name + "[" + i + "]" ];
and you can also use the ternary operator to make the code more concise:
selname.selectedIndex = form_object.checked? 5 : 0;
Edit
Sorry, missed the obvious. If you pass a refereference to the checkbox in the handler, then you can also get the form (all form controls have a form property that references the form they are in). So as Jan Pfeifer suggested (abbreviated markup):
<input ... onclick='setCCode(this, <?php echo $i;?>)'>
then the script is just:
function setCCode(checkbox, i)
{
checkbox.form.elements['coupons' + i].selectedIndex = checkbox.checked? 5 : 0;
}

Categories

Resources