Ajax javascript display message under button

Question

I change ths page because I found the solution, I hope it can help some people.

This is the form to include in your web page update in function your code :

<div class="footerTemplateBox footerTemplateInformation">
  <div><br /><h2><?php echo OSCOM::getDef('module_footer_multi_template_mailchimp_text'); ?></h2></div>
  <div class="row">
  <?php echo HTML::form('mailchimp', OSCOM::link('index.php'), 'get', 'id="signupft"'); ?>
    <div class="col-md-12"><?php echo HTML::inputField('email', '', 'required  id="emailft" placeholder="' . OSCOM::getDef('entry_email_address') . '"', 'email') . HTML::hiddenField('anonymous', 'anonymous'); ?></div>
    <div class="col-md-12"><?php echo HTML::button(OSCOM::getDef('module_footer_multi_template_mailchimp_submit'), 'fa fa-send', null, 'info', ['params' => 'id="SendButton"']); ?></div>
  </form>
  </div>
  <div class="messageft" id="message"></div>
</div>

The script with code Becarefull, you must use jquery v3.0 : Inserted debug element if you have a problem

    $(document).ready(function() {
      $(\'#signupft\').submit(function() {
        $("#messageft").html("<div class=\"alert alert-info\" style=\"padding:5px; margin-top:5px;\" role=\"alert\">' . MODULES_HEADER_TAGS_MAILCHIMP_SUBMIT_MESSAGE . '</div>");
        $.ajax({
          url: \'ext/api/mailchimp_v3/subscribe.php\', // proper url to your "store-address.php" file
          type: \'POST\', // <- IMPORTANT

          data: $(\'#signupft\').serialize() + \'&ajax=true\',
          success: function(msg) {
    /*alert(msg);*/
          msg = msg.replace(/string\([0-9]*\) "/, \'\');
    /*alert(msg);*/
          msg = msg.replace(\'}"\', \'}\');
    /*alert(msg);*/
          var message = JSON.parse(msg);
            resultmessage = \'\';
            if (message.status === \'' . MODULES_HEADER_TAGS_MAILCHIMP_STATUS_CHOICE . '\') { // success
              resultmessage = \'<div class="alert alert-success alert-dismissible" role="alert"><button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>' . MODULES_HEADER_TAGS_MAILCHIMP_SUCCESS_MESSAGE . '</div>\'; // display the message
            } else if (message.status === 400) { // error e-mail exists
              resultmessage = \'<div class="alert alert-warning alert-dismissible" role="alert"><button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>' . MODULES_HEADER_TAGS_MAILCHIMP_ERROR_EXISTS_MESSAGE . '</div>\'; // display the message
            } else { // undefined error
              resultmessage = \'<div class="alert alert-danger alert-dismissible" role="alert"><button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>' . MODULES_HEADER_TAGS_MAILCHIMP_ERROR_MESSAGE . '</div>\'; // display the message
            }
            $(\'#messageft\').html(resultmessage); // display the message
            $(\'#fnameft\').val(""); // reset input field
            $(\'#lnameft\').val(""); // reset input field
            $(\'#emailft\').val(""); // reset input field
          }
        });
        return false;
      });
    });

files called by the ajax script

  include('ext/api/mailchimp_v3/MailChimp.php');

  $key = MODULES_HEADER_TAGS_MAILCHIMP_API;

  if ( isset($_POST['anonymous'])) {
    $list_id = MODULES_HEADER_TAGS_MAILCHIMP_LIST_ANONYMOUS;
    $merge_vars = [
                    'FNAME' => '',
                    'LNAME' => ''
                  ];

  } else {
    $list_id = MODULES_HEADER_TAGS_MAILCHIMP_LIST_CUSTOMERS;

    $merge_vars = [
                    'FNAME' => $_POST['firstname'],
                    'LNAME' => $_POST['lastname']
                  ];
  }

  $array = [
              'email_address' => $_POST['email'],
              'merge_fields'  => $merge_vars,
              'status'        => MODULES_HEADER_TAGS_MAILCHIMP_STATUS_CHOICE
            ];


  if (MODULES_HEADER_TAGS_MAILCHIMP_STATUS_CHOICE == 'pending') {
    $status = 'pending';
  } else {
    $status = 'subscribed';
  }

  $mc = new \MailChimp($key);

// add the email to your list
  $result = $mc->post('/lists/' . $list_id . '/members', $array);

//send
  $result = json_encode($result);

// If being called via ajax, run the function, else fail - console
  if ( MODULES_HEADER_TAGS_MAILCHIMP_DEBUG == 'True') {
    if ($_POST['ajax']) {
      var_dump($result); // send the response back
    } else {
      var_dump('Method not allowed - please ensure JavaScript is enabled in this browser');
    }
  } else {
    echo $result;
  }

do you see the new element created in DOM tree, in inspect element? It could be a css problem not a js one — sTx
– sTx, Commented Dec 15, 2016 at 11:02
no console error, yes I saw all elements after the creation. Impossible to see the message with this line : $('#message').html('member exists already'); — Yoko
– Yoko, Commented Dec 15, 2016 at 11:05

Mayank Pandeyz · Accepted Answer · 2016-12-15 10:45:46Z

1

Change this line:

console.log('member exists already')

to

$('#message').html('member exists already');

answered Dec 15, 2016 at 10:45

Mayank Pandeyz

26.3k4 gold badges43 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Yoko Over a year ago

Tk but does'n work, nothing appear : don't understand. $("#message").html("member exists already"); or $('#message').html('member exists already');

madalinivascu · Accepted Answer · 2016-12-15 10:49:18Z

0

Select the message relative to your form if you have multiple forms

form.find(".message").html('<div class="alert alert-info" style="padding:5px; margin-top:5px;" role="alert">member exists already</div>');

don't forget to create the form variable before the ajax var form = $(this)

answered Dec 15, 2016 at 10:49

madalinivascu

32.4k4 gold badges42 silver badges59 bronze badges

1 Comment

madalinivascu Over a year ago

is you ajax successful?,are you sure your on the right if statement ?

Collectives™ on Stack Overflow

Ajax javascript display message under button

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related