1

I am facing an issue while sending the data through the PHP script, in Index.php there is a form with some field values and a JavaScript script included in the Index.php which posts an image after I submit the form in Index.php with help of ajax, but Image is not posting/sending through ajax, only form field submission works.

If I call only Ajax during the time of form submission that is working or if I submit the form value all alone working, but if I call together the image is not working.

Index.php

<form enctype="multipart/form-data" method="post" action="saveRecord.php">

   <?php include ('imagecropinterface/index.html');  ?>

    <div>
        <input autocomplete="off" type="text" maxlength="90" placeholder="HeadLine" id="headline" name="headline" style="width:386px;">
    </div>
    <div class="mt-2">
        <input autocomplete="off" type="text" maxlength="90" name="subtitle" placeholder="Sub Title" style="width:386px;">
    </div>
    <div>
        <input id='jour' type='text' value="" class=''>
    </div>
    <div>
        <textarea name="fullText" placeholder="Synopsis" style="width:386px;"></textarea>
    </div>
    <input  class="btn btn-secondary" name="save" id="btnid" value="Save"  type="submit">
</form>

index.html

const downloadAllBtn = document.getElementById("btnid");
downloadAllBtn.addEventListener("click", downloadAll);
 function downloadAll() {
 $.ajax({
      type: "POST",
      url: "/ap-beta2/saveRecord.php",
      data: {
        data: imagesBase64,
      },
      cache: false,
      error: function (err, data) {
        console.log("There was an error. Try again please!" + data, err);
      },
      success: function (data) {
        console.log(data);
      },
    }); 
  }

saveRecord.php

if (isset($_POST['save']) && isset($_POST['data'])) {

    echo ($_POST[data]);
    echo ($_POST['headline']);
    echo ($_POST['subtitle']);
}

How can I submit the form so that form value and ajax call POST together to the PHP page?

As suggested by @ADyson I have updated Ajax script, unfortunately, no progress!!

In the form, I put the id saveform

<form enctype="multipart/form-data" id = "saveform" method="post" action="saveRecord.php">

  function downloadAll() { 
$("#saveform").click(function (e) {
  $.ajax({
    type: "POST",
    url: "https://abc.in/ap-beta2/saveRecord.php",
    data: {
      data: imagesBase64,
    },
    cache: false,
    error: function (err, data) {
      console.log("There was an error. Try again please!" + data, err);
    },
    success: function (data) {
      console.log(data);
    },
  });
  e.preventDefault();
});

}

Utsav Upadhyay
  • 415
  • 6
  • 21
  • Where does `imagesBase64` come from? Why is your $.ajax code not in a function? Why have you got `onclick="return checkBlanckVal()"` _and_ `downloadAllBtn.addEventListener`? What does the `checkBlanckVal()` functon do? Having two click listeners on the same button calling two separate functions sounds like a recipe for confusion – ADyson Nov 23 '22 at 15:10
  • @ADyson **imagesBase64** coming from a function which run after image upload, also typo mistake for `onclick="return checkBlanckVal()"` it just do validation for fields which I removed. `downloadAllBtn.addEventListener` is taking button id with help of `const downloadAllBtn = document.getElementById("btnid");` and call function `downloadAll()` like this `downloadAllBtn.addEventListener("click", downloadAll);` which is in updated code too! – Utsav Upadhyay Nov 23 '22 at 15:16
  • 1
    Thanks. The ajax won't run because your form is submitting as normal. If you want the AJAX to run you must prevent the default form submission so that the browser doesn't refresh your page before the JS had chance to execute. Then you need to write your AJAX to put all the fields from the form inside `data`, not just the image. See also https://stackoverflow.com/questions/20352799/ajax-form-submit-with-preventdefault (and many others) – ADyson Nov 23 '22 at 15:22
  • I only want to send Images `data` rest I need to send through form though, is there any way where both ajax and form post data together? – Utsav Upadhyay Nov 23 '22 at 15:24
  • 1
    Yes, I just described it. Send it all via AJAX - PHP will receive it all in one request then, as per your sample PHP code. – ADyson Nov 23 '22 at 15:27
  • @ADyson I have just updated the Ajax code as you suggested but no help, please check! – Utsav Upadhyay Nov 23 '22 at 15:36
  • You must get rid of the downloadAll function entirely - putting the "submit" event handler inside it makes no sense at all. Also `$("#saveform").click` is wrong...forms don't have a "click" event. It should be `$("#saveform").submit`. Don't conflate button click and form submit...and pay close attention to examples. – ADyson Nov 23 '22 at 15:40
  • Also you've only done half a job...like I said, you need to make it put the data from the form fields into the `data` option in $.ajax, so they get sent as well as the image data. – ADyson Nov 23 '22 at 15:40
  • I am bit confused, could you please share some snippet ? I tried at last this code - `$(function () { var frm = $("#saveform"); frm.submit(function (ev) { $.ajax({ type: frm.attr("method"), url: frm.attr("action"), data: { data: imagesBase64, }, cache: false, error: function (err, data) { console.log("There was an error. Try again please!" + data, err); }, success: function (data) { console.log(data); }, }); ev.preventDefault(); }); });` – Utsav Upadhyay Nov 23 '22 at 15:47
  • how should I send/pass php form data with ajax no clue!! – Utsav Upadhyay Nov 23 '22 at 15:48
  • 1
    You can put whatever you want in the data... e.g. `data: { data: imagesBase64, headline: $("#headline").val(), subtitle: $("#subtitle").val() }` should do the trick. – ADyson Nov 23 '22 at 15:53

0 Answers0