Refresh contents of a .load ()

Question

Refresh contents of a .load ()

Navigation

#1 by (2 votes)

0

I wonder if it is possible to update the contents of a load. Example:

I have a form on the "submit_form.html"

<form action="submeter" method="post">
<input type="text" name="nome" value="" />
<input type="submit" value="Enviar" />
</form>

I load this form on another page ...

<div id="conteudoFixo">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vel neque eu magna vestibulum tincidunt. Duis a lobortis felis, id pulvinar nulla. Pellentesque fermentum sollicitudin nisl, at molestie felis pretium vel. Donec tellus mauris, imperdiet sed sagittis in, consectetur quis ex.
</div>
<div id="conteudoMuda">
<button id="botaoForm">Mostrar Form</button>
</div>

And I use jquery to load:

jQuery('#botaoForm').click(function(){ 
    jQuery('#conteudoMuda').load('/enviar_formulário.html');
});

The problem is that when I submit on form, it redirects me (action="submit") . I would like to send the data without being redirected.

Note: I can not use ajax to submit form.

Ajax code:

/* submeter form trocar nick */
jQuery('form[name="post"]').submit( function(){
    event.preventDefault();
    jQuery.ajax({
     dataType:'html',
        type     : 'POST',
        data     : ({username_edit: jQuery("#username_edit").val(), user_rank : jQuery("#rankusren").val(), signature : jQuery("#assinaturaa").val(), profile_field_10_5 : jQuery("#profile_field_10_5").val(), user_status : jQuery("#user_status_yes").val(), user_allowpm : jQuery("#user_allowpm_yes").val(), user_allowavatar : jQuery("#user_allowavatar_yes").val(), mode : jQuery("[name='mode']").val(), agreed : jQuery("[name='agreed']").val(), id : jQuery("#idusrpnl").val()}),
        success  : function( resultado ){
            alert('Nome trocado!');
        }
    });
});
/* fim do form trocar nick */

Video showing that the form is not submitted with ajax. But with ajax, it is usually submitted

link

html jquery

asked by anonymous 12.06.2017 / 21:53

1 answer

Failed to load script with angle (ng-view) Add values of two inputs and show in third

score 2 · Answer 1

In the security question GET and POST are the same, with only difference that GET exposes the data in the URL and POST not, among some other peculiarities of semantics and structure.

You could pass the information via GET and retrieve (how you will retrieve the data may depend on who will be on the other side) using query string:

jQuery('form[name="post"]').submit( function(){
    event.preventDefault();
    jQuery.ajax({
     dataType:'html',
        type     : 'GET',
        url: 'minharl.com' + $.param($(this).serializeArray()),
        success  : function( resultado ){
            alert('Nome trocado!');
        }
    });
});

$ .param represents an object to use in query string or ajax requests. The result will be something like:

minharl.com?a%5Bone%5D=1&a%5Btwo%5D=2&

Other sources

#