CODEWITHSUNDEEP
javascriptjquery
bitconnect
bitconnect

Reputation: 17

open bootstrap modal when condition is true

User needs to input Bitcoin address after bitcoin address is valid modal should open if bitcoin adress is invalid modal should stay closed

enter image description here enter image description here enter image description here

And here is the code (Bicoin validation works, i only need help with the modal)

<!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>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.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 Mixxer</h1>
    <p>some more Text about crypto 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>

I know i need to use

$('#myModal').modal('show');
$('#myModal').modal('hide');

i just dont know where to put it

Upvotes: 2

Views: 936

Answers (1)

Muhammed B. Aydemir
Muhammed B. Aydemir

Reputation: 1015

First remove the data-toggle="modal" target="#myModal" from #btnValidate

<button type="button" class="btn btn-primary" id="btnValidate">Next</button>

Then change your if statment inside your validate function to:

if (re) {
    className = 'msg pass';
    textMessage = 'Bitcoin address is valid';
    $('#myModal').modal('show')
}

Note that you import jquery twice, which can lead to bugs. Remove one import and make sure jquery is imported before bootsrap.js

Upvotes: 1

Related Questions