0

I created the form with JavaScript, but on submit the page reloads and rest of the codes doesn't run. Creating and submitting this form is for passing JavaScript value to PHP.

How can I submit this form without reloading the page?

var form1 = document.createElement("form");
var element1 = document.createElement("input"); 
var element2 = document.createElement("input"); 
form1.id="testForm" 

form1.method = "POST";
form1.action = "index.php";   

element1.value= amount;
element1.name="amount";
form1.appendChild(element1);  

element2.value=description;
element2.name="desc";
form1.appendChild(element2);

document.body.appendChild(form1);

I tried something like that, but still no success.

$("#testForm").on("submit", function (e) {
  e.preventDefault();
  $.ajax({
    type:"POST",
    url:"index.php",
    data:$("#testForm").serialize(),
    success: function(response){
      console.log(response);  
    }
  });
});
Azametzin
  • 5,223
  • 12
  • 28
  • 46
Nahid Mirzayev
  • 47
  • 1
  • 8
  • 1
    Search the web for `preventDefault` – brombeer Sep 12 '19 at 10:58
  • @kerbholz I have already tried, but couldn't manage. When I use preventDefault it is not submitting at all. But I need to submit the form but not reload the page. Maybe I make a mistake somewhere – Nahid Mirzayev Sep 12 '19 at 11:05
  • @kerbholz I edited my question and added what I tried. Could you please, take a look, and share with me where I made the mistake? – Nahid Mirzayev Sep 12 '19 at 11:16
  • Try putting `e.preventDefault();` at the very end. (just before the function completes) – Pankaj Sep 12 '19 at 11:26
  • Why was it not successful? Is there an error message? – Hagai Wild Sep 12 '19 at 11:32
  • @Pankaj tried, but still no success – Nahid Mirzayev Sep 12 '19 at 11:32
  • @HagaiWild, in the `index.php` file I use `$_POST['amount']` variable, when form submit and reload I get the value I want (but rest of the code doesn't work), but when I use preventDefault, it is not submitting and I cannot get value in PHP – Nahid Mirzayev Sep 12 '19 at 11:35
  • Try `return false` instead of `preventDefault()` – Ritesh Khandekar Sep 12 '19 at 11:47
  • @Rk003 I tried, the same result – Nahid Mirzayev Sep 12 '19 at 11:58
  • 1
    @NahidMirzayev - Check this [pen](https://codepen.io/n3rd/pen/WNeyNYo) . Let me know if it helps. – Pankaj Sep 12 '19 at 13:57
  • @Pankaj I tried your pen, thanks for your efforts. Unfortunately stil no success. The page is not reloading (good), console.log returns index.php file (good), but when I `var_dump($_POST)` in index.php the result is `array(0) { }` – Nahid Mirzayev Sep 13 '19 at 05:21
  • @NahidMirzayev - Are you able to capture the `$_POST` variable using postman/fiddler? – Pankaj Sep 13 '19 at 06:13
  • @Pankaj I tried Fiddle after your comment, and yes I see the values in the WebForms tab. Am I doing something wrong in the PHP site? I use `$amount= $_POST['amount'];` to pass $_POST value to the PHP variable and then use it in a formula. But if I do something wrong in PHP when I do ` ` why I get `array(0) { }` response?! – Nahid Mirzayev Sep 13 '19 at 07:30
  • @NahidMirzayev - I do not have much experience with php. Perhaps [this thread](https://stackoverflow.com/questions/9002424/php-post-not-working) might be useful for further debugging. – Pankaj Sep 13 '19 at 07:35
  • @Pankaj thank you very much for your valuable help. If it shows in Fiddle it means, JS code working. I should search for error on other site. – Nahid Mirzayev Sep 13 '19 at 09:01
  • Dear @Pankaj, I created another test form and got $_POST value as expected, Then I changed URL in our code to the new test.php file, still get value in Fiddle but not in test.php. It means $_POST is working, there is something wrong with javascript codes – Nahid Mirzayev Sep 13 '19 at 11:24
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/199434/discussion-between-pankaj-and-nahid-mirzayev). – Pankaj Sep 13 '19 at 13:08

0 Answers0