We Keep Coding

Order Button on each row of a table

I have a table of items and I would like to place an order button at the end of the table. The button would then take user to "order.php". Where based on the "Picture ID" they would then order the selected item. I've had a look at similar questions online however haven't been able to get it working with what I currently have.
if ($result->num_rows > 0)
{
echo "<table>\n";
while($row = $result->fetch_assoc())
{
echo "<tr>\n";
echo "<td>". $row["Picture ID"]."</td>\n";
echo "<td>". $row["name"]."</td>\n";
echo "<td>". $row["doc"]."</td>\n";
echo "<td>". $row["width"]."</td>\n";
echo "<td>". $row["height"]."</td>\n";
echo "<td>". $row["price"]."</td>\n";
echo "<td>". $row["description"]."</td>\n";
echo "<td> <form action='order.php' method='post'> <input type='button' name='id' value= ></form>"
echo "</tr>\n";
}
echo "</table>\n";
}

You have to pass the picture id as hidden input text and use the "submit" type for the button:
echo "<td> <form action='order.php' method='post'> <input type='hidden' name='id' value='" . $row["Picture ID"] . "'/> <input type='submit' name='submit' value='Buy'/></form>"
In order.php you can get the Picture ID from $_POST:
if (!empty($_POST['submit'])) { // submit button was pressed
echo 'Picture ID: ' . $_POST['id'];
}
Make sure to escape the $_POST['id'] properly when using it in SQL queries.

buttons in forms doesnt work after ajax call from db

I have search google, here and w3schools but this answer i cant find anyway. Not even in the "questions that may already have your answer".
I am trying to learn a bit more about AJAX and i have come to a hold at this guide W3schools AJAX database
All the guide i can get to work but when i try to suit it to my needs it goes wrong. What i want is that when i get to "getuser.php" i want to be able to update db in this file. If possible without me leaving this page with the result i have found. I choose from a dropdown table before this site. The php files which is supposed to update the db works (tried them on a normal page, and all is good). My current workaround is to add a button which opens a second window to update the info.
When i get to this point:
<?php
$q = intval($_GET['q']);
include 'db.php';
$con = new mysqli($servername, $username, $password, $dbname);
if (!$con) {
die('Could not connect: ' . mysqli_error($con));
}
mysqli_select_db($con,"webhelp");
$sql="SELECT * FROM advisors WHERE id = '".$q."'";
$result = mysqli_query($con,$sql);
while($row = mysqli_fetch_assoc($result)) {
echo "<table><tr><td>Phone</td><td>" . $row['phone'] . "</td>
<td><form action='addphone.php' method='post'>
<input type='hidden' name='id' value='".$q."'>
<td><input type='text' name='phone'></td>
<td><input type='submit' value='Update'></td>
</form></td></tr></table>";
echo "<tr><td>LoB</td><td>" . $row['lob'] . "</td>
<td><form action='addlob.php' method='post'>
<input type='hidden' name='id' value='".$q."'>
<td><select name='lob'>
<option value='". $row['lob'] ."'>" . $row['lob'] . "</option>".
$sql = "SELECT * FROM lob";
$result = $con->query($sql);
while($row = $result->fetch_assoc()) {
echo "<option value='" . $row["lob"] . "'>" . $row["lob"] . "</option>"; }
"</select></td>
<td><input type='submit' value='Update'></td>
</form>
</tr>";
echo "<tr><td>Country</td><td>" . $row['country'] . "</td>
<td><form action='addcountry.php' method='post'>
<input type='hidden' name='id' value='".$q."'>
<td><select name='country'>
<option value='". $row['country'] ."'>" . $row['country'] . "</option>".
$sql = "SELECT * FROM country";
$result = $con->query($sql);
while($row = $result->fetch_assoc()) {
echo "<option value='" . $row["country"] . "'>" . $row2["country"] . "</option>" ; }
"</select></td>
<td><input type='submit' value='Update'></td>
</form>
</tr>";
}
echo "</table>";
mysqli_close($con);
?>
The "Update" buttons doesnt work. It doesnt matter where i place the files (same folder, different folder) ect. However if i add a button with a link outside of the then that button work. But as soon as it is inside a table PLUS also method="post" is in the form it mess it up.
What am i doing wrong?
Alternatively is it possible to make a button here which carries the $id over to a small popup window? (I can open it in a new window but I can't choose how big the window should be)

You want to do this for all your 3 forms. I give you example for first one.
Form
echo "<form class='addPhoneForm' action='addphone.php' method='post'>
<table>
<tr>
<td>Phone</td><td>" . $row['phone'] . "</td>
<td><input class='phoneID' type='hidden' name='id' value='".$q."'></td>
<td><input class='phoneNumber' type='text' name='phone'></td>
<td><input class='submitme' type='submit' value='Update'></td>
</td>
</tr>
</table>
</form>";
AJAX
$(document).ready(function(){
$(".submitme").click(function(){
//collect variables from input
var phoneID = $(".phoneID").val();
var phoneNumber = $(".phoneNumber").val();
// store in a string
var dataAddPhone = 'phoneID='+ phoneID + '&phoneNumber='+ phoneNumber;
// send to database
$.ajax({
type: "POST",
url: "addphone.php",
data: dataAddPhone,
cache: true,
//if success
success: function(response){
//display message
$(".displayMessage").html(response);
//and reset form
$(".addPhoneForm").trigger("reset");
}
});
return false;
});
});

jQuery validates input fields only in the first row of loop

This is my first post here so I apologize in advance if the formatting is wrong.
I am working on a form that pulls data from MySQL using a loop and outputs it to HTML page. The user then has the option to approve or deny the entries, and based on user selection validation should be required or optional. My current code will validate correctly, but only for the first row being outputted from the loop. I am trying to validate all rows. I have tried using a while loop and foreach statement with no success. Any help would be greatly appreciated!
My Loop & Form:
//connect to the database
$db=mysqli_connect('localhost','root','') or die ('I cannot connect to the database because: ' . mysql_error());
//-select the database to use
$mydb=mysqli_select_db($db,"my_db") or die(mysql_error());
//-query the database table
$sql="SELECT id, date, client_name, client_number, date_completed, status FROM clients WHERE client_name LIKE '%" . $search ."%' OR status LIKE '%" . $search ."%' ";
//-run the query against the mysql query function
$result=mysqli_query($db, $sql);
//-count results
$rows=mysqli_num_rows($result);
if($rows=mysqli_num_rows($result)) {
echo "<h2 style='margin-left: 10em;margin-bottom: -0.4em;'><br><br><br>" . $rows . " result(s) found for " . $search . "</h2><br />";
}elseif($rows=mysqli_num_rows($result) == 0) {
echo "<h2 style='margin-left: 10em;margin-bottom: -0.4em;'><br><br><br>0 result(s) found for " . $search . "</h2><br />";
}
//-create while loop and loop through result set
while($row=mysqli_fetch_assoc($result)){
$id=$row['id'];
$date=$row['date'];
$client_name=$row['client_name'];
$client_number=$row['client_number'];
$date_completed=$row['date_completed'];
$status=$row['status'];
echo "<form method='post' enctype='multipart/form-data' action=''>";
echo "<table border='0'>";
echo "<tr>\n";
echo "<td>Timestamp</td><td>Client Name</td><td>Client Number</td>Status</td><td>Date Completed & Returned</td><td>Upload Zip Files</td>\n";
echo "</tr>";
echo "<tr>\n";
echo "<td readonly class='date'>$date</td>\n";
echo "<td><input readonly type='text' id='client_name' name='client_name' value='$client_name'></td>\n";
echo "<td><input readonly type='text' id='client_number' name='client_number' value='$client_number'></td>\n";
echo "<td><select id='status' name='status' aria-invalid='false'>
<option value=''>Select an option</option>
<option value='Denied'>Denied</option>
<option value='Approved'>Approved</option>
</select></td>\n";
echo "<td><input type='date' id='date_completed' name='date_completed_returned' value='$date_completed'></td>\n";
echo "<td><input type='file' id='upload' name='upload'></td>";
echo "<td class='submit'><input type='hidden' id='hidden' name='hidden' value='$client_name'><input type='submit' id='save' name='save' value='Save'></td>\n";
echo "</tr>";
echo "</table>";
echo "</form>";
}
My jQuery code:
I am trying to make date_completed and upload fields required if user selects "Approved" under status field, and optional if he selects "Denied".
<script>
$('#status').on('change', function() {
if ( this.value == 'Approved')
$("#date_completed").prop('required',true)
}).trigger("change"); // notice this line
$('#status').on('change', function() {
if ( this.value == 'Approved')
$("#upload").prop('required',true)
}).trigger("change"); // notice this line
</script>

Thanks to KevinB I was able to find a solution to my problem.
I added class names for the input fields (status, date_completed, upload) I was trying to validate:
Updated code below:
echo "<form method='post' enctype='multipart/form-data' action=''>";
echo "<table border='0'>";
echo "<tr>\n";
echo "<td>Timestamp</td><td>Client Name</td><td>Client Number</td>Status</td><td>Date Completed & Returned</td><td>Upload Zip Files</td>\n";
echo "</tr>";
echo "<tr>\n";
echo "<td readonly class='date'>$date</td>\n";
echo "<td><input readonly type='text' id='client_name' name='client_name' value='$client_name'></td>\n";
echo "<td><input readonly type='text' id='client_number' name='client_number' value='$client_number'></td>\n";
echo "<td><select id='status' name='status' class='status' aria-invalid='false'>
<option value=''>Select an option</option>
<option value='Denied'>Denied</option>
<option value='Approved'>Approved</option>
</select></td>\n";
echo "<td><input type='date' id='date_completed' name='date_completed' class='date_completed' value='$date_completed'></td>\n";
echo "<td><input type='file' id='upload' name='upload' class='upload'></td>";
echo "<td class='submit'><input type='hidden' id='hidden' name='hidden' value='$client_name'><input type='submit' id='save' name='save' value='Save'></td>\n";
echo "</tr>";
echo "</table>";
echo "</form>";
<script>
$('.status').on('change', function() {
if ( this.value == 'Approved')
$('.date_completed').prop('required',true)
}).trigger("change"); // notice this line
$('.status').on('change', function() {
if ( this.value == 'Approved')
$('.upload').prop('required',true)
}).trigger("change"); // notice this line
</script>

Submit GET form and another POST form with one button

I'm trying to submit a POST and a GET form with one submit button. I tried using the following php code:
echo "<html>\n<head>\n<title>Params</title>";
echo "<script type='text/javascript'>";
echo "function submitForms(){
document.getElementById('form1').submit();
document.getElementById('form2').submit();
}";
echo "</script>";
echo "</head>";
echo "<body>";
echo "<form action='' method='get' id='form1'>";
echo "<label>First Name </label>";
echo "<input type='text' name='first'><br/>";
echo "<label>Last Name </label>";
echo "<input type='text' name='last'><br/>";
echo "<label>Age </label>";
echo "<input type='text' name='age'><br/>";
echo "<label>Telephone </label>";
echo "<input type='text' name='phone'><br />";
echo "</form>";
echo "<form action='' method='post' id='form2'>";
echo "<label>Username </label>";
echo "<input type='text' name='username'>";
echo "<label>Password </label>";
echo "<input type='password' name='password'>";
echo "</form>";
echo "<input type='submit' value='Send' onclick='submitForms();'>";
echo "</body></html>";
What I get is only the POST params, while the GET request is not loading at all.
How can I fix this?
Thanks in advance.

You should take only one form all fields in that and after getting all input data after submit you can do whatever you want to do..
The way you are doing this is not possible reason being when form is submitted control goes to server to handle http request. hence only one form can be submit at a time. You can't submit two forms at once.. try changing order of form submit and other form will start submitting..

You should use AJAX (jQuery). Something like this should do the trick:
//Onclick for any button you wish to submit the forms
$('#form2 input[name="submit"]').click(function(e) {
e.preventDefault();
var formOne = $("#form1"),
formTwo = $("#form2");
//Post first form
$.post( formOne.attr('action') , formOne.serialize(), function() {
alert('Form one posted!');
});
//Post second form
$.post( formTwo.attr('action') , formTwo.serialize(), function() {
alert('Form two posted!');
});
});
Not tested yet, but this should work. More information for the $.post method can be found here.

javascript: I want radio button action change according to the loop that fetch from database

My code is fetch data from database (suppose there are 4 records). Only first loop that effected when i changed radio button. Below is my code:
PHP CODE
while($row = mysql_fetch_array($sql)){
echo "<div class='loop'>";
echo "<p><input type='checkbox' name='content_type' value='1' /></p>";
echo "<p><input type='checkbox' name='content_type' value='2' /></p>";
echo "<p><input type='checkbox' name='content_type' value='3' /></p>";
//content_a
echo "<div id='content_a' style='display:none;'>";
echo "<textarea name='text' id='textarea0'><textarea>";
echo "</div>";
//content_b
echo "<div id='content_b' style='display:none;'>";
echo "<textarea name='text' id='textarea1'><textarea>";
echo "</div>";
//content_c
echo "<div id='content_c' style='display:none;'>";
echo "<textarea name='text' id='textarea2'><textarea>";
echo "</div>";
//button
echo "<div class='button'>";
echo "<a class="tweet1" href="#" onclick="return false;">Alert</a>";
echo "</div>";
echo "</div>";
}
Javascript
$('input[name=content_type]').bind('change', function(){
var n = $(this).val();
switch(n)
{
case '1':
$(this).parents('.loop').find('#content_a').show(1000);
$(this).parents('.loop').find('#content_b').hide(1000);
$(this).parents('.loop').find('#content_c').hide(1000);
break;
case '2':
$(this).parents('.loop').find('#content_b').show(1000);
$(this).parents('.loop').find('#content_a').hide(1000);
$(this).parents('.loop').find('#content_c').hide(1000);
break;
case '3':
$(this).parents('.loop').find('#content_c').show(1000);
$(this).parents('.loop').find('#content_a').hide(1000);
$(this).parents('.loop').find('#content_b').hide(1000);
break;
}
});
I want radio button action change according to the loop that fetch from database. My code above, only first loop that effected. How to solve this problem?

that is beacuse id should always be unique...here (in your code ) you have multiple elements with same id id='content_a' (since it is inside a loop) . change this to class and use class selector
try this
html
echo "<div class='content_a' style='display:none;'>";
//---^^^^^ here
jquery
$(this).parents('.loop').find('.content_a').show(1000);\
//-------^-----here
change likewise to all other id selector
and while parents('.loop') works.. i recommend to use closest() for better performance
$(this).closest('.loop').find('.content_a').show(1000);
and yes.. you can reduce your code to two lines if you chnage your html properly..
first change you content to match with the checkbox value..
echo "<div class='content_1' style='display:none;'>"; //here class='content_' + value of checkbox
.....
echo "<div class='content_2' style='display:none;'>";
... //so on
try this
$('input[name=content_type]').bind('change', function(){
var n = $(this).val();
$('div[class^="content_"]').hide(); //hide all div
$(this).closest('.loop').find('.content_' + n).show(1000); //so particular div
});