Develop Reference

Pass Value From URL Link To Form Field

I have a link in a table from results of an SQL query. Each row has a unique ID. I define this in my script as $id
What I am trying to do is have a link that opens up a form in a modal box where a user can insert a note about that row and save it. This then gets inserted into DB with ID, rowID, Note, Date
echo "<td class='agentid'>" . $id. "<br><a href='#notes' data-toggle='modal' data-row-id='".$id."'>Add Note</a></td>" ;
The modal:
<div class="modal" id="notes">
<div class="modal-dialog">
<div class="modal-content">
<form action="postnote.php" method="post">
<div class="modal-body">
<div class="modal-header">
<h4 class="modal-title">Add a Note</h4>
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
</div>
<p>Note will show when page is refreshed</p>
<label for="fname">Note: </label>
<input type="hidden" name="rowID" value=""/>
<input class="form-control" type="text" name="notes" value="<?php echo date('m/d/Y h:i'); ?> - "/>
<div class="modal-footer">
<button type="submit" value="Submit" class="btn btn-primary">Submit</button>
</div>
</form>
</div>
</form>
</div>
</div>
</div>
<script type="text/javascript">
$('#notes').on('show.bs.modal', function(e) {
var row = $(e.relatedTarget).data('row-id');
$(e.currentTarget).find('input[name="rowID"]').val(row);
});
</script>
my postnote.php
$pdoOptions = array(
PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
PDO::ATTR_EMULATE_PREPARES => false
);
$pdo = new PDO("mysql:host=" . MYSQL_HOST . ";dbname=" . MYSQL_DATABASE, MYSQL_USER,MYSQL_PASSWORD,$pdoOptions);
$data = [
'notes' => $_POST['notes'],
'id' => $_POST['rowID'],
];
$sql = "INSERT INTO act_recon_notes (note_id, note) Values(:id, :notes)";
$stmt= $pdo->prepare($sql);
$stmt->execute($data);
header('Location: ' . $_SERVER['HTTP_REFERER']);
I have this exact script on another page and it is working just fine. This does not post the $id into the form. So after submit it is a blank rowID value in the DB.

The issue was I had conflicting JS on the page. I removed the JS that was not needed for this page and the issue resolved.
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>

Bootstrap modal popup upon failed login

I have a login page (login.html) that calls a php with POST method to valid login credentials, which works just fine. If the email an password are incorrect, then in my current implementation, an alert pops up and the page reloads. I would like to know how to activate a modal instead of said popup.
<div id="myModal" class="modal fade">
<div class="modal-dialog modal-confirm">
<div class="modal-content">
<div class="modal-header">
<div class="icon-box">
<i class="material-icons"></i>
</div>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body text-center">
<h4>Ooops!</h4>
<p>Something went wrong. File was not uploaded.</p>
<button class="btn btn-success" data-dismiss="modal">Try Again</button>
</div>
</div>
</div>
</div>
Complete PHP File:
<?php
$email = $_POST['email'];
$pwd = $_POST['pwd'];
$conn = new mysqli('localhost','root','','rm');
if($conn->connect_error){
die('Connection Error: '.$conn->connect_error);
}
else{
$sql = "select * from superfan where email='".$email."' and password='".$pwd."' ";
$result = mysqli_query($conn,$sql);
$records = mysqli_num_rows($result);
$row = mysqli_fetch_array($result);
if ($records==0)
{
echo '<script type="text/javascript">';
echo '$(document).ready(function() {';
echo '$("#myModal").modal("show");';
echo '});';
echo '</script>';
}
else
{
header('location:index.html');
}
mysqli_close($conn);
}
?>

How to add class dynamically using javascript

I want to add an class to an closest element of an click object.
If you see code below, I would like to add an class to .process-signs-direction-cover-button
There is an loop, so the above classes get's repeated. But I want to add an classes to closest() .process-signs-direction-cover-button of where I click.
See picture
MY php:
<div class="col-md-6 reduced_padding_col7">
<?php
$signs_to_direction_and_cover_process = $mysqli_scs->query("SELECT * FROM agsigns_db3.stock_stk where idstc_stk = ".$row['idstc_stk']." AND directioncolor_stk = 'Yellow' ");
$row_cnt = $signs_to_direction_and_cover_process->num_rows;
if($row_cnt > 0){
while ($row = mysqli_fetch_assoc($signs_to_direction_and_cover_process)) { ?>
<div class="col-md-4 thumbnail"><img src="../../css/sign-directions/<?php echo $row['directionimage_stk']; ?>" class="processing-signs-direction-cover-sign-direction-selection-process" id="<?php echo $row['id_stk']; ?>" />
<div class="col-xs-12 text-center signs-text">
<span class="current_stock_figure">
<?php echo $row['stock_stk'] == "" ? "N/A" : $row['stock_stk']; ?>
</span>
<span class="max_stock_figure">
<?php echo $row['maxlevel_stk']; ?>
</span>
</div>
</div>
<?php
}
}
?>
</div>
<div class="col-md-2 process-button">
<img src="../../css/buttons/process-signs-covered-disabled.png" id="" class="process-signs-direction-cover-button disabled_button" rel="<?php echo $row['signcode_sgn']; ?>" alt="covered"/>
<div class="options-remember-checkbox">
<input type="checkbox" class="rememberoptions" name="rememberoption" value="checked" > Remember Options<br>
</div>
MY JQuery
$(".processing-signs-direction-cover-sign-direction-selection-process").click(function() {
$(this).closest("process-button.process-signs-direction-cover-button").toggleClass("process");
});
Modify
Question Modified
Image code

In your jquery part use addClass instead of toggleClass .
$(".processing-signs-direction-cover-sign-direction-selection-process").click(function() {
$(this).closest("process-button.process-signs-direction-cover-button").addClass("process");
});

Simple Ajax form submit!? (Can't understand)

I will try to explain my code simple. Basicly I got 2 different files:
fun.php
class.fun.php
I want to post my forms with ajax, so it won't refresh page.
In class.fun.php I have got reportForm for each post.
<!-- REPORT MODAL -->
<div class="modal fade report_post_<?php echo $post['id'];?>" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<b><center><div class="modal-header">Report Post</div></center></b>
<form class="horiziontal-form" id="reportForm" action="../Pages/fun.php?action=reportPostForm" method="post">
<center><textarea name="report" style="width:80%; height:200px; margin-top:20px; resize:vertical;" placeholder="Please describe your Report!"></textarea></center>
<input type="hidden" name="addedby" class="form-control col-md-7 col-xs-12" value="<?php echo $myRow['id']; ?>" />
<input type="hidden" name="image_id" class="form-control col-md-7 col-xs-12" value="<?php echo $post['id']; ?>" />
<div class="modal-footer"> <input type="submit" name="submit" value="Submit Form" /></div>
</div>
</div>
</form>
</div>
<!-- END OF REPORT MODAL -->
And after form I got ajax function:
<script>
$("#reportForm").submit(function(event){
event.preventDefault(); //prevent default action
var post_url = $(this).attr("action"); //get form action url
var request_method = $(this).attr("method"); //get form GET/POST method
var form_data = $(this).serialize(); //Encode form elements for submission
$.ajax({
url : post_url,
type: request_method,
data : form_data
}).done(function(response){ //
$("#server-results").html(response);
});
});
</script>
When I click button submit I want to send form data to fun.php
This is how I receive data in fun.php
if(isset($_POST['reportPostForm'])){
$image_id = strip_tags($_POST['image_id']);
$report = strip_tags($_POST['report']);
$addedby = strip_tags($_POST['addedby']);
$fun->reportPost($image_id,$report,$addedby);
}
And send them to other function in class.fun.php
But at this moment nothing happens. I have been looping trought many
tutorials and can't understand how to make this work. Im newbie in
javascript. I have got working upvote/downvotes scripts where I pass only post_id and it works.
I have got script for upvote that works:
$("#upvote_<?php echo $post['id'];?>").click(function(){
$.ajax(
{ url: "fun.php?upvote-btn=true?action=select&image_id=<?php echo $post['id'];?>",
type: "get",
success: function(result){
$('#upvote_<?php echo $post['id'];?>').load(document.URL + ' #upvote_<?php echo $post['id'];?>');
$('#downvote_<?php echo $post['id'];?>').load(document.URL + ' #downvote_<?php echo $post['id'];?>');
$('#comment_<?php echo $post['id'];?>').load(document.URL + ' #comment_<?php echo $post['id'];?>');
$('#share_<?php echo $post['id'];?>').load(document.URL + ' #share_<?php echo $post['id'];?>');
$('#report_<?php echo $post['id'];?>').load(document.URL + ' #report_<?php echo $post['id'];?>');
$('#report_btn_<?php echo $post['id'];?>').load(document.URL + ' #report_btn_<?php echo $post['id'];?>');
document.getElementById("result-box").innerHTML = result;
}
});
});

On fun.php you are checking for $_post['reportPostForm'] but this is not sent via post on this ajax call. your firm doesn't have this inputime and that's why nothing is happening. Try if(isset($_POST['report'])
Change this:
if(isset($_POST['report'])){
$image_id = strip_tags($_POST['image_id']);
$report = strip_tags($_POST['report']);
$addedby = strip_tags($_POST['addedby']);
$fun->reportPost($image_id,$report,$addedby);
echo "Done";
}
Also add the <div id='server-results'></div> to your form so that you can show the resutls.
<div class="modal-dialog modal-lg">
<div class="modal-content">
<b>
<center>
<div class="modal-header">Report Post</div>
</center>
</b>
<form class="horiziontal-form" id="reportForm" action="../Pages/fun.php?action=reportPostForm" method="post">
<center>
<textarea name="report" style="width:80%; height:200px; margin-top:20px; resize:vertical;" placeholder="Please describe your Report!"></textarea>
</center>
<input type="hidden" name="addedby" class="form-control col-md-7 col-xs-12" value="<?php echo $myRow['id']; ?>" />
<input type="hidden" name="image_id" class="form-control col-md-7 col-xs-12" value="<?php echo $post['id']; ?>" />
<div class="modal-footer">
<input type="submit" name="submit" value="Submit Form" />
</div>
</div>
</div>
<div id='server-results'></div>
</form>
</div>

It is not very clear what is not working.
The file is correct.
Only problem is in fun.php as you do:
if(isset($_POST['reportPostForm'])){
$image_id = strip_tags($_POST['image_id']);
$report = strip_tags($_POST['report']);
$addedby = strip_tags($_POST['addedby']);
$fun->reportPost($image_id,$report,$addedby);
}
But you are sending $_POST['addedby'], $_POST['image_id'] and $_POST['report'].
The one you are checking $_POST['reportPostForm'] do not exists.
Try to do the if against one of the three values you are passing.

How to submit data from a modal?

These buttons are echo out from the database,
When the user clicks onto the button, the user will get to see a pop out before submitting it.
This is my code,
$con = getDbConnect();
$day = date("l");
if (mysqli_connect_errno($con)) {
"Failed to connect to MySQL: " . mysqli_connect_error();
} else {
$result = mysqli_query($con, "SELECT * FROM timetableschedule WHERE day='" . $day . "'");
while ($schedule = mysqli_fetch_array($result)) {
?>
<div class="col-md-3">
<button class="btn btn-warning" data-toggle="modal" data-target="#myModal" schedule="
<?php
echo "<br/>";
echo $schedule['academicInstitution'] . "<br />";
echo $schedule['startTime'] . "-" . $schedule['endTime'] . "hrs<br />";
echo "<br/>";
?>">
<?php
echo "<br/>";
echo $schedule['academicInstitution'] . "<br />";
echo $schedule['startTime'] . "-" . $schedule['endTime'] . "hrs<br />";
echo "<br/>";
?>
</button>
</div>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Insert Today's Activity</h4>
</div>
<div class="modal-body">
<p class="activity"></p>
<p>Click on the submit button if the above infomation is correct.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<a class="btn btn-primary btn-ok">Submit</a>
</div>
</div>
</div>
</div>
<script>
$('#myModal').on('show.bs.modal', function(e) {
$(this).find('.btn-ok').attr('schedule', $(e.relatedTarget).attr('schedule'));
$('.activity').html('You have selected: <strong>' + $(this).find('.btn-ok').attr('schedule') + '</strong>');
});
</script>
<?php
}
mysqli_close($con);
}
?>
</div>
Once the user click onto the submit button, the "academicInstitution" and "duration" will be entered into a database called, "myRecord".But I do not know how to connect the submit button to the database.

If you need to stay on the same page, make an ajax post call to a server side php script: http://api.jquery.com/jquery.post/
This way you will be able to execute the query you want on the server
If you can accept to reload the page, you may simply use an html form
This question may be useful for you: jQuery Ajax POST example with PHP
Note that you don't necessarily need the form element if you choose the ajax post approach