0

Is it possible to create an HTML form with no input selectors in page and create these "input" objects via javascript and then submit it? How can I create these "items"? Or do I have to always create any "item" to submit previously in the HTML code?

So, can I avoid to create annoying hidden inputs in order to send javascript variables? I am not really able to find any tutorial or examples about it...

Thank you very much for your help.

davigueras
  • 135
  • 1
  • 2
  • 8
  • 1
    I think you mean something like this? http://stackoverflow.com/questions/1414713/creating-form-in-javascript-without-html-form – Jake Oct 18 '13 at 22:06
  • Yes, you can as @Jake pointed out. Why do you have to send javascript variables in the first place? Tell more about it to see if we can help in some different way (proposing other methods). – Francisco Presencia Oct 18 '13 at 22:07
  • If you can summarize what you're trying to do a better solution can be offered. – Dissident Rage Oct 18 '13 at 22:53

2 Answers2

0

like this, using jquery

$('<form>', {
    "id": "getInvoiceImage",
    "html": '<input type="text" id="componentInvoicId" name="componentInvoicId" value="' + componentInvoiceId + '" />',
    "action": window.siteRoot + 'ComponentInvoice/GetInvoiceImage/'
}).appendTo(document.body).submit();

the MUCH better way:

$.post(url, { value1: "foo", value2: "bar" } );

and if you insist on doing it with a form, here's the generalized function so you can just pass it the json data

var postRequest = function (uri, data) {

    data = data || {};

    var form = $('<form method="post" class="js:hidden">').attr('action', uri);

    $.each(data, function(name, value) {
        var input = $('<input type="hidden">')
            .attr('name', name)
            .attr('value', value);
        form.append(input);
    });

    $('body').append(form);
    form.submit();
};
AwokeKnowing
  • 7,728
  • 9
  • 36
  • 47
  • 1
    Why append at all? Why even create elements? – mplungjan Oct 18 '13 at 22:07
  • well you can do ajax, but sometimes you actually want to go to the other page. And it assures nothing else happens. I personally never use them. – AwokeKnowing Oct 18 '13 at 22:09
  • I see now how Ajax and jQuery can help, I like your second option $.post because it fits my idea to avoid unnecessary stuff in the HTML, but it does not redirect the page as I would prefer. Anyway I have now a better understanding to keep learning about it. Thank you to all of you. – davigueras Oct 18 '13 at 23:53
0

Yes, this can be done, even completely without using a <form>.

Check out jQuery as a starter (http://api.jquery.com). For example, if you want to know the clients device width, you could add this code:

$(document).ready(function() {
    $.ajax( {
        url: http://yourdomain.com/yourscript.php,
        dataType: 'json',
        type: 'POST',
        data: {
            w: $(window).width,
            h: $(window).height
        }
    });
});

This would submit the parameters w and h to your application, containing window width and height. Just as an example.

ErnestV
  • 117
  • 1
  • 6