Ajax javascript在按钮下显示消息

时间:2016-12-15 10:44:00

标签: javascript php jquery html css

我改变了页面,因为我找到了解决方案,我希望它可以帮助一些人。

这是在您的网页中包含更新功能代码的表单:

<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>

带代码的脚本 Becarefull,你必须使用jquery v3.0: 如果您遇到问题,请插入调试元素

    $(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;
      });
    });

ajax脚本调用的文件

  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;
  }

2 个答案:

答案 0 :(得分:1)

更改此行:

console.log('member exists already')

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

答案 1 :(得分:0)

如果您有多个表单,请选择与您的表单相关的消息

$scope.users.push(user);

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

之前创建表单变量