We Keep Coding

Cannot prevent POST form from executing PHP code and image processing

UPDATED
CONTEXT:
I have a form that is editing event data: event photo, title, description, etc. When the user opens the edit form, all of the data is in the form fields. The user can choose to edit the data and update, or not to.
PROBLEM:
If the user does not change the photo and presses 'submit', the photo disappears.
DESIRED RESULT:
I want the photo to be updated if the user chooses to change the photo, and I want the existing photo to remain if the user doesn't change the photo.
** UPDATE**
I previously thought this was a PHP isset() / empty() check but it's not. It's a javascript problem, which I'm not experienced with. I believe the submit button and submit id is causing the javascript to fire regardless of the php.
CODE of HTML image input form.
<div class="row">
<div class="col-md-12">
<div id="event_picture" style="width:350px"></div>
</div>
<div class="col-md-12" style="padding-top:30px;">
<strong>Select Image:</strong>
<br/>
<img width='100' src="images/<?php echo $e['event_picture'];?>" alt="">
<input type="file" id="upload" class="form">
<br/>
<input type="hidden" name="event_picture" id="event_picture_base64">
</div>
</div>
SUBMIT BUTTON
<input type="submit" name="submit" class="upload-result" value="Update Event" class="btn btn-primary btn-lg">
JAVASCRIPT
<script type="text/javascript">
$uploadCrop = $('#event_picture').croppie({
enableExif: true,
viewport: {
width: 300,
height: 300,
type: 'square'
},
boundary: {
width: 350,
height: 350
}
});
$('#upload').on('change', function () {
var reader = new FileReader();
reader.onload = function (e) {
$uploadCrop.croppie('bind', {
url: e.target.result
}).then(function(){
console.log('jQuery bind complete');
});
}
reader.readAsDataURL(this.files[0]);
});
$('.upload-result').on('click', function (ev) {
$uploadCrop.croppie('result', {
type: 'canvas',
size: 'viewport'
}).then(function (resp) {
document.getElementById("event_picture_base64").value = resp;
});
});
</script>
I think the problem is I need a conditional to prevent the javascript from firing when I press submit button. I'm searching online now, but I really don't know how to write that conditional.
Any help is appreciated.

Cannot load variable data into Summernote

I want summernote to display the content if it's exists when loading. But I am unable to load value of a variable into Summernote during it's initialization in codeview.
Here's the code:
$(document).ready(function() {
$('.summernote').on('summernote.init', function () {
$('.summernote').summernote('codeview.activate');
}).summernote({
height: 300,
placeholder: 'Paste content here...',
codemirror: {
theme: 'monokai'
}
}).summernote('code', '<?php echo isset($profiledata["Profile"])?$profiledata["Profile"]:"" ?>');
});
<form>
<div class="form-group">
<label for="summernote"><strong>Paste the HTML code here:</strong></label>
<textarea class="summernote" name="profile" id="profile"> </textarea>
</div>
<button type="submit" class="btn btn-success" id="submitButton">Submit</button>
</form>
I posted the solution that worked for me. However, I welcome any suggestions. Thanks,

You can get the existing content in Summernote by setting it between the textarea tags.
<form>
<div class="form-group">
<label for="summernote"><strong>Paste the HTML code here:</strong></label>
<textarea class="summernote" name="profile" id="profile"><?php echo
((isset($yourcontent)) ? '' . $yourcontent . '' : ''); ?></textarea>
</div>
<button type="submit" class="btn btn-success"
id="submitButton">Submit</button>
</form>

The content is not being displayed in codeview mode. So, I used a hack - Deactivated codeview and displayed the content and re-activated the codeview. Here is the solutions that worked for me. However, I welcome any suggestions. Thanks,
$(document).ready(function() {
$('.summernote').on('summernote.init', function () {
$('.summernote').summernote('codeview.activate');
});
$('#profile').summernote({
height: 300,
placeholder: 'Paste content here...',
codemirror: {
theme: 'monokai'
}
});
codeviewOn = $('#profile').summernote('codeview.isActivated');
if (codeviewOn) {
$('.summernote').summernote('codeview.deactivate');
$('#profile').summernote('code', '<?php echo json_encode($profiledata["Profile"]);?>');
$('.summernote').summernote('codeview.activate');
}
});

jqueryui dialog inside php while loop not opening as expected

i want to show jquery dialog on link click but when i click multiple dialog are opening instead of one.
i tried this but still not working.
if i use next() method then no dialog is opening as you can read in link above.
i think i should use data attribute but i don't know how to use it.
Here is my jqueryui dialog div content inside a php while loop:
while ($rows8 = $sql8->fetch_assoc()){
echo "<div id='view-reply'>
<span class='report_link'><a data-myid='$rows8[reply_id]' class='rp' href='javascript:void(0);'><img src='img/admin.png' alt='report to admin' title='report to admin'/></a></span>
<div style='display: none;' class='post_reply_report_win'>
<h4><span>Report to Admin</span><hr/></h4>
<form class='reportForm' method='post' action='report_process.php?uid=".urlencode(base64_encode($rows8['reply_by']))."&p=".urlencode(base64_encode($rows8['reply_to_post']))." '>
<p><span>Subject</span><br/>
<input type='text' name='reporttxt' maxlength='100' required autofocus /></p>
<p><span>Details</span><br/>
<textarea name='reportarea' maxlength='500' required ></textarea></p>
<p><input type='submit' name='reportsub' id='sub' value='Submit'/></p>
</form>
</div>
</div>
}
and i am displaying it like this:
$(document).ready(function(){
$(".post_reply_report_win").dialog({
modal : true,
draggable : false,
resizable : false,
autoOpen : false,
buttons: [
{
text: "Cancel",
click: function () {
$(this).dialog("close");
},
style: "outline: none;"
}
],
close : function(event, ui){
$(this).dialog("close");
}
});
$("#view-reply .report_link a").click(function() {
$(".post_reply_report_win").dialog("open");
return false;
});
});

Your click listener simple opens them all as they do all have the class!
$(".post_reply_report_win").dialog("open");
You need to have unique identifiers for opening the dialog. Assignment can be done by class.
So I would go like this:
Give this line <div style='display: none;' class='post_reply_report_win'> a unique id like so <div style='display: none;' class='post_reply_report_win' id='post_reply_report_dialog_<?echo $i;?>';
$i would start at 1 and $i++ at the end in your loop.
your listener should then use .closest() from jquery to find the closest .post_reply_report_win element and get the id from that.
that id is the one you pass to your .open call of the dialog.
$('#'+$(this).closest('.post_reply_report_win').attr('id')).dialog("open");

The id should be unique. id='view-reply' is inside while loop and it is repeating.
Try below code:
$(".report_link a").click(function() {
$(this).parent('.report_link').next('.post_reply_report_win').dialog("open");
return false;
});

i have solved it myself after a long research.
i am posting my solution here just to help others that are also searching for the solution :)
So here is the solution:
php:
while ($rows8 = $sql8->fetch_assoc()){
echo "<span class='post_reply_report_link'><a data-myid='$rows8[reply_id]' class='rp' href='javascript:void(0);'><img src='img/admin.png' alt='report to admin' title='report abuse'/></a></span>
<div class='post_reply_report_win_$rows8[reply_id]' id='post_reply_report_win' >
<h4><span>Report Abuse</span><hr/></h4>
<form class='post_reply_report_form' method='post' action='report_process.php?uid=".urlencode(base64_encode($rows8['reply_by']))."&p=".urlencode(base64_encode($rows8['reply_to_post']))." '>
<p><span>Subject</span><br/>
<input type='text' name='reporttxt' maxlength='100' required autofocus /></p>
<p><span>Details</span><br/>
<textarea name='reportarea' maxlength='500' required ></textarea></p>
<p><input type='submit' name='reportsub' id='sub' value='Submit'/></p>
</form>
</div>";
}
javascript:
$(document).ready(function(){
$(".post_reply_report_link a").click(function() {
var myID = $(this).attr("data-myid");
$(".post_reply_report_win_"+myID).dialog({
modal : true,
draggable : false,
resizable : false,
buttons: [
{
text: "Cancel",
click: function () {
$(this).dialog("close");
},
style: "outline: none;"
}
],
close : function(event, ui){
$(this).dialog("close");
}
});
});

How do I POST when a dropdown is selected then popup a jquery overlay filed with data from a sql database?

I'm trying to create a jquery overlay displaying results from a sql database. The results come from a select statement with php that was populated from the information received from an html select dropdown. Once the user has confirmed they've read, I want to update the database to reflect this and allow for the user to continue completing the original form.
I can't figure out how to submit the original form, then pop up the overlay, submit the form on the overlay, but keep the original page allowing it to be completed.
So this:
<form action="myformpage.php" method="post" id="myform">
<select id="username" onchange="this.form.submit()">
<option value='01'>User 1</option>
<option value='02'>User 2</option>
</select>
<select id="location">
<option value='north'>North</option>
<option value='south'>South</option>
</select>
<input id="subbut" type="submit" value="SUBMIT" style="display: none;" />
</form>
jquery:
<script type="text/javascript">
$(document).ready(function () {
$("#popup").overlay();
$("#confirm").click(function() {
$("#popup").overlay().close();
var dataString = 'confirmread=Y';
$.ajax({
type: "POST",
url: "read_message.php?",
data: dataString,
success: function() {
$('#location').show();
}
});
});
</script>
Oddly the submit button never works when style is set to none. (Side question: Is this because it was never visible to the browser at load?)

You'll want to do an ajax post and generate the popup (probably via jQuery UI) with a successful post:
html:
<select id="username">
<option value='01'>User 1</option>
<option value='02'>User 2</option>
</select>
jquery:
$("#username").change( function() {
$.post( "myformpage.php", {username: $(this).val()}, function( data ) {
// Create popup here
});
});
your "myformpage.php" can take care of the database stuff and return whatever you want in your popup.

You don't even have to check for it if you want to do it like this.
<?php
//your connection to db goes here
$message = "SELECT `message` FROM......";
$test="true"
?>
<script type="text/javascript">
function checkit()
{
alert("<?php $message; ?>");
}
</script>
<?php
2 options !!!
using a redirect
?>
<script>
window.location.href="your page.php";
</script>
using css to hide & show
$var="display:none;";
if($test=="true")
{
$var="";
}
?>
HTML
<div style="<?php echo $var; ?>" name="original form" >
your original form goes here
</div>

You need ajax for this, is easy with jQuery.
with jQuery you need to do something like this:
<script>
$(function(){
$("#username").change(function(){
$.post("myformpage.php",{ value : $(this).val(), function(data){
alert(data);
});
});
});
</script>
You can't style the default alert, you need to make your own dialog or use a library that can do that, like jQuery ui.
EDIT
Yes IE have problems when you submit a form from javascript without a submit button but i recommend you to dont use that way to submit because this will do a postback that you dont need.
Try something like this:
<script>
$(function(){
$("#username").change(function(){
$.post("retrievedata.php",{ username : $(this).val() },function(data){
$("#popup").html(data);
$("#popup").overlay();
});
});
$("#confirm").click(function() {
$("#popup").overlay().close();
var dataString = 'Y';
$.post("read_message.php",{confirmread:dataString},function(){
$('#location').show();
});
});
});
<script>

using a JS blur to bring focus to a div

Sorry I'm just getting into JS functions but we have a search box on our page and when the call is made (i think its using ajax) it populates the search data into the div. We used to use jquery live search.
Within the search query we have a number of link which have a class, this class relates to a jquery modal. The older version used to work using a blur function. I am trying to port the functionality over to the new search.
What we used to have...
The jquery search:
<form method="post" action="<? echo constructurl($platform_name,"https") ?>/process/feedbackcreateuser" enctype="multipart/form-data" class="form-right">
<input name="q" type="text" placeholder="Enter your idea or feedback ... " name="title..." style="width:100%; " value="<? echo $captchamessage ?>">
<div id="jquery-live-search" style="display:none;"></div>
<script src="<? echo $asset_url ?>/3rdparty/feedback/jquery.liveSearch.js"></script>
<script>
jQuery('input[name="q"]').liveSearch({url: '<? echo constructurl($platform_name,"https")?>/process/searchfeedbackuser/?c=<? echo $id ?>&q='});
</script>
</form>
The JS that made it work:
<script type="text/javascript"> <!-- this allows search results to have same js functions -->
$(document).ready(function() {
$("input[name='q']").blur(function() {
$("div#jquery-live-search [rel='clickover']").clickover({ html : true} );
$("div#jquery-live-search input, div#jquery-live-search textarea").placeholder();
$("div#jquery-live-search .dialog-iframe-card").dialog2IFrame( {
height:900,
closeOnOverlayClick: true,
closeOnEscape: true,
removeOnClose: true,
showCloseHandle: true,
});
$("div#jquery-live-search .dialog-iframe-report").dialog2IFrame( {
height:900,
closeOnOverlayClick: false,
closeOnEscape: true,
removeOnClose: true,
showCloseHandle: true,
});
});
});
</script>
What we have now ...
the JS search (not jQuery anymore)
<script type="text/javascript">
$(document).ready(function() {
$('#form form').submit(function(){
$('#content').load('<? echo constructurl($platform_name,"https")?>/process/searchfeedback/?c=<? echo $id ?>', { 'q': $('input[name="query"]').val()}).slideDown('500')
return false;
});
});
$(function(){
$('form').each(function () {
var thisform = $(this);
thisform.prepend(thisform.find('button.default').clone().css({
position: 'absolute',
left: '-999px',
top: '-999px',
height: 0,
width: 0
}));
});
});
</script>
<div id="form">
<form class="form">
<div class="input-group" style="margin-bottom:10px">
<input type="text" name="query" placeholder="Enter your idea or feedback ... " class="feedback-search validate[required] form-control search-main" >
<span class="input-group-btn">
<input type="submit" name="submit" value="Go!" class="btn btn-search">
</span>
</div>
</div></form>
<form method="post" action="<? echo constructurl($platform_name,"https") ?>/process/feedbackcreate" enctype="multipart/form-data" class="form" class="form-right">
</form>
<div id="content">
</div>
I have been trying something similar with no luck.
<script type="text/javascript"> <!-- this allows search results to have same js functions -->
$(document).ready(function() {
$("#form").blur(function() {
$("div#content [rel='clickover']").clickover({ html : true} );
$("div#content input, div#jquery-live-search textarea").placeholder();
$("div#content .dialog-iframe-card").dialog2IFrame( {
height:900,
closeOnOverlayClick: true,
closeOnEscape: true,
removeOnClose: true,
showCloseHandle: true,
});
$("div#content .dialog-iframe-report").dialog2IFrame( {
height:900,
closeOnOverlayClick: false,
closeOnEscape: true,
removeOnClose: true,
showCloseHandle: true,
});
});
});
</script>

You HTML has problems:
It doesn't appear that you have closed out your <form class="form"> tag at all before beginning a new one. So you have nested forms and that can't happen, so you should fix that first, since $('form').each(function () { isn't gonna do anything for you most likely. Not entirely sure why you would prepend a cloned button into the form with a width=0 and height=0 and no where on the page. Kinda seems awkward doing that. Why not use the same button to begin with? Why make a clone of it?
Also, you haven't added a semi-colon at the end of this line here:
$('#content').load('<? echo constructurl($platform_name,"https")?>/process/searchfeedback/?c=<? echo $id ?>', { 'q': $('input[name="query"]').val()}).slideDown('500')
which will give a syntax error.
You should turn javascript error reporting on in your browser to be able to see all of your jQuery/javascript errors and correct these errors one by one. After you do that, it might even fix itself.
Also, be sure to load jQuery, since you are still using it in your coding... Here's a good CDN for jQuery to use:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

I couldn't figure this one out so I just popped the working JS call into the dynamic content's page, and it worked!