htmlでページ遷移

前提・実現したいこと

MonacaのテンプレートにあるjQuery Mobileでhtmlのページ遷移をさせたいのですが、「避難者入力」ボタンではページ遷移するのに「QRコード表示」ボタンではページ遷移しません。何が原因でしょうか？

発生している問題・エラーメッセージ

エラーはなくボタンをクリックしても遷移しない。

該当のソースコード

<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: content: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
  <script src="components/loader.js"></script>
  <link rel="stylesheet" href="components/loader.css">
  <link rel="stylesheet" href="css/style.css">
  <link rel="stylesheet" href="lib/jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.css">
  <script src="lib/jquery/jquery-1.12.4.min.js"></script>
  <script src="lib/jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.js"></script>
  <script>
  </script>
</head>

<body data-gr-c-s-loaded="true" class="ui-mobile-viewport ui-overlay-a" style="" data-feedly-mini="yes">

  <!-- Start of first page: #one -->
  <div data-role="page" id="one" data-url="one" tabindex="0" class="ui-page ui-page-theme-a ui-page-active" style="">
    <div data-role="header" role="banner" class="ui-header ui-bar-inherit">
      <h1 class="ui-title" role="heading" aria-level="1">Multi-page</h1>
    </div><!-- /header -->

    <div role="main" class="ui-content">
      <p><a href="#two" class="ui-btn ui-shadow ui-corner-all">避難者情報入力</a></p>
      <p><a href="#three" class="ui-btn ui-shadow ui-corner-all">QRコード表示</a></p>
    </div>
  
    </div><!-- /content -->

    <div data-role="footer" data-theme="a" role="contentinfo" class="ui-footer ui-bar-a">
      <h4 class="ui-title" role="heading" aria-level="1">避難者名簿登録アプリ</h4>
    </div><!-- /footer -->
  </div><!-- /page one -->

  <!-- Start of second page: #two -->
  <div data-role="page" id="two" data-theme="a" data-url="two">
    <div data-role="header">
      <h1>避難者名簿登録</h1>
    </div><!-- /header -->

    <div role="main" class="ui-content">
      <!-- <h2>page2</h2>
        <p>I have an id of "two" on my page container. I'm the second page container in this multi-page template.</p>
      <p>Notice that the theme is different for this page because we've added a few <code>data-theme</code> swatch
        assigments here to show off how flexible it is. You can add any content or widget to these pages, but we're
        keeping these simple.</p>
      <p><a href="#one" data-direction="reverse" class="ui-btn ui-shadow ui-corner-all ui-btn-b">Back to page "one"</a></p> -->

       <div class="form-row">
        <label class="col-sm-3 col-form-label">お名前 <span class="badge badge-danger">必須</span></label>
        <div class="col-sm-9">
          <p>
            <input id="name" type="text" name="name" autocomplete="name" class="form-control" placeholder="お名前" required />
          </p>
        </div>
      </div>
      <form method="post" action="example.cgi">
 
<div style="text-align:center"><input id="qr" type="button" onclick="send_to_datastore()" value="確定"></input></div>
<div>
  <button type="button" onclick="history.back()">戻る</button>
</div>
    </div>
    
    <!-- Start of second page: #three -->
<div data-role="page" id="three" data-theme="a" data-url="three">
    <div data-role="header">
      <h1>遷移させたいページ先</h1>
    </div>
<div role="main" class="ui-content">

  </div>
</body>

</html>
コード