Send HTML form without the Submit button

Question

It is possible to create a form HTML to automatically upload data from form? Ex: I have one form only with radiobutton and for aesthetic reason I do not want to put the send button, it would be possible to create this?

Answer 1

It is possible with Javascript. Quite simply:

<form name="formulario" action="form.php">
    Digite algo: <input type="text" name="campo">
    <a href="javascript: submitform()">Envie</a>
</form>
<script type="text/javascript">
    function submitform() {
        document.formulario.submit();
    }
</script>

It is also possible to use more advanced techniques such as AJAX and/or use libraries that help, such as jQuery.

But your additional comment indicates that you are using the very wrong tool for what you want.

See one of the ways by jQuery using .post():

$.post( "test.php", { name: "John", time: "2pm" })
  .done(function( data ) {
    alert( "Data Loaded: " + data );
  });

I put in the Github for future reference.

Answer 2

Send a form automatically needs javascript.
But there are ways to get around more or less efficient.

If the question is aesthetic it is worth remembering that a button can be easily changed to look like another. Even easier is changing a label of a button or input that allows you to do Submit without actually having to have the button/input visible.

Example: http://jsfiddle.net/b9wnw9c6/

Example code:

HTML

<form action="teste.php">
    <label for="enviar">Carregue aqui para enviar</label>
    <input type="submit" id="enviar" />
</form>

CSS

label {
    padding: 20px;
    background-color: #cff;
}
input[type=submit] {
    visibility: hidden;
}

Answer 3

I think that’s what I wanted, also I want something like

You need to listen to the event launched by your form and process your form before submitting it .

You can follow this example to perform this task :

$(function() {
$("form").submit(function(event) {
    event.preventDefault(); // prevent sending the form before we processed the form

    var active_input        =   $(".active")[0];        
    var active_input_value  =   active_input.val();

    $.ajax({
            url     :   "php_file_to_call.php"
        ,   method  :   "post"
        ,   data    :   { something : active_input_value }
    });
});

});

The call Ajax (which could have been a $ .post ()) is necessary as you cannot submit the actual form because it does not prevent un -active element to be sent.

iEnviar form in only 1 input

Answer 4

Javascript-enabled:

var form = new FormData();
form.append('post1', document.getElementById('radiobutton1').value);
form.append('post2', document.getElementById('radiobutton2').value);
form.append('postN', document.getElementById('radiobuttonN').value);
var request = new XMLHttpRequest();
request.open('post', 'arquivo.php');
request.send(form);