jQuery add array of data to form before submit

Question

what I'm trying to achieve is to get existing form hidden fields, add another field which will contain an array, and then POST it to the server, but in the old fashion way. I mean that after the POST, the page should get the new HTML from the server as a normal form post will do.

I tried using $.post(), but this works like an AJAX request, the page is not reloaded from the server.

I thought I can dynamically add a hidden field, and right before submit populate its value with my array. But by doing so it might be truncated by the browser. The array sometimes can get very big, it's an array of fields with data from a CSV file. So i have no control over the length of the array. If user will process a 500 rows CSV, the array will probably have around 2000 key values.

So basically I'm looking for a solution like $.post() where i can populate the submit data by just passing my array, but with the real behaviour of a form. Page must be submitted and replaced entirely with server response. I found some "hacks" to replace the page with ajax response, but they are too hacky and don't work every browser.

The thing is what you are suggesting is an Ajax request. It doesn't get the new page from the server with the updated content. By doing this way i have to write in Javascript what happens with the response, which breaks the design of how the website is developed. All form submissions are made the old fashion way form.submit — SebaSbs, May 23 '21 at 18:35
I'm just trying to keep consistency in how forms are processed. The last thing I want is to use together ajax and normal submissions in the same procedure. The server side script is designed in responding with full page html after form submissions. Using ajax in this case will make me write an ajax handler to send back just relevant data, which will make the code worse. — SebaSbs, May 23 '21 at 18:40
So you don't want to use javascript and move to a new page after submitting the form. — dspillai, May 23 '21 at 18:41
I want to use javascript, but the script will have to add my array to the form, and get the new html from the server. The html is full page. If i'm using ajax I need to use some nasty solutions to replace current page html with the new one from the response. Doesn't work in every browser the same way. — SebaSbs, May 23 '21 at 18:43
Okay, here you can use 2 methods. After successfully submitted the form, remove all html elements from the body **$('body').remove()** , then attach your new HTML from the server. Or you can direct to a new page, then attach the HTML elements over there. — dspillai, May 23 '21 at 18:51

score 0 · Accepted Answer · answered May 23 '21 at 18:52

Not really sure what you are asking. Sound like maybe something like this ? Using PHP for backend, although the extradata here is an object.

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <meta name="generator" content="BBEdit 13.5" />
     <meta charset="utf-8" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body>
<form action="/process.php" method="post" class="form-example" name = "testform">
  <div class="form-example">
    <label for="name">Enter your name: </label>
    <input type="text" name="name" id="name" required>
  </div>
  <div class="form-example">
    <label for="email">Enter your email: </label>
    <input type="email" name="email" id="email" required>
  </div>
  <div class="form-example">
    <label for="hidden1">hidden1: </label>
    <input type="hidden" name="hidden1" id="hidden1" value = "hidden1" required>
  </div>
  <div class="form-example">
    <label for="hidden2">hidden2: </label>
    <input type="hidden" name="hidden2" id="hidden2" value = "hidden2" required>
  </div>
  <div class="form-example">
    <label for="hiddenarray">hiddenarray: </label>
    <input type="hidden" name="hiddenarray" id="hiddenarray" required>
  </div>
  <div class="form-example">
    <input type="submit" value="Subscribe!">
  </div>
</form>
<script>

var extradata = {
"name1":"value1",
"name2":"value2",
"name3":"value3"
};

$("[name=testform]").on("submit", function(e) {
    $("[name=hiddenarray]").val(JSON.stringify(extradata));
    alert("test");

});

</script>

</body>
</html>

process.php

<?php
$_POST['hiddenarray'] = json_decode($_POST['hiddenarray']);
echo json_encode($_POST);
?>

This is one of the solutions I thought of. But, how much data can go in there before getting truncated by the browser? — SebaSbs, May 23 '21 at 18:54
https://stackoverflow.com/questions/1752768/is-there-a-max-size-to-the-length-of-a-hidden-input-in-html — SScotti, May 23 '21 at 18:58
To prevent the page from reloading after the submit, you have to use **e.preventDefault()** — dspillai, May 23 '21 at 18:59
In the end, my implementation went this way. Inserting my object into hidden field value. Even if usually the data it's quite large (I monitored how my users are using the form), it seems it's not getting truncated during POST. They are successfully importing 300-500 lines long CSV with ~19 columns without troubles. — SebaSbs, Jun 26 '21 at 23:24

jQuery add array of data to form before submit

1 Answers1