We Keep Coding

Button is working only once when clicking on it in mobile mode

In my site, everything is working well on the desktop version but when I switch to the mobile version a button only works once. It doesn't do anything after 1 click.
If I press enter it works fine, but pressing on the button won't trigger the button again. I specifically don't want my page to reload.
onClick not working on mobile (touch)
This answer involves reloading the page.
$("#quiz").on('touchstart click', 'button', function(e){
e.preventDefault();
});
<h1 class="title">Quote Game!</h1>
<div class="container">
<form id="quiz" name="quiz" autocomplete="off"><br>
<container class="cont1">
<p class="questionp">Which hero does this quote belong to? </p>
<div class="row">
<!--<div class="form-group float-label-control">-->
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<p class="question" id="questionquote"></p>
</div>
<div class="col-6 col-lg-2 col-md-2 col-sm-2 col-xs-2 ">
<p id = "number_correct" class="green"></p>
</div>
<script class="score">document.getElementById("number_correct").innerHTML = "Your Score: " + correct;</script>
<div class="col-6 col-lg-2 col-md-2 col-sm-2 col-xs-2">
<!-- <img src="transparent.gif" height="90" width="90" class="pull-right"> penguin picture-->
</div>
<input class="form-control" id="question1" name="question1" placeholder="Hero Name" onclick="IsEmpty();" >
<br> </br>
<!--<input class="answer" id="question1" name="question1"></input><br> </br>-->
<div class="col-6 col-lg-2 col-md-2 col-sm-2 col-xs-2">
<!--<input id="button" class="btn btn-primary" type="submit" value="Check" onclick = "check(); ">-->
<button id ="button" value="Check" class="btn btn-primary " onclick = "check(); ">Check</button>
</div>
</div>
</container>
</form>
<div class="text-center">
<img id="result" class="correct_answer" src="" height="350" width="90%">
</div>
</div>

Tried your code under Chrome 68 for Android and the button is working everytime. However, a few hints:
Use addEventListener (or jQuery.on()) rather than using inline javascript in HTML.
If what you want is to not submit the form after running your code, you can use return false instead of e.preventDefault().
I don't get the point on attaching an event handler to the form only to filter it to the button and adding another inline javascript function to the button itself. If what you want is to call two different functions at once, use one function to call both.

try setting button type to button (instead of submit)
that way the button won't be disabled by browser after a click
<button type="button" id ="button" value="Check" class="btn btn-primary " >Check</button>
also, e.preventDefault is not needed anymore and you'll have to submit this form with js if you wan't to

Tricky Selector casperjs hidden div

i have a, in my opinion really tricky form. The form changes div's, hidden fields & id's on every reload. and i cant find a pattern how it changes.
here's an example for the class .box.box500:
<div class="box box500" style="float:left;display:none;">
<span class="errorText"></span>
<br>
<input id="czoyNToiaWhfYlNEaDg0ZGNkVi00bUxtckxLZ2cuLiI7" type="text" name="czoyNToiaWhfYlNEaDg0ZGNkVi00bUxtckxLZ2cuLiI7" value="">
</div>
<div id="boxFirma" style="display: none;margin-top: 20px;">
<div class="" style="float:left;left;margin-left:10px;display:none;">
<a name="personal"></a>
<div style="overflow:hidden; margin-top: 20px;">
<div class="box box500 " style="display:none;">
<input id="czoyNToiaWhfYlNEaDg0ZGNkUjh3d2tOOFJFd2cuLiI7" type="text" value="" name="czoyNToiaWhfYlNEaDg0ZGNkUjh3d2tOOFJFd2cuLiI7">
<br>
<span class="errorText"></span>
</div>
<div class="box box500 " style="float: left;">
<input id="czoyNToiaWhfYlNEaDg0ZGNlVFpMRjFVWjZicEEuLiI7" type="hidden" value="" name="czoyNToiaWhfYlNEaDg0ZGNlVFpMRjFVWjZicEEuLiI7">
<input id="czoyNToiaVhxemVtUGRZOHluMkNxdE9pWEd1Y1EuLiI7" type="text" value="" name="czoyNToiaVhxemVtUGRZOHluMkNxdE9pWEd1Y1EuLiI7">
<br>
<span class="errorText"></span>
</div>
<div class="box box502 " style="float: left;margin-left: 20px;">
<input id="czoxMzoiaXgtQTNQT3VWVmprLiI7" type="text" value="" name="czoxMzoiaXgtQTNQT3VWVmprLiI7">
<br>
<span class="errorText"></span>
</div>
</div>
sometimes the first hidden div is there, and sometimes not. the id changes on every reload. The hidden input is sometimes the first child, sometimes the second.also the div, sometimes on the frist positionen sometimes on the second. i've really no idea how to identify the input fields.
is it maybe possible to select a input filed like:
this.sendKeys('.box.box500:nth-child(2):style="float: left;" > input:nth-child(2):type="text"', 'text');

Could you not use the selector:
this.sendKeys('div.box.box500 input[type="text"]:not([style*="display: none"])', ...);
I believe this would find all of the specific inputs type="text" regardless of the order on the page.

this is working:
this.sendKeys('div.box.box500:not([style*="none"]) input[type="text"]', ...);

Clear form on `mfp-close` in magnific popup

I am trying to clear all the errors and make input values blank on closing of magnific popup.
I inspected the class of 'close' button and tried to fire jquery event but it is not working.
$("button.mfp-close").on('click',function(){
console.log("Closed");
});
When i click on mfp-close then there is no log in console.
HTML snippet is:
<div class="mfp-content"><div id="customdesign" class="white-popup mfp-with-anim">
<div class="row">
<div class="col-sm-12 text-center">
<h3>Upload Your Design</h3>
<p><span class="success_sbmt" style="display:none;color:green">Congratulations! We have sent you the coupon code on your registered email id</span>
</p><form novalidate="novalidate" class="form cmxform" id="customForm">
<input name="leave" value="http://" type="hidden">
<input name="isblank" value="" type="hidden">
<div class="form-group">
<label class="sr-only">Name</label>
<input aria-required="true" class="form-control" name="nam_cst" id="nam_cst"
placeholder="Enter Name.." required="" type="text">
<span class="help-block" style="color:red"></span>
</div>
</form>
</div>
</div>
<button title="Close (Esc)" type="button" class="mfp- close">×</button>
</div></div>
How can we handle this operation??

First of all, if you are using bootstrap framework, use bootstrap modal instead magnific popup, no need for extra js librabry, you can achieve same with bootstrap modal
in your HTML, button you have class="mfp- close" it should be class="mfp-close" as you are binding it like this $("button.mfp-close")
To reset form on pop-up close, you can achieve it with $('form')[0].reset();
Script
$("button.mfp-close").on('click',function(){
alert("Closed");
$('form')[0].reset();
});
HTML
<a class="popup-modal" href="#customdesign">Open modal</a>
<div class="mfp-content">
<div id="customdesign" class="white-popup-block mfp-hide">
<div class="row">
<div class="col-sm-12 text-center">
<h3>Upload Your Design</h3>
<p>
<span class="success_sbmt" style="display:none;color:green">Congratulations! We have sent you the coupon code on your registered email id</span>
</p>
<form novalidate="novalidate" class="form cmxform" id="customForm">
<input name="leave" value="http://" type="hidden">
<input name="isblank" value="" type="hidden">
<div class="form-group">
<label class="sr-only">Name</label>
<input aria-required="true" class="form-control" name="nam_cst" id="nam_cst" placeholder="Enter Name.." required="" type="text">
<span class="help-block" style="color:red"></span>
</div>
</form>
</div>
</div>
<button title="Close (Esc)" type="button" class="mfp-close">×</button>
</div>
</div>
Working fiddle example

Close popup after form is submitted

That seems to be a common question with multiple replies but I couldn't get any of them work.
I'm working on WP. Currently I'm using a plugin that shows a pop-up as soon as a not logged in user lands to the website. In the popup I use an optin form (created through MailChimp).
When the user submits his info, a new tab opens moving him to the email verification page.
The problem is that the popup remains open in the first tab.
I would like it to close as soon as the data are submitted. Is that possible?
Here's a link to the website.
Here's the code of my form:
<div id="mc_embed_signup">
<form action="http://fitnessforum.us6.list-manage.com/subscribe/post?u=d6acf8949532b107b7b21c9d0&id=1304ea7322" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate="">
<div class="mc-field-group">
<input id="firstname3" style="width:260px;margin:5px 0;background-position:95% center" type="text" value="" name="FNAME" placeholder="'Ονομα">
</div>
<div class="mc-field-group">
<input id="primaryemail3" style="width:260px;margin:5px 0;background-position:97% center" type="email" value="" name="EMAIL" placeholder="Email">
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div>
<div class="clearfix">
<input name="subscribe" style="width:305px;margin:4px 5px 0 0" class="simplemodal-close button_link hover_fade large_button silver button_widget" type="submit" value="ΣΤΕΙΛΤΕ ΤΟ ΔΩΡΟ ΜΟΥ!"></div>
</form>
</div>
<div style="text-align: center">
<p class="under_button2"> Το email σου είναι ασφαλές στα χέρια μας.</p>
<div class="af-clear">
</div>
</div>
</div>
<!--End mc_embed_signup-->

Just make sure your "thank you" page has code like someone above is mentioning. Is it an actual popup or javascript one like shadowbox? You might need something like this:
parent.Shadowbox.close();"

How can I select the next div using jQuery?

I am quite a noob when it comes to jQuery and I'm trying to select the next element using the next() selector but having a little trouble in getting it to work!
What I'm trying to do is to activate slideDown() once the user has finished making their selection on a ui slider. Here is my code:
$('.slider').slider({
stop: function(event, ui) {
$(this).nextAll('.secondq:first').slideDown('slow')
}
});
Trouble is, this doesn't work at all. It will only work if I put the 'secondq' question inside the parent div of the ui slider. Here is my HTML:
<div class="option">
<h2 align="left">How high is your ceiling from the floor?</h2>
<input type="text" align="right" name="bonus" class="value" disabled="disabled" />
<div class="slidewrap">
<div class="sliderFt slider"></div>
</div>
</div>
<!-- End Option -->
<div class="option">
<h2 align="left">How many windows do you have?</h2>
<input type="text" align="right" name="bonus" class="value" disabled="disabled" />
<div class="slidewrap">
<div class="sliderWinDoor slider"></div>
</div>
<div class="secondq" style="display:none;">
<h2>What type of material are your windows made of?</h2>
<div class="radiocont">
<label>Wood</label>
<input type="radio" class="styled" value="wood" name="windowtype" />
</div>
<div class="radiocont">
<label>Metal</label>
<input type="radio" class="styled" value="metal" name="windowtype" />
</div>
<div class="radiocont">
<label>PVC</label>
<input type="radio" class="styled" value="pvc" name="windowtype" />
</div>
</div>
</div>

nextAll only gets siblings. Based on your HTML structure, you could do:
$(this).parent().next()
To make it more independent from the structure, you could also do:
$(this).closest('.slidewrap').nextAll('.secondq:first')