We Keep Coding

Form submit does not close the form and reload to the homepage

I have a problem setting up a form on my website.
I want to add two separate forms on my website, which i did, using some HTML & css.
Thoses forms need to send informations to a webhook -> it also works (since it's collected)
BUT as soon as i press submit, it redirect to the main page of the website, so no conversion (which is a shame) and a very bad input from me.
Please, lend me your intelligence, since i must be the best idiot there is.
<form name='myForm' data-form-id='IdFromWebhook' action='WebhookLink' method='post' onsubmit="return false">
<div class="row">
<div class="col-lg-12">
<div class="form-group text_box">
<label for='EMAIL_ADDRESS'>E-mail: </label><input id='insightly_email' name='email' type='text' required>
</div>
</div>
<div class="col-lg-6">
<div class="form-group text_box">
<label for='FIRST_NAME'>First name: </label><input id='insightly_firstName' name='firstName' type='text' required>
</div>
</div>
<div class="col-lg-6">
<div class="form-group text_box">
<label for='LAST_NAME'>Last Name: </label><input id='insightly_lastName' name='lastName' type='text' required>
</div>
</div>
<div class="col-lg-4">
<div class="form-group text_box">
<label for='Language__c'>Choose a language: </label>
<select id='insightly_language' name='language' required><option value='EN'>EN</option><option value='FR'>FR</option><option value='DE'>DE</option></select>
</div>
</div>
</div>
<!--Bouton d'envoi-->
<div style="display:flex;justify-content:center"><input class="btn_three" type='submit' value='Submit'></div></form>

Use event.preventDefault() this will stops redirect:
formReference.onsubmit = (event) => {
event.preventDefualt()
}

I stupidly found the right answer, i had to specify URLs for the success or error pages.
It was an insightly form.

Braintree 'payment_method_nonce' returns empty

I'm fairly new to Braintree. Im integrating the DropIn UI in the Sandbox environment. The 'payment_method_nonce' is returning empty after I submit my form, which makes the transaction fail. The DropIn UI displays correctly in the specific div, and to make sure everything was working correctly I added in a place holder for the PaymentMethodNonce which was 'fake-valid-nonce', which made the transaction valid. I am stuck on why the Braintree server is not sending back a Nonce value.
I make an Ajax call to token.php to get the Client Token which enables the DropIn UI to render correctly.
Ajax call below:
<script>
$.ajax({
url: "/braintree/token.php",
type: "get",
dataType: "json",
success: function (data) {
braintree.setup(data, 'dropin', {container: 'dropin-container'});
);
</script>
This is token.php which generates the Client Token:
require ("braintree.php");
$clientToken = $gateway->clientToken()->generate();
echo json_encode($clientToken);
When I inspect the HTML, BrainTree shows a 'server-error-message' div, and it displays "There was an error processing your request. Try again." Other posts regarding this issue have mentioned that the way a HTML form can be set up and submitted can cause this issue.
Here is my Form:
<div class="container">
<div class="row flex-nowrap">
<div class="alpha-container col-12">
<div class="content-container">
<form id="infoForm" method="post" action="/congrats.php">
<div class="tab">
<h2>Pick a Time</h2>
<div>
<!-- Google Schedule API goes here -->
</div>
<div>
<h4>Distance:</h4>
<p></p>
<br>
<h4>Duration:</h4>
<p></p>
<h4>Estimate:</h4>
<p></p>
</div>
</div>
<div class="tab">
<h2>Contact Information</h2>
<div class="contact-form">
<div class="contact-block">
<label for="fullname"></label>
<input type="text" name="Data[fullname]" class="contact" placeholder="Full Name">
</div>
<div class="contact-block">
<label for="email"></label>
<input type="email" name="Data[email]" class="contact" placeholder="Email Address">
</div>
<div class="contact-block">
<label for="phonenumber"></label>
<input type="number" name="Data[phonenumber]" class="contact" placeholder="Phone Number">
</div>
</div>
</div>
<div class="tab">
<h2>Payment Information</h2>
<div class="payment-form">
<label for="firstName"></label>
<input type="text" placeholder="First Name" name="Data[first_name]">
<label for="lastName"></label>
<input type="text" placeholder="Last Name" name="Data[last_name]">
<div id="dropin-container"></div>
</div>
</div>
<!-- Next/Previous Buttons -->
<div style="overflow:auto;">
<div style="float:right;">
<button type="button" id="prevBtn" onclick="nextPrev(-1)">Previous</button>
<button type="button" id="nextBtn" onclick="nextPrev(1)">Next</button>
</div>
</div>
<!--Progress Bar -->
<div style="text-align:center;margin-top:40px;">
<span class="step"></span>
<span class="step"></span>
<span class="step"></span>
</div>
</form>
</div>
</div>
</div>
</div>
The form uses Javascript to hide the steps of the form and then adds a submit button then it has reached the last step. 'congrats.php' is where I'll be processing the transaction. I am including both jQuery and Braintree JS in my header.
Edit: My solution was found by editing my HTML form. The form above used javascript to add a submit button once on the last step of the form. My new form now just has a button tag with type=submit and now the 'payment_method_nonce' is being created. For whatever reason, the Braintree server was not receiving my payment information upon submit.

Loading HTML elements using JS

I'm trying to install custom MailChimp form with hidden fields.
The values that I want to pass on are included in the URL and I extract them using JS. No issue there.
The form code looks something like this:
<div id="mc_embed_signup">
<form action="//treat-candida.us3.list-manage.com/subscribe/post?u=d6e792c187ee9f2f2ad&id=787f11a" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<h2>Subscribe to our list</h2>
<div class="indicates-required"><span class="asterisk"></span> </div>
<div class="mc-field-group">
<label for="mce-EMAIL"><span class="asterisk"></span>
</label>
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
</div>
<div class="mc-field-group">
<label for="mce-FNAME"><span class="asterisk"></span>
</label>
<input type="text" value="" name="FNAME" class="required" id="mce-FNAME">
</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 style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_d6e792c187ee9f2f2da2f179d_787f1101bd" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</div>
</form>
</div>
<script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script><script type='text/javascript'>(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';fnames[2]='COOKIE';ftypes[2]='text';fnames[3]='GENDER';ftypes[3]='text';}(jQuery));var $mcj = jQuery.noConflict(true);</script>
What I have to do is to append values from the URL to //treat-candida.us3.list-manage.com/subscribe/post?u=d6e792c187ee9f2f2ad&id=787f11a
within the code. I tried using and .innerHTML to edit just that part. It passes the values successfully that way, but the form won't be submitted properly because of the edit. It looks like I have to edit the whole code with divs and text at once. Is there an elegant way to do so?

Do something like:
$("#mc-embedded-subscribe-form").action = $("#mc-embedded-subscribe-form").action + values

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

Form doesnot post data edited from jQuery

i'm having a very simple app which includes a form and 2 buttons.'
Description
When the user clicks the first button the site checks if he has a discount coupon and if he has then it calculates the discount ammount based on the coupon. Thats pretty simple. If the user doesn't enter a code the the precess continues normaly.
The problem
With the data i'm posting i'm also posting the coupon field. If the user has entered a valid coupon then i disable the coupon input with jQuery and withit i also disable the ammount field. That causes a problem which makes the fields edited with jQuery "unpostable".
For example if you dont enter a coupon code then the field stays unlocked and jQuery never edits it.
The code
<form class="form-horizontal row-fluid" action="<?= base_url() . 'transactions/new' ?>" method="POST" id="form" name="form">
<div class="control-group">
<div class="alert js_hidden" id="psc_val_warning">
Παρακαλούμε εισάγεται το ποσό που αντιστοιχεί στα PINS
</div>
<label class="control-label" for="basicinput">Συνολικό ποσό</label>
<div class="controls">
<div class="input-append">
<input type="number" name="psc_val" class="span8" id="psc_val" required><span class="add-on">€</span>
</div>
</div>
</div>
<div class="control-group">
<div class="alert alert-error js_hidden" id="coupon_error">
Το κουπόνι δεν είναι έγκυρο!
</div>
<div class="alert alert-success js_hidden" id="coupon_success">
Το κουπόνι εξαργυρώθηκε με επιτυχία!
</div>
<label class="control-label" for="basicinput">Κουπόνι</label>
<div class="controls">
<div class="input-prepend">
<span class="add-on">#</span><input class="span8" id="coupon_code" type="text" name="coupon_code" maxlength="11">
</div>
</div>
</div>
<hr>
<div class="control-group">
<label class="control-label" for="basicinput">Σημειώσεις</label>
<div class="controls">
<textarea class="span8" rows="5" name="notes"></textarea>
</div>
</div>
<hr>
<center>
<button class="btn btn-large btn-success js_hidden" id="proceed_btn" onclick="submit_form()">Proceed</button>
</center>
</form>
<center>
<a class="btn btn-large btn-info" onclick="validate()" id="check_btn">Check</a>
</center>
The JS part
function display_proceed_btn() {
$("#psc_val").prop('disabled', true);
$('#check_btn').fadeOut( "slow", function() {
$('#proceed_btn').fadeIn( "slow", function() {
});
});
}
function submit_form() {
$('#form ').submit();
}
there is the other part which takes the coupon and uses the API to see the discount value but it does pretty much the same thing $("#coupon_code").prop('disabled', true);

Add the coupon code to a hidden field once you disable the input field.
Remember to actually recalculate the final amount on the server and not trusting any user editable field ;-)