We Keep Coding

ajax php java script integration not working

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.

How to transfer a file type from Coldfusion code to javascript code?

I'm a newbie to ColdFusion, I got a problem when I used a file type data in the embedded js code. I got a uploaded file from the FORM. Below is the form code.
<cfform name='uploadForm' action='#CGI.SCRIPT_NAME#' enctype='multipart/form-data' method='post' onsubmit='loading()'>
<input type='hidden' name='trigger' value='yes' />
<input type='hidden' name='file_type' id='file_type' />
<input type='hidden' name='presentation_id' id='presentation_id' />
<input type='hidden' name='productionYear' id='productionYear' />
<div><input type='file' name='fileToUpload' size='45' id="uploadID" onChange="setFile();"></div>
<div class='loading' id='loading' style='display: none'>
<img src='buttons/load_bar.gif' />
<div>The file is uploading. Please do not click anything or make changes to the media form.</div>
</div>
<div class='empty' id='empty' style='display: block'>
</div>
<div><input type='submit' value='Upload File' class='submit'></div>
</cfform>
next is my function to get the submitted file:
<cfscript>
function getClientFileName(fieldName) {
var tmpPartsArray = Form.getPartsArray();
var clientFileName = "";
if (IsDefined("tmpPartsArray")) {
for (local.tmpPart in tmpPartsArray) {
if (local.tmpPart.isFile() AND local.tmpPart.getName() EQ arguments.fieldName) {
return local.tmpPart;
}
}
}
return "";
}
</cfscript>
I used a <cfset clientFileName = getClientFileName("fileTOUpload")> to get the file data.
Then in my javascript code:
var result = client.media.upload(cb, '#clientFileName#');
the second argument here should be a file type. But the upload failed with the error the second argument is not a file type data.
SO anybody could tell me what should I do here? thanks in advance.

Commented before, but here's an example. To render CFML variables the CFML must be inside a <cfoutput></cfoutput> block. So in your case you want the result from clientFileName to render inside the JS. Now, assuming your JS is inside a .cfm page, it could look like this:
<cfoutput>
<script>
var result = client.media.upload(cb, '#clientFileName#');
</script>
</cfoutput>
Or if it's just #clientFileName# you need to render you could just wrap that:
<script>
var result = client.media.upload(cb, '<cfoutput>#clientFileName#</cfoutput>');
</script>
Just remember that anytime you need to output data using #'s you need to be inside a <cfoutput> block.

AjaxForm file upload - what's wrong with my code?

I'm using jquery.form.js plugin: http://malsup.com/jquery/form/
Right after uploading the picture I would like to display it in a div. I made it work before, but unfortunately it works asynchronously and only with smaller files - when it's a bigger file, I see it's trying to display the picture that hasn't been uploaded yet. This is the code that works with small files:
$(this.el).find('#myForm').ajaxForm(function(data) {
document.cookie = "imagePath=" + data;
var myCookie = document.cookie.replace(/(?:(?:^|.*;\s*)imagePath\s*\=\s*([^;]*).*$)|^.*$/, "$1");
$('.full-picture-col').html('<img src="' + data + '" class="img-responsive" />').fadeIn('slow');
$('.left-picture-col').hide();
$('.right-picture-col').hide();
});
I tried modifying the code so the picture gets displayed on "success", but unfortunately it doesn't work. I get an error in the console:
http://localhost/blabla/[object%20Object] 404 (not found).
HTML:
<form id="myForm" enctype="multipart/form-data" action="api/upload.php" method="POST">
<input type="hidden" />
<input id="upload" name="userfile" type="file" class="choose-file"/>
<button class="choose-picture"></button>
<div class="filename"></div>
<input type="submit" class="send-button" value='' />
</form>
JS:
$(this.el).find('#myForm').ajaxForm({
complete: function(data) {
document.cookie = "imagePath=" + data;
var myCookie = document.cookie.replace(/(?:(?:^|.*;\s*)imagePath\s*\=\s*([^;]*).*$)|^.*$/, "$1");
$('.full-picture-col').html('<img src="' + data + '" class="img-responsive" />').fadeIn('slow');
$('.left-picture-col').hide();
$('.right-picture-col').hide();
}
});
What can I do to make it work?

HTML form input direct to URL

How do I direct the browser to another URL based on user input for example:
abc.com/apple.html
abc.com/banana.html
abc.com/pear.html
BUT, if the user doesn't enter apple,banana or pear then they are directed to:
abc.com/wrong.html
Any help would be awesome! I only know HTML forms.

<form id='formName' name='formName' onsubmit='redirect();return false;'>
<input type='text' id='userInput' name='userInput' value=''>
<input type='submit' name='submit' value='Submit'>
</form>
<script type='text/javascript'>
function redirect() {
var input = document.getElementById('userInput').value;
switch(input) {
case 'apple':
window.location.replace('apple.html');
break;
case 'banana':
window.location.replace('banana.html');
break;
default:
window.location.replace('default.html');
break;
}
}
</script>

You may use Javascript/JQuery to do it like this:
HTML:
<form name="form_input" action="post_values.php" method="post">
<input type="text" name="fruit" id="fruit" />
<input type="submit" value="Submit" />
</form>
JS/JQuery:
<script>
$("form").submit(function() {
var fruit = $("#fruit").val();
if(fruit=='apple' || fruit=='pear' || fruit=='banana'){
window.location = "http://www.abc.com/"+fruit+".html";
}else{
window.location = "http://www.abc.com/wrong.html";
}
return true;
});
</script>

In the HTML file of "abc.com", which is mostly index.html, between your <HEAD> tags do this:
<meta HTTP-EQUIV="REFRESH" content="0; url=http://www.abc.com/wrong.html">
Adjust content= to how many seconds you want your browser to wait before redirecting.
Update:
The http method is not recommended by W3C because of this:
If a page redirects too quickly (less than 2-3 seconds), using the "Back" button on the next page may cause some browsers to move back to the redirecting page, whereupon the redirect will occur again. This is bad for usability, as this may cause a reader to be "stuck" on the last website.
Hence the recommended method via JS:
<head>
<script>
function replaceDoc()
{
window.location.replace("http://www.abc.com/wrong.html")
}
</script>
</head>
I found the above method here:
W3Schools Window.Replace()

<script language="JavaScript">
var page = new Array("apple","banana","pear"); // list of your pages
function redirect(){
if(page.indexOf(document.forms["NameOfForm"]["NameOfInput"].value)!=-1){
window.location = document.forms["NameOfForm"]["NameOfInput"].value + ".html";
}
else {
window.location = "wrong.html";
}
return false;
}
</script>
<form name="NameOfForm" onsubmit="return redirect()">
<input name="NameOfInput" />
<input type="submit" />
</form>
put that code into abc.com/ and you just have to add, change the list of page ;)

how to call an external javascript method from a form?

I want to submit a form. But before that I wanna validate it. The validation is a javascript method. everything is ok as long as the javascript method is in the same .jsp file as the form.
But I want to put it to an external javascript file, and the method gets never called. Why?
this part should include the javascript into .jsp file.
<script type="text/javascript" src="Validate.js">
var val = new Validate();
var result= val.validateArticle();
</script>
here is the form I want to submit:
<form name="articleAnswerForm" action="answer.html"
action="answer.html" onsubmit="return result" method="post">
Was is der Artikel?<br> <select name="art">
<option>???</option>
<option>der</option>
<option>die</option>
<option>das</option>
</select> <input type="hidden" name="richtig" value="${selected.article}">
<h1>${selected.german}</h1>
<input type="submit" value="Antworten">
</form>
The Validate.js is in the same directory as the .jsp file.
here is the Validate.js (but it works fine, if it is in the .jsp file.)
function validateArticle() {
var a = document.forms["articleAnswerForm"]["art"].value;
var richtig = document.forms["articleAnswerForm"]["richtig"].value;
if (a == null || a == "" || a != richtig) {
alert("Nein " + a + " ist falsch");
return false;
}
}
so far the only thing that works is if I put everything into one .jsp file like below
<script type="text/javascript" >
function validateArticle() {
var a = document.forms["articleAnswerForm"]["art"].value;
var richtig = document.forms["articleAnswerForm"]["richtig"].value;
if (a == null || a == "" || a != richtig) {
alert("Nein " + a + " ist falsch");
return false;
}
}
</script>
<form name="articleAnswerForm" action="answer.html"
action="answer.html" onsubmit="return validateArticle()" method="post">
Was is der Artikel?<br> <select name="art">
<option>???</option>
<option>der</option>
<option>die</option>
<option>das</option>
</select> <input type="hidden" name="richtig" value="${selected.article}">
<h1>${selected.german}</h1>
<input type="submit" value="Antworten">
</form>
<form:form method="post" action="word.html">
<input type="submit" value="nächste Wort">
</form:form>
</c:if>

First, you cannot mix a src-ref and local code in one script tag.
<script type="text/javascript" src="Validate.js"></script>
<script type="text/javascript">
var val = new Validate(); // 'new Validate' won't work.
var result= val.validateArticle();
</script>
In HTML, onsubmit="return result" will probably not do what your are intended to. You want to validate on submit, won't you? So you have to call the validateArticle() function then, not on page load. And there is no need to instanciate a Validate object.
onsubmit="return validateArticle()"

This is all you need. You don't need to create an instance to use the Validation function.
Script:
<script type="text/javascript" src="Validate.js"></script>
HTML Form:
<form name="articleAnswerForm" action="answer.html"
action="answer.html" onsubmit="return validateArticle()" method="post">
Was is der Artikel?<br> <select name="art">
<option>???</option>
<option>der</option>
<option>die</option>
<option>das</option>
</select> <input type="hidden" name="richtig" value="${selected.article}">
<h1>${selected.german}</h1>
<input type="submit" value="Antworten">
</form>
So when you are moving Javascript to an external file. You don't need to do anything special to access it. There is no instantiation required. Just use the javascript as you would if it was included in the file itself. If you find it doesn't work, it's likely the file isn't loading properly, in which case check the file is in the right directory and the case of file is correctly set, as some file system are case sensitive.