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.

window.location.href not changing popup on enter button in chrome extension

I have below frontend for the default popup of my chrome extension.
<form class="first-time-flow__form fullwidth">
<h1 class="textaligncenter">Welcome</h1>
<div class="first-time-flow__textarea-wrapper">
<label>Password (min 8 chars)</label>
<input type="password" class="first-time-flow__input passwordinput" id="newpassword" />
</div>
<button type="button" class="btn btn-primary loginpassword savePKbutton" id="btnlogin" disabled>Login</button>
</form>
I want that after the password is entered when the user will hit the enter key the submit button should be fired and the popup should be changed. I tried the following:
$(document).ready(function() {
$("#newpassword").keypress(function(event) {
if(e.keyCode==13){
$('#btnlogin').click();
}
});
$('#btnlogin').on('click',function(){
var password = $('#newpassword').val().trim();
if(password.length >= 8){
localStorage.password = password;
chrome.browserAction.setPopup({
popup:"login.html"
});
window.location.href = 'login.html';
}
});
});
This functionality works fine in the background without any error, the popup is also set to login.html but frontend is not getting changed. When I close and open chrome extension, the set popup login.html is shown. As the normal functionality works fine if user clicks submit button manually.

Featherlight hide div on Close

I'm trying to create a preview screen with data submitted, and display it in Featherlight Lightbox.
I have the following sample codes.
jQuery(document).ready(function() {
//Triggle when Preview Button is Clicked.
jQuery('.OpenLightBox').off('click').on('click', function( e ) {
var pa_firstname= jQuery('input[name="pa-[name_first]"]').val();
var pa_lastname= jQuery('input[name="pa-[name_last]"]').val();
if (pa_firstname == null || pa_firstname == '') {
alert('Cannot be empty');
return false;
} else {
jQuery('.LightBox').empty();
jQuery('.LightBox').append('First Name in Ajax is' + pa_firstname + ' And Last Name in Ajax is ' + pa_lastname);
//alert('done');
}
jQuery.ajax({
url : padvisor_ajax.ajax_url,
type : 'POST',
dataType: 'json',
data : {
action: 'padvisor_test_ajaxcall_lightbox',
pa_first_name: pa_firstname,
pa_last_name: pa_lastname
},
success: function (data) {
jQuery.featherlight(jQuery('.LightBox'), {});
jQuery('.LightBox').toggle();
}
});
return false;
});
And then I have the following html codes to create 2 fields, a submit button and a preview button:
<form id="pd_test">
<span id="pa-[name_first]" class="pa_name_first"><label for="pa_name_first" >First Name</label>
<input type="text" name="pa-[name_first]" id="pa-[name_first]" value=""/>
</span>';
<span id="pa-[name_last]" class="pa_name_last"><label for="pa_name_last" >Last Name</label><input type="text" name="pa-[name_last]" id="pa-[name_last]" value=""/></span>
<button type="submit" value="Submit">Send Now</button>
<button value="preview" class="OpenLightBox">Preview</button></form>
<div class="LightBox" style="width: 300px; height: 60px; display:none;">This is the content, let the content dwell here</div>
I'm able to show to featherlight box with my DIV when i use .toggle, however I cannot make sense of how I can hide the <div> when i close the featherlight light box.
Can anyone guide me on how to hide the DIV when the featherlight box is close, and let me know whether this is the right way to do?
My Objective... to collect input from the form fields, send via ajax to php to process it, and on success, display in a preview light box where i can have a close button and a submit button. The close button can close it, but the submit button will have the same function as the form submit button.
Problem 1: I need to toggle Hide when the feather light closes.
Problem 2: When the featherlight lightbox closes now, and i click on the preview button again, the DIV only calls empty but it doesn't call the .append to put in the value.

You needed to pass the content properly to featherlight and also did not need to toggle the element since featherlight will do that on the close event.
HTML
<span id="pa-name_first" class="pa_name_first"><label for="pa_name_first" >First Name</label>
<input type="text" name="pa-name_first" id="pa-name_first" value=""/>
</span>
<span id="pa-name_last" class="pa_name_last"><label for="pa_name_last" >Last Name</label><input type="text" name="pa-name_last" id="pa-name_last" value=""/></span>
<button type="submit" value="Submit">Send Now</button>
<button type="button" class="OpenLightBox">Preview</button>
<div class="LightBox" style="width: 300px; height: 60px; display:none;">
<span id="content"></span>
</div>
jQuery
//Triggle when Preview Button is Clicked.
jQuery('.OpenLightBox').off('click').on('click', function( e ) {
var pa_firstname= jQuery('input[name="pa-name_first"]').val();
var pa_lastname= jQuery('input[name="pa-name_last"]').val();
if (pa_firstname == null || pa_firstname == '') {
alert('Cannot be empty');
return false;
} else {
var content = 'First Name in Ajax is' + pa_firstname + ' And Last Name in Ajax is ' + pa_lastname+'';
jQuery('#content').html("");
jQuery('#content').html(content);
jQuery.featherlight('#content', {});
}
});
Working JSFiddle: https://jsfiddle.net/rdawkins/9vktzw88/

Form losing value after mobiscroll selection

I have a form with two instances of mobiscroll one of which pops depending on the button clicked.
$(function(){
$('#clocklater').mobiscroll().time({
theme: 'default',
display: 'modal',
mode: 'scroller',
setText: "Save",
cancelText: "Cancel",
headerText: "Available after",
timeFormat: 'HHii',
timeWheels: 'HHii',
stepMinute:10
});
$('#later').click(function(){
$('#clocklater').mobiscroll('show');
$('[name=available]').val(2);
return false;
});
});
$(function(){
$('#clockyes').mobiscroll().time({
theme: 'default',
display: 'modal',
mode: 'scroller',
setText: "Save",
cancelText: "Cancel",
headerText: "ETA station",
timeFormat: 'ii',
timeWheels: 'ii',
stepMinute:5
});
$('#yes').click(function(){
$('#clockyes').mobiscroll('show');
$('input[name=available]').val(1);
return true;
});
});
my HTML is
<form name="response" action="" method="post" >
<input name="clocklater" id="clocklater" class="i-txt" type='hidden' onChange="document.response.submit();"/>
<input name="clockyes" id="clockyes" class="i-txt" type='hidden' onChange="document.response.submit();"/>
<div class='yes button'><input id='yes' name='available' type='button' alt="YES" value="yes" /></div>
<div class='no button'><input id='no' name='available' type='button' alt="NO" value="no" /></div>
<div class='later button'><input id='later' name='available' type='button' alt="later" value="later" /></div>
</form>
(aarrgghh can't get that to format nicely)
When I submit the form without calling mobiscroll it all works fine, however when I call mobiscroll after clicking the yes or later buttons the value of the available input isn't passed. Console is not generating any errors.
As you can see I have tried forcing the value depending on the click, that doesn't work either. If I put an alert in before the return the value is there - this is also indicates the js isn't breaking.
Any thoughts on why the value of available isn't there?
FWIW I am processing the form using PHP.
[UPDATE] I just dumped the POST array and the available key isn't even in it.

Button values are only submitted if the form is submitted by clicking the respective button.
In your case the form is submitted in the onChange event of the "clocklater" or "clockyes" inputs.
You can submit it via a hidden field, or instead of submitting in the change event, you can use button type="submit" and trigger a button click in the mobiscroll's onSelect.
E.g. (for the "clocklater"):
$(function(){
$('#clocklater').mobiscroll().time({
theme: 'default',
display: 'modal',
mode: 'scroller',
setText: "Save",
cancelText: "Cancel",
headerText: "Available after",
timeFormat: 'HHii',
timeWheels: 'HHii',
stepMinute:10,
onSelect: function () {
submit = true;
$('[name=available]').val(2);
$('#later').click();
}
});
var submit;
$('#later').click(function(){
if (!submit) {
$('#clocklater').mobiscroll('show');
return false;
}
submit = false;
});
});
HTML changes:
<input name="clocklater" id="clocklater" class="i-txt" type='hidden' />
<div class='later button'>
<input id='later' name='available' type='submit' alt="later" value="later" />
</div>

Closing Liferay dialog box programmatically

I have Liferay dialog box, I want to close this dialog box and wish to redirect my url to a page.
I am doing it this way.
<aui:column columnWidth="16" >
<%if(UserGroupRoleLocalServiceUtil.hasUserGroupRole(u.getUserId(), groupId, role.getRoleId())){ %>
<input value="delete" type="button" onclick="document.location.href='
<portlet:actionURL name="deleteUserRole"><portlet:param name="memberId" value="<%= memberIdStr %>"/>
<portlet:param name="organization" value="<%= Long.toString(organizationID) %>"/></portlet:actionURL>'" />
<%} %>
</aui:column>
public void deleteUserRole(ActionRequest actionRequest,ActionResponse actionResponse){
// process to delete user role
Role r = RoleLocalServiceUtil.getRole(org.getCompanyId(),
"Power User");
UserGroupRoleLocalServiceUtil.deleteUserGroupRoles(userID, groupId, new long[] { r.getRoleId() });
actionResponse.sendRedirect("/group/employee/empHome");
}
By using this way when I click on delete button this method gets call, perform process and it redirects to this url but withing popup window.
I want to redirect to given page in actionResponse.sendRedirect page but not in dialog box, it should not open in dailog box.
How can I close this dialog box first and then redirect my page to given url?
I am opening dialog box by calling this class on a link
Below is my js file
/test.js/
var myPopup;
AUI().ready( function() {
if (AUI().one('#testing-menu')) {
AUI().one('.extendClick').on(
'mouseenter',
function(event){
AUI().one('.navi-type').setStyles({'display': 'none'});
AUI().one('.extendClick').setStyles({'display': 'none'});
AUI().one('.collapseArrow').setStyles({'display': 'block'});
}
);
AUI().all('.employee-dialog').on(
'click',
function(event){
var url = event.currentTarget.get('href');
event.preventDefault();
//console.info(url);
window.myPopup= Liferay.Util.openWindow(
{
dialog: {
align: { points: ['tc', 'tc'] },
width: 960
},
title: 'Settings',
uri: url
}
);
}
);
}
});

Save the popup reference, and use that to close the popup later:
var myPopup;
AUI().all('.employee-dialog').on(
'click',
function(event){
[..]
myPopup = Liferay.Util.openWindow([...]);
}
);
Use the saved popup reference in onclick:
<input value="delete" type="button" onclick="myPopup.close();document.location.href='
[...]

Finally I am able to close this dialog box in this way.
<input value="delete" type="button" onclick="javascript:closePopUp;document.location.href='
<portlet:actionURL name="deleteUserRole"><portlet:param name="memberId" value="<%= memberIdStr %>"/>
<portlet:param name="organization" value="<%= Long.toString(organizationID) %>"/></portlet:actionURL>'" />
<script type="text/javascript">
function closePopUp(){
top.document.getElementById('closethick').click();
}
</script>