-- EDIT: This turns out not to be a js issue but a "Mixed Active Content" issue in Firefox 24.0. --
Locally, an event handler correctly intercepts a form submission; however, on Heroku, the application instead issues an HTTP request and the appropriate Javascript function is never called.
My webpage has the following Javascript:
<script id="infrastructure-cxn" type="application/javascript">
$(function () {
// [additional code ... ]
$("#message-form").submit(function (event) {
event.preventDefault();
var msg = $("#msg-input").val();
var msgObject = { text: msg };
server.publish(channel, msgObject);
});
});
</script>
My webpage has the following form:
<form id="message-form" accept-charset="UTF-8">
<!-- [additional code ...] -->
<div class="field">
<input
id="msg-input"
type="text"
placeholder="Enter message..." />
</div>
<input
class="btn btn-xs btn-primary"
type="submit"
value="Send" />
</form>
Could anyone offer any suggestions as to how I can fix my application so that in production it doesn't issue either GET or POST requests but instead calls the anonymous function in my event handler?
Related
I have a javascript/ajax based contact form on a website page. If people click to send the form, I want this click to be registered by Google Analytics. I created a goal for this, for some reason I cannot get it to work. Any help?
The code of the form is:
<form id="footer_quick_contact_form" name="footer_quick_contact_form" class="quick-contact-form" action="includes/quickcontact.php" method="post">
<div class="form-group">
<input id="form_email" name="form_email" class="form-control" type="text" required="" placeholder="E-mail">
</div>
<div class="form-group">
<textarea id="form_message" name="form_message" class="form-control" required placeholder="message" rows="3"></textarea>
</div>
<div class="form-group">
<input id="form_botcheck" name="form_botcheck" class="form-control" type="hidden" value="" />
<button type="submit" class="btn btn-default btn-transparent text-gray btn-xs btn-flat mt-0" data-loading-text="One moment please...." onClick="ga('send', 'event', { eventCategory: 'Contact', eventAction: 'ContactRequest'});">Verstuur nu!</button>
</div>
</form>
<!-- Quick Contact Form Validation-->
<script type="text/javascript">
$("#footer_quick_contact_form").validate({
submitHandler: function(form) {
var form_btn = $(form).find('button[type="submit"]');
var form_result_div = '#form-result';
$(form_result_div).remove();
form_btn.before('<div id="form-result" class="alert alert-success" role="alert" style="display: none;"></div>');
var form_btn_old_msg = form_btn.html();
form_btn.html(form_btn.prop('disabled', true).data("loading-text"));
$(form).ajaxSubmit({
dataType: 'json',
success: function(data) {
if( data.status == 'true' ) {
$(form).find('.form-control').val('');
}
form_btn.prop('disabled', false).html(form_btn_old_msg);
$(form_result_div).html(data.message).fadeIn('slow');
setTimeout(function(){ $(form_result_div).fadeOut('slow') }, 6000);
}
});
}
});
</script>
As you can see I added an on-click event to the send button. In google analytics I created a goal, by going to admin>goals>new goal>custom radio button>next. I gave the goal a name, selected the Event radio button and filled in the following fields:
Category: Contact
Action: ContactRequest
Label: Empty
Value: Empty
I thought I'd have fixed it, but until now I can't track any results in GA. Any suggestions?
After reading your comment it would seem the problem is that you are using the wrong syntax in your click event handler.
You are calling the ga() function, which is a part of the Universal Analytics Code, which for some time now has been replaced by gtag.js.
I do not usually use gtag.js (I prefer to use Google Tag Manager), but according to the documentation the correct call would look like this:
gtag('event', 'contact_request', { // second parameter is event action
'event_category': 'contact',
'event_label': '',
'value': 0
});
(Actually you can leave out label and value if you do not need them).
I have a html page through which I am sending data to PHP through ajax but the code is not working.
HTML
<form name='tip' method='post' action=''>
Tip somebody: <input name="tip_email" id=tip_email type="text" size="30" />
<input type="submit" value="Skicka Tips" />
<input type="hidden" id="ad_id" name="ad_id" />
</form>
<script>
$('#submit').click(function() {
event.preventDefault();
$.ajax({
url: insertdata.php,
type: 'POST',
data: {
tip_email: $('#tip_email'),
ad_id: $('#ad_id')
},
success: function(res) {
if (res == 'successful') {
alert("successful");
} else {
alert("failed");
}
},
error: function() {
$('#status').html('Failed').slideDown();
}
});
});
</script>
PHP
<?php
echo "successful"
?>
I have tried various available options on stackoverflow but none of them is working.
enter image description here
Uncaught ReferenceError: $ is not defined
$('#submit').click(function()
Still not working
But when I am including the above script to code it is going in infinite loop and throwing error as "Uncaught RangeError: Maximum call stack size exceeded"
I have done three changes in my existing code.
1) Added script src
I have also tried adding other similar scripts but all showing same error
that means there is some issue with code itself.
2)Added event to statement
$('#submit').click(function(event)
3)placed php in single quotes
url: 'insertdata.php'.
please do correction in code as
1.) add script to below your form close - <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
2.) add id in submit button - <input type="submit" id="submit" value="Skicka Tips" />
Add jquery first to before starting your script. It is not loaded that's why $ is not defined error came.
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
And You are not passing the event object here
$('#submit').click(function() {})
Add it in your code
$('#submit').click(function(event) {});
Or remove the submit type from your input button as
<input type="button" value="Skicka Tips" />
First off, there is no event passed in your
$('#submit').click(function(){})
You'd have to change that to
$('#submit').click(function(event) {})
to work.
Secondly, your
<input type="submit" value="Skicka Tips" />
has no id so jQuery cannot find it using the # identifier.
You either have to change that to
<input type="submit" id="submit" value="Skicka Tips" />
or use the onsubmit event with the form.
Im trying to build a login and registration form using jquery, ajax and php. But im getting this error when im pressing the button for registration.
<!-- Formular for signing up -->
<form method="post">
<div class="form-group">
<label> Username </label>
<input type="text" class="form-control" name="newusername">
</div>
<div class="form-group">
<label> Password </label>
<input type="password" class="form-control" name="newpassword">
</div>
<div class="form-group">
<label> Your club </label>
<input type="text" class="form-control" name="newclub">
</div>
<button type="button" onClick='reg' class="btn btn-success">Sign up!</button>
</form>
And here is my script code
$(document).ready(function () {
// Function for registrate of new users
function reg(newusername, newpassword, newclub) {
$.post('class/callingClass.php', {
newusername: 'newusername',
newpassword: 'newpassword',
newclub: 'newclub'
});
};
});
Functions called from onXYZ attribute event handlers must be globals (it's one of the several reasons not to use them). Your reg function isn't a global, it's nicely contained within your ready callback (which is a Good Thing™, the global namespace is already really crowded and prone to conflicts).
Separately, onClick='reg' wouldn't work, it would have to be onClick='reg()'.
Instead, hook reg up dynamically via on:
<button type="button" id="btn-reg" class="btn btn-success">Sign up!</button>
<!-- Removed onClick, added id -->
and
$(document).ready(function () {
$("#btn-reg").on("click", reg); // <== Added
// Function for registrate of new users
function reg(newusername, newpassword, newclub) {
$.post('class/callingClass.php', {
newusername: 'newusername',
newpassword: 'newpassword',
newclub: 'newclub'
});
};
});
I've used an id above, but it doesn't have to be an id, that's just one way to look up the element. Any CSS selector that would find it would be fine.
Use onClick='reg()'. You need to do the function call here, which is the proper syntax.
Update : You also need to move your function outside of the $(document).ready(function(){}).
I am trying to create a post form in HTML using a RESTful express route, something akin to /game/:gameID/node/:nodeRow/:nodeCol/update to update a given node in a given game.
Here's the route code:
app.post("/game/:gameID/node/:nodeRow/:nodeCol/update", function(request, response) {
gameHandler.updateNode(request, response)
});
The reason I'm doing this in HTML is because I haven't created the functionality yet in the actual client (mobile game) so I need something to test it. However, I have not figured out how to make the HTML form so that I can enter the data in the form to replace :gameID, :nodeRow, and :nodeCol without just going to the URL manually, like /game/3/node/2/5/update.
This is a post request and I would like other data to be contained in the form to specify the property to update as well as the new value.
How can I do this, or am I thinking about it wrong?
Edit:
Changed the question title to be more useful.
Try
app.post("/game/:gameID/node/:nodeRow/:nodeCol/update", function(request, response) {
console.log({gameID: request.params.gameID, nodeRow: request.params.nodeRow,nodeCol: request.params.nodeCol, body: request.body});
response.send({gameID: request.params.gameID, nodeRow: request.params.nodeRow,nodeCol: request.params.nodeCol, body: request.body});
});
Sorry I misunderstood your question. I thought you are having difficulties in parsing node parameters in node.
Anyway, there are different ways you can achieve this. Of course you need support of javascript, either pure javascript or jQuery.
Here is an example
<form id="myform">
<input name="gameID" id="gameID" />
<input name="nodeRow" id="nodeRow" />
<input name="nodeCol" id="nodeCol" />
<button name="action" value="bar" onclick="submitForm();">Go</button>
</form>
and javascript (using jQuery) will be
<javascript>
function submitForm(){
$("#myform").attr('action',
'/game/' + $("#gameID").val() + '/node/' + $("#nodeRow").val()
+ '/' + $("nodeCol").val() + '/update');
$("#myform").submit();
}
</javascript>
The way to pass data in a POST request is to push it from the html form controls and retrieve the values from the body of the request. The HTML below defines a form with your variables which you can hand-key from a browser:
<html><body>
<form method="post" action="/game/update" role="form">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">gameID</span>
<input type="text" class="form-control" name="gameID" placeholder="<gameID>" value="123456">
</div>
</div>
<div class="input-group">
<span class="input-group-addon">nodeRow</span>
<input type="text" class="form-control" name="nodeRow" placeholder="<nodeRow>" value="1">
</div>
</div>
<div class="input-group">
<span class="input-group-addon">nodeCol</span>
<input type="text" class="form-control" name="nodeCol" placeholder="<gameID" value="1">
</div>
</div>
<hr>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</body></html>
Then you can write a handler along the lines of what's below. Clicking submit will fire the POST request off, and pulling the variables out of the request body can be done as shown below.
app.post("/game/update", function(request, response) {
updateNodeHandler(request, response)
});
function updateNodeHandler(request, response) {
var nodeID = request.body.nodeID;
var nodeRow = request.body.nodeRow;
var nodeCol = request.body.nodeCol;
// Additional logic goes here...
}
I have a simple form with 2 input fields and one button. When the button is clicked, the value of the 2 input fields should be sent to the AJAX function to be handled in a servlet. For some reason, the servlet is not being reached. Can anyone see why? I have an almost identical method working with a different form, and I can't see why this one isn't working.
Here is the HTML form code:
<div id="addCourses" class="hidden" align="center" >
<form id="addCourse" name="addCourse">
<input type="text" id="courseID" name="courseID" value="courseID" size="40" /><br />
<textarea rows="5" cols="33" id="courseDesc" name="courseDesc">Description</textarea><br />
<input type="button" value="Add Course" onclick="addCourse(this.courseID.value, this.courseDesc.value);"/>
</form>
</div>
Here is the Script function:
<script type ="text/javascript">
function addCourse(id, descr)
{
var fluffy;
fluffy=new XMLHttpRequest();
fluffy.onreadystatechange=function()
{
if (fluffy.readyState==4 && fluffy.status==200)
{
//do something here
}
};
fluffy.open("GET","ajaxServlet?courseID="+id+"&courseDescription="+descr,true);
fluffy.send();
}
</script>
Because this is the button and not the form
so
this.courseID.value
this.courseDesc.value
returns an error.
You should use
this.form.courseID.value
this.form.courseDesc.value
Second problem is you have a name clash. The form and function are named addCourse. It will lead to problems. Rename one of them to be different.
Running Example
When you use this, as in onclick="addCourse(this.courseID.value, this.courseDesc.value);", I think that would refer to the input element, and therefore the values aren't being passed correctly.
Bind your event handlers in javascript, where they should be, and you can avoid the issue entirely.
HTML:
<input type="text" id="courseID" name="courseID" value="courseID" size="40" /><br />
<textarea rows="5" cols="33" id="courseDesc" name="courseDesc">Description</textarea><br />
<input type="button" id="addCourse" value="Add Course"/>
JS:
document.getElementById('addCourse').onclick = function () {
var fluffy = new XMLHttpRequest();
var id = document.getElementById('courseID').value;
var descr = document.getElementById('courseDesc').value;
fluffy.onreadystatechange=function() {
if (fluffy.readyState==4 && fluffy.status==200) {
//do something here
}
};
fluffy.open("GET","ajaxServlet?courseID="+id+"&courseDescription="+descr,true);
fluffy.send();
};
As epascarello pointed out, you need to change the ID of your form as having two elements with the same ID is not allowed and will cause unpredictable javascript behavior.
Try a fluffy.close; after the if ready state expression.