Success and error messages in Modal

JavaScript
1

I use a (Bootstrap) Modal for signing up to a newsletter. I use jQuery/Ajax to process the form. Now I am looking for a way to have the success and error messages appear in the modal instead of in the underlying page. Can someone point me to a good tutorial or give me some guidance in this.

Thank you in advance

Edit: For handeling the messaging I use http_response_code within PHP

2

In your success callback, just append/add the success message to the modal. The modal will already be present in the DOM when the callback returns, so you should be able to select it and manipulate it however you desire.

3

@James_Hibbard. What do you meaan with this? This would normally be the responce:

	http_response_code(200);
	echo "Great! You successfully subscribed to our newsletter. You can unsubscribe anytime if you not longer wish to receive our e-mail newsletters.";
4

Like this:

$.ajax({
  ..
})
.success(function() {
  $(modal).text("You were subscribed");
})

You need to do this in JS, not PHP.

5

Can I use a div within the modal to show the messages and add a class to it depending on the status (sucess or error)

6

Yup.

$.ajax({
  ..
})
.success(function() {
  $(modal).append("<div class='good'>You were subscribed</div>");
})
.fal(function() {
  $(modal).append("<div class='bad'>No newsletter for you!</div>");
});

Something like that ^

7

Last question. Normally I would send the message from PHP to a empty div and would use someting like:

.success(function(response) {
	$(formMessages).addClass('success');
	$(formMessages).removeClass('error');
	
	$(formMessages).html(response);
})

You are using .append. What should I adjust in your example to make it work the same way?

Thanks again

8

Your code should work just fine. Did you try it out?

9

But shouldn’t it be someting like

$(modal.formMessages)

Sorry for my ignorance. But in your examples you refer to $(modal) in my usual way there is no reference to Modal or whatsoever. I am a bit confused.

Edit: This is how I declare formMessages:

var formMessages 	= $('#form-messages');

Should that be something like:

var formMessages 	= $(modal'#form-messages');
10

Nah man, $(modal) is just psuedo-code. You would use whatever selector is correct in your case (so, $(formMessages), I guess)

1 Like
11

So I don’t need to declare that formMessages is within the modal?

12

Nope. You can do it from wherever.

1 Like
13

Ha great. Thank you so much Pullo

14

No worries. Glad you got it working :slight_smile:

1 Like
15

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.