Creating a button labeled with one PHP item to insert another - php

Very simply, I'm creating a PHP content database for a website. I want to create buttons next to a text field, with a title drawn from a table. Clicking this button then inserts an equivalent code into the field. These PHP table consists of three columns: key, word and code
So far I have the following code... this DOES populate the button value, but the does not insert the code. I suspect this is due to the use of '' within the PHP code. Am I correct?
Appreciate any guidance
<html>
<head>
<title>Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript">
function insertText(elemID, text)
{
var elem = document.getElementById(elemID);
elem.innerHTML += text;
}
</script>
</head>
<body>
<form>
<textarea id="txt1"></textarea>
<input type="button" value="<?php echo $row_tooltips['word']; ?>" onclick="insertText('txt1', '<?php echo $row_tooltips['code']; ?>');">
</form>
</body>
</html>

<html>
<head>
<title>Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript">
function insertText(elemID, text)
{
var elem = document.getElementById(elemID);
elem.innerHTML += text;
}
</script>
</head>
<body>
<form>
<?php
$row_tooltips['word'] = "buttontitle";
$row_tooltips['code'] = "code";
?>
<textarea id="txt1"></textarea>
<input type="button" value="<?php echo $row_tooltips['word']; ?>" onclick="insertText('txt1', '<?php echo $row_tooltips['code']; ?>');">
</form>
</body>
</html>
Changed nothing of your code but predefining the $row_tooltips array and it works completely fine for me. Are you sure, that this array gets filled correctly?
greetz

So you say:
What I'm trying to achieve is a button to insert some HTML code though so when the user hits a button a full link is included into a PHP text field.
Then indeed, if there is an ' in the string that has been echoed, your script breaks. Also with any other htmlspecialchars, especially " your run into problems; So you need to escape that.
Also, htmlcode inside a textarea is standard not possible, so you should probably make it a div (with an textbox inside, if you need that).
Based on your original code, below a code that works ok. I use htmlspecialchars for the plain text, and addslashes for your html with (the ', as encoding them does not work).
<?php
// Remove this, only for testing
$row_tooltips['word'] = "Insert a FooBar";
$row_tooltips['code'] = "<h1>Delicious 'FooBar'</h1><img src=\"http://thumbs.dreamstime.com/x/reep-chocolade-12835946.jpg\" alt=\"foobar\" />";
?>
<html>
<head>
<title>Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript">
function insertText(elemID, text)
{
var elem = document.getElementById(elemID);
elem.innerHTML += text;
}
</script>
</head>
<body>
<form>
<div id="txt1"></div>
<input type="button" value="<?php echo htmlspecialchars($row_tooltips['word'], ENT_QUOTES, 'ISO-8859-1'); ?>"
onclick="insertText('txt1', '<?php echo addslashes(htmlspecialchars($row_tooltips['code'], ENT_COMPAT, 'ISO-8859-1')); ?>');">
</form>
</body>
</html>
Tested in Chrome.

Related

Get html value to pass to php withini the file

How can I get an HTML value to send to PHP. I would like to avoid using a form. For example I have an input:
<input name="input" id="input">Input</input>
while in PHP:
$input = $_POST['input'] --> but didn't work
or
$input = $_GET['input'] --> still didn't work
I know that I will be able to get it using form then action="another file" but I want it within a file. Please help. Thank you.
If you simply want to use js to append the input value in url variable then you can use js function as follows;
client.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<input type="text" id="txt">
<a onclick="append()" id="anch" href="server.php?text">Send value</a>
</body>
</html>
<script>
function append()
{
txt=document.getElementById('txt');
anch=document.getElementById('anch');
anch.href=anch.href+"="+txt.value;
}
</script>
server.php
$variable = $_GET["input"];
echo $variable;
Output on localhost:
After clicking send value:-
Update: I just read the end of your question. If you want to show the value of input on same page/file then you can use following code;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<input type="text" id="txt">
<?php
if(isset($_GET['text']))
{
$text=$_GET['text'];
echo "<a onclick='append()' id='anch' href='?text=$text'>Enter Value</a>";
}
else
{
echo "<a onclick='append()' id='anch' href='?text'>Enter Value</a>";
}
?>
<br>
<?php
if(isset($_GET['text']))
echo "<div id='values'>".$_GET['text']."<div>";
?>
</body>
</html>
<script>
function append()
{
txt=document.getElementById('txt');
anch=document.getElementById('anch');
if(anch.href.match(/=/)=="=")
anch.href=anch.href+txt.value+"<br>";
else
anch.href=anch.href+"="+txt.value+"<br>";
}
</script>
Output:
Check output on phpFiddle
It seems that the way to go is to use the GET method.
You will need to access your page with the get parameters included like this:
http://localhost/index.php?input=VALUE_HERE
And in your php file:
$variable = $_GET["input"];
echo $variable;
But if you insist to use inline html elements to get data, you need to use javascript for that like this for jquery:
alert("This is the value of the input" + $("#input").val());
Don't use this
<input name="input" id="input">Input</input>
Use this
<input name="input" id="input">

TinyMCE angle brackets

I am new to using TinyMCE but am frustrated with its behavior of angle brackets. It appears to be interpreting input such as <foo> or <foo>Foo</foo> as tags despite the page source showing that both cases are converted to <foo> and <foo>Foo</foo> respectively
I reduced my code for SO, it is below:
<?php
// Simplified for SO, no file writing / reading
$content = isset($_POST["forSo"]) ? $_POST["forSo"] : "";
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>For Stack Overflow</title>
<script src="/tinymce/js/tinymce/tinymce.min.js"></script>
<script>
tinymce.init({ selector : "#forSo" });
</script>
</head>
<body>
<?php
// Behaves as expected, TinyMCE correctly automatically converts HTML Entities
echo $content . "\n";
?>
<form action="/forSo.php" method="post" enctype="multipart/form-data">
<textarea id="forSo" name="forSo">
<?php
// Page source shows that this has HTML Entities, still loses information
echo $content . "\n";
?>
</textarea><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
If I input say <foo> then the resulting page source is:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>For Stack Overflow</title>
<script src="/tinymce/js/tinymce/tinymce.min.js"></script>
<script>
tinymce.init({ selector : "#forSo" });
</script>
</head>
<body>
<p> <foo></p>
<form action="/forSo.php" method="post" enctype="multipart/form-data">
<textarea id="forSo" name="forSo">
<p> <foo></p>
</textarea><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
However TinyMCE seems to have thrown away the textarea's content resulting in this (hitting submit again causes all of $content to be an empty string):
Replacing the second <?php echo $content . "\n"; ?> inside the textarea with <?php echo str_replace("&", "&", $content) . "\n"; ?> accomplishes the task
This does prevent writing valid HTML tags but text that is meant to be taken literally such as <foo> is preserved inside the TinyMCE editor as &lt;foo&gt; as opposed to <foo> which TinyMCE interprets as a HTML tag

submit button being created inside of submit button

I'm having a problem with a submit button in a form, when clicked it first reloads the current page, which creates a submit button inside of the original one before posting to the post page.
You can see the behavior example here:
http://tampary.com/pick_game.php?c_id=15&p_id=0&f_id=1&l_id=1
You can click back in your browser after clicking "start game" and you will see the nested controls. Using Chrome and Firefox, you get same results. Any ideas what could be causing this behavior? ideally, I just want the php page to be redirected to after the form submit to just load up cleanly. Any help would be greatly appreciated
The complete code is as follows:
<?php
require_once(dirname(__FILE__).'/grl-lib/db.php');
require_once(dirname(__FILE__).'/grl-lib/ui.php');
require_once(dirname(__FILE__).'/grl-lib/family.php');
require_once(dirname(__FILE__).'/grl-lib/location.php');
require_once(dirname(__FILE__).'/grl-lib/contact.php');
$ui = new x_ui;
$ui->set_ui(1);
if (!empty($_POST)){
$p_id = $_POST['p_id'];
$f_id = $_POST['f_id'];
$l_id = $_POST['l_id'];
$c_id = $_POST['c_id'];
}else{
$p_id = $_GET['p_id'];
$f_id = $_GET['f_id'];
$l_id = $_GET['l_id'];
$c_id = $_GET['c_id'];
}
?>
<!DOCTYPE HTML>
<html lang="<?php echo $ui->getLocale($ui->language_id,1); ?>">
<head>
<?php include_once('grl-lib/gen_include.php'); ?>
<meta name="robots" content="noindex"> <!-- no indexing this page -->
<link href="css/main.css" rel="stylesheet" type="text/css">
<link href="css/devices.css" rel="stylesheet" type="text/css">
<title>Tampary<?php ' '._('game'); ?></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name=viewport content="width=device-width, initial-scale=1">
</head>
<body class="color_bg">
<?php include('standard/header.txt'); ?>
<!-- all content -->
<div class="entire_content_length aling_text_c">
<div class="max_width_responsive align_container_c spc_a_5">
<div class="align_container_c spc_a_5 container_c">
<form id="pick_game" action="game.php" method="post">
<?php
$html = '<input type="hidden" name="p_id" id="p_id" value="'.$p_id.'"><input type="hidden" name="f_id" id="f_id" value="'.$f_id.'"><input type="hidden" name="l_id" id="l_id" value="'.$l_id.'"><input type="hidden" name="c_id" id="c_id" value="'.$c_id.'">';
//$html = $html.'<input type="submit" value="'._('Start Game').'">';
echo $html;
?>
<input type="submit" value="Start Game">
</form>
</div>
</div>
</div>
<?php include('standard/footer.txt'); ?>
</body>
</html>
I see you are using an Ajax script, which is fine. But is definitely the culprit cause I can see it responding the entire page in firebug.
I will bet you that your front page is Ajax to and you append something somewhere (can't find it this fast).
Whatever the case, I'm not convinced that what ever your doing (loading an entire page through AJAX) is good practice.
Looking at your AJAX requests will solve your inception button problem

dojo dojo.behavior values not posted

When I run following snippet and click 'submit', 'price' is not posted; is there something I forgot ?
<?php
var_dump($_POST);
?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="libs/dijit/themes/claro/claro.css">
<script>dojoConfig = {async: true}</script>
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.8.3/dojo/dojo.js"></script>
</head>
<body class="claro">
<form id="myform" method="post" action="index.php">
<input class="cif" name="price" type="text" value="125.10" />
<input type="submit" value="submit" name="submit">
</form>
<script type="text/javascript">
require(["dojo/ready", "dijit/form/NumberTextBox", "dojo/behavior"],
function(ready, box, behavior){
ready(function(){
behavior.add({
'.cif': function(node) { //assumes "found"
new box({constraints: {pattern: "###,###.00"}, value: dojo.number.format(node.value, {places:2})},node);
}
});
behavior.apply();
});
});
</script>
</body>
</html>
Sorry for this newbie question
Erik
Replace:
var_dump($_POST);
With:
var_dump($_POST['price']);
Recently I ran into similar problem and only this result I found but with no answer. But today I figure it out so I'll share my knowledge.
When you are creating a new widget box you also need to define 'name' attribute otherwise the widget will generate hidden input with no "name" attribute which is required when posting.
Change this line:
new box({constraints: {pattern: "###,###.00"}, value: dojo.number.format(node.value, {places:2}), name: "price"},node);
Trix

Print values from an SQL database table with PHP

I am new at PHP/SQL so bear with me if I say something that's obvious or downright wrong.
I have a SQL table (in a database) and I need to take 3 random values (name, race, year), each from a different field in the table, and print it on a website with php. The value requirement "race" will be different depending on radiobuttons (lets say RB1, and RB2) and this all has to happen when
<input type="submit" name="button"> is clicked.
<html> <input type="radio" name="RB1"> Asian </html>
What could I do in this situation?
Example: So if RB1 is selected and the button is clicked I will need to randomly print a "name" with the corresponding "year" (of the name) and it should have a corresponding race of RB1 (which is Asian)
I think this code will help you to understand this-
DB thing, you have to take care for that..im giving you an idea to handle this sort of stuff.
Create one test.php file(this what i did)
Place this code --
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>index</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("input:radio[name=race]").change(function(){
$.ajax({
type : 'GET',
url : 'getdata.php',
data: {race : $('input:radio[name=race]:checked').val()},
success: function(data){
$('#showdata').html(data);
},
});
});
});
</script>
</head>
<body>
<form action="#" method="post" name="myform">
<input type="radio" name="race" value="RB1" /> Asian
<input type="radio" name="race" value="RB2" /> European
</form>
<div id="showdata"></div>
</body>
</html>
In getdata.php file paste this content -
<?php
$myvalue = $_GET['race'];
if( $myvalue == 'RB1')
{
echo "I am RB1";
}
if( $myvalue == 'RB2')
{
echo "I am RB2";
}
Run the code in browser now (test.php).

Categories