Adding labels for radio-boxes in Magento - javascript

Trying to use label for each radio-box(to customise them with css3), but there is javascript preventing the labels to work as they should. When I click on a label, the radio-box gets focused but not checked.
If you click straight on the radio-box, it validates and adds a class .validation-passed to the input. Maybe I need to make a validation for the label aswell?
Anyone faced this before and could help out to make it work?
<table class="data-table review-summary-table" id="product-review-table">
<tbody>
<?php foreach ($this->getRatings() as $_rating): ?>
<tr>
<td class="label">
<?php echo $this->escapeHtml($_rating->getRatingCode()) ?>
</td>
<?php foreach ($_rating->getOptions() as $_option): ?>
<td class="value">
<label for="<?php echo $this->escapeHtml($_rating->getRatingCode()) ?>_<?php echo $_option->getValue() ?>">
<?php echo $this->escapeHtml($_rating->getRatingCode()) ?> <?php echo $_option->getValue() ?>
</label>
<input type="radio" name="ratings[<?php echo $_rating->getId() ?>]" id="<?php echo $this->escapeHtml($_rating->getRatingCode()) ?>_<?php echo $_option->getValue() ?>" value="<?php echo $_option->getId() ?>" class="radio" />
</td>
<?php endforeach; ?>
</tr>
<?php endforeach; ?>
</tbody>
</table>
<input type="hidden" name="validate_rating" class="validate-rating" value="" />
<script type="text/javascript">decorateTable('product-review-table')</script>

I see that all of radio boxes have different names.
If you want collate it to 1 group you should use same names for all radio buttons.
name="ratings"

Related

Submit a checkbox without refresh using JS/AJAX

i have 2 Checkboxes (in each row) in my Table. I want to submit and update a row by pressing the checkbox and not with a submit button, it works, but i want it to submit without refreshing the whole page. I am using JS and AJAX for it, but this time, i'm making something wrong.
The first Checkbox:
<td>
<form id="checkgo" method="post">
<input type="checkbox" onchange="this.form.submit()" name="wegeb" id="wegeb" value="<?php echo $row['bestellnr'] ?>">
</form>
<?php echo $row['we_gebucht']; ?> </td>
The Script for it:
<script>
$(document).ready(function() {
$("#checkgo").submit(function (event){
event.preventDefault()
var wegeb = document.getElementById("wegeb").value
var info = {wegeb: wegeb};
$.ajax({
type : "POST",
url : "addlist.php",
data : info,
});
return false;
});
});
</script>
And the php file for the Update (addlist.php):
$we_gebucht = (isset($_POST['we_gebucht']) && !empty($_POST['we_gebucht'])) ? $_POST['we_gebucht'] : null;
$we_gebucht='yes';
$bestellnr = (isset($_POST['wegeb']) && !empty($_POST['wegeb'])) ? $_POST['wegeb'] : null;
$update=mysqli_query($connection,"UPDATE bestellung SET we_gebucht='$we_gebucht' WHERE bestellnr='$bestellnr'");
$result = $connection->query($update);
My understanding:
With "var wegeb = document.getElementById("wegeb").value" i'm selecting the Checkboxes Value (which contains the Key "bestellnr" from the table), that one i'm passing as wegeb to the addlist.php, where it gets in the Variable $bestellnr. Now, the row from the Key is getting updated.
Moreover, the page is still reloading, even with the event.preventDefault().
it's clear something is wrong, but i dont see where and tried different ways.
i hope i made my problem clear,
Thanks for any Help or tip!
Update(Table):
<tr>
<td> <?php echo $row['warennr']; ?> </td>
<td> <?php echo $row['kundeprojekt_id']; ?> </td>
<td> <?php echo $row['bestellnr']; ?> </td>
<td> <?php echo $row['besteller']; ?> </td>
<td> <?php echo $row['datum']; ?> </td>
<td> <?php echo $row['gesamtwert']; ?> </td>
<td> <?php echo $row['po_nr']; ?> </td>
<td> <?php echo $row['ebest_ekw']; ?> </td>
<td>
<form id="checkgo" method="post">
<input type="checkbox" name="wegeb" id="wegeb" value="<?php echo $row['bestellnr'] ?>">
</form>
<?php echo $row['we_gebucht']; ?> </td>
<td> <?php echo $row['PSP_Element']; ?> </td>
<td>
<form id='liefert' method="post" >
<input type="checkbox" onclick="doThis(this)" name="lief" id="lief" value="<?php echo $row['bestellnr'] ?>">
</form>
<?php echo $row['geliefert']; ?> </td>
<td> <?php echo $row['smarttrack']; ?> </td>
<td> <?php echo $row['name']; ?> </td>
<td> <?php echo $row['preis']; ?> </td>
<td> <?php echo $row['menge']; ?> </td>
<td> <?php echo $row['assetnr']; ?> </td>
<td> <?php echo $row['ticketnr']; ?> </td>
<td> <?php echo $row['Anlagennr']; ?> </td>
<td> <?php echo $row['lieferantname']; ?> </td>
<td> <?php echo $row['kostenstelle']; ?> </td>
<td> <?php echo $row['kundenname_projekt']; ?> </td>
<td> <?php echo $row['standort']; ?> </td>
<td> <?php echo $row['info_uebergabe']; ?> </td>
<td> <?php echo $row['warengruppe']; ?> </td>
<td> <button class="btn-update"> ✎ </button> </td>
<td> <button class="btn-deletee" type="button" id="<?php echo $row['bestellnr']; ?>" data-id2="<?php echo $row['warennr']; ?>" data-id3="<?php echo $row['kundeprojekt_id']; ?>" >Delete</a></button></td>
</tr>
First, let's remove the inline js from your html:
<td>
<form id="checkgo" method="post">
<input type="checkbox" name="wegeb" id="wegeb" value="<?php echo $row['bestellnr'] ?>">
</form>
<?php echo $row['we_gebucht']; ?>
</td>
Then we bind the ajax call to the right event:
$(function() {
$("#wegeb").change(function (e){
e.preventDefault(); //not necessary since we are binding to the checkbox
var wegeb = $(this).val();
var info = {wegeb: wegeb};
$.ajax({
type : "POST",
url : "addlist.php",
data : info,
});
});
});
This way every time you check the checkbox or uncheck it, it will update the database accordingly
You can prevent the form from submitting with e.preventDefault();, this is not good idea.
this may help you:-
<form id="checkgo" method="post">
<input type="checkbox" onchange="doThis(this)" name="wegeb" id="wegeb" value="<?php echo $row['bestellnr'] ?>">
</form>
<script>
function doThis(checkbox){
var wegeb = document.getElementById("wegeb").value
var info = {wegeb: wegeb};
$.ajax({
type : "POST",
url : "addlist.php",
data : info,
});
return false;
}
</script>

Clicking on any radio button in my created list results in only the first <select> field being activated

Here is the video in specific from what i mean. It is hosted on my personal drive
video
Here is my code
<?php
$pagetitle="Search Report";
include "includes/header.php";
include("config.php");
include("connection.php");
error_reporting(E_ALL ^ E_DEPRECATED);
$name=$_GET['filo'];
$ksm=$_GET['kisim'];
$drs=$_GET['hders'];
$ndrs=$_GET['dname'];
$tch=$_GET['tname'];
?>
<script>
//Here Is javascript code
function enable() {
document.getElementById('option').disabled=false;
}
</script>
<style type="text/css">
input[type="radio"]{
margin: 0px 4px 0px;
}
</style>
<div class="container">
<div class="row">
<div class="templatemo-line-header" style="margin-top: 0px;" >
<div class="text-center">
<hr class="team_hr team_hr_left hr_gray"/><span class="span_blog txt_darkgrey txt_orange"> </span>
<hr class="team_hr team_hr_right hr_gray" />
</div>
</div>
</div>
<div class="table-responsive">
<table class="ui celled table table table-hover">
<form action="check.php" method="get">
<thead>
<tr>
<th>Adı ve Soyadı</th>
<th>Dersin Adı</th>
<th>Dersin Saatı</th>
<th>Öğretim Elemanı</th>
<th>Durum</th>
<th>Sebepi</th>
<th>ID</th>
</tr>
</thead>
<tbody>
<?php
$query3=mysqli_query($connect,"select * from student where filo='$name' and kisim='$ksm' ORDER BY student_name");
$arra=-1;
while($row=mysqli_fetch_row($query3))
{
$arra++;
?>
<tr>
<td><?php echo $row[1] ?></td>
<input type="hidden" value="<?php echo $row[1] ?>" name="std_name[]">
<td><?php echo $ndrs ?></td>
<input type="hidden" value="<?php echo $ndrs ?>" name="ndrs[]">
<td><?php echo $drs ?></td>
<input type="hidden" value="<?php echo $drs?>" name="drs[]">
<td><?php echo $tch ?></td>
<input type="hidden" value="<?php echo $tch ?>" name="tch[]">
<td>
///////HERE IS ONE PART OF THE CODE
<input type="radio" name="attendance[<?php echo "$arra" ?>]" value="Mevcut" checked="checked" >Mevcut
<input type="radio" name="attendance[<?php echo "$arra" ?>]" onclick="enable()" value="Gayri">Gayrı
</td>
<td>
<select class="form-control" id="option" name="option[<?php echo "$arra" ?>]" disabled >
<option selected value="Mevcut">Mevcut</option>
<option value="Vizite">Vizite</option>
<option value="Hst Muayene">Hst Muayene</option>
<option value="Izinli">Izinli</option>
</select>
</td>
<td><?php echo $row[0] ?>
<input type="hidden" value="<?php echo $row[0] ?>" name="id[]">
</td>
</tr>
<?php } ?>
</tbody>
</table>
<button type="submit" class="btn btn-success btn-lg btn-block" name="submit2">Gönder</button>
</form>
</div><!--table-responsive-->
</div><!--row-->
</div><!--container-->
<?php include "includes/footer.php"; ?>
I try to explain my problem.
Scenario is like that. Some infos are taken from a submit form and with this infos i create a list then created list has 2 radio buttons and by default a disabled select area.
The problem is here. When i click on "Gayri" button field must be activated for every person in that list instead of that just the first field is activated.
Can anyone help me? I want for every possible person in the list when i click on "gayri" radio button the field to be activated.

php online exam javascript questions not incrementing

actually i am creating a online exam webapplication in php. and i m retrieving data from database .now the prob. is how to loop data by indexing one by one..
so user view one question at a time and after clicking on submit button it display the next question by from array.
here i used array of all the rows and taking question one by one by javascript . but there is some prob. in javascript . i only render 1st question .. increment is not implementing correctly.
<input type="hidden" value="<?php echo $i=0; ?>" id="cc">
<div id="counter">
<p id="idIndex" name="id" value="<?php echo $findData[$i]['Exam']['id']; ?>"><?php echo $findData[$i]['Exam']['id']; ?> </p>
<p ><?php echo $findData[$i]['Exam']['que'];?></p>
<input type="radio" value="<?php echo $findData[$i]['Exam']['op1']; ?>" name="op1" id="jaid" ><?php echo $findData[$i]['Exam']['op1']; ?>
<input type="radio" value="<?php echo $findData[$i]['Exam']['op2']; ?>" name="op1" id="jai" ><?php echo $findData[$i]['Exam']['op2']; ?>
<input type="radio" value="<?php echo $findData[$i]['Exam']['op3']; ?>" name="op1" id="jai"><?php echo $findData[$i]['Exam']['op3']; ?>
<input type="radio" value="<?php echo $findData[$i]['Exam']['op4']; ?>" name="op1" id="jai" ><?php echo $findData[$i]['Exam']['op4']; ?>
</div>
<input type="submit" id="sub" onclick="myexam()" >
<?php echo $this->Html->script('jquery-2.2.3.min'); ?>
<script>
function myexam(value)
{
var v=$("#cc").val();
}
</script>
PHP is server side. Once your HTML is rendered, PHP has nothing more top do with it!
$("#cc").val("<?php echo $i=+1;?>");
The php echo is a string, that wont work.
var v=$("#cc").val();
v = v + 1;
$("#cc").val(v);
That should work. Fix the other line of JS similarly.

PHP Looping Javascript Just Show The First Record

I have a view code:
<?php
$i = 1;
//var_dump($this->productList);
foreach ($this->productList as $data) {
$desc=explode(",",$data['descriptions']);
?>
<tr>
<th colspan="3">
<input type="hidden" id="id_pack" name="id_pack" value="<?php echo $data['package_id']; ?>">
<input type="hidden" id="nama_pack" name="nama_pack" value="<?php echo $data['package_name']; ?>">
<h4 align="center" class="title-pack"><?php echo $data['package_name']; ?></h4>
</th>
</tr>
<tr id="dashe">
<td>
<ul class="myul">
<?php foreach($desc as $descriptions) { ?>
<li class="myli"> <?php echo $descriptions; ?></li>
<?php } ?>
</ul>
</td>
<td>
<h4 class="prize">
Rp. <?php echo number_format($data['price'],2);?>
/ month
</h4>
</td>
<td>
<p id="order" name="order" class="mybutton" data-toggle="modal" data-target=".mymodal">Order</p>
</td>
</tr>
<?php
$i++;
}
?>
And this the javascript:
document.getElementById("order").addEventListener("click", tampilkanHrm);
function tampilkanHrm() {
var pilihan=$("#nama_pack").val();
document.getElementById("choice").innerHTML = pilihan;
document.getElementById("pack").value = pilihan+" Package";
}
the problem is, in the order button it always show the same record. Just show the first data, even i clicked other order button. Hope somebody help.
You can't assign same id for multiple elements.
So, have different ids.
<?php
$i = 1;
//var_dump($this->productList);
foreach ($this->productList as $data) {
$desc=explode(",",$data['descriptions']);
?>
<tr>
<th colspan="3">
<input type="hidden" id="id_pack<?php echo $i ?>" name="id_pack" value="<?php echo $data['package_id']; ?>">
<input type="hidden" id="nama_pack<?php echo $i ?>" name="nama_pack" value="<?php echo $data['package_name']; ?>">
<h4 align="center" class="title-pack"><?php echo $data['package_name']; ?></h4>
</th>
</tr>
Similarly create buttons with different ids.
<td>
<p id="<?php echo $i ?>" name="order" class="mybutton" data-toggle="modal" data-target=".mymodal">Order</p>
</td>
Then change your javascript to jquery. Hope, you might also be using jquery [ understood from your code ]
$(".mybutton").on("click", function() {
var identifier = $(this).attr("id");
var pilihan=$("#nama_pack"+identifier).val();
$("#choice").html(pilihan);
});
Change your code like this and check.

Form POST not showing in controller

I am working with CodeIgniter, and I am trying to create a dynamically generated table that includes a checkbox, with values set to the id numbers of the row, in the first column of the row. When a single or multiple checkbox is checked, and the button clicked, I am trying to bring up a second form which consists of a couple of select fields and a textarea.
Ultimately, when I submit the form, I want the values of the checkboxes to be sent to my controller. However, currently I am only getting a false value when I check the values of the POST field in my controller.
Here is my current view code:
<form class="form" role="form" name="ticket_view" id="ticket_view" action="<?php echo site_url('example_controller/example_method'); ?>">
<div class='table-responsive text-left'>
<table class='table table-hover table-bordered table-condensed supportTable'>
<thead>
<th>Select</th>
<th>Id</th>
<th class="text-center">Status</th>
<th>Source</th>
</thead>
<tbody>
<?php foreach($examples as $example): ?>
<?php if ($example->type == "test): ?>
<tr class="<?php echo alternator('oddRow', '');?>">
<td class="text-center" style="width:60px;"><input type="checkbox" value="<?=$example->id;?>" name="supportTicketId[]" class="supportLogCheck"></td>
<td><a href=<?php echo site_url("example_controller/example_method/" . $example->idd); ?>>SUP-<?php echo $example->id; ?></a></td>
<td class="text-center">
<?php if ( ! $example->claimed): ?>
<span class="label label-danger">Unclaimed</span>
<?php else: ?>
<span class="label label-success">Claimed</span>
<?php endif; ?>
</td>
<td><?php if ($example->voicemail): ?>Voicemail <?php else: ?>Email <?php endif; ?></td>
</tr>
<?php endif; ?>
<?php endforeach; ?>
</tbody>
</table>
</div>
<div class="text-center">
<a class="btn btn-primary" id="firstButton" href="javascript:void(0);">First Button</a>
</div>
<div id="secondForm" class="alert alert-info col-md-4 col-md-offset-4" style="display:none; margin-top:10px;">
<div class="form-group">
<label for="closeIssue">Issue:</label>
<select name="issue" id="issue" class="form-control">
<option value="">Select an Issue</option>
<?php foreach ($issues as $issue): ?>
<option value="<?php echo ($e->emailIssueId); ?>"><?php echo ($issue->emailIssueDescription); ?></option>
<?php endforeach; ?>
</select>
<label for="closeAction">Action:</label>
<select name="action" id="action" class="form-control">
<option value="">Select an Action</option>
<?php foreach ($actions as $action): ?>
<option value="<?php echo ($action->emailActionId); ?>"><?php echo ($action->emailActionDescription); ?></option>
<?php endforeach; ?>
</select>
</div>
<div class="form-group">
<label for="assignNote">Note:</label>
<textarea name="assignNote" id="assignNote" class="form-control"></textarea>
</div>
<div class="text-center">
<input class="btn btn-primary" name="secondButton" type="submit" id="secondButton" value="second button">
</div>
</div>
</div>
</form>
So, in a nutshell, the table is wrapped in a form. The first button slides down a
div that is orginally hidden, that contains other form fields and a submit button. I want, when that submit button is clicked, for all form fields to post, including the id numbers of the checkboxes that are checked.
Any ideas why this isn't working? Any better suggestions?
Thank you for your help in advance!
You haven't defined method on your form, so it's probably passing the values via GET. You need to add the method="post" attribute in your form tag.

Categories