formのsubmitを押すとモーダルを表示させたい

教えて!gooにも投稿させていただいたのですが、こちらでも質問させてください。
https://oshiete.goo.ne.jp/qa/9647851.html

formのsubmitを押すと別サイトに飛ぶのですが、飛ばさないでモーダルで表示させたいです。
使用しているのは『remodal』というJqueryです。
下記URLで質問されていることとまったく同じことがしたいのですが、
知識不足すぎて回答の意味も理解できません。どうか詳細に教えてくださいませ！
https://teratail.com/questions/2860

自分の知識は、html/cssのみです。よろしくお願いいたします。

下記追加---------
申し訳ございません。
下記、試したことやコード記述しましたので、どうかご教授お願いします。

submitするときに別ページに飛ぶのですが、それを『remodal』を使用して
モーダルで表示するにはsubmit周りを変更することで実現できると思い
下記を試しました。

【試したこと】
元のsubmit--
<input type="submit" value="カートに入れる">

試したsubmit--
①<input type="submit" value="カートに入れる" data-remodal-target="modal1">

②<input type="submit" value="カートに入れる" onclick="location.href='#modal1'" data-remodal-target="modal1">

③<a href="#modal1" onClick="document.menu.amount.value = 1;document.menu.submit();">カートに入れる</a>

結果--
①はモーダルで表示されるのですが、postデータが反映されず失敗しました。
②は①と同様の結果になり失敗しました。
③も同様に失敗してしまいました。

元のsubmitではリンク先で商品が1つ追加された状態で表示されますが、
上記①～③の結果はモーダルでは表示されるものの商品が０の状態で表示されます。

色々と調べた中で下記URL先が答えなのかなと思っていますが、内容を翻訳して
読んでも理解できませんでした。。
https://github.com/VodkaBears/Remodal/issues/29

実現したいこと--
submitで移動するリンク先をpost情報がちゃんと反映された状態でモーダルで表示したいです。

【モーダルで表示される部分】

<div class="remodal" data-remodal-id="modal1">
  <button data-remodal-action="close" class="remodal-close"></button>
  <div class="modal1">
   <iframe src="https://～" frameborder="0"></iframe>
    </div>
    <button data-remodal-action="close" class="underline pointer">閉じる</button>
</div>

・
・
・
・
・
【form部分】

<form id="form" name="menu" action="https://******" method="post">
<div id="itemSelect">
    <div id="amountSelectWrap" class="purchaseElement">
        <label for="amountSelect">数量</label>
        <select name="amount" id="amountSelect" class="amountSelect">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
            <option value="10">10</option>
        </select>
    </div>
    </div>
    
<input type="hidden" name="data[via]" value="" id="via"/>お
<input type="hidden" name="shopID" value="******" />
<input type="hidden" name="id" value="******" />

<script>
$('#valiationSelect').on('change', function(){
  $('#amountSelectWrap  .amountSelect').addClass('hide').prop('disabled', true);
  $('#amountSelectWrap  .amountSelect:eq('+$(this).find(':selected').attr('data-index')+')').removeClass('hide').prop('disabled', false);
});
</script>

<input type="submit" value="カートに入れる" data-remodal-target="modal1">

    </form>

以上、よろしくお願いいたします。