CODEWITHSUNDEEP
javascripthtml
bitconnect
bitconnect

Reputation: 17

open modal when condition is true- Javascript and bootstrap

I need a button that opens up a module in bootstrap when condition is true

User inputs his btc address and than i check if its a valid btc address- if it is valid an modal should open and display the user a receiving address.

When the user input =! a btc address the modal should stay closed.

The code for checking the Btc address works- all i need is to hook up the result to my button.

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>BItmixxer</title>
    <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<style media="screen">
  hr.style1{
	border-top: 1px solid #8c8b8b;
}

</style>
  </head>
  <body>
    <nav class="navbar navbar-expand-md bg-dark navbar-dark">
  <!-- Brand -->
  <a class="navbar-brand" href="#">Navbar</a>

  <!-- Toggler/collapsibe Button -->
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
    <span class="navbar-toggler-icon"></span>
  </button>

  <!-- Navbar links -->
  <div class="collapse navbar-collapse" id="collapsibleNavbar">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
    </ul>
  </div>
</nav>

<div class="jumbotron jumbotron-fluid" style="text-align:center" >
  <div class="container">
    <h1>Crypto BItmixxer</h1>
    <p>some more Text about rypto mixxer</p>
  </div>
</div>

<div class="container" style="text-align:center" >
  <h1>BTC MIxxer</h1>
  <p>Choose COins to mix:</p>  <button type="button" class="btn btn-outline-primary">Bitcoin</button>
  <button type="button" class="btn btn-outline-success">Ethereum</button>
  <br>
  <br>
  <br>
  <div class="form-group" id="elMessage" class="msg">
  <input type="text" class="form-control" id="inpAddress" value="">
</div>
<button type="button" class="btn btn-primary" id="btnValidate" data-toggle="modal" data-target="#myModal">Next</button>


<script>
  var normalize = (s) => {
  let x = String(s) || '';
  return x.replace(/^[\s\xa0]+|[\s\xa0]+$/g, '');
};

var check = (s) => {

  if (s.length < 26 || s.length > 35) {
    return false;
  }

  let re = /^[A-Z0-9]+$/i;
  if (!re.test(s)) {
    return false;
  }

  return true;
};


var getEl = (id) => {
  return document.getElementById(id) || null;
};

var elMessage = getEl('elMessage');
var inpAddress = getEl('inpAddress');
var btnValidate = getEl('btnValidate');
var lnkClear = getEl('lnkClear');

var setMessage = (txt = '', clss = 'msg') => {
  elMessage.className = clss;
  elMessage.innerHTML = txt;
};


var validate = (s) => {

  let className = 'msg fail';
  let textMessage = 'Invalid bitcoin address';

  if (!s) {
    textMessage = 'Please enter a valid address';
  }

  let re = check(s);
  if (re) {
    className = 'msg pass';
    textMessage = 'Bitcoin address is valid';
  }

  setMessage(textMessage, className);

  return re;
};

btnValidate.onclick = () => {
  let v = normalize(inpAddress.value);
  let result = validate(v);
  if (result) {
    inpAddress.value = v;
  }
};

lnkClear.onclick = () => {
  inpAddress.value = '';
  inpAddress.focus();
  setMessage('Enter any text and press "Validate"');
};

</script>
</div>

<!-- The Modal -->
<div class="modal" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">

      <!-- Modal Header -->
      <div class="modal-header">
        <h4 class="modal-title">Modal Heading</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>

      <!-- Modal body -->
      <div class="modal-body">
        <h3>Please send your BTC(min0.5) to</h3>
        <p id ="btc-house" style="color:blue;"></p>

  <script>
    var myArray = ['1QFsuDg4HyCJZFBfC2ivxHCK2CX2i9YvWN', ' 1EhfSjMuyAyrpRRGf5sSCU3YDbVAqjJNxH', '1N2e39vyTrk6HtvZPqWPrHfHKBzsnQNN4V','1GVSGZxwU69fN5oPprSxXRnjsZPvo8bGw3'];

    var rand = myArray[Math.floor(Math.random() * myArray.length)];

    document.getElementById("btc-house").innerHTML = rand;

  </script>
      </div>

      <!-- Modal footer -->
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
      </div>

    </div>
  </div>
</div>




  </body>
</html>

Upvotes: 0

Views: 337

Answers (1)

muka.gergely
muka.gergely

Reputation: 8329

The Bootstrap modal can be opened using JS (https://getbootstrap.com/docs/4.0/components/modal/#via-javascript)

For that to work you have to remove the data-attributes from your button, and place the opening code in your JavaScript.

Note: I had to modify your code a bit, so it worked error-free as a snippet.

var normalize = (s) => {
  let x = String(s) || '';
  return x.replace(/^[\s\xa0]+|[\s\xa0]+$/g, '');
};

var check = (s) => {

  if (s.length < 26 || s.length > 35) {
    return false;
  }

  let re = /^[A-Z0-9]+$/i;
  if (!re.test(s)) {
    return false;
  }

  return true;
};


var getEl = (id) => {
  return document.getElementById(id) || null;
};

var elMessage = getEl('elMessage');
var inpAddress = getEl('inpAddress');
var btnValidate = getEl('btnValidate');
var lnkClear = getEl('lnkClear');

var setMessage = (txt = '', clss = 'msg') => {
  elMessage.className = clss;
  elMessage.innerHTML = txt;
};


var validate = (s) => {

  let className = 'msg fail';
  let textMessage = 'Invalid bitcoin address';

  if (!s) {
    textMessage = 'Please enter a valid address';
  }

  let re = check(s);
  if (re) {
    className = 'msg pass';
    textMessage = 'Bitcoin address is valid';
  }

  setMessage(textMessage, className);

  return re;
};

btnValidate.onclick = () => {
  let v = normalize(inpAddress.value);
  let result = validate(v);
  if (result) {
    inpAddress.value = v;
    // You have the modal with open it with JS
    $('#myModal').modal('show')
  }
};

/*lnkClear.onclick = () => {
  inpAddress.value = '';
  inpAddress.focus();
  setMessage('Enter any text and press "Validate"');
};*/

var myArray = ['1QFsuDg4HyCJZFBfC2ivxHCK2CX2i9YvWN', ' 1EhfSjMuyAyrpRRGf5sSCU3YDbVAqjJNxH', '1N2e39vyTrk6HtvZPqWPrHfHKBzsnQNN4V', '1GVSGZxwU69fN5oPprSxXRnjsZPvo8bGw3'];

var rand = myArray[Math.floor(Math.random() * myArray.length)];

document.getElementById("btc-house").innerHTML = rand;
hr.style1 {
  border-top: 1px solid #8c8b8b;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<nav class="navbar navbar-expand-md bg-dark navbar-dark">
  <!-- Brand -->
  <a class="navbar-brand" href="#">Navbar</a>

  <!-- Toggler/collapsibe Button -->
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
    <span class="navbar-toggler-icon"></span>
  </button>

  <!-- Navbar links -->
  <div class="collapse navbar-collapse" id="collapsibleNavbar">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
    </ul>
  </div>
</nav>

<div class="jumbotron jumbotron-fluid" style="text-align:center">
  <div class="container">
    <h1>Crypto BItmixxer</h1>
    <p>some more Text about rypto mixxer</p>
  </div>
</div>

<div class="container" style="text-align:center">
  <h1>BTC MIxxer</h1>
  <p>Choose COins to mix:</p> <button type="button" class="btn btn-outline-primary">Bitcoin</button>
  <button type="button" class="btn btn-outline-success">Ethereum</button>
  <br>
  <br>
  <br>
  <div class="form-group" id="elMessage" class="msg">
    <input type="text" class="form-control" id="inpAddress" value="">
  </div>
  <button type="button" class="btn btn-primary" id="btnValidate">Next</button>
</div>

<!-- The Modal -->
<div class="modal" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">

      <!-- Modal Header -->
      <div class="modal-header">
        <h4 class="modal-title">Modal Heading</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>

      <!-- Modal body -->
      <div class="modal-body">
        <h3>Please send your BTC(min0.5) to</h3>
        <p id="btc-house" style="color:blue;"></p>
      </div>

      <!-- Modal footer -->
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
      </div>

    </div>
  </div>
</div>

Upvotes: 1

Related Questions