Why does using innerHTML in javascript echo extra quotation? - javascript

I have PHP page have textbox with button and when click on button text in text box insert to database and textbox change to label and that text show on label but when i change label text with javascript echo extra quotation :
php code:
echo "<label id='crlabel".$counterRecord."'></label>";
echo "<input name='cr_number1' id='cr_number".$counterRecord."' type='text'>";
echo "<input class='pad' type='button' id='cr".$counterRecord."' style='background-color:#428bca' value='s'>";
js code:
for (var i = 1; i < 21; i++) {
(function(cr) {
$("#cr"+cr).click(function () {
$.get("cr.php", {
id: $("#recordid"+cr).val(),
cr_number:'"' +$("#cr_number"+cr).val()+ '"'
},function(data){if(data =="cr"){
alert("cr submitted before you");}else{
$("#cr_number"+cr).fadeOut(500);
$("#cr"+cr).fadeOut(500);
document.getElementById('crlabel'+cr).innerHTML = data;
$("#crlabel"+cr).fadeIn(500);});
}
});
})(i);}
cr.php:
$cr_number=$_GET['cr_number'];
if ($row["cr_number"]!=""){
echo "cr";}
else{mysql_query("UPDATE cr SET cr_number=".$cr_number." WHERE id=".$id.";",$con);echo $cr_number;}
this code work fine but i doesn't like extra qoutation start and end of data show
example: "3443"
what I want:3443

You pass the following data
{
id: $("#recordid"+cr).val(),
cr_number:'"' +$("#cr_number"+cr).val()+ '"'
}
where you add a quote to the start and end of cr_number. As a result $_GET['cr_number'] will hold those quotes inside the values and when you
echo $cr_number;
the quotes will be in the response. So the response contains the quotes and when you put it into innerHTML, it will contain them. To modify this behavior to not contain the quotes, make sure you do not add them in the first place to the data:
{
id: $("#recordid"+cr).val(),
cr_number:$("#cr_number"+cr).val()
}

Related

Sanitizing whitespace in generated URL parameters

I'm having an issue with a PHP page that generates an HTML document. On the page, there is a form that has a <select> box, and each <option> inside has a value with the URL parameters to use when changing the window location when the form is "submitted". The issue is that I noticed is that one of the parameters is a name, and when that name has a space in it, it breaks the window location because the space remains in the URL.
I've tried simply doing a str_replace() on the string before it generates the <option> tag, and when I view the <option> in Firefox' inspector, it DOES contain a %20 instead of a space, but when I look at the URL bar after clicking the <option>, it still retains the space instead of the %20. Can anyone tell me what's wrong with the following snippet?
print("<form name=sel1>");
print("<select size=10 style='width:200;font-family:courier,monospace;
font-weight:bold;color:black;' ");
print("onchange=\"location = this.options[this.selectedIndex].value;\">");
for($i = 0; $i < count($allGroups); $i++)
{
print("<option value='groups.php?action=");
if($advancedPermissions)
{
if($modGroups)
{
print("edit");
}
else
{
print("view");
}
}
else
{
print("edit");
}
print("&group_id=");
print(str_replace(" ", "%20", $allGroups[$i][0])."'>");
print($allGroups[$i][0]);
if($allGroups[$i][2] != 'Y')
{
print(" - inactive");
}
}
print("</select></form>");
The relevant lines are the line with location = and the line just after the group_id parameter is added, where the str_replace() is done.
I do the str_replace() on just the value, not the display text, so it will show normally to the user, but contain the %20 character for when it is passed to the window location, but regardless, it either ignores it, or something else is happening I am not aware of.
This code is a whole mess of bad practices. First, separation of code (PHP) and presentation (HTML) is essential for making sense of things. You should be doing logic in a separate code block at the very least, if not a separate file. Definitely not in the middle of an HTML element. Exiting PHP and using alternative syntax and short echo tags make this separation much clearer.
You should be building HTTP query strings using the http_build_query() function, which will handle escaping issues like the one you're having, and you should always escape HTML for output using htmlspecialchars().
print is not commonly used, but note that it's a language construct and not a function. Parentheses are not needed, and rarely used.
Inline CSS and JavaScript declarations are very 20th century and should be avoided wherever possible.
Here's how I would start to rework this code...
<?php
// assuming $allGroups is created in a loop
// the following code could be incorporated into that loop
$options = [];
foreach ($allGroups as $group) {
$action = ($advancedPermissions && !$modGroups) ? "view" : "edit";
$group_id = $group[0];
$url = "groups.php?" . http_build_query(compact("action", "group_id"));
$options[$url] = $group[0] . ($group[4] !== "Y" ? " - inactive" : "");
}
?>
<!doctype html>
<html>
<head>
<style>
#location_select {
width: 200px; font-family: monospace; font-weight: bold; color: black;
}
</style>
</head>
<body>
<form name=sel1>
<select id="location_select" size="10">
<?php foreach ($options as $value => $option): ?>
<option value="<?= htmlspecialchars($value) ?>">
<?= htmlspecialchars($option) ?>
</option>
<?php endforeach ?>
</select>
</form>
<script>
document
.getElementById("location_selector")
.addEventListener("change", function() {
window.location = this.options[this.selectedIndex].value;
});
</script>
</body>
</html>
But if you are looking for the quick fix:
for($i = 0; $i < count($allGroups); $i++)
{
$action = ($advancedPermissions && !$modGroups) ? "view" : "edit";
$group_id = $allGroups[$i][0];
$url = "groups.php?" . http_build_query(compact("action", "group_id"));
print("<option value='$url'>");
print($allGroups[$i][0]);
if($allGroups[$i][2] != 'Y')
{
print(" - inactive");
}
print("</option>");
}

Selecting a specific column in a option box using Javascript

I'm using the following php code to create a select option box:
$TypeLU = mysqli_query($mysqli, "SELECT * FROM LookupList");
while($Row = mysqli_fetch_array($TypeLU)) {
$TypeOptions = $TypeOptions."<option>$Row[1] $Row[2]</option>";
}
In HTML it gets displayed as a list with 2 columns. If I select and item from the list the value would be the concat of both $Row[1] and $Row[2] which is fine for display purposes, but I want to be able to 'extract' for example only $Row[1] as being the 'bound' value which I can then use as refrence.
So in pure Javascript I want to be able to get the value of just $Row[1] for example:
var x = document.getElementById("selectbox").value;
// So x must be only $Row[1] and not the concat of $Row[1] $Row[2]
Thanks
Use:
$TypeOptions = $TypeOptions."<option value='$Row[1]'>$Row[2]</option>";
You may also want to consider escaping the variables in case they contain any < or " or other special HTML characters. See htmlspecialchars.
Full example with escaping:
$TypeLU = mysqli_query($mysqli, "SELECT * FROM LookupList");
while($Row = mysqli_fetch_array($TypeLU))
{
$Row[1] = htmlspecialchars($Row[1]);
$Row[2] = htmlspecialchars($Row[2]);
$TypeOptions = $TypeOptions."<option value='$Row[1]'>$Row[2]</option>";
}

Change color of specific word in html

On my site when comment text contains my company name, then I want this name to be highlighted. This comments are retrieved from my mysql database. So how can I change the color (highlight anyway) of my company name if it exists in a comment? I can't use <span> because comments are dynamic. So please help me.
input
<?php
$paragraph=$row['textColumn'];//from database
//now it is
$paragraph='This is my companyName To be highlighted.This is companyName To be highlighted.This is my companyName To be highlighted.This is companyName To be highlighted.';
echo '<p>'.$paragraph.'</p>';
?>
expected output
Use the search and replace method str_replace:
$paragraph = $row['textColumn'];//from database
//now it is
$paragraph = str_replace('companyName', '<span class="highlightClass">companyName</span>', $paragraph);
echo '<p>'.$paragraph.'</p>';
You can use spans via a simply search and replace. You could do this in php:
$paragraph = str_replace('companyName', '<span class="red">companyName</span>', $paragraph;
Or in javascript (jquery):
$('div.comments').each(function() {
$(this).text($(this).text().replace('companyName', '<span class="red">companyName</span>'));
});
The above presumes comments are wrapped in <div class="comments"></div>. You would need to adjust to match your actual markup
This can be done wih JQuery
var html = $('p').html();
$('p').html(html.replace(/world/gi, '<strong>$&</strong>'));
<?php
$paragraph=$row['textColumn'];//from database
//now it is
$paragraph='company name';
echo '<h1>'.$paragraph.'</h1>';
?>
after it
change h1 class style

Call Javascript from recurring loop with incremental IDs

I have this php site and i use javascript with it.
One of the pages is an entry form with 10 lines to enter data in.
One line in this case would be coded in this way:
echo "<td style='border-width: 0'><input type='text' id = 'price1' style = 'font-size: 10px' name='poline1[price]' size='7'></td>";
Right next to this input field there is a button:
echo "<td style='border-width: 0'><a href = 'javascript:void(0)' onClick = 'copyRow1;' class='button6'>Copy Down</a></td>";
Javascript function copyRow1 is as follows:
<script type="text/javascript">
function copyRow1() {
document.fabricorder.price2.value = document.fabricorder.price1.value;
}
</script>
It copies inputted value from input box ID = price1 into input box ID = price2.
I have 10 Javascript functions like this
copyRow1(), copyRow2(), copyRow3(), etc....
It works fine but I am trying to optimize all the code to make it easier for modifications and now I want to loop all my lines.
So I want change my line script in this way:
for ($i = 1; $i <= 10; ++$i){
echo "<tr>";
echo "<td style='border-width: 0'><input type='text' id = 'price$i' style = 'font-size: 10px' name='poline[$i][price]' size='7'></td>";
echo "<td style='border-width: 0'><a href = 'javascript:void(0)' onClick = 'copyRow($i);' class='button6'>Copy Down</a></td>";
echo "</tr>";
}
and my function this way:
<script type="text/javascript">
function copyRow(i) {
document.fabricorder.price(i+1).value = document.fabricorder.price(i).value;
}
</script>
Unfortunately this doesn't work. What am i doing wrong?
Try modifying your copyRow function to:
function copyRow(i) {
for (var j=i,numRows=document.fabricorder.length;j<numRows;j++) {
document.fabricorder["price"+(j+1)].value = document.fabricorder["price"+(j+1)].value;
}
}
You need to loop over all input fields, copying each value to the next. It's hard to give you 100% working code without seeing 100% of your code. Can you put it in a JSFiddle?

Dynamically Modifying Incountable Cells on Textbox Change

I have a table that creates new rows through PHP in regard to a database table that gets updated. Each row contains a unique class "rdClass" with an additional number that is incremented by a counter. A textbox is contained within each row with a unique id "workhr" with an additional number that is incremented as well. (rdClass0, ..., rdClass[n] ---------- workhr0, ..., workhr[n])
<td class='rdClass" . $counter . "'><input id='workhr" . $counter ."' name='HrsInShift" . $counter . "'></td>
What I'm trying to do is change the background color of rdClass# whenever the value in textbox workhr# changes respectively. I've already created a nice script in JQuery but it's not dynamic.
$(function() {
content = $('#workhr0').val();
$('#workhr0').keyup(function() {
if ($('#workhr0').val() != content) {
content = $('#workhr0').val();
$('.rdClass0').css("background-color", "blue");
}
else
$('.rdClass0').css("background-color", "");
});
});
How could I make this dynamic so that it detects value change for all workhr[n] and modify their rdClass[n] background colors respectively?
var dynamic_val;
$('[id^=workhr]').keyup(function(){
if($(this).val() != dynamic_val){
dynamic_val = $(this).val();
$('.rdClass'+$(this).prop('id').split('workhr')[1]).css('background-color', 'blue');
}else{
$('.rdClass'+$(this).prop('id').split('workhr')[1]).css('background-color', 'inherit');
}
});

Categories