I'm displaying rows of data from a mysql database, and on each row I have three icons that I'd like to function as buttons. When an icon is clicked, I'd like to send the user to another page, and send that page both which icon was clicked and what row it was on. Here's some sample code:
<form action="nextpage.php" method="POST">
while ($row = $result->fetch_assoc))
{
echo '<input type="image" src="button1.png" name="button1">';
echo '<input type="image" src="button2.png" name="button2">';
echo '<input type="image" src="button3.png" name="button3">';
echo $row["cName"], '<br/>', PHP_EOL;
}
</form>
I've tried adding a value field for each input icon, but that didn't seem to work. I've tried putting the row identifier in the input's name, but it came out with changed characters, making it difficult to extract.
This page will likely display up to a hundred rows from the database, so aside from creating a separate form for each icon on each row (300 forms), what's the best way to go about this?
If you can use jquery, here is how I would approach it:
<form action="nextpage.php" method="POST">
<input type="hidden" id="hidden-icon" name="icon" value="" />
<input type="hidden" id="hidden-row" name="row" value="" />
</form>
<?php
$row_num = 0;
while ($row = $result->fetch_assoc))
{
echo '<img src="button1.png" />';
echo '<img src="button2.png" />';
echo '<img src="button3.png" />';
echo $row["cName"], '<br/>', PHP_EOL;
$row_num++;
}
?>
<script type="text/javascript">
$('.click-register').on('click', function (e) {
//Stop the link from jumping to the top of the page
e.preventDefault();
//Fill in the hidden form values
$('#hidden-icon').val($(e.target).data('icon'));
$('#hidden-row').val($(e.target).data('row'));
//Submit the form
$('form').submit();
});
</script>
That code is off the top of my head and untested, but here's the general idea:
First, move the icons outside of the form, as this approach doesn't require them to be inputs any longer;
Since the icons don't need to be inputs, we make them images inside of anchors;
We put the data we need on the anchors (data-icon and data-row);
Using jquery (in this case, you could do this pure javascript if you needed to), we:
Listen for any clicks of the anchors;
Grab the data from the clicked link and fill in our hidden form fields; and
Submit the form
Again, I used jquery because it's common and familiar to many. You can accomplish this with many other javascript frameworks or even pure javascript if that was desireable. Conceptually though I think it is sound.
If you don't want to go with javascript, the option of using links instead of POST'ing with a form is potentially viable.
Here's what that might look like:
<?php
$row_num = 0;
while ($row = $result->fetch_assoc))
{
echo '<img src="button1.png" />';
echo '<img src="button2.png" />';
echo '<img src="button3.png" />';
echo $row["cName"], '<br/>', PHP_EOL;
$row_num++;
}
?>
Hope that helps!
Based on the comment by mcgraphix, I eliminated the form entirely and changed all the input to links and appended the button id and row id to each link, as shown below:
while ($row = $result->fetch_assoc))
{
echo '<img src="button1.png">';
echo '<img src="button2.png">';
echo '<img src="button3.png">';
echo $row["cName"], '<br/>', PHP_EOL;
}
Thanks, mcgraphix! :)
PS - As this posted, I saw basically the same answer by xjstratedgebx, so thank you as well!
This might seem a bit of a strange idea but you can just use submit buttons for each button and then style the image over top of the button. The good thing about submit buttons is that only the button that is pressed is sent through the request, so effectively you only need one form for the whole page, and a unique name for each button.
<form action="nextpage.php" method="POST">
while ($row = $result->fetch_assoc))
{
echo '<button class="img-button b1" name="$row["cName"]button1" />';
echo '<button class="img-button b2" name="$row["cName"]button2" />';
echo '<button class="img-button b3" name="$row["cName"]button3" />';
echo $row["cName"], '<br/>', PHP_EOL;
}
</form>
I don't know PhP so not sure if that compiles, but hopefully you get the idea that as long as the buttons have unique names, only one name will be sent through the request.
Then in your style sheet something like the following (not tested):
.img-button {
height: 20px;
width: 20px;
}
.button1 {background-image: url('button1.png');}
.button2 {background-image: url('button2.png');}
.button1 {background-image: url('button2.png');}
Hope that is useful!
Related
I have a PHP page that generates different invoices in a search function and each invoice has a table that gets shown when the user clicks on a button (via JavaScript). The question is how to send a specific button id to the JavaScript. This is my code so far.
echo '<input type="submit" onclick="newDisplay()" style="padding: 5px;width: 90px;" value="Add Receipt">';
And
$idName = 'myForm' . $job['id'];
echo '<table style="display:none;width:100%;" id="' . $idName . '">';
Then the JavaScript is:
function newDisplay() {
document.getElementById('<?php echo $idName; ?>').style.display = 'block';
}
If a button is generated for each invoice, is there a way to send the element ID plus the invoice ID so that only the one specific table gets shown? I can concatenate the job id to the myForm, but how would I check that with the JavaScript?
EDIT: I tried the concatenation, but the JavaScript picks up the last one.
You can do something like this
echo '<input type="submit" id="' . $id .'" data="" onclick="newDisplay(this.id)" style="padding: 5px;width: 90px;" value="Add Receipt">';
And in javascript
function newDisplay(id) {
//doanything with the id
document.getElementById('myForm').style.display = 'block';
}
You can also access any extra attribute you want to send in js like
function newDisplay(id) {
let my_attr=$("#"+id).attr("data");
//doanything with the id
document.getElementById('myForm').style.display = 'block';
}
If your id is numeric then you might need to append any alphabet or word before that like
echo '<input type="submit" id="my_' . $id .'" data="" onclick="newDisplay(this.id)" style="padding: 5px;width: 90px;" value="Add Receipt">';
And then in js you can access the id like
function newDisplay(id) {
var myid=id.split("_");
//doanything with the myid[1]
document.getElementById('myForm').style.display = 'block';
}
I know this topic is frequently asked but I've tried many ways and nothing works for me. I have a lot of checkboxes with the id generated (in Php) by a variable like this:<input type="checkbox" id="<?php echo $id; ?>" >. That I want to do is call a Javascript function every time that a radiobutton (autogenerated) is clicked for that that checkbox with id="<?php echo $id; ?>"can be checked.
I tried with things like:
function check() {
var id = '<?php echo $id; ?>';
document.getElementById(id).checked = true;
}
I know that maybe I could do with Ajax but I don't know how.
(Up to this point is obvious that you know that the radiobutton has onclick = "check ()").
If anyone can tell me what I can do is I appreciate a lot.
You can try something like this:
<input type="checkbox" id="checkbox-<?php echo $id; ?>" />
<input type="radio" data-check="checkbox-<?php echo $id; ?>" onclick="check(this)" />
<script>
function check(e)
{
document.getElementById(e.getAttribute('data-check')).checked = true;
}
</script>
You can use below code for dynamically generated radio and checkbox
$("input[type='radio']").click(function() {
$(this).closest('input[type="checkbox"]').prop('checked', true);
});
Okai, so I have this div:
// DESCRIPTION AREA
$body_html .= "<div id='seq-desc-".$seq_id_d."' contenteditable='true' data-text='Det som skal skje...'>";
$body_html .= $seq_desc_d;
$body_html .= "</div> ";
and this textarea:
$body_html .= "<textarea id='seq-desc-area-".$seq_id_d."' name='deta-".$seq_id_d."' style='display: none;'></textarea></td>";
In my form I use the following code to activate my Javascript code:
"<form action='planner_seq_save.php' id='save-".$seq_id_d."' name='save-".$seq_id_d."' method='POST' onsubmit='return getContent".$seq_id_d."'>";
getContent is defined like this:
function getContent'.$seq_id_d.'(){
document.getElementById("seq-desc-area-'.$seq_id_d.'").value = document.getElementById("seq-desc-'.$seq_id_d.'").innerHTML;
}
How come I get an empty return in my database when using POST?
I use $_POST['deta-(the id)'] to fetch my post.
Also I save my form using this code on a standard button. Could this make onsubmit not work?
onclick='document.forms['save-".$seq_id_d."'].submit();'
Been trying to find out what the problem is for a while now, and I really need someone elses opinion.
UPDATE:
Using console.log() I get no return within the function. So the function isn't running.
Full code can be found here
It looks like the submit event is not triggered when triggering the submit() method, therefore the onsubmit handler is not called. See another question for more info.
So you can try removing the onsubmit handler and trigger the getContent function from the onclick's one:
onclick='submitForm(id)'
function submitForm(id){
getContent(id);
document.forms(id).submit();
}
rename function getContent-'.$seq_id_d.'() to getContent_'.$seq_id_d.'()
correct textarea id in function document.getElementById("seq-desc-area-'.$seq_id_d.'").value to document.getElementById("seq-deta-area-'.$seq_id_d.'").value
correct function call in onsubmit onsubmit='return getContent-".$seq_id_d."' to onsubmit='return getContent_".$seq_id_d."()'
suppose that is all :)
full code
<?php
$seq_id_d = 1;
var_dump($_REQUEST);
?>
<div id='seq-desc-<?php echo $seq_id_d; ?>' contenteditable='true' data-text='Det som skal skje...'>werwerwqrewrqwer</div>
<form id='save-<?php echo $seq_id_d; ?>' name='save-<?php echo $seq_id_d; ?>' method='POST' onsubmit='return getContent_<?php echo $seq_id_d; ?>()'>
<textarea id='seq-deta-area-<?php echo $seq_id_d; ?>' name='deta-<?php echo $seq_id_d; ?>' style='display: none;'></textarea>
<input type="submit" value="ok">
</form>
<script>
function getContent_<?php echo $seq_id_d; ?>(){
document.getElementById("seq-deta-area-<?php echo $seq_id_d; ?>").value = document.getElementById("seq-desc-<?php echo $seq_id_d; ?>").innerHTML;
}
</script>
I have this link to an image inside td table:
....
echo "</tr><tr>";
for ($i=0; $i<count($prov_name);$i++) {
echo "<td><a onclick='showDiv()' ><img src='images/approved.png'/></a></td>";
}
}
echo "</tbody>";
echo "\t</table>\n";
echo "</div>";
?>
and then I have a hide div that appears when I clicked the link above.
<div id="approve" style="height: 300px;">
<input type="text" name="ProvSelected" value="" readonly>
....
and what I want is when I click the link image pass the variable $prov_name[$i] to the input value inside the div that appears.
How can I do that? I hope you can help me. Thanks.
First Click
then.. with variable inside input value..
Pass the prov name as an argument to showDiv().
foreach ($prov_name as $prov) {
echo "<td><a onclick='showDiv(\"$prov\")' ><img src='images/approved.png'/></a></td>";
}
Then showDiv should be defined as something like:
function showDiv(prov) {
$("#approve").show().find("input[name=ProvSelected]").val(prov);
}
I would rewrite the code like this:
Remove the <a> tag...you don't need it
Rewrite <img> with onclick added:
echo "<td><img src='images/approved.png' onclick='showDiv(\"".$prov_name[$i]."\")'/></td>";
Add an ID for the input
<input id="myInput" name="ProvSelected" value="" readonly>
Update the function showDiv()
function showDiv(val) {
//your code plus
document.getElementById("myInput").value = val;
}
On my website I have a big list of all the letters people can view.
For every letter there is a form which sends some data from the letter to the next page. What I want to do is to submit the form with a link, and not with a button.
As far as I know, that is not possible with PHP. So i tried making what i want in Javascript.
My programming experience in Javascript is litterly 0%. I need some help with this :)
This is the code I'm using:
<script type="text/javascript">
function submitform()
{
document.forms["brief_weergeven"].submit();
}
</script>
<form id='brief_weergeven[]' action='<?php echo $main; ?>beveiligd/achterbanner/nieuwsbrief.php' method='POST'>
<input type='hidden' name='nummer' value='<?php echo $brieven[0]; ?>'>
<input type='hidden' name='datum_maand' value='<?php echo $maand_getal; ?>'>
<input type='hidden' name='datum_jaar' value='<?php echo $jaar; ?>'>
<a href="javascript: submitform()" class='button'>Nieuwsbrief <?php echo $brieven[0]; ?> (<?php echo $maand .' ' .$jaar; ?>)<BR></a>
</form>
This code runs for every letter. As you can see, I'm using a array to give all the forms a seperate ID. The only thing is that i have no idea how to let javascript know which forum i submitted.
How can I do this? Please remember that i know nothing about javascript, so please explain what you're doing in your answer.
You dont need javascript to do this, just use css to make your button look like a link:
Css:
button {
border:none;
padding:0;
background: none;
color: blue;
text-decoration: underline;
cursor: pointer;
}
html:
<button type="submit">Submit</button>
You can usedocument.getElementById('form-id')
And event handler like this
var form = document.getElementById('your-form-id');
form.onsubmit = function(){
// code
}
user574632 gave you a nice alternative. Still even want to use JavaScript you can try below.
Use the jQuery onclick method having the id attribute of the link as selector.
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("#submit_link").on("click", function(){
var form = $(this);
var url = form.attr("action");
var data = form.serialize();
$.post(url, data);
});
});
</script>
<form id='brief_weergeven[]' action='<?php echo $main; ?>beveiligd/achterbanner/nieuwsbrief.php' method='POST'>
<input type='hidden' name='nummer' value='<?php echo $brieven[0]; ?>'>
<input type='hidden' name='datum_maand' value='<?php echo $maand_getal; ?>'>
<input type='hidden' name='datum_jaar' value='<?php echo $jaar; ?>'>
<a href="#" id="submit_link" class='button'>Nieuwsbrief <?php echo $brieven[0]; ?> (<?php echo $maand .' ' .$jaar; ?>)<BR></a>
</form>