用户尝试提交指定表单时如何更改表单参数

Question

Is there any way to change form parameters when user trying to submit the specified form?

Suppose that I have the following form:

<form id="myform" method="port" action="/form.php">
  <input type="file" name="image1">
  <input type="submit">
</form>

So when the user clicks a submit button it makes a POST request to the /form.php that contains image1 parameter. I want to change this parameter to completely different base64-encoded image programmatically.

Is it possible?

Answer 1

You can edit the values in jQuery's $('form').submit() event, as described in this answer: https://stackoverflow.com/a/1547963/5742681

You can replace the form values with anything you want, by creating a new data object and POST ing that instead of the original form values.

If you don't want to use jQuery's . post() for some reason, you can also change the input values in $('form').submit() and return true, the standard submit event will happen after jQuery's.

Answer 2

Add ID to your file input and a hidden input field so html looks like:

<form id="myform" method="post" action="/form.php">
  <input id="changeme" type="file" name="image1">
  <input id="hidden" type="hidden" name="base64img" value="">
  <input type="submit">
</form>

In jQuery you would take some actions on form submit like:

var frm = $('#myform');
frm.submit(function (ev) {
   frm.find('input#hidden').attr('value', 'data:image/png;base64,alotoftext');
   frm.find('input#changeme').remove();
});

EDIT:

If you dont have access to server, add elemt with jQuery like:

$('<input>').attr({
    type: 'hidden',
    id: 'hidden',
    name: 'base64img',
    value: ''
}).appendTo('#myform');