0

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?

FrozenHeart
  • 19,844
  • 33
  • 126
  • 242
  • 1
    this would really help you [Image to base64](http://stackoverflow.com/questions/17710147/image-convert-to-base64) –  Mar 18 '16 at 09:38
  • @ksno I don't want to convert the user-provided image to its base64 analogue, I want to change the corresponding form parameter to completely different base64-encoded image – FrozenHeart Mar 18 '16 at 09:40
  • maybe [this](https://developer.mozilla.org/en/docs/Web/API/WindowBase64/Base64_encoding_and_decoding) would help – ArchLicher Mar 18 '16 at 09:52
  • @FrozenHeart [and this is an example how you would convert text (the value of `image1` parameter for e.g.) to image](http://stackoverflow.com/questions/15875638/how-to-convert-text-into-image-using-jquery), which can then be converted to base64-encoded image with example above `:)` –  Mar 18 '16 at 09:53
  • @ArchLicher No, it just tells how to make base64-encoding for image while I'm asking how to change form parameter programmatically – FrozenHeart Mar 18 '16 at 09:56
  • @ksno I'm asking how to change form parameter programmatically – FrozenHeart Mar 18 '16 at 10:00
  • Can explain furthermore what r u trying to achieve, please? – ArchLicher Mar 18 '16 at 10:03
  • what is parameter? name of input field or value of it? `$('form').find('input').attr('name', 'newName');` for name and `$('form').find('input').attr('value', 'newValue');` for value. Question seems unclear to me. –  Mar 18 '16 at 10:06
  • @ArchLicher Edited – FrozenHeart Mar 18 '16 at 10:12
  • @ksno Edited, see OP-post – FrozenHeart Mar 18 '16 at 10:12
  • Do you need to send an image or a base-64 string ? – PinkTurtle Mar 18 '16 at 10:14
  • @PinkTurtle I need to send an image encoded as a base64 string – FrozenHeart Mar 18 '16 at 10:15
  • Then you can just modify your `` attributes/values using JS ? Just give it an ID to ease the thing :) – PinkTurtle Mar 18 '16 at 10:16
  • @PinkTurtle I don't think so. `$('#image1').val('data:image/png;base64,alotoftext')` resulting in the following error -- "Uncaught InvalidStateError: Failed to set the 'value' property on 'HTMLInputElement': This input element accepts a filename, which may only be programmatically set to the empty string" – FrozenHeart Mar 18 '16 at 10:18
  • Did you try changing the input type instead ? `$.("#image1").type = "text";` then change it's value ? – PinkTurtle Mar 18 '16 at 10:21
  • @PinkTurtle Uncaught Error: type property can't be changed – FrozenHeart Mar 18 '16 at 10:23
  • Well then you're stuck with `file` typed input which can't be a string. Here is your answer :) – PinkTurtle Mar 18 '16 at 10:25

2 Answers2

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 POSTing 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.

Community
  • 1
  • 1
KWeiss
  • 2,954
  • 3
  • 21
  • 37
  • Yes, I know it but I wonder is there any way to change the values of **exisiting** submit action? I don't want to construct a POST request from scratch by myself. – FrozenHeart Mar 18 '16 at 10:21
  • This answer is correct. Although I would avoid overriding the form submit event for clarity reasons (it won't be clear from just the HTML that the form does something except a POST). I would add a general button linking onClick to a JavaScript function where I would implement base-64 encoding and a POST request. Just something to consider. – Alex Kirko Mar 18 '16 at 10:23
  • It seems that I can't just change the input values in case of `` tag. It gives me the following error -- "Uncaught InvalidStateError: Failed to set the 'value' property on 'HTMLInputElement': This input element accepts a filename, which may only be programmatically set to the empty string" – FrozenHeart Mar 18 '16 at 10:28
0

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');