We Keep Coding

How to use information from the URL to click on specific button?

I'm working on a group project for a class, and we have a webpage that is split into different tabs, so it is only one webpage, but appears to be different pages using Jquery so the page doesn't have to reload when switching between tabs. The problem I am having is that one of the tabs has a form to get information from the user, then after the user clicks the submit button, the info is sent to the database using php, causing the page to reload. Then depending on if the information was successfully sent to the database, there will be either "success" or "invalid" appended to the end of the URL. If the user submits this form, we want them to automatically come back to this tab on the reload, and I have tried doing this by using a script like this:
<script>
document.getElementById("baseTab").click();
window.onload = function() {
var theurl = document.location.href;
if (theurl.includes("success") || theurl.includes("invalid") {
document.getElementById("infoTab").click();
}
};
</script>
The baseTab is the tab we want to load whenever someone first loads the webpage, unless they have just submitted the form on the infoTab page. This code structure works on a simple test webpage I run on my computer, but when I try to push it to our project repository, it will only do the "baseTab".click, and not click the "infoTab" button even if theurl includes "success" or "invalid". I tried doing it without the window.onload(), but that doesn't work either. Also, if I do
if (theurl.includes("success") || theurl.includes("invalid") {
document.getElementById("infoTab").click();
}
else {
document.getElementById("baseTab").click();
}
then neither of the buttons get clicked. If their is an easier way to do this or you see where I am going wrong, any help would be appreciated. Thanks!

When does braintree drop in ui create payment method nonce?

I'm trying to integrate Braintree Drop In UI into a meteor app I'm working on. I've gotten the server to create a token for the client to create the drop in container. However I can't get it to create a payment method nonce. I'm using the callback for the nonce is created, but it isn't triggering when I submit.
This is the code for the container.
braintree.setup(response, 'dropin', {
container: 'dropin-container',
onPaymentMethodReceived: function(data) {
Meteor.call('createCustomer', data.nonce);
}
});
And this is the meteor event for submitting the form.
Template.reservePage.events({
'submit #paymentForm': function(event) {
event.preventDefault();
FlowRouter.go('/dashboard');
console.log("submitted");
}
});
Is there supposed to be a method to call to trigger braintree to create a nonce?

(Posted on behalf of the OP).
The issue was that the drop in was wrapped in another form inside the original form that was there. So when I submitted, it didn't register that the form it was in was submitted. Make sure it's only inside the one form!

JavaScript to make AJAX post on click even and then continue on with original action

I am building an A/B Testing Landing Page Plugin for WordPress.
It adds a new Custom Post Type called landingpage to WordPress.
On the landing page admin create/edit screen I have 5 main sections for the A/B Testing functionality:
A/B Test Conversion Rules
A/B Test Variation Winner Rules
A/B Testing settings
A/B Testing Page Variations
A/B Testing Stats
A/B Testing Page Variations
These are the different page content for each version in the A/B Test. Each variation consist of a body text/html and a new title for the page.
When a visitor views the landing page for the first time. A random Variation is selected for them. This variation is then stored in a Cookie so that this user should always see this version of the page when they view this particular landing page.
A/B Test Conversion Rules
These are a set of rules defined in the Admin panel for the page. These determine what will trigger/count a conversion on that page and will record the conversion for the A/B Test Variation that is being served to the visitor when they complete the conversion.
In the admin panel this is what that set of rules looks like. Notice a page can have any number of rules which will all trigger a conversion on that page when the rule is met.
There are currently 3 types of conversion rules:
Form with a Name attribute = _____
Form or Link with a CSS Class attribute = _____
Form or Link with a CSS ID attribute = _____
DEMO: https://jsfiddle.net/jasondavis/88wx3hjz/9/
This is where I need some help. When a user visits a page that has Conversion Rules in the database for that page. I need to generate some JavaScript on that page that will trigger the conversion based on the rules defined for the page.
If there are 2 rules for the page....
1) Link with Class attribute = cta-link-1 is clicked on
2) Form with name attribute = form1 is submitted
Then I need JavaScript for a Click event matching buttons with CSS class = cta-link-1 and a submit event for a Form with a name = form1 to make an AJAX post to the server recording a conversion when either of the 2 actions happen.
It is important for the Form post and link clicks to continue with there original action after making the conversion AJAX post.
My 1st try/demo
This demo attaches a click event handler to clicks on links with a CSS class = cta-link-1
ON click it:
- checks for existence of a flag variable
- if the flag is not set, it makes AJAX post to save a conversion for the page.
- it then sets a flag variable to true so that on next click it will bypass the AJAX save part.
- it then triggers a click on the link again, this time the flag var is seen and bypasses the AJAX part. It should open the link now however my demo does not open the link. If you view console and click my demo link you will see that it does the ajax post and then click the link again with a trigger action and then it does nothing!
// version 1 for click event on class .cta-link-1
$('.cta-link-1').on('click', function (e, options)
{
options = options || {};
/* if options.record_ab_test_conversion_done flag not yet set to true, make AJAX post to record a conversion */
if(!options.record_ab_test_conversion_done)
{
e.preventDefault();
console.log('%c [1-Link Clicked] - Make AJAX post to save conversion', 'background: #222; color: #bada55');
var pageData = {
pageId: '123456789',
abTestVariation: '2'
};
$.ajax({
url : 'https://posttestserver.com/post.php?dir=jason',
type: 'POST',
data : pageData,
//dataType : 'json',
success: function(data, textStatus, jqXHR)
{
//data - response from server
console.log(data);
// retrigger the click event with record_ab_test_conversion_done set to true so that this code will
// run again but next time will bypass the AJAX conversion saving part
$(e.currentTarget).trigger('click', {
'record_ab_test_conversion_done': true
});
},
error: function (jqXHR, textStatus, errorThrown)
{
}
});
/* if options.record_ab_test_conversion_done flag is set to true, carry on with with default action */
}else{
/* allow default behavior to happen */
console.log('%c [2-Link Clicked] - Triggered from AJAX success so this click should not record a conversion and should instead open the link as normal!', 'background: #222; color: #bada55');
return true;
}
});
DEMO: https://jsfiddle.net/jasondavis/88wx3hjz/9/
So I need help with making my demo work 100%
Right now a click makes the AJAX post and re-triggers a click which skips over the AJAX post on the second click. For some reason though this 2nd click does not follow and open the link.

Try the following:
$('.cta-link-1').on('click', function (e, options)
{ var el = $(this);
...
success: function(data, textStatus, jqXHR)
{
if (el.is('a')) {//links
window.location = el.attr('href');//redirect to the intended url
} else {//forms
el.closest('form').submit();//submit that form
}
},

Routing is not working in an Angular and nodejs application

Basically i am not a JS developer. But for an application i am using angularjs as front end and nodejs as a backend.
In angularjs i have written a form that needs to be filled by a user, once user fills that form he can submit it using submit button. On submit button click event i have written below code.
<div class="submit" align="center">
<input type = "submit" value="Submit !" ng-click="addResume()">
</div>
Where addResume() is a function declared inside angular controller as below -
$scope.addResume = function(){
console.log($scope.resume);
$http.post("/Resume", $scope.resume);
};
This function will call a function on node js server.
That will simply print the request fields and route on the success.html page. Please see below code for this--
app.post('/Resume',function(req,res, next){
console.log(req.body);
// res.render(path.join(__dirname)+'/views/success.html');
next();
})
Now the problem i am facing is that i am able to get the data submitted through the angular form but application doesn,t move to the success page i tried both the options res.render and next() but not able to flow to success page.
Please help me out on this issue.

Your doing an Ajax request, ajax request doesn't load pages that you're redirecting at.
If you want to move on the next page you have to do it from client-side :
$http.post("/Resume", $scope.resume).then(function(response){
// success move to next page here
}, function(rejection){
// handle failure
})
Another way would be to call the submit form function, so your form is submitted natively, however data won't be send as json to the server they'll be send with the classic query string format in the request body.

Staying on same page after the form is submitted and then process the form again

I'm integrating Marketo (3rd party marketing software) with one of our tools on our website.
There is a form that calls an action "http://info.a10networks.com/index.php/leadCapture/save" after it is submitted and the form data is saved into Marketo:
<form
class="lpeRegForm formNotEmpty"
method="post"
enctype="application/x-www-form-urlencoded"
action="http://info.a10networks.com/index.php/leadCapture/save"
id="mktForm_1225"
name="mktForm_1225">
I want to use the same form data to store it in local database(MySQL) too. Ideally, I'd like to load the same page after the form data is sent and also store this form data locally.
Is there a way to perform the following actions:
the form action is called and the data is sent to an external
database
load back the same page and store this form data locally into the database (be able to use $_POST)
I'm using PHP and plain javascript for this integration. Please advise.

You can do this using an ajax call to your own scripts, then submitting the form to marketo.
Essentially if you want to capture the data before its sent off to a remote server for processing you'll capture the data first then allow the form to submit and do its intended processing afterwards.
Here we capture the click of the form, then make sure to disable the button by adding a class to it. So that it won't let the user do multiple clicks before the processing is done. When its done gathering the information and sending if off to your php page it submits the form it its action property.
In this example I grab the value from an input that has the name property set to firstName, this value will be sent over to my PHP script and because I chose a type of POST i can see it in my as
$_POST['firstName']
to debug your post paramters to see what the data looks like so this in your receiving PHP script
echo '<pre>', print_r($_POST, true), '</pre>';
this will give you a display of the data captured.
<script type="text/javascript">
$(document).ready(function() {
$('.formSubmitButton').on('click', function(e) {
e.preventDefault();
if (!$('.formSubmitButton').hasClass('submitted'))
{
// disable the form to prevent multple clicks
$('.formSubmitButton').addClass('submitted');
$.ajax('/path/to/my/db/script', {
type: 'post',
data:{
firstName: $('[name="firstName"]).val(),
lastName: $('[name="lastName"]).val()
}
}).done(function(data) {
$('.parentForm').submit();
// enable the form
$('.formSubmitButton').removeClass('submitted');
});
}
return false;
});
});
</script>