I have some client-side javascript inside a handlebars template as follows :
customerloans.handlebars:
<h1> Form to view Upcoming loans for a customer </h1>
<div id="submitviewcustomerloansID">
<form action="/customerloans">
<label for="CustomerIdLoansForStyling"> Customer ID </label>
<input type="text" id="CustomerIdLoansForStyling" name="customerIDLoans">
<button type="submit"> Submit </button>
</form>
</div>
<div id="responseviewcustomerloansID"> </div>
<script>
document.getElementById('submitviewcustomerloansID')
.addEventListener('submit', evt => {
evt.preventDefault()
const form = evt.target
const body = JSON.stringify({
custID: form.elements.customerIDLoans.value
})
</script>
The browser is invoked from a node.js app
How can I put a breakpoint inside the javascript in VSCode ?
I have tried the instructions here but this does not seem to work for handlebars: https://www.youtube.com/watch?v=EXxbDVJ01wM
Related
I have an EJS script running a forEach generating html cards.My console.log event works on the first instance of my ejs template, but not the proceeding ones. How do I get event listener working on the proceeding ones??
EJS code snippet:
<form id="likesForm">
<button type="submit" class="dislike btn" id="dislikebtn" style="height: 24px;" value ="<%=i._id%>"><img src="/images\votedwn.png"></button>
<%=i.likes%>
<button type="submit" class="like btn" id="likebtn" style="height: 24px;" value ="<%=i._id%>"><img src="/images\voteup.png"></button>
</form>
Client.js:
const likesForm = document.getElementById("likesForm");
likesForm.addEventListener("submit", () => {
console.log("hi");
});
The reason you are not selecting one and only one is because the ID's need to be unique, and they can not be unique since they are being repeated. You will have to have your event listener in a parent element like a div and work with that instead.
<div id="grabThis">
<form id="likesForm">
<button type="submit" class="dislike btn" id="dislikebtn" style="height: 24px;" value ="<%=i._id%>"><img src="/images\votedwn.png"></button>
<%=i.likes%>
<button type="submit" class="like btn" id="likebtn" style="height: 24px;" value ="<%=i._id%>"><img src="/images\voteup.png"></button>
</form>
</div>
change your ejs to this:
const likesForm = document.getElementById("grabThis");
likesForm.addEventListener("submit", () => {
console.log("hi");
});
I want to have two mailchimp forms ( linked to the same mailchimp list ) within the same landingpage in a Shopify Store. *it is a long landing page so I want them to be able to subscribe two times along the way.
It seems the second form does not work and the only think it does is refreshing the page. I am pretty sure there is a conflict with their ID´s because the two forms have the same ID ( id="mailchimp" ) but I believe it is neccesary for them to work.
I may have a very easy-to-resolve question but i have been struggling with it for a while. It seems there is no documentation about it ( apart from inserting one of the forms within an iframe -> I am not confortable with this solution because I want to record with GTM ( GA ) customer succesuful submitions etc. ).
The code for the forms ( snippet that it is called two times within the page ):
<!-- Newsletter Section -->
<section id="services" class="small-section bg-gray-lighter">
<div class="container relative">
<form class="form align-center newsdown" id="mailchimp">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="mb-20">
<input placeholder="Introduce tu email" class="newsletter-field form-control input-md round mb-xs-10" type="email" pattern=".{5,100}" required/>
<button type="submit" class="btn btn-mod btn-border-c btn-medium btn-round mb-xs-10">
Suscribe
</button>
</div>
<div id="subscribe-result"></div>
</div>
</div>
</form>
</div>
</section>
<!-- End Newsletter Section -->
What can I do to have these two identical forms working on the same page? Have in mind I don't have access to the javascript ( because mailchimp has Shopify app that makes this connection ).
If you wrap each mailchimp form in a ...., then run this script on the page, it will re-assign all IDs of the non-focused form, and re-bind the submit event. A bit hacky, but it works if you're in a bind.
$(document).ready(function() {
// only execute if confirmed more than 1 mailchimp form on this page
if ( $('.mc-form-instance').length > 1 ) {
$('.mc-field-group > .required').on('focus', function() {
var thisField = $(this);
// backup all mc-form ids on this page
$('.mc-form-instance [id]').each(function() {
var currentID = $(this).attr('id');
if ( currentID.indexOf('-bak') == -1 ) {
$(this).attr('id', currentID + '-bak');
}
});
// change the current form ids back to original state
var thisForm = thisField.closest('.mc-form-instance');
thisForm.find('[id]').each(function() {
var currentID = $(this).attr('id');
if ( currentID.indexOf('-bak') != -1 ) {
$(this).attr('id', currentID.replace('-bak', ''));
}
});
});
// re-bind
$.getScript('//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js');
}
});
As it appeared there were a conflict with two exact forms ( same javascript etc ) so I implemented the second form differently:
<!-- Newsletter Section -->
<section id="services" class="small-section bg-gray-lighter">
<div class="container relative">
<form action="YOURACTION;id=YOURID" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div class="row">
<div class="col-md-8 col-md-offset-2" style="text-align: center;">
<div class="newsletter-label font-alt">
¿Te interesa? Recibe más noticias y tutoriales exclusivos
</div>
<div class="mb-20">
<input name="EMAIL" id="mce-EMAIL" placeholder="Introduce tu email" class="newsletter-field form-control input-md round mb-xs-10 required email" type="email" pattern=".{5,100}" required/>
<input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button btn btn-mod btn-border-c btn-medium btn-round mb-xs-10">
</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>
<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_5307a1008b76c5446a7303622_18658ede2a" tabindex="-1" value=""></div>
<div class="form-tip">
<i class="fa fa-info-circle"></i> Pocos emails, pero de calidad. Nunca Spam. Te servirán.
</div>
<div id="subscribe-result"></div>
</div>
</div>
</form>
</div>
</section>
<!-- End Newsletter Section -->
<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]='LNAME';ftypes[2]='text';fnames[3]='MMERGE3';ftypes[3]='dropdown';fnames[4]='MMERGE4';ftypes[4]='phone';fnames[5]='MMERGE5';ftypes[5]='url';fnames[7]='MMERGE7';ftypes[7]='text';fnames[6]='MMERGE6';ftypes[6]='birthday';fnames[8]='MMERGE8';ftypes[8]='text';fnames[9]='MMERGE9';ftypes[9]='radio';}(jQuery));var $mcj = jQuery.noConflict(true);</script>
<!--End mc_embed_signup-->
I am using parsley.js 2.0.2. for client side form validation.
Now I noticed on the Parsley Website that parsley 2.x has dynamic form validation.
I have a form on my page with parsley. It works correctly and does validate. Now on the same page I have a link that dynamically adds a form from an external file. Issue is now parsley.js won't validate the newly added form.
On the parsley website they have an example where one can use JavaScript to validate but I tried it and it does not work. Here is the snippet code of the example:
<script src="jquery.js"></script>
<script src="parsley.min.js"></script>
<form id="form">
...
</form>
<script type="text/javascript">
$('#form').parsley();
</script>
I am aware that the content in the DOM changed but is there a way that I can tell parsley to validate this newly added form or something that will trigger the validation process?
I will appreciate the help!
Thanks
Here is my form on the index.php page (This form does successfully validate):
<form action="server.php" method="post" name="main-form" id="myForm" data-parsley-validate>
<div>
<label for="njsform-name">Name</label>
<input name="name" type="text" id="njsform-name" placeholder="Mike" data-parsley-required="true" data-parsley-minlength="2">
</div>
<div>
<label for="njsform-email">Surname</label>
<input name="email" type="text" id="njsform-email" placeholder="Gates" data-parsley-required="true" parsley-minlength="2">
</div>
<div class="submitWrap">
<input class="submit" type="submit" value="Apply Now" />
</div>
Here is the link that gets the external content
<ul class="services-list">
<li><a class="s-option" href="views/form-short_term_loans.php">My Link</a></li>
</ul>
Here is the code I am using to dynamically change the content (does successfully retrieve external form and populates):
$(document).ready(function() {
var hash = window.location.hash.substr(1);
var href = $('.services-list li a').each(function(){
var href = $(this).attr('href');
if(hash==href.substr(0,href.length-5)){
var toLoad = hash+'.html #form-section';
$('#form-section').load(toLoad)
}
});
$('.services-list li a').click(function(){
var toLoad = $(this).attr('href')+' #form-section';
$('#form-section').hide('fast',loadContent);
$('#load').remove();
$('#intro-section').append('<span id="load">Getting required form...</span>');
$('#load').fadeIn('normal');
window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
function loadContent() {
$('#form-section').load(toLoad,'',showNewContent())
}
function showNewContent() {
$('#form-section').show('normal',hideLoader());
}
function hideLoader() {
$('#load').fadeOut('normal');
}
return false;
});
});
The second form is just a duplicate but the form id is myForm2 and the name second-form
Add a call to
$('#xxxxxx').parsley();
After the load of the new form. With xxxxx the id of the new form inserted in the DOM
I have a form, that is in remote modal window. Here is the modal in index.html:
<a data-toggle="modal" href="contact.html" data-target="#myModal">Contact Me</a>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
</div>
</div>
</div>
Than here is acctual form in contact.html:
<script>
$('#pop').popover({content: 'Message send.'},'click');
</script>
<form id="contactform" method="post" action="data/send_mail.php">
<!--
here is whole form content
-->
<button type="submit" value="Submit" class="btn btn-custom" data-toggle="popover" data-placement="right" id="pop">Send</button>
</form>
Now my problem is: I need to show bootstrap popover after not clicking on the submit button but when the form is really send. I do the validation in browser(no php regular expressions or jQuery validate, simply in browser).
My approach was following (after gathering the data from from and creating message in send_mail.php):
#mail($email_to, $email_subject, $email_message, $headers);
/* Here should be something that will make my popover show, like: echo ('$('#pop').popover('show')');*/
sleep(2);
echo "<meta http-equiv='refresh' content=\"0; url=../index.html\">";
But this second command (in comment does not work). I am total newbie in php, so I try to make my solutions as simple as possible. I hope that I have explained my problem properly.
Thx...
Instead of putting an action to the form you can just leave it blank and do the submit call using jquery.
SCRIPT
This script will be able communicate with your data/send_mail.php and by getting the value from the html input which has an id of name we can pas that as a parameter to the send_mail.php.
<script type="text/javascript">
$('#myButton').on('submit', function(){
var data_value = $('#name').val();
var data_value2 = $('#name2').val();
var data_value3 = $('#name3').val();
var url = 'data/send_mail.php';
$.ajax({
type: "GET",
url: url,
data:{'data_to_pass':data_value,
'second_data': data_value2,
'third_data': data_value3},
success:function(){
$('#pop').popover('show');
}
});
});
</script>
the complete URL will be data/send_mail.php?data_to_pass=data_value
HTML
<form>
<input id="name" type="text" placeholder="input something here" required />
<button id="button" type="button" value="Submit" class="btn btn-custom" data-toggle="popover" data-placement="right" id="pop">Send</button>
</form>
Hope this helps.
I am attempting to post form data to my app using Facebook. My form is integrated with a dialog and I am using form.submit() to submit the form. Please see my code. The post data does not appear on the backend (e.g. load-cargo-radio, city-id, train-id), but the fb_sig* data does. Does anyone know if there are any caveats regarding posting form data with Facebook? Thanks!
Note: I have tried both using my server domain and my fb callback url for the form action. Neither works.
<div id="action_prompt">
Loading cargo...
</div>
<fb:js_string var="fbjs_load_cargo_select">
<div id="load_cargo_select">
<form id="load_cargo_select_form" action="http://railsacrosseurope.com/turn/load_cargo_select" method="POST">
<p>Your train has stopped in the city of Arhus.</p>
<p>Arhus produces the following goods:</p>
<ul>
<li>Dairy</li>
</ul>
<p>Your train is hauling the following goods:</p>
<ul>
<li>Timber</li>
</ul>
<p>What would you like to do?</p>
<input type="radio" id="load_cargo_radio" value="1">Load new goods</input>
<input type="radio" id="load_cargo_radio" value="2">Discard existing goods</input>
<input type="hidden" id="city_id" value="3" />
<input type="hidden" id="train_id" value="15" />
<input type="submit" id="submit" value="Submit" />
</form>
</div>
</fb:js_string>
.
.
.
<script type="text/javascript">
var dialog = new Dialog().showChoice('Load Cargo', fbjs_load_cargo_select, 'Okay', 'Pass');
dialog.onconfirm = function() {
// Submit the form if it exists, then hide the dialog.
frm = document.getElementById('load_cargo_select_form');
if (frm) { frm.submit(); }
dialog.hide();
};
dialog.oncancel = function() {
form = document.getElementById('redirect_form');
form.setAction('http://apps.facebook.com/rails_across_europe/turn/move_trains_auto/');
form.submit();
}
</script>
[/code]
The problem was not with Facebook. The problem was that I left out the "name" attribute for my input elements.