单击时更改引导按钮的状态

时间：2018-08-13 21:24:35

标签： html css twitter-bootstrap

我有一个通讯的注册表单，该表单已嵌套在模式框内。一切正常，但是用户体验确实很差。因此，我想添加以下功能。

当某人使用姓名和电子邮件注册并单击“注册我”时，我希望按钮变为红色并改为“关闭”。由于该表单来自mailchimp，因此我 无法将<input type="submit" value="Signup" name="subscribe" id="mc-embedded-subscribe" class="button btn btn-success"></input>更改为按钮。

是否可以这样做？

这里有signupform的有效演示。现在，注册后按钮变为红色，但我希望按钮改为关闭：

Mozilla.org 

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


</head>
<body>
<div class="mk row">
    <a href="#">
        <div class="col-sm-12 margin_bottom">
            <div class="hover11 column">
                <figure>
                    <a href="#" data-toggle="modal" data-target="#nyhedsbrev-tilmelding">
                      <img src="https://dohanews.co/wp-content/uploads/2016/07/headline.png" alt="Sign up for our newsletter" class="img-responsive"></img>
                    </a>
                </figure>
            </div>
            <div class="modal fade" id="nyhedsbrev-tilmelding" role="dialog">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-body">
                            <div id="mc_embed_signup">
                            

    <form action="https://zalis.us17.list-manage.com/subscribe/post?u=3be651219436ee0f217f040a5&amp;id=d07c036d2e" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
    <div id="mc_embed_signup_scroll">
	<h2>Subscribe to our mailing list</h2>
<div class="indicates-required"><span class="asterisk">*</span> indicates required</div>
<div class="mc-field-group">
	<label for="mce-EMAIL">Email Address  <span class="asterisk">*</span>
</label>
	<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
</div>
<div class="mc-field-group">
	<label for="mce-FNAME">First Name </label>
	<input type="text" value="" name="FNAME" class="" id="mce-FNAME">
</div>

	<div id="mce-responses" class="clear">
		<div class="response" id="mce-error-response" style="display:none"></div>
		<div class="response" id="mce-success-response" style="display:none"></div>
	</div>    <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
    <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_3be651219436ee0f217f040a5_d07c036d2e" tabindex="-1" value=""></div>
    <div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
    </div>
</form>
                            </div>
                        </div>
                        
                    </div>
                </div>
            </div>
            <div class="inner-wrapper bottom-left"></div>
        </div>
    </a>
</div>
</body>
</html>

3 个答案:

答案 0 :(得分：1)

您可以添加onclick属性来执行所需的人员：

 <input type="submit" value="Signup" name="subscribe" id="mc-embedded-subscribe" class="button btn btn-success" onclick="this.value='close'; this.style.backgroundColor='red';"></input>

或使用js选择器：

<script>


 let $input = document.getElementById('mc-embedded-subscribe')
  $input.addEventListener('click', function (){
    this.value= "close"
    this.backgroundColor= "red"
  })
</script>

答案 1 :(得分：0)

您可以在输入中添加另一个类吗？你到底是什么问题？我确定您已经知道该怎么做

const btn = document.querySelector('#mc-embedded-subscribe');

btn.addEventListener('click', () => {
   btn.style.background = 'red';
   btn.textContent = 'Close';
   btn.classList.add('closeBtn');
});

答案 2 :(得分：-1)

使用JQuery 

$('#mc-embedded-subscribe').click(function(){

      $('#mc-embedded-subscribe').val("close");
      $('#mc-embedded-subscribe').removeClass("btn-success");
      $('#mc-embedded-subscribe').addClass("btn-danger");

});
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


</head>
<body>
<div class="mk row">
    <a href="#">
        <div class="col-sm-12 margin_bottom">
            <div class="hover11 column">
                <figure>
                    <a href="#" data-toggle="modal" data-target="#nyhedsbrev-tilmelding">
                      <img src="https://dohanews.co/wp-content/uploads/2016/07/headline.png" alt="Sign up for our newsletter" class="img-responsive"></img>
                    </a>
                </figure>
            </div>
            <div class="modal fade" id="nyhedsbrev-tilmelding" role="dialog">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-body">
                            <div id="mc_embed_signup">
                                <form action="#" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" >
                                    <div id="mc_embed_signup_scroll">
                                        <h2>Signup for our newsletter</h2>
                                        <div class="mc-field-group">
                                            <label for="mce-FNAME">Name </label>
                                            <input type="text" value="" name="FNAME" class="" id="mce-FNAME"></input>
                                        </div>
                                        <div class="mc-field-group">
                                            <label for="mce-EMAIL">E-mail adress  <span class="asterisk">*</span></label>
                                            <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL"></input>
                                        </div>
                                        <div class="mc-field-group input-group" style="display:none;">
                                            <strong>Lande grupper</strong>
                                            <ul>
                                                <li>
                                                    <input type="checkbox" value="1" name="group[7][1]" id="mce-group[7]-7-0"></input>
                                                    <label for="mce-group[7]-7-0">DK</label>
                                                </li>
                                            </ul>
                                        </div>
                                        <div style="position: absolute; left: -5000px;" aria-hidden="true">
                                            <input type="text" name="b_c9e771e6f8adb066a0713eb0a_6e9f7d0e57" tabindex="-1"></input>
                                        </div>
                                        <div class="clear">
                                            <input type="submit" value="Signup" name="subscribe" id="mc-embedded-subscribe" class="button btn btn-success"></input>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                        
                    </div>
                </div>
            </div>
            <div class="inner-wrapper bottom-left"></div>
        </div>
    </a>
</div>
</body>
</html>

相关问题
最新问题