Jump to content

ben03

Members
  • Posts

    123
  • Joined

  • Last visited

  • Days Won

    1

ben03 last won the day on February 2

ben03 had the most liked content!

Contact Methods

  • Website URL
    www.designsbyben.co.uk
  • ICQ
    0

Profile Information

  • Interests
    Digital design

ben03's Achievements

Member

Member (2/7)

1

Reputation

  1. I humbly appologize, it was an error in my code that was preventing this from working - moderators: please feel free to remove 🫣
  2. Hi there, I am sure this is a fairly simple fix, but so far haven't solved it. I am trying to capture the submit of a form. The form is in the html. This is the Javascript: document.addEventListener('DOMContentLoaded', function() { const form = document.getElementById('form'); form.addEventListener('submit', function(e){ }); }); I would have thought using DOMContentLoaded would have meant form is not null, but always seems to return this. I have tried including the JS file in the <head> and at the end of the <body> but this dosen't make a difference. If I wrap the event listner in if(form != null) the event listner is never triggered because at the time of the page load it is null so ignores it. Is this because I am doing this locally and not in a server environment? I really don't want to use inline onlick attribute or document.addEventListener('click', function(e) { as realise this isn't great practice. Enlightenment would be greatly accepted. Thanks
  3. Don't worry sorted it: $competitions = []; array_push($competitions, [ 'promoOpening' => '05-09-2022' ]); array_push($competitions, [ 'promoOpening' => '25-09-2022' ]); function sortByDate($a, $b) { $a = date("Y-m-d", strtotime($a['promoOpening'])); $b = date("Y-m-d", strtotime($b['promoOpening'])); return ($a < $b) ? 1 : -1; } usort($competitions, 'sortByDate');
  4. This is how the array is being built - maybe its the way I'm trying to access the data and need to give each array item a name? $competitions = []; array_push($competitions, [ 'promoOpening' => '05/09/2022' ]); array_push($competitions, [ 'promoOpening' => '25/09/2022' ]); function sortByDate($x, $y) { return strtotime($x['promoOpening']) - strtotime($y['promoOpening']); } usort($competitions, 'sortByDate');
  5. Hi there, I have been going in circles with this one and at times getting some sort of sorting but not working correctly. I am trying to sort an array by a date that is set within, using strtotime: $array = [0 ['promoOpening' => '27/12/2022'] ,1 ['promoOpening' => '27/11/2022'] ] Then the sorting bit using usort: function sortByDate($x, $y) { return (strtotime($x['promoOpening']) < strtotime($y['promoOpening']) ? -1 : 1); } usort($array, 'sortByDate'); However I seem to get odd results. I think I am potentially missing a layer of logic here, help appreciated.
  6. Hi there, I am trying to get the browser to use a webp background image if supported, but the following css is showing as 'invalid property value' in chrome (Version 102.0.5005.61). I have tried several variations but no joy. Can you see what the problem is here? .className { background-image: url(img/bg-3.jpg); background-image: -webkit-image-set( url('img/bg-3.webp') type('image/webp'), url('img/bg-3.jpg') type('image/jpeg') ); background-image: image-set( url('img/bg-3.webp') type('image/webp'), url('img/bg-3.jpg') type('image/jpeg') ); } Thanks
  7. Thanks dsoneuk, I have rejiggled it slightly, and am printing formData to console. When this prints to the console, I am not sure where I should check as the object has so many levels? $('form').submit(function(e) { e.preventDefault(); var formData = new FormData(this); if($('#fileUpload').prop('files').length > 0) { file =$('#fileUpload').prop('files')[0]; formData.append("attachment", file); } console.log(formData); $.ajax({ type: "POST", url: '/_partial/contactForm.php', data: formData, success: function(response){ var jsonData = JSON.parse(response); if (jsonData.success == "1") { $('.notification').fadeIn(function(){ $(this).addClass("is-success"); $(this).text("Thank you for your interest. We will get back to you soon."); $(this).delay(5000).fadeOut(); }); } else { $('.notification').fadeIn(function(){ $(this).addClass("is-danger"); $(this).text("Something went wrong. Please try again later"); $(this).delay(5000).fadeOut(); }); } }, cache: false, processData: false, contentType: false, }); $(this).trigger("reset"); }); The contactForm.php sends the form data to email. This all arrives apart from the attachment. After a delayed response, this message shows in console: Uncaught SyntaxError: Unexpected token { in JSON at position 13 at JSON.parse (<anonymous>) at Object.success (contact.js:197) at c (jquery-3.5.1.min.js:2) at Object.fireWith [as resolveWith] (jquery-3.5.1.min.js:2) at l (jquery-3.5.1.min.js:2) at XMLHttpRequest.<anonymous> (jquery-3.5.1.min.js:2) This is caused by this {"success":0}{"success":1} which to me says maybe it is recognising one bit did send and one didn't?
  8. Hi all, I am having trouble with Ajax handling an attachment in a web form. I am quite new to this so have maybe missing something faily obvious to someone else: <form id="completeService" enctype="multipart/form-data" method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>"> <button class="button is-link" id="submit1">Send</button> $('#submit1').click(function(e) { e.preventDefault(); var form = $('#completeService')[0]; var data = new FormData(form); $.ajax({ type: "POST", enctype: 'multipart/form-data', url: '../../../_partial/contactForm.php', data: data, processData: false, contentType: false, success: function(response) { var jsonData = JSON.parse(response); if (jsonData.success == "1") { $('.notification').fadeIn(function(){ $(this).addClass("is-success"); $(this).text("Thank you for your interest. We will get back to you soon."); $(this).delay(5000).fadeOut(); }); } else { $('.notification').fadeIn(function(){ $(this).addClass("is-danger"); $(this).text("Something went wrong. Please try again later"); $(this).delay(5000).fadeOut(); }); } } }); }); If I include _partial/contactForm.php in the same page as the form and comment out the ajax it sends the attachment fine. The form also sends through ajax when no attachment is added. So am fairly sure the problem lies in the ajax handling the attachment. Help appreciated! Thanks
  9. ben03

    Form Tutorial Help

    ah ok, thanks Ingolme. Are there other security concerns with forms that should be addressed or does this technique generally cover most?
  10. ben03

    Form Tutorial Help

    Hi there, I was using the https://www.w3schools.com/php/php_form_validation.asp tutorial to create a form that strips out malicious tags etc via the following. However when I receive the form the tags seem to be intact. Is what I am doing wrong and how should I correct it if so? <form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>"> <?php $phone = $location = ""; if ($_SERVER["REQUEST_METHOD"] == "POST") { $phone = test_input($_POST["phone"]); $location = test_input($_POST["location"]); $toEmail = 'email@address.com'; $emailSubject = 'Callback request form'; $headers = ['From' => 'homepage', 'Reply-To' => 'noreply', 'Content-type' => 'text/html; charset=iso-8859-1']; $bodyParagraphs = ["Callback request number: {$phone}<br />", "Location: {$location}"]; $body = join(PHP_EOL, $bodyParagraphs); if (mail($toEmail, $emailSubject, $body, $headers)) { echo '<p>Thank you for your interest, we will respond as soon as possible.</p>'; } else { echo '<p>Something went wrong. Please try again later.</p>'; } } function test_input($data) { $data = trim($data); $data = stripslashes($data); $data = htmlspecialchars($data); return $data; } ?>
  11. Thanks Ingolme, images could well be the problem here. What would be better to use than DOMContentLoaded in this instance?
  12. Printing to the console shows the div and browser height as the same, despite some of the content of the div spilling out of view. It is almost like it is treating min-height as max-height. Are there possibly some compatibility issues with using 100vh and javascript getBoundingClientRect()?
  13. Hi there, I am trying to check whether a div overlaps the browser height using getBoundingClientRect().height and comparing it to window.innerHeight: css #container { min-height: 100vh } JS document.addEventListener("DOMContentLoaded", function() { let landingScreen = document.getElementById('container') let getHeight = window.innerHeight let landingHeight = landingScreen.getBoundingClientRect().height if (landingHeight <= getHeight) { do this } else { do that } } However this doesn't seem to always return accurate results. sometimes it considers the div to be the height of the window, even when content is clearly overlapping. Is there a more robust way of achieving this? Thanks
  14. Hi there, I am new to all this so please bear with me! I am hoping it is something obvious missing in the code. I am using 2 jquery date pickers in one page, and hoping so that when a date is selected in the first, it disables that selected date in the second calendar. Here's what I have: <form onSubmit="return UpdateDeliveryOptions()"> <input class="input" id="disableDate" value="Date to disable"> <input type="submit" class="button is-medium is-primary" value="Save"> </form> <div id="customerCalendar"></div> jQuery(function($) { let disabledDates = []; function UpdateDeliveryOptions() { dateValue = document.getElementById('disableDate').value disabledDates.push(dateValue) return false }; $("#disableDate").datepicker({ }); $("#customerCalendar").datetimepicker({ beforeShowDay: function(date) { let string = jQuery.datepicker.formatDate('yy-mm-dd', date); return [disabledDates.indexOf(string) == -1] }, timeFormat: 'HH' }); }); I have no backend to save to, so I read I needed to add 'return' the where the function was called, and 'return false' to the function to stop the page refreshing and losing everything. When I hit 'save' there is a flash of an error message in console, but is too quick to read what it says. All I can see is it isn't working. Does this sort of function need to convert the array to JSON to work? Or is there a way to make this work as it is? Help appreciated, thanks in advance.
  15. I have a load of data coming from the database, of which I have not control of. When it comes in I am putting it in an html table. I have set up a basic if statement: If it is a blank field, show 'NA'. If not, show the figures in an input that a user can edit. The trouble I am running into is if a user backspaces the characters in the input, it then of course beomes the static text 'NA', but I need it to remain an input! What can I do in this scenario to prevent this from happening? I am using Vue.js, below is what I am using: <div v-if="item.value === ''"> NA </div> <div v-else> <input class="input is-small" v-model="item.value"> </div>
×
×
  • Create New...