Submit button firing twice

Solved
Belljones
New Member
5 0 0

Hi, 

 

We have some custom code written for our website on this page, https://www.loveroselingerie.com/pages/findyoursize, however the 'find your size' button is triggering the calculator to work but also open another page- https://www.loveroselingerie.com/pages/findyoursize? without the calculator answer on. We can't work out why this is happening, nor can the guy who wrote the code- he thinks it's triggering something else in the back on Shopify that opens the new page. 

 

Just wondering if anyone else is having similar issues in the Debut theme, Or if anyone can spot the issue? Page code below!

 

Thanks

 

<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#myDIV {
margin: auto;
width: 70%;
padding: 15px 25px 15px 25px;
text-align: center;
background-color: lightgray;
margin-top: 20px;
display: none;
}
</style>

<div class="page-width">
<div class="grid">
<div class="grid__item medium-up--five-sixths medium-up--push-one-twelfth">
<div class="section-header text-center">
<h1></h1>
</div>
<script>
$('#braCalculator').submit(function () {
return false;
});
</script>
<div class="rte">

<div style="text-align: center;">
<h2>How to find your LoveRose bra size...</h2>
</div> <br>
<div style="text-align: left;"><img src="https://cdn.shopify.com/s/files/1/0309/4809/8187/files/Sizing_Instruction.jpg?v=1598795627" width="400px" height="599px" style="margin: 5px 15px 5px 5px; float: left;" /></div>
<br> <br> <br> <br> <br>
<p>Find a soft measuring tape that measures in centimetres and then work through the steps below alone, or with a friend depending on how your measuring skills are!</p>
<p>1. Stand upright wearing your most supportive and comfortable non-padded bra, wearing your prosthesis if applicable.</p>
<p>2. Measure around the fullest part of your bust (OverBust)</p>
<p>3. Measure around the your ribcage (UnderBust) </p>
<p>4. Enter the two measurements into our measuring calculator below to find your LoveRose soft bra size.</p>
<p> </p>
<p> </p>
<p> </p>

<br><br><br><br><br><br><br>

  <!-- Download Section -->
<section id="download" class="content-section text-center">

        <div class="container">
            <div class="col-lg-8 col-lg-offset-2">
                <h1>Bra Sizing Calculator</h1>
<div class="grid">
<div class="grid__item one-half">
<form id="braCalculator" target="#here"> 
<div class="form-group">
<p>
<label for="bust"><b>Your Overbust</b> in cm</label>

        <input type="number" class="form-control input-lg" id="bust" placeholder="95">
      </div>
      <div class="form-group">
</p>
<label for="underbust"><b>Your Underbust</b> in cm</label>

        <input type="number" class="form-control input-lg" id="underbust" placeholder="77">
      </div>
<p> <br>
<button id="calc" class="btn btn-default btn-lg">Find my LR size</button>
</p>
</form>

</div>
<div class="grid__item one-half" style="text-align: left">

<strong>Your Bra Size:</strong>
        <h2><span id="ukSize"></span></h2>
</div>
</div>

</div> <!-- /container -->

            </div>


</section>      
<br><br>

<div class="text-center">
<button class= "btn" onclick="myFunction()">Please note</button>
</div>
<div id="myDIV" input style="display: none">
Different bra styles come in different sizes, please check the style before you order.<br> We have tried to be as accommodating and reach as large a group of women as possible with our product range and sizing. If you do not see your size here then please <a href="https://loverose-lingerie.myshopify.com/pages/contact" title="contact us">contact us</a> for more information and questions about possible sister sizing to get you into a bra!
<br> <br>
<a href="https://loverose-lingerie.myshopify.com/pages/bra-size-chart" class="btn">Bra Size Chart</a> <br>

  </div>
<script>
function myFunction() {
var x = document.getElementById("myDIV");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>

<br><br><br>

<div style="text-align: center;">

<h2>How to find your LoveRose pant, robe and suspender belt size...</h2>
<div>

<p>LoveRose pant, robe and suspender belt sizes follow regular dress sizes, so pick the size that best matches your usual dress size.<br>
<br>
</p>
<div class="row">
<table border="0" cellspacing="0" cellpadding="0" width="240" align="center">
<tr>
<td width="42" nowrap><p align="center">  </p></td>
<td width="37" nowrap><p align="center">S </p></td>
<td width="37" nowrap><p align="center">M </p></td>
<td width="37" nowrap><p align="center">L </p></td>
<td width="37" nowrap><p align="center">XL </p></td>
<td width="51" nowrap><p align="center">1X </p></td>
</tr>
<tr>
<td width="42" nowrap><p align="center">EU </p></td>
<td width="37" nowrap><p align="center">34 </p></td>
<td width="37" nowrap><p align="center">36 </p></td>
<td width="37" nowrap><p align="center">38 </p></td>
<td width="37" nowrap><p align="center">40 </p></td>
<td width="51" nowrap><p align="center">42 </p></td>
</tr>
<tr>
<td width="42" nowrap><p align="center">UK </p></td>
<td width="37" nowrap><p align="center">8 </p></td>
<td width="37" nowrap><p align="center">10 </p></td>
<td width="37" nowrap><p align="center">12 </p></td>
<td width="37" nowrap><p align="center">14 </p></td>
<td width="51" nowrap><p align="center">16 </p></td>
</tr>
<tr>
<td width="42" nowrap><p align="center">US </p></td>
<td width="37" nowrap><p align="center">4 </p></td>
<td width="37" nowrap><p align="center">6 </p></td>
<td width="37" nowrap><p align="center">8 </p></td>
<td width="37" nowrap><p align="center">10 </p></td>
<td width="51" nowrap><p align="center">12 </p></td>
</tr>
</table>

        </div> <br>

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

 

0 Likes
Guleria
Shopify Partner
1255 263 346

This is an accepted solution.

Hello @Belljones ,

It's not the issue with theme 'Debut'  
Actual issue is the code you are using is buggy. You are using onclick on button somehow it's correct but you have to prevent it so button will not fire its default event and use your onclick event.
e.g.

function yourfunction(e) {
    e.preventDefault();
}

Another thing there is other conflict in page you can check in console ( Uncaught ReferenceError: $ is not defined ) 
Just fix these 2 things and you will get the desired results.

Thanks 


Want to modify or custom changes on store hire me.
Email: guleriathakur43@gmail.com, Skype: navrocks1
If helpful then please Like and Accept Solution.
If you are happy and want to donate Click here (Its my paypal)

Hi @Belljones ,

There is actually no need of <form id="braCalculator" target="#here"> ..... </form> tags. This is a simple on page calculation. I am talking about the following part of code:

 

 

<form id="braCalculator" target="#here"> 
<div class="form-group">
<p>
<label for="bust"><b>Your Overbust</b> in cm</label>

        <input type="number" class="form-control input-lg" id="bust" placeholder="95">
      </div>
      <div class="form-group">
</p>
<label for="underbust"><b>Your Underbust</b> in cm</label>

        <input type="number" class="form-control input-lg" id="underbust" placeholder="77">
      </div>
<p> <br>
<button id="calc" class="btn btn-default btn-lg">Find my LR size</button>
</p>
</form>

 

 

 

After change as i suggest this will look like below:

 

 

<div id="braCalculator"> 
<div class="form-group">
<p>
<label for="bust"><b>Your Overbust</b> in cm</label>

        <input type="number" class="form-control input-lg" id="bust" placeholder="95">
      </div>
      <div class="form-group">
</p>
<label for="underbust"><b>Your Underbust</b> in cm</label>

        <input type="number" class="form-control input-lg" id="underbust" placeholder="77">
      </div>
<p> <br>
<button id="calc" class="btn btn-default btn-lg">Find my LR size</button>
</p>
</div>

 

 

 

I hope this helps.

Thanks!

Suman Saurabh | Expert in Shopify Development
✅ Was my reply helpful? Please Like & Accept Solution
✅ Want to hire me? Send PM or Skype: omnisitecreations
0 Likes