Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can an <object> tag affect form submission

Tags:

html

forms

Please provide an example of how to use the object tag in an HTML form.

I was reading the HTML5 spec today to learn what kind of form elements exist nowadays, and noticed the following:

Submittable elements

Denotes elements that can be used for constructing the form data set when a form element is submitted: button, input, keygen, object, select, textarea http://www.w3.org/html/wg/drafts/html/master/forms.html#category-submit

So apparently a form can have an object tag in it, affecting the data that is sent on form submission. The only context in which I was familiar with the object tag is to embed Flash movies onto a page. What would be an example situation where you could use the object tag in a form and have it affect the form submission data?

Update:

In the spec on how form payload is constructed on submit, found this interesting snippet in http://www.w3.org/html/wg/drafts/html/master/forms.html#constructing-form-data-set

If the field element is an object element: try to obtain a form submission value from the plugin, and if that is successful, append an entry to the form data set with name as the name, the returned form submission value as the value, and the string "object" as the type.

But I wonder what kind of plugins hand out such submission values.

Update:

QtBrowserPlugin seems to support using them in forms. Now all I need for an example is a minimalistic such plugin.

http://doc.qt.digia.com/solutions/4/qtbrowserplugin/developingplugins.html#using-plugins-in-forms

like image 723
Bemmu Avatar asked Oct 04 '13 08:10

Bemmu


1 Answers

At first I suggest to use the latest HTML5 documentation at http://www.w3.org/html/wg/drafts/html/CR/forms.html#constructing-form-data-set and not the HTML5.1 one.

I fear there's no browser that currently implement this behavior. In any case, if you want to mimic what the specification says to do, you can use a script like this:

<!DOCTYPE html>
<html>
<body>
<form method="post" action="index.html" id="myForm">
    <input type="text" id="myFieldID" name="myFieldName" value="Hello World!" />
    <object type="myPluginMIMETYPE" id="myPluginID" name="myPluginName" ></object>
    <button type="submit">Submit</button>
</form>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script>
$( document ).ready(function() {
    $( myForm ).on( "submit", function( event ) {
        //Ask the plugin for some data, i.e. a flash object
        var pluginData = "pluginImportantData"; // ideally something like $(myPluginID).giveMeSomeDataBecauseUserWantsToSubmit();
        //Append the data before submission, giving to the input tag the right attributes
        $(this).append('<input type="object" name="myPluginName" value="'+ pluginData +'" style="visibility:hidden"/>');
        return true;
    });
});
</script>
</body>
</html>
like image 115
Giuseppe Bertone Avatar answered Oct 27 '22 06:10

Giuseppe Bertone