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.
Related
I am coding an web application which has PayPal button, HTML form and HTML button. In my web application I am using HTML, CSS, JavaScript and Python Flask in the back-end.
Firstly the user of the web application is supposed to make a payment via PayPal. Secondly after the successful payment the HTML submit button appears and the user is allowed to submit the HTML form to make a database query. Thirdly the database query results are shown to the user and HTML button is supposed to disappear.
How should I make this HTML button appear and disappear correctly? I am trying to prevent that the users of my web application are not able to make my HTML button visible without paying? Are users for example able to make HTML button visible by injecting CSS or JavaScript?
I made my first version of the web application in the following way below: Firstly the HTML button is hidden (CSS) and secondly when the PayPal payment is made the JavaScript function makeButtonVisible() makes the HTML button visible. Thirdly the HTML button disappears when Python Flask renders the website again and shows the database query results.
CSS
#html-button {
visibility: hidden;
}
JAVASCRIPT
var CREATE_PAYMENT_URL = 'http://127.0.0.1:5000/payment';
var EXECUTE_PAYMENT_URL = 'http://127.0.0.1:5000/execute';
paypal.Button.render(
{
env: 'sandbox', // Or 'sandbox'
commit: true, // Show a 'Pay Now' button
payment: function () {
return paypal.request.post(CREATE_PAYMENT_URL).then(function (data) {
return data.paymentID;
});
},
onAuthorize: function (data) {
return paypal.request
.post(EXECUTE_PAYMENT_URL, { paymentID: data.paymentID, payerID: data.payerID })
.then(function (res) {
console.log(res.success);
makeButtonVisible();
// The payment is complete!
// You can now show a confirmation message to the customer
});
},
},
'#paypal-button',
);
function makeButtonVisible() {
document.getElementById('html-button').style.visibility = 'visible';
}
PYTHON FLASK
return render_template("index.html")
A secure design captures the payment on the server side and then allows the payer to proceed with whatever action.
You'll need two routes that return JSON, one for 'Create an Order' and one for 'Capture Order', documented here. There is a Checkout-Python-SDK you can use.
Pair your two routes with the following front-end UI for approval: https://developer.paypal.com/demo/checkout/#/pattern/server
Once capture is successful (and recorded as such in your server database before returning the success JSON to your client), there are various ways you can proceed with using JavaScript to "unhide" or display a form. Since the capture occurred on a server, you'll be able to use that fact to validate form submission against an actual payment record existing in your database, and reject it otherwise.
If possible you'll also want to update the URL so the user can refresh the page or come back to it later and still be able to submit a form for that payment.
I have a html form on my page. Im using a php file to send an email from the form, and after a successful email send its redirects back to the html form.
After that i want to fade in a bootstrap success-alert.
Is there any event that can handle this or anyway to solve this problem?
This is my JS now, but its dont run because if I hit the send button, its call the php file.:
<script type="text/javascript">
$(document).ready(function() {
$('#btnSubmit').click()(function(){
$('#myAlert').show('fade');
});
});
</script>
I'm assuming you need show alert after the form request is processed and page is redirected to original form page, In that case You need to pass some parameter as a flag in query string while redirecting from server side. On form page you need to check for that flag and show alert.
On server side while redirecting
header("Location:form_page.php?status=success");
On form page
$status = $_GET['status'];
Assign value of $status to js variable and show alert.
Use ajax to achieve that.
Catch the submit event with
$("#btnSubmit").submit(function(){//your ajax});
In the success do your $('#myAlert').show('fade');
You have a good example here : How to submit html form without redirection?
Im trying to track when a user hits the submit button on a contact form.
The page's URL doesn't change, its static.
I can't track a differnt URL after submission, the only option would be to track when a user hits the submit button.
Do I need to edit my analytics account?
Where do I add the additional javascript?
UA is installed correctly (analytics.js)
I'm new to GA and javascript so please break it down for me.
Thanks
I can't track a differnt URL after submission, the only option would be to track when a user hits the submit button.
That is a bit of a non sequitur. Even when the Url does not change there is probably some stuff happening - before you send it there is probably some form validation, and there is some action behind the scene to send there form, like e.g an ajax call.
You could attach event tracking to a submit handler:
<form onSubmit="ga('send','event','category','action','label')">
<input type="text" id="text" name="text">
<input type="submit">
</form>
However this would just tell you that somebody hit the submit button, not if they filled in the form correctly or if the form actually has been sent.
Now I enter speculation land, because I do not know how your form actually works - maybe you can show us an url or give more information.
But maybe you have a validation function that is called on the submit action of the form to see if the form is filled in correctly. In that case it would be advisable to do the tracking in the validation function (horribly simplified example, not production code):
<form onSubmit="validate()"><input type="text" id="text" name="text"><input type="submit"></form>
<script>
function validate() {
var test = document.querySelector('#text').value
if(test = "") {
ga('send','event','Form','Submit','Submitted, but not filled in');
return false;
}
ga('send','event','Form','Submit','Submitted with correct values');
return true;
}
</script>
That's a tad better, at least it tracks the difference between correct submissions and invalid submissions.
Even more speculation: If your form is sent without page reloads it uses probably an ajax call, and there is a huge probability that is uses jQuery (I say that because a) it really is probable and b) it's easier to construct an example in jQuery. The same can be achivied with other libraries or in native JS, but the example will produce an error if you do not use jQuery).
jQuery has a thing called "global ajax handlers". "Global" means they are not callbacks for a specific action, they hook into jQuerys ajax "mechanism" whenever a call to an ajax function is made. The following might work if you have only one aja event per page (else you need logic to distinguish the different ajax event e.g, by checking the url they are being send to), and allows you to track if the ajax call has returned successfully, like when your form data has been send to the server and the request return a 2xx status code:
$(document).ajaxSuccess(function() {
ga('send','event','Form','Submit','Yeah, form data sent to the server');
});
However this does not tell you if the data has been processed correctly. For that you need to make the server emit a success message and check the response:
$( document ).ajaxSuccess(function( event, xhr, settings ) {
if ( settings.url == "formprocessor.php" ) {
if(xhr.responseText.indexOf("success") > -1) {
ga('send','event','Form','Response Received','Form data processed ');
} else {
ga('send','event','Form','Response Received','Form data NOT processed ');
}
}
});
The global ajax event handler is attached to the document - you can put that anywhere on your page, it will do nothing unless an ajax event was called.
Again, this is not production code. Do not try to copy and paste.
This was certainly a bit much if you are new to this, but it should at least help you to improve the question and to see what kind of things are possible. If you can share an Url to your form I can possibly improve the answer.
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>
I have a main search page with a find and enquire button.
When I click the enquire button. I open a modaldialog window and allow user to enter his name and I'd and hit submit. I transfer the call to a servlet and query is db. If the response takes longer than 30 sec. I forward the request back to the modal page and resubmit the form.
When I forward the request back to the modal window to resubmit I get a script error. The script error occurs before the form.Submit. Am I doing something wrong in forwarding the request. Back.
Edited:
File1.jsp: I call File2.jsp on a button click
returnVal= showModalDialog ( "File2.jsp?Name=Jack" , "" , "dialogWidth:650px;dialogHeight:400px" );
In File2.jsp:
<form name="Refresh" action="<%=contextPath%>/Someservlet" id="Refreshing" method="post" target="result">
I have a name field here with a button to submit
set a hidden param request_old ='N'
</form>
On submitting the button:
In Somservlet.java
I get the parameter
Call a threadpool executor
if request_old ='N' I execute the TPE
else I just wait for response
Wait for 10 sec for response from db
If response did not come back: I set a param
request_old ='Y'
and send it back to the calling
request.getRequestDispatcher("File2.jsp?Name=Jack").forward ( request, response );
So this should resturn the call back to File2.jsp
But somewhere before File2.jsp's form.submit--> I get a script error Object not found
Error:
Object expected
under url it shows my context path with the servlet name.
What confuses me is whether the showmodal dialog is not able to re-submit, or is there an issue in the servlet calling the jsp?
I have been trying to figure this one for 3 days now. any help appreciated.
Web.xml mapping is correct
re-direction happens with a weird script error. I am executing this in IE (using js and servlet)
RE-wrote the files from scratch to make it works. Issues with one of the supporting js files was the cause.