I have a task list.
Initially I display all of them. I want to create 2 buttons s.t. one displays the tasks ordered by date, and the other displays the tasks that have passed.
How can I do this? I don't know how to make a button to do anything else than submit.
I was thinking about redirecting to another "page" but I'm not sure it is efficient.
<button type="button" name = 'display1' value="orderedDisplay">Order by date</button>
<button type="button" name = 'display2' value="passedTasks">Passed tasks</button>
or
<table >
<tr>
Order by date
</tr>
<tr>
Display past events
</tr>
</table>
But I don't know how to "catch" the event of clicking with "button"type button.
In order to have a button doing something, you need some JavaScript, executing that "something":
<input type="button" name='display1'
onclick="callOrderByDate()" value="Order by date"/>
....
<script type="text/javascript">
function callOrderByDate()
{
alert("I'm not ging to write the entire code here...");
}
...
</script>
sample
Related
I want to show buttons depending on the values from a table. Afterwards I need to access anyone button and act according to the label of buttons. To be more specific, i have a table containing names of subjects, I want to show the buttons each having label of a subject. when user clicks a button (eg: Physics), the screen should display a test (MCQs) of Physics only, and so on:
Below is my code:
<button id="subj" onclick="showSubjects()">Start Test </button>
<div id="subjects" style="display: none;">
<form method='POST'>
<?php include_once('connect.php');
$query = "select distinct subject from subjects order by subject
desc ";
$result = mysqli_query($conn,$query);
while($row=mysqli_fetch_array($result)){
$subjectname = $row['subject'];?>
<input type="submit" id = "sub" name="sub"
value='<?php echo $subjectname; ?>'>
<?php } ?>
</form>
</div>
<?php
if(isset($_POST['sub'])){echo $subjectname; } else {echo
"Nothing";}
?>
</body>
<script type="text/javascript">
function showSubjects(){
document.getElementById("subjects").style.display = "block";}
function showTest(){
document.getElementById("tests").style.display = "block";
} </script>
This shows 3 buttons: PHISICS CHEMISTRY BIOLOGY
when user clicks any of these buttons it takes it as last button value i.e. BIOLOGY.
How can I amend it so that if user clicks CHEMISTRY it should show "Chemistry button clicked" and so on
The only thing that will change based on the submitted form is the $_POST array. Other variables, like $subject, will be the same whatever the user does; PHP isn't going to guess what you want them to be.
You've already got logic checking if the user pressed any button:
if(isset($_POST['sub'])){ ... }
Determining which button they pressed is just a matter of looking at that same variable:
echo $_POST['sub'];
The same goes for any other form controls you add - the user's selections will end up in $_POST, and it's up to you to read them from there.
It's also worth remembering that the logic for displaying the form doesn't need to be in the same place as the logic for precessing the submitted form, so the fact that these buttons are generated dynamically doesn't make a difference to how you read the submitted data back. You can't even guarantee that the user used your form at all, they could write their own and submit it to your server, or edit it using their browser's debugging tools.
I have the following table dynamically generated using php and MySQL. The number of rows and number of buttons generated are dynamic.
<?php
if($resultCheck != 0){
while($result = mysqli_fetch_array($tableQueryExecute)){
$normalShiftDuration = $result['shift1Duration'];
?>
<tr> <form method="post" id="vtagViewTwo">
<td name=""><select class="form-control" name="normalShiftOa" id="normalShiftOa"><option>1</option></select></td>
<td>
<input type="submit" class="btn btn-primary" name="editButton" id="editButton" value="Save">
</td>
</form></tr>
<?php
}
}
?>
I want to get value of the <td> which is normalShiftOa value with the button click using jQuery click event as below.
$("#editButton").click(function(){
alert("Clicked");
});
But since there are many button generating for each row with the same id, I am not able to do it. Does anyone know how to do it? I am able to do it using php $_POST['editButton'] method. But I want to do it using jQuery.
Edit 1
I changed the id editButton to class and tried the following. But it is not working
$(".editButton").click(function(){
alert($(this).$("#normalShiftOa").val());
});
Instead of using ids, use class editButton. Then, if you want to get the value of the select, use jQuery like shown below:
$(".editButton").click(function(){
let tdValue = $(this).closest("form").find("select").val();
});
Edit: Code snippet that works.
$(".editButton").click(function(event){
let tdValue = $(this).closest("form").find("select").val();
alert(tdValue);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<tr> <form method="post" id="vtagViewTwo">
<td name=""><select class="form-control" name="normalShiftOa" id="normalShiftOa"><option>1</option></select></td>
<td>
<input type="submit" class="editButton btn btn-primary" name="editButton" id="editButton" value="Save">
</td>
</form></tr>
I have an PHP page, which contains a form with some different input fields, e. g. day, month, year etc.. The form method is POST, only one non-editable field (The user ID) is sent via GET.
Of course, there is a "Submit"-Button, which triggers the form Action (PHP Script on Server).
The form tags contain a table with empty cells too. Now comes my question:
If the user clicks into one of the table cells, the form should be submitted, but additional to the regular form data the ID of the table cell should be transmitted too (If via POST or GET doesn't matter to me). How can I do that?
//Edit 2:
...
<form method="post" action="<?= DOMAIN?>/.../addUserTimetable.php?uid=<?= $user->getUserID() ?>">
<select id="day" name="day">
...
</select>
...
<input name="yearend" id="yearend" ...>
<button type="submit">...</button>
<table class="bordered">
<tr>
<th>Std.</th>
<th>Montag</th>
<th>Dienstag</th>
<th>Mittwoch</th>
<th>Donnerstag</th>
<th>Freitag</th>
</tr>
<?php
for($i=1; $i<13;$i++) {
echo "<tr>";
echo "<th>".$i. "</th>";
for($j=1;$j<6;$j++) {
echo "<td id='h".$i. "d".$j. "' onclick='???'></td>";
}
echo "</tr>";
}
?>
</table>
</form>
...
The server sided procession is fine, but I haven't got any ideas - even after two hours google - how I could transmit the cell id additionally.
That shouldn't be to hard. Have a look at the following example:
<form>
<input type="text" name="something">
<table>
<tr>
<td><input type="submit" name="cel1">
</tr>
<tr>
<td><input type="submit" name="cel2">
</tr>
<tr>
<td><input type="submit" name="cel13">
</tr>
</table>
<input type="submit" value="save">
</form>
By giving the submit buttons in the table cells a name attribute, that name will also be present as a key on the $_REQUEST. Go ahead and var_dump the $_REQUEST and you'll see you can find out in the backend which button got pushed by checking which key exists.
Note that POST / GET is completely irrelevant here, both will work just the same. And obviously you could apply some css to those buttons to make them transparent and lay them on top of the table cells, so they don't look like buttons, but just "capture" the user's click.
One last side note, are you sure you want to send the userID as a GET parameter? That would be very easy for someone with bad intentions to manipulate. Consider not sending the ID at all, but keeping it in the session on the server.
I have this chunk of code, which is displayed on a user's journal page. They can add an entry and they have the option to delete an entry once it's on the page.
Ill show the code with some comments and then explain the problem.
// Figures out how many recent posts to display
$posts = $config_journalposts + 1;
if($noposts!=1) {
// Gets the data from the query
while(($row = mysql_fetch_array($journalquery)) && ($posts > 1)) {
// For each of the posts that were gathered, display the following:
echo '<table border="0" width="100%">
<tr>
<td colspan="2" style="vertical-align:bottom;">
// Display the title as a link to be used as a permalink
<p class="fontheader">'.$row['title'].'</p>
</td>
</tr>
<tr>
// Show the o-so-important content
<td width="100%" style="vertical-align:top;padding-left:10px;">
'.$row['content'].'
</td>
</tr>
<tr>
// Show the date
<td style="font-size:8pt;padding-top:10px;">'.$row['date_day'].'/'.$row['date_month'].'/'.$row['date_year'].'</td>';
// Checks if the current user is the owner of the journal or an admin
if($_SESSION['user']==$pageowner || $_SESSION['user_rank']=='Admin') {
echo '<td align="right">
// FOCUS POINT
<form method="POST" id="deljournal">
<input type=\'hidden\' name=\'delete_id\' value=\''.$row['id'].'\' />
// A delete button that executes a bit of Javascript
<button type="button" class="button" name="delete" value="Delete" onClick="delete_journal()" />Delete</button>
</form>
// END FOCUS POINT
</td>';
}
echo '</tr>
</table>
<hr>
';
$posts --;
}
Here is the Javascript that gets triggered on the button press
function delete_journal() {
var answer = confirm("Are you sure you want to delete this journal entry?")
if (answer){
// Submits the form
$("#deljournal").submit()
}
}
This javascript triggers the forum in the PHP code above which reloads the page and triggers this at the very top of the page, before the tag
if(($_POST['delete_id'])) {
// Gets the post ID from the hidden forum tag
$deleteid = addslashes(strip_tags($_POST['delete_id']));
// Deletes the row that has the ID of the hidden form
mysql_query("DELETE FROM `gamezoid_accounts`.`journal_$pageowner` WHERE `id`='$deleteid'");
}
Now, for the problem. In the while loop, this form gets repeated over and over. What happens is that upon pressing the delete button, it triggers the form that has the ID "deljournal". Since all of them have the ID "deljournal" it does the one at the top of the page. Trying to embed the post ID into the form ID breaks the code because the mysql_query doesn't know that the delete function has been triggered in the first place.
Any way around this?
Reason why I'm using Javascript as a trigger is for the confirmation popup in case anyone askes.
Anyways, thanks heaps for reading this far!
<input type=\'hidden\' name=\'delete_id[]\' value=\''.$row['id'].'\' />
then only u will get all the values as array when posted.
<input type=\'hidden\' name=\'delete_id[]\' value=\''.$row['id'].'\' />
then only u will get all the values as array when posted.
and on server side u should use
$delete_values= implode (',',$_POST['delete_id']);
Found a solution.
I have changed the form to be
<form method="POST" id="deljournal_'.$row['id'].'">
<input type=\'hidden\' name=\'delete_id\' value=\''.$row['id'].'\' />
</form>
<button type="button" class="button" name="delete" value="Delete" onClick="delete_journal_'.$row['id'].'()" />Delete</button>
by adding the journal entry ID into the ID of the form and the onClick function. The javascript is just below it outside the table cell and looks like:
<script type="text/javascript">
function delete_journal_'.$row['id'].'() {
var answer = confirm("Are you sure you want to delete this journal entry?")
if (answer){
$("#deljournal_'.$row['id'].'").submit()
}
}
</script>
where the entry ID has been added to the function name and form ID tag. By putting the Javascript into a while loop and not into an external file, it can be manipulated with the loop to have the same values.
It is a bit messy and will slightly increase load times + execution times but it was the quickest way that I could find.
Hope this helps anyone else who has been having a similar problem.
I'm somewhat new to jQuery, so I could use some help here.
This is my issue:
I have a PHP script outputting a dynamic table. Each row has an "edit" button, plus some other fields. Only 3 of those need to be turned into an input box. The edit button should only put that specific row into "edit mode." I got as far as assigning each row a unique class by adding a number to the end of it.
I have been able to use jQuery to change all of the rows into edit mode, but I need it to be specific to a row.
An example row would have classes like name0, price0, and desc0. The next row would go on to classes name1, price1, and desc1 (for the fields that need changed). How can I reference these values and pass them to jQuery so it processes an event on just those elements?
There are two ways of doing this:
Dynamically creating the elements when the button is pressed; or
Hiding and showing elements that already exist.
Too much DOM manipulation can be really slow (particularly on certain browsers) so I favour (2). So for example:
<table class="editable">
<tbody>
<tr>
<td>one</td>
<td>
<div class="view">two</div>
<div class="edit"><input type="text"></div>
</td>
<td>
<div class="view">three</div>
<div class="edit"><input type="text"></div>
</td>
<td>
<input type="button" class="edit" value="Edit">
<input type="button" class="send" value="Send" disabled>
<input type="button" class="cancel" value="Cancel" disabled>
</td>
</tr>
</tbody>
</table>
with:
table.editable div.edit { display: none; }
and
$(function() {
$(":button.edit").click(function() {
var row = $(this).closest("tr");
row.find("input.view").attr("disabled", true");
row.find("div.view").each(function() {
// seed input's value
$(this).next("div.edit").children("input").val($(this).text());
}).fadeOut(function() { // fade out view
row.find("div.edit").fadeIn(function() { // fade in edit
row.find("input.edit").removeAttr("disabled"); // enable edit controls
});
});
});
$(":button.cancel").click(function() {
var row = $(this).closest("tr");
row.find("input.edit").attr("disabled", true");
row.find("div.edit").fadeOut(function() {
row.find("div.view").fadeIn(function() {
row.find("input.view").removeAttr("disabled");
});
});
});
$(":button.save").click(function() {
// ...
});
});