safe input from form in modalbox - html

Question

I am making a signup form for our e-mail newsletter with Bootstrap 3. I made a row where it is possible to type in a name and e-mail. When a person click "Compete Now" there is coming a modalbox up where the person has to give 3 informations.
The question is now if it is possible to save the information from earlier? That means the name and e-mail?
So the data I have to send to MailChimp is:
Name
E-mail
Workshop
Gender
Postcode
As it is now I can send the data "Workshop, Gender and Postcode" to MailChimp. But the modalbox is of course not remembering the name and e-mail.
Is there a way that I can save the name and e-mail? One important thing is that I do not have access to the backend. That means if it was possible it had to be done with javascript.
There is a working JSFiddle here
Notice it is not possible to convert to BS4 at the moment
$('#myModal').on('shown.bs.modal', function () {
$('#myInput').focus()
})
.newsletter-block {
background-color: #7c7c7c;
}
.newsletter-title h2 {
padding-bottom: 24px;
font-size: 2em;
}
.newsletter-subtitle {
font-size: 16px;
}
.padd-70-70 {
padding-top: 70px;
padding-bottom: 70px;
}
.subscribe-form {
width: 100%;
}
.subscribe-form .form-control {
border-radius: 0px;
}
.subscribe-form button {
border: 2px solid #e4a228;
background: #e4a228;
text-transform: uppercase;
color: #fff;
text-align: center;
width: 100%;
padding: 0.4em;
}
<div class="main-wraper padd-70-70 newsletter-block">
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-12 col-xs-12 d-flex justify-content-end">
<div class="newsletter-title">
<h2 class="color-white">Join Suite Vacations to Get FREE <br>Travel News and Special Offers!</h2>
<h4 class="newsletter-subtitle color-white underline">Secret Deals - for our subscribers only...Besides it's FREE</h4>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 d-md-flex justify-content-start ">
<form class="subscribe-form" action="#">
<div class="form-group subscribe-input input-style-1 fl low-pad">
<input type="text" class="form-control" required="true" placeholder="Navn">
</div>
<div class="form-group subscribe-input input-style-1 fl low-pad">
<input type="email" class="form-control" required="true" placeholder="Din e-mail">
</div>
<button type="submit" class="c-button b-60 bg-red-3 hv-red-3-o fr btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"><span>Compete Now</span></button>
</form>
</div>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<div class="mc-field-group">
<label for="mce-VAERKSTED">Workshop <span class="asterisk">*</span>
</label>
<input type="text" value="" name="VAERKSTED" class="required" id="mce-VAERKSTED">
</div>
<div class="mc-field-group input-group">
<strong>Gender <span class="asterisk">*</span>
</strong>
<ul><li><input type="radio" value="Mand" name="KON" id="mce-KON-0"><label for="mce-KON-0">Man</label></li>
<li><input type="radio" value="Kvinde" name="KON" id="mce-KON-1"><label for="mce-KON-1">Woman</label></li>
</ul>
</div>
<div class="mc-field-group size1of2">
<label for="mce-ZIP">Postcode <span class="asterisk">*</span>
</label>
<input type="number" name="ZIP" class="required" value="" id="mce-ZIP">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Subscribe</button>
</div>
</div>
</div>
</div>

Answer 1

You do not need to save the "data for later" as both the popup and the initial form are on the same page. After the popup window occurs and the user clicks "Subscribe" you can simply collect the data from the name and e-mail input boxes and pass this data along to the backend.
1.) Add ID values to the name and e-mail fields:
<div class="form-group subscribe-input input-style-1 fl low-pad">
<input type="text" id="navn" class="form-control" required="true" placeholder="Navn">
</div>
<div class="form-group subscribe-input input-style-1 fl low-pad">
<input type="email" id="email" class="form-control" required="true" placeholder="Din e-mail">
</div>
(Also remove the action from your <form> tag otherwise the form will be submitted when clicking on the "COMP(L)ETE NOW" button: <form class="subscribe-form">).
2.) Add an ID to the "Subscribe" button in the popup form so you can attach a handler to it:
<button type="button" id="btn-subscribe" class="btn btn-primary">Subscribe</button>
3.) Create an event handler to handle the signup process:
$('#btn-subscribe').on('click', function() {
let navn = $('#navn').val();
let email = $('#email').val();
let workshop = $('#mce-VAERKSTED').val();
let gender = $('#mce-KON-1').is(':checked') ? 'Kvinde' : 'Mand';
let zip = $('#mce-ZIP').val();
window.alert(navn + ' - ' + email + ' - ' + workshop + ' - ' + gender + ' - ' + zip);
});
Here is a Fiddle to demonstrate the change.
Update code
In case you need a form wrapper for MailChimp:
move the <form> tag to the popup window.
Add two hidden form fields to the form to hold the values for the name and e-mail
On showing the modal, copy the name and e-mail values into the hidden fields
In my tests I could not wrap the entire modal in a <FORM> tag as this would change the entire layout of the popup. What I ended up doing was to add the <FORM> in the <div class="modal-body>...</div> and then submit the form via an event handler on the subscribe button:
$('#btn-subscribe').on('click', function() {
$('#subscribe-form').submit();
});
Some final remarks:
your fiddle contains a <style> tag in the CSS window which causes a display issue in the fiddle
get rid of old tags like <strong> and use CSS classes instead. If you ever want to change the styling of your code, you simply need to change the CSS rather than having to change tags.
Here is an updated Fiddle.