Develop Reference

Why is JavaScript not setting the value of a hidden field?

I have a PHP form to submit and I'm trying to get (vanilla) JavaScript to set the value of a hidden field. For some reason, the hidden field (deleteRowId) is coming through as blank. Any help would be much appreciated.
Here is my code:
<?php
if (isset($transcribercertifications)) {
echo form_open('user/deletecertification/' . $tid, 'id="deleteCert"');
echo '<table>';
$count = 0;
if ($transcribercertifications) {
foreach ($transcribercertifications as $transcribercertification) {
echo '<tr><td>' . $transcribercertification . '</td>';
echo '<input type="hidden" name="certification[' . $count . ']" id="certification[' . $count . ']" value="' . $transcribercertification . '">';
echo '<input type="hidden" id="deleteRowId" name="deleteRowId" value="">';
echo '</td><td title="Delete certification"><button data-row-id="' . $count . '" id="deleteCert" onclick="deleteRow(' . $count . ');">X</button></td></tr>';
$count++;
}
}
echo '</table>';
echo form_close();
}
?>
<script type="text/javascript">
function deleteRow(rowCount) {
event.preventDefault()
alert('This will delete the certification. Are you sure ?');
alert(rowCount); // This value comes through correctly.
document.getElementById('deleteRowId').value = rowCount;
document.getElementById('deleteCert').submit();
}
</script>
When the function gets called, deleteRowId is always blank. If there's another way to set the value of deleteRowId so the function knows which certification to delete, I would be interested in seeing that too.

First of all id="deleteRowId" must be unique
and you can use setAttribute method
worked exampe
<input type="hidden" value="111" id="uniqID1">
<input type="hidden" value="111" id="uniqID2">
<script>
let aaa = document.getElementById("uniqID1");
aaa.setAttribute('value',222);
console.log(aaa.value)
</script>

Id cannot repeat.
in foreach loop use as id="deleteRowId"'.$count.'"" id="deleteCert"'.$count.'""
foreach ($transcribercertifications as $transcribercertification) {
echo '<tr><td>' . $transcribercertification . '</td>';
echo '<input type="hidden" name="certification[' . $count . ']" id="certification[' . $count . ']" value="' . $transcribercertification . '">';
echo '<input type="hidden" id="deleteRowId"'.$count.'"" name="deleteRowId"'.$count.'"" value="">';
echo '</td><td title="Delete certification"><button data-row-id="' . $count . '" id="deleteCert"'.$count.'"" onclick="deleteRow(' . $count . ');">X</button></td></tr>';
$count++;
}
and in JS function
getElementByID('deleteRowId'+rowCount).
getElementByID('deleteCert'+rowCount)

Add new dynamic boostrap card does not work

I will insert new boostrap card inside my page. My problem, I have not success to include a new card inside my content.
When i click on insert, the card is not displayed
Below the code
display a new boostrap card if record exist
<div class="row">
<button type="button" class="btn btn-primary" aria-label="Insert" id="insert">
<span aria-hidden="true">Insert</span>
</button>
</div>
<div class="row">
<ul class="row list-unstyled" id="list">
<?php
$i = 0;
while ($QoptionValue->fetch()) {
.....
?>
<li class="col-md-4" id="element'<?php echo $i; ?>">
<div class="card">
<h4 class="card-header">Card title <a class="close" href="#">×</a></h4>
<div class="card-body">
<div class="card-text">
<div><?php ..... ?></div>
</div>
</div>
</li>
<?php
$i++;
}
?>
</ul>
</div>
Display a new card or first card inside the content
<?php
$card = '<li class="col-md-4" id="element0">';
$card .= '<div class="card">';
$card .= '<h4 class="card-header">Card title <a class="close" href="#">Remove</a></h4>';
$card .= '<div class="card-body">';
$card .= '<div class="card-text">';
$card .= '<div>';
for ($l=0, $n=count($languages); $l<$n; $l++) {
$card .= Language->getImage($languages[$l]['code']) . ' ' . HTML::inputField('option_value[' . $i . '][option_value_description][name][' . $l . ']', $options_name) . '<br />';
$card .= HTML::hiddenField('option_value[' . $i . '][option_value_description][language_id][' . $l . ']', $options_name);
}
$card .= '</div>';
$card .= '<div>';
$card .= HTML::inputField('option_value[' . $i . '][sort_order]', $QoptionValue->value('sort_order'), 'id="sort_order[' . $i . ']"');
$card .= '</div>';
$card .= '<div>';
$card .= '</div>';
$card .= '</div>';
$card .= '</li>';
?>
<script>
$('#insert').click(function(){
$( "ul#list" ).append( "<?php echo $card; ?>" );
});
</script>
<script type="text/javascript">
$('.close').click(function(){
var $target = $(this).parents('li');
$target.hide('slow', function(){ $target.remove(); });
})
</script>
console error
it seems on this line has a problem :
$( "ul#list" ).append(""<li class=\"col-md-4\" id=\"element0\"><div class=\"row\"><div class=\"col-md-12\"><div class=\"card\"><h4 class=\"card-header\"><a class=\"close\" href=\"#\">Supprimer<\/a><\/h4><div class=\"card-body\">Nom de la valeur<div><img src=\"http:\/\/localhost\/test_option\/shop\/sources\/third_party\/flag-icon-css\/flags\/4x3\/gb.svg\" alt=\"Anglais\" title=\"Anglais\" width=\"16\" height=\"12\" \/> <input type=\"text\" name=\"option_value[0][option_value_description][name][0]\" class=\"form-control\" \/><br \/><input type=\"hidden\" name=\"option_value[0][option_value_description][language_id][0]\" \/><img src=\"http:\/\/localhost\/test_option\/shop\/sources\/third_party\/flag-icon-css\/flags\/4x3\/fr.svg\" alt=\"Francais\" title=\"Francais\" width=\"16\" height=\"12\" \/> <input type=\"text\" name=\"option_value[0][option_value_description][name][1]\" class=\"form-control\" \/><br \/><input type=\"hidden\" name=\"option_value[0][option_value_description][language_id][1]\" \/><\/div><div class=\"row\"><span class=\"col-md-4\">Ordre de tri<\/span><\/div><\/div><\/div><\/div><\/div><\/li>"");
Uncaught SyntaxError: missing ) after argument list

It's good practice to pass any PHP variable to javascript using json_encode(). Using json_encode() you'll always get a properly formatted JavaScript object with the quotes escaped.
<script>
$('#insert').click(function(){
$( "ul#list" ).append(<?php echo json_encode($card); ?>);
});
</script>

force to validate a checkbox

This script below allow to validate all checkox inside a form.
My problem, I need to have just one to validate.
What is the element to change to verify if just one chabox is validated ?
<?php
$display_option .= '<div class="form-group ProductsInfoOptionCheckbox" options>';
$display_option .= '<label class="control-label ProductsInfoOptionCheckbox" for="input-option' . $option['products_option_id'] . '">' . $option['name'] . '</label>';
foreach ($option['products_option_value'] as $t => $option_value) {
$display_option .= '<div class="checkbox">';
$display_option .= '<ul class="list-unstyled ProductsInfoOptionCheckbox">';
$display_option .= '<li class="ProductsInfoOptionCheckbox">';
$display_option .= HTML::checkboxField('id[' . $option['products_option_id'] . ']', $option_value['products_option_value_id'], $checked_attribute, 'required');
}
$display_option .= '<div>';
echo $display_option;
?>
<script>
$(function(){
var requiredCheckboxes = $('.options :checkbox[required]');
requiredCheckboxes.change(function(){
if(requiredCheckboxes.is(':checked')) {
requiredCheckboxes.removeAttr('required');
} else {
requiredCheckboxes.attr('required', 'required');
}
});
});
</script>

I solved this by using:
$display_option .= '<div class="form-group ProductsInfoOptionCheckbox options">';

Issue Connecting PHP Mysql Jquery Bootstrap together and use them | using bootstrap modal and using my own jquery code

I'm trying to code a website. On the inbox page I have a list of messages received via PHP and MySQL and styled by CSS. What I'm trying to do is to open a bootstrap modal when you click on each message. Now I'm trying to use JQuery to change the MySQLi using ajax and save the fact that the message has been read, and at the same time to use a bootstrap modal to open the message and let the user read the contents. But when I try to use JQuery and ajax to do so, it just keep doing nothing. Here is the code of the page...
inbox page
if ($row['readed'] == 0) {
$action = '<i class="fa fa-eye" aria-hidden="true"></i> | <i class="fa fa-envelope-o"></i>';
$message_read_color = 'class="warning"';
}
else {
$action = '<i class="fa fa-eye" aria-hidden="true"></i>' .
' | ' .
'<i class="fa fa-envelope-open-o" aria-hidden="true"></i>';
$message_read_color = 'class="success"';
}
echo '<tr ' . $message_read_color . '>\n';
echo ' <td>' . $row["sender_name"] . '</td>\n';
echo ' <td>' . $row["subject"] . '</td>\n';
echo ' <td>' . $row["date"] . '</td>\n';
echo ' <td>' . $rowtype . '</td>\n';
echo ' <td>' . $action . '</td>\n';
echo '</tr>\n\n';
$message_content = $row["message"];
echo '<div class="modal fade" id="myModal' . $row["id"] . '" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">\n';
echo ' <div class="modal-dialog" role="document">\n';
echo ' <div class="modal-content">\n';
echo ' <div class="modal-header">\n';
echo ' <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>\n\n';
echo ' <h4 class="modal-title" id="myModalLabel">Subject: ' . $row["subject"] . '</h4>\n';
echo ' </div>\n\n';
echo ' <div class="modal-body">\n';
echo ' From: ' . $row["sender_name"] . '<br>\n';
echo ' Date Recieved: ' . $row["date"] . '<br><br>\n';
echo ' ' . $message_content . '\n';
echo ' </div>\n\n';
echo ' <div class="modal-footer">\n';
echo ' <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>\n';
echo ' </div>\n';
echo ' </div>\n';
echo ' </div>\n';
echo '</div>\n';
}
setasread.php
require 'include/functions.php';
require 'include/usercnfg.php';
if ( isset( $_GET['id'] ) && !empty( $_GET['id'] ) ) {
$messageid = $_GET['id'];
$fquery = "SELECT `readed` FROM `messages` WHERE `id`=".$messageid;
$fquery_run = mysqli_query( $conn, $fquery );
$userdetails = mysqli_fetch_row( $fquery_run );
if ( $userdetails[0] == 0 ) {
$query = "UPDATE `messages` SET `readed`=1 WHERE `id`=" . $messageid;
$query_run = mysqli_query( $conn, $query );
$myredirection = "index.php?action=inbox";
header( 'Location: ' . $myredirection );
}
else {
echo "Already read.";
}
}
else {
echo "No id specified.";
}
jquery code
$( document ).ready(function() {
$('.viewmarkajax').click(function() {
$.get($(this).attr('href'), function() {});
return false;
});
});
So as you can see I am trying to use bootstrap modal and define my own JQuery as well. But apparently I can not do so. Can anyone tell me a way to do it?

Return a Javascript array to a hidden input value

I am having trouble that will change the value of a hidden input type. I have a search that has multiple checkboxes created with a PHP while loop. I want to pass the items that are checked into a variable in PHP once submitted. This is the form with checkboxes and hidden value.
$search_sql = "SELECT * FROM `company` WHERE `groups` = '$groups' AND (`companyname` LIKE '%$search%' OR `directurl` LIKE '%$search%' OR `email` LIKE '%$search%' OR `phone` LIKE '%$search%' OR `groups` LIKE '%$search%' OR `notes` LIKE '%$search%')";
$result = mysql_query($search_sql) or die(mysql_error());
while($row = mysql_fetch_array($result))
{
//remove the http from the links
$website = $row['directurl'];
$website = str_replace("http//", "", "$website");
$website = str_replace("http://", "", "$website");
$website = str_replace("https://", "", "$website");
$website = str_replace("https//", "", "$website");
//button to change colour
//display contacted companies
if($row['contact'] == 0){
//not contacted
$changecolor = '1';
$contacted = '<tr class="nocontact border">';
$button = '<td>
<form name="change_colour" method="post">
<input type="hidden" name="id" value="' . $row['id'] . '">
<input type="hidden" name="change_colour" value="' . $changecolor . '">
<input type="hidden" name="search" value="' . $row['companyname'] . '">
<input type="hidden" name="groupselected" value="' . $groups . '">
<input type="submit" value="C"></form>';
}
//contacted
elseif($row['contact'] == 1){
$changecolor = '2';
$contacted = '<tr class="contact border">';
$button = '<td>
<form name="change_colour" method="post">
<input type="hidden" name="id" value="' . $row['id'] . '">
<input type="hidden" name="change_colour" value="' . $changecolor . '">
<input type="hidden" name="search" value="' . $row['companyname'] . '">
<input type="hidden" name="groupselected" value="' . $groups . '">
<input type="submit" value="C"></form>';
}
//positive feedback
elseif($row['contact'] == 2){
$changecolor = '3';
$contacted = '<tr class="positive border">';
$button = '<td>
<form name="change_colour" method="post">
<input type="hidden" name="id" value="' . $row['id'] . '">
<input type="hidden" name="change_colour" value="' . $changecolor . '">
<input type="hidden" name="search" value="' . $row['companyname'] . '">
<input type="hidden" name="groupselected" value="' . $groups . '">
<input type="submit" value="C"></form>';
}
//negative feedback
elseif($row['contact'] == 3){
$changecolor = '0';
$contacted = '<tr class="negative border">';
$button = '<td>
<form name="change_colour" method="post">
<input type="hidden" name="id" value="' . $row['id'] . '">
<input type="hidden" name="change_colour" value="' . $changecolor . '">
<input type="hidden" name="search" value="' . $row['companyname'] . '">
<input type="hidden" name="groupselected" value="' . $groups . '">
<input type="submit" value="C"></form>';
}
else {echo 'error with the display';}
//button to select companies
$select_comp = '<form name="select_comp" method="post">
<input type="checkbox" id="' . $row['id'] . '" name="id" onclick="compTrig(' . $row['id'] . ')">
<input type="hidden" id="return_comp" name="return_comp" value="me">
<input type="submit" name="select_comp" value="Selected"></form></td>';
//Display link to website if available
if ($website !== ''){
$webdisplay = $contacted . $button . $select_comp . '<td><a target="_blank" href="http://' . $website . '">' . $row['companyname'] . '</a></td>';
}
else{
$webdisplay = $contacted . $button . '<td class="red">' . $row['companyname'] . '</td>';
}
//check if email has been submitted
if ($row['email'] !== ''){
$email = '<td>Email</td>';
}
else{
$email = '<td class="red">None</td>';
}
//display company details
echo $webdisplay;
echo '<td>' . $row['contactname'] . '</td>';
echo $email;
echo '<td>' . $row['town'] . '</td>';
echo '<td>' . $row['phone'] . '</td>';
echo '<td>' . $row['notes'] . '</td></tr>';
$companyfind = $row['id'];
}
and the Javascript below:
var select_comp = new Array();
var element = document.getElementById('return_comp');
function compTrig(clickedid)
{
if (document.getElementById(clickedid).checked == false)
{
return false;
}
else
{
select_comp.push(clickedid);
var clicked = clickedid;
var box= confirm(select_comp);
if (box==true)
return true;
else
document.getElementById(clickedid).checked = false;
var index = select_comp.indexOf(clicked);
if (index > -1)
{
select_comp.splice(index, 1);
}
}
select_comp.toString();
element.value(select_comp);
}
I can get a confirmation box to display the correct values but i cannot change the value of the hidden value which would work. I was thinking that it may be because the form is in a while loop and the form should be outside of the loop. Any help of this matter will be greatly appreciated.

You're doing this the opposite way 'round how it should be done and exposing too much information to be tampered with in the front-end. It's also causing a lot of unnecessary redundancy (redundancy is the programmer's mortal enemy). No Javascript is needed for this task.
All you should be passing to the browser is the relevant company information to populate a single form; then building the appropriate output in PHP after submission.
search_results.php
echo "<form name=\"select_comp\" method=\"POST\" action=\"select_comp.php\">";
$search_sql = "
SELECT id FROM `company` WHERE `groups` = '$groups'
AND (`companyname` LIKE '%$search%'
OR `directurl` LIKE '%$search%'
OR `email` LIKE '%$search%'
OR `phone` LIKE '%$search%'
OR `groups` LIKE '%$search%'
OR `notes` LIKE '%$search%')";
$result = mysql_query($search_sql) or die(mysql_error());
while($row = mysql_fetch_array($result))
{
echo "<input type=\"checkbox\" name=\"id[{$row['id']}]\" value=\"1\"> {$row['company_name']}<br>";
// echo other company details
}
echo '
<input type="submit" value="C">
</form>';
This will give you an array of selected checkboxes in the $_POST variable:
select_comp.php
// $_POST['id'] will contain an array of selected checkboxes
// implode array into a comma-separated list for use with MySQL IN operator
// escaping a string where the numbers have been tampered with will cause an error, but it will be safe from injection
$sql = "
SELECT * FROM `company` WHERE `id`
IN (" . mysql_real_escape_string(implode(',', $_POST['id'])) . ")";
$res = mysql_query($sql);
while($row = mysql_fetch_array($res)) {
switch ($row['id']) {
// first company
case '0':
// build styling here
break;
// second company
case '1':
// build more styling here
break;
// and so on
}
// output HTML with styling information computed above
}
But, what you should really be doing is setting the styling dynamically with values entered into the database and/or determined by file naming convention (while involving absolute validation of dynamically-generated styling specifications, of course).