Not entering into click function - javascript

The control is not passing into click event so can anyone please suggest whats wrong with the code below and any tutorial on this wil be of great help.
Code:
<html>
<head>
<script src="jquery-1.9.1.js"></script>
<script type="text/javascript">
$("#submit").click(function(event)
{
alert("hi");
$.ajax({
type : "POST",
url : "https://xxxxx/xxx.php",
data : {"email": "jason.charity#icloud.com", "password": "people4455!", "application":"rex"},
success : function(response) {
data = jQuery.parseJSON(response);
console.log(data);
}
});
</script>
</head>
<body>
<form id="myForm">
<input type="submit" id="submit" value="submit">
</form>
</body>
</html>

Two issues:
You're missing }); from the end of your code, so it has a syntax error. (I didn't realize that until I went to run your code through http://jsbeautifier.org/ so I wasn't posting a mess below. Which shows the value of making sure you use reasonable, consistent code formatting!)
(If you fix that.) When you do your $("#submit"), the element doesn't exist yet, and so that doesn't match any elements. Just move the script block below the element in the HTML (this is generally the recommendation, put your script just before the closing </body> tag).
Fixing both:
<html>
<body>
<form id="myForm">
<input type="submit" id="submit" value="submit">
</form>
<script src="jquery-1.9.1.js"></script>
<script type="text/javascript">
$("#submit").click(function (event) {
alert("hi");
$.ajax({
type: "POST",
url: "https://xxxxx/xxx.php",
data: {
"email": "jason.charity#icloud.com",
"password": "people4455!",
"application": "rex"
},
success: function (response) {
data = jQuery.parseJSON(response);
console.log(data);
}
});
}); // <== This was the missing bit
</script>
</body>
</html>
Side notes:
If your server responds with the correct content type, you don't need parseJSON in your success handler; jQuery will automatically parse the JSON if the server says that's what it is.
Using a doctype is a really, really, really, really good idea. Put <!doctype html> at the top of the document.

Wrap your function within document.ready function:
$(document).ready(function(){
//your code here
});
Or,
$(function(){
//your code here
});
And also you are missing }); at last line of code which would throw an error as mentioned by #T.J. Crowder

you can also use recommended approach, i.e. event delegation on document
$(document).on("click","#submit",function(event)
{
alert("hi");
$.ajax({
type : "POST",
url : "https://xxxxx/xxx.php",
data : {"email": "jason.charity#icloud.com", "password": "people4455!", "application":"rex"},
success : function(response) {
data = jQuery.parseJSON(response);
console.log(data);
}
});
});

Put your click into
$(document).ready(function(){
$("#submit").click(function(event)
{
alert("hi");
$.ajax({
type : "POST",
url : "https://xxxxx/xxx.php",
data : {"email": "jason.charity#icloud.com", "password": "people4455!", "application":"rex"},
success : function(response) {
data = jQuery.parseJSON(response);
console.log(data);
}
});
});

<script type="text/javascript">
$(document).ready(function(){
$("#submit").click(function(event){
alert("hi");
$.ajax({
type : "POST",
url : "https://xxxxx/xxx.php",
data : {"email": "jason.charity#icloud.com",
"password": "people4455!", "application":"rex"},
success : function(response) {
data = jQuery.parseJSON(response);
console.log(data);
}
});
});
});
</script>
you missed closing "});", Try this script.

Related

Can we have an Ajax Call inside Marketo Load script

Is it possible to call an Ajax from the Marketo script? Like the below given code.
I would need an ajax call as
I want to pass the Marketo Form values to a php file
then use the values to do some calculation
then to display the results on the page
<script src="//xxxxx.marketo.com/js/forms2/js/forms2.min.js"></script>
<form id="mktoForm_1"></form>
<script>
MktoForms2.loadForm("//aqq-abc.marketo.com", "xxx-XXX-xxx", id1, function(form) {
form.onSubmit(function() {
var vals = form.vals();
$.ajax({
type: "POST",
url: "http://localhost:3422/wordpress/wp-content/plugins/calM/new_generate.php",
data: {Value1:val[0],Value2: vals[1]},
success: function( data ) {
alert(data);
},
error: function( err ) {alert("Some thing went wrong! Please try again with your values.");}
});
});
});
This should work fine in principal. Depending on what you're trying to do onValidate may be a better callback event to use.
Yes I am able to call an ajax from Marketo Script. Need to add the jQuery lib too for this. The below is the complete working snippet.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//xxxxx.marketo.com/js/forms2/js/forms2.min.js"></script>
<form id="mktoForm_1"></form>
<script>
MktoForms2.loadForm("//aqq-abc.marketo.com", "xxx-XXX-xxx", id1, function(form) {
form.onSubmit(function() {
var vals = form.vals();
$.ajax({
type: "POST",
url: "http://localhost:3422/wordpress/wp-content/plugins/calM/new_generate.php",
data: {Value1:vals.Email,Value2: vals.Phone},
success: function( data ) {
alert(data);
},
error: function( err ) {alert("Some thing went wrong! Please try again with your values.");}
});
});
});

how to print data sent by ajax post method in javascript

I need to post data and display it also. I am using ajax post method. I am able to get the event Id where data is saved, but not able to display the data. I searched a lot and got some answer also. I tried it in my code, but didn't got the result. My code is:
<!DOCTYPE html>
<html>
<head>
<title>POST API</title>
<script type="text/javascript" src="http://ajax.googleapis.com /ajax/libs /jquery/1.2.6/jquery.js"></script>
</head>
<body>
<button id="btn1">Check HTTP POST</button>
<p>Display sample output from POST API:</p>
<p id="one" />wEventId :
<p id="two" />
<script>
$(document).ready(function() {
$("#btn1").click(function() {
$.ajax({
url: 'url',
dataType: 'json',
type: 'POST',
crossDomain: true,
contentType: 'application/json',
data: {},
success: function(data) {
console.log(data);
document.getElementById("two").innerHTML = data.result.wEventId;
},
failure: function(errMsg) {
console.log(errMsg);
}
var myData = data;
myData = new Array;
});
});
});
</script>
</body>
</html>
Anyone please help me how to modify the code to print the data saved. I have not given the url as it is an internal server and supposed not to disclose it. Thanks in advance.
First I need to know, what is the structure of your json data.
Assuming that it is in a format like given below:
{"field_A":"value_a","field_b":"value_b"}
your code where you are trying to print as innerHTML should be like this:
success: function(data)
{
console.log(data);
document.getElementById("two").innerHTML = data.field_A;
},
Try to adjust accordingly.
I am still surprised from where are you getting the result of data.result.wEventId

file_put_contents with jquery reload?

I currently have a problem with php and javascript. Here is the thing : I'm trying to edit every few second a text file stored on the server, with the text the client wrote in a textarea (which id is 'area1')
The PHP :
<span id="write">
<?php
if(isset($_POST['text']))
{
file_put_contents('file.txt', $_POST['text']);
}
?>
</span>
The Javascript :
window.onload = function(){
t = setInterval(load, 2000);
function load()
{
$.ajax({
type: "POST",
url: "test.php",
data: {
text: $('#area1').val()
},
dataType: "text",
success: function(data) {
$('#write').load('test.php #write');
}
});
}
}
Nevertheless, nothing is ever written in file.txt, even if we enter the isset condition (that I tested).
Why isn't it working ? Can't we use jquery load with file_put_contents ? Or maybe it is a silly mistake that I can't see...
Thank you !
Have you tried using $.post? It is simpler and clearer.
Below is the full working code.
<html>
<head>
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
</head>
<body>
<form>
<textarea id="area1"></textarea>
<textarea id="write"></textarea>
</form>
<script>
$(document).ready(function(){
t = setInterval(load, 2000);
function load()
{
$.post( "test.php", { text: $('#area1').val() })
.done(function( data ) {
$('#write').load('test.php #write');
});
}
});
</script>
</body>
</html>
And also make sure your php script has a privilege to add files.
Use (sudo) chown apache *folder* or similar.
Good luck!

Echoing to the screen using AJAX PHP

I'm trying to write a short ajax code to echo the word 'hello' to the screen, but so far I'm not having any luck. If anyone know what I'm doing wrong, please correct me, and let me know. Thank you.
test6.html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type = "text/javascript">
function myAjax() {
$.ajax({
type: "POST",
url: 'testing.php',
data:{action:'call_this'},
error: function(xhr,status,error){alert(error);},
success:function(html) {
alert(html);
}
});
}
</script>
echo hello
testing.php
<?php
if($_POST['action'] == 'call_this') {
echo "hello";
}
?>
I made some little changes to your code, like adding quotes for 'action', and creating a button because <A HREF has some issues with click event (buttons don't have those issues), here it is, now it works to me, let me know if it works to you too :
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type = "text/javascript">
function myAjax () {
$.ajax( { type : 'POST',
data : {'action':'call_this'},
url : 'testing.php',
success: function ( data ) {
document.getElementById( "my_div" ).innerHTML = data;
},
error: function ( xhr ) {
alert( "error" );
}
});
}
</script>
</head>
<body>
echo hello
<br/><br/>
<button onclick="myAjax()">echo hello</button>
<br/><br/>
<div id="my_div"></div>
</body>
</html>
You have two problems. First, you have a syntax error. You need a comma after error:
function myAjax() {
$.ajax({
type: "POST",
url: 'testing.php',
data:{action:'call_this'},
error: function(xhr,status,error){alert(error);} /* this comma --> */ ,
success:function(html) {
alert(html);
}
});
}
Second, since you are using an anchor (<a>) tag, when you click on the tag it follows the link. You have to prevent that from happening. You can:
Not use an <a> tag
Put a href to something like # or javascript:void(0)
Make the function it calls return false
Use event.preventDefault
See it on JSFiddle
Edit:
On a side note, you may prefer to just use JavaScript to bind the event handler. This way you get a further separation of JS and HTML, which is typically preferred. Something like this should work:
$("#sendAjax").click(function(event) {
event.preventDefault();
$.ajax({
type: "POST",
url: '/echo/html/',
data:{html:'call_this'},
error: function(xhr,status,error){alert(error);},
success:function(html) {
console.log(html);
$("#result").text(html);
}
});
});
Then in your HTML you don't need the onclick handler:
echo hello
See it on JSFiddle

Posting a form with jQuery and want to change the submit button after click

Posting a form with jQuery and want to change the submit button after click.
Here's the code I'm using :P but did not work!
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#button").click(function(){
$("#button").submit(sendForm)
});
function sendForm() {
$.post('post.cfm',$("#button").serialize(),function(data,status){
$("#result").html(data)
});
return false
}
$("#button").html("Friend request sent");
});
});
</script>
</head>
<body>
<form id="button">
<input type="submit" value="Add as a friend">
</form>
You could try this:
var sendForm = function() {
$.post('post.cfm',$("#button").serialize(),function(data,status){
$("#result").html(data)
});
var request = $.ajax({
type:'POST',
dataType:'json',
url:'post.cfm',
data:{
data: $('#button').val()
},
success:function(data){
console.log(data);
// Do something
},
error:function(data){
console.log(data);
// Do something
}
});
request.done(function(data){
alert("Friend request sent");
});
return false;
}
$(document).ready(function(){
$("#button").click(function(){
$("#button").submit(sendForm)
});
Try something like this:
$(document).ready(function(){
// #button is your form's id, it's confusing
$('#button').on('submit', function(e){
e.preventDefault();
var form = $(this);
$.post('post.cfm', form.serialize(), function(data){
$("#result").html(data);
form.find(':submit').val("Friend request sent");
});
});
});
Also, add some inputs (text boxes as form data to post) in the form and give your submit button a name/id (better) and yes, you asked what the hell that message was, it was because you didn't provide enough information but only some code so, StackOverflow asked to provide more information so anyone could have understood the problem and as a result you would be benefited. Anyways, read the documentation properly, you need to learn the basic first and this is not a tutorial site.

Categories