Please help with ajax

Archive
1

Use ajax to display the message on sending email from forms.

<div id="form-result"></div>
<script>
$(document).ready(function(){

    var form = $('#contact-home');
    form.submit(function(e) {
        // prevent form submission
        e.preventDefault();

        // submit the form via Ajax
        $.ajax({
            url: form.attr('action'),
            type: form.attr('method'),
            dataType: 'html',
            data: form.serialize(),
            success: function(result) {
                // Inject the result in the HTML
                $('#form-result').html(result);
	        $('#button').text("Sent!");
            } 
        });
    });
});
</script>

“#form-result” is displayed, everything is fine.
But the button text in form is not changed after sending. Tell me how please.

2

you sure your button has an id of button? like :

3

Of course all id are the same, but the value is not changed.

4

The button is not inside #form-result , right?

5

no

6

The button is located in the form

7

Does $("#button span").text("Sent!"); work? I found that in this SO answer.
A nice UX would be to disable the button, perhaps with $("#button").prop("disabled",true);
BTW I haven’t tested the above.

8

@bleutzinn Interesting, I didn’t know that jQuery rendered a span inside a button.
If it does not work, what happen if you run it with $(’#button’).text(“Sent!”); first?
I think we would need to see your html too.

9

Nothing happens, tried 10-15 methods. Maybe the order of rendering data on the page?

10

The usual form

<form name="contact-home" action="/home" method="POST" id="contact-home" class="form-home w-clearfix">
...some fields
    <div class="buttons">
      <button class="button-form-home button1 w-button" type="submit">
            Send
       </button>
    </div>
     <input type="hidden" id="form-nonce" name="form-nonce" value="d84128be02b5bbb201116de2f7cf2635">
</form>
<div id="form-result"></div>
<script>
$(document).ready(function(){

    var form = $('#contact-home');
    form.submit(function(e) {
        // prevent form submission
        e.preventDefault();

        // submit the form via Ajax
        $.ajax({ 
            url: form.attr('action'),
            type: form.attr('method'),
            dataType: 'html',
            data: form.serialize(),
            success: function(result) {
                // Inject the result in the HTML
                $('#form-result').html(result);
            }
        });
    });
});
</script>
---
11

Once the form has successfully been submitted do you still want or need a button in the user interface? I suppose not, so you can simply add a text message in a (new) div that says “Sent !” or something like that.

12

I’m not seeing the id in the button element.

13

well, that was my first response! your button does not have an id.
Replace with

<button class="button-form-home button1 w-button" id="button" type="submit">
            Send
       </button>
14

Aside: @paulmassendari, how were you able to edit your answer once it appeared on the forum?

15

There is a pencil appearing next to your name just after you posted.

16

I never noticed that. Testing now…

17

Block message sending works. But recently saw on the website a send button with a animation inside and a change of labels after posting. I think it is very modern and looks very cool.

18

@paulmassendari: Clever. I see it and thanks!
@Stanislav, cool if it works, yes :slight_smile:

19

Really no id… but it is defined!

        buttons:
            -
                type: submit
                id: button
                value: 'SEND'
                classes: 'button-form-home button1 w-button'
---
20

I don’t think you can set an id from the frontmatter for this field as id don’t work everywhere.
try adding a unique class instead or call one of these existing class.