Code is not working - javascript

This is the code:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
function nameNotAva()
{
alert("Name already exists.");
//some code
}
function nameCheck()
{
var username = document.getElementById('uname').value;
var url = "http://rscript.org/lookup.php?type=namecheck&name=";
var curl = url + username;
$.ajax({
url : curl,
type : 'GET',
success : function(urlOutput){
if(urlOutput.contains('NAMECHECK: NOTAVALIBLE')){
nameNotAva();
}
}
});
}
</script>
</head>
<body>
<input class="textBox" id="uname" type="text" maxlength="15" required/>
<input type="button" onclick="nameCheck()" value="Submit">
</body>
</html>
The problem is there in the $.ajax part. I know this because when i put alert(curl); just before the ajax part, it displays the correct URL. If you want the complete info that what i am trying to do then goto- How to check output of a created URL?
I am using jquery library of the latest version.

You haven't included the jQuery library so $ is undefined and the script will error on the Ajax part.
In general, if you have a problem with some JavaScript: Open the JS console in your browser and pay attention to any error messages.
Update after comments suggest that the code in the question was incomplete:
This is the library i am using- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js" type="text/javascript" />
Script elements are not defined as empty. The end tag is required.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js">
</script>

http://jsfiddle.net/ksJEj/
Change the input type:
<input type="submit" value="Submit"/>
include this in your <head></head> tags:
HTML
<script type="text/javascript" src="ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
and this too:
HTML/JavaScript
<script type="text/javascript">
$(document).ready(function{
function nameNotAva() {
alert("Name already exists.");
//some code
}
$('input[type="submit"]').click(function (event) {
event.preventDefault();
var username = $('#uname').val();
$.get("http://rscript.org/lookup.php", {
'type': 'namecheck',
'name': username
}, function (urlOutput) {
if ($(urlOutput).contains('NAMECHECK: NOTAVALIBLE') == true) nameNotAva();
else alert("woohoo");
});
});
});
</script>

Related

How to redirect after the subscription payment is completed in Razorpay using JS?

<form>
<script src="https://cdn.razorpay.com/static/widget/subscription-button.js"
data-subscription_button_id="*********"
data-button_theme="rzp-dark-standard" async>
if (typeof response.razorpay_payment_id == 'undefined' ||
response.razorpay_payment_id < 1)
{
redirect_url = 'https://www.google.com/';
}
else
{
redirect_url = 'https://in.search.yahoo.com/?fr2=inr';
}
location.href = redirect_url;
</script>
</form>
This is the Razorpay subscription form.
This does not work to redirect.
Not sure, if this is the only problem you are facing, but if the <script> tag has the src attribute, browsers should ignore the content between <script> and </script>.
Try this example:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8"><title>script example</title></head>
<body>
<script src="a.js">
console.log("inside");
</script>
</body>
</html>
while a.js contains:
console.log("from a.js");
This produces only from a.js output in the console. Removing the src attribute from <script> tag produces inside output in the console.

Realtime count lines in textarea

Jsfiddle Code
The code work in Jsfiddle
Dont work in firefox or any browser
Line error:tarea.addEventListener('input', update)
Error is Firefox "TypeError: tarea is null"
Error in Chrome is "Uncaught TypeError: Cannot read property 'addEventListener' of null"
Please help me. I am looking for an effective solution, with simple code that works correctly
<html>
<head>
<title>Counter</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js" ></script>
<script type="text/javascript">
// Encapsulate function to document.ready now not error.
$(document).ready(function(){
var tarea = document.querySelector('#ta')
var input = document.querySelector('#rt')
function update() {
var res = (tarea.value.match(/\n/g)) ? tarea.value.match(/\n/g).length : 0;
input.value = res;
}
tarea.addEventListener('input', update) //Error Here
});
tarea.addEventListener('input', update) //Error Here
$(document).ready(function(){
if (jQuery) {
// jQuery is loaded
alert("Jquery load!");
} else {
// jQuery is not loaded
alert("Jquery Doesn't Work");
}
});
</script>
<body>
<textarea name="ta" id="ta" rows="4" cols="50">
ABC
DEF
GHI
</textarea>
<input type="text" id="rt" name="textnumber" value="">
</body>
</html>
Put your code through a validator. I think you have missing semi-colons and bad braces.
I see you're using jQuery. Something like this should suffice:
$(function() {
var tarea = $('#ta');
var input = $('#rt');
function update(e) {
var val = tarea.val(),
matches = val.match(/\n/g),
res = (matches) ? val.match(/\n/g).length : 0;
if(val.length){res++;}
input.val(res);
}
tarea.on("input", update)
.trigger("input");//set initial value
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea name="ta" id="ta" rows="4" cols="50">ABC
DEF
GHI</textarea>
<input type="text" id="rt" name="textnumber" value="">
The problem with your code is that you're trying to access the element before the document is fully loaded.
You should either move your JavaScript code at the end (right before the closing </body> tag) or move all your event handling code (including the tarea definition) to $(document).ready(...).

why isn't my jQuery working when I try to fetch a tag by Id?

I'm trying to fetch and listen to an event on form tag by id, but the jQuery isn't working and I got no errors...
var socket = io();
socket.on('connect', function() {
console.log('connected to server');
});
socket.on('newMessage', function(data) {
console.log('message', data);
});
socket.on('changeParagraph', function(data) {
document.getElementsByTagName('h1')[0].innerHTML = data
});
console.log('jQuery:', jQuery("#message-form"));
jQuery("#message-form").on('submit', function(e) {
e.preventDefault();
socket.emit('createMessage', {
from: 'User Q',
msg: 'test message!'
});
});
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Chat App</title>
</head>
<body>
<script src="/js/libs/jquery-3.3.1.min.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script src="/js/index.js">
</script>
<h1>Welcome to the chat app! :)</h1>
<form id="message-form">
<input type="text" name="message" placeholder="Message" />
<button type="submit">send message</button>
</form>
</body>
</html>
what am I missing here the console.log(jQuery('#message-form')) return a really big object like
w.fn.init {} proto: Object(0)
and a bunch of other stuff in it... but not the form that I want...
what am I missing here??
thank you in advance for the answers.
as #jmoerdyk mentioned, you need to run your jQuery selector after the form has been defined, either by including your code at the bottom of the body tag or wrapping your jquery in the ready handler, like:
jQuery(function($) { // runs onready, aliases jQuery as '$' in this func
$("#message-form").on('submit', function(e) {
e.preventDefault();
socket.emit('createMessage', {
from: 'User Q',
msg: 'test message!'
});
});
});
what you are seeing in your console log is the entire jQuery object, even though it didn't match any elements.

How to call a javascript function from a textbox when the textbox is not null / some value is passed into the textbox

I have a situation where I have a textbox which will be updated with some value and as soon as the textbox gets its value a javascript function will be called. I have tried something but this not working
if (validSubmission) {
User user = new User();
String StatusMessage=user.executeUserTask("_create_","",userBusinessEmailId,userPassword,cityOfBirth,userFirstName,userLastName,userCompanyName,userCompanyAddress,userPhone,"");
if(StatusMessage.equalsIgnoreCase("OK")) {
response.sendRedirect("login.jsp?retMessage="+"Account created sucessfully");
}
else {
//response.sendRedirect("login.jsp?retMessage="+StatusMessage);
responseMsg = "Invalid Domain Entry";
{%>
Redirect();
<%}
}
}
This is the text box where I am getting the value
<input type="text" id="keyToShowInvalidDomain" name="keyToShowInvalidDomain" value="<%=responseMsg%>" onchange="Redirect()">
This is the function which I am trying to call
<script type="text/javascript">
function Redirect() {
alert($("#keyToShowInvalidDomain").val());
}
</script>
Can anyone help, please?
For input type text onchange event will not work try to use onkeyup or onkeydown
<input type="text" id="keyToShowInvalidDomain" name="keyToShowInvalidDomain" value="<%=responseMsg%>" onkeyup="Redirect()">
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
function Redirect() {
alert($("#keyToShowInvalidDomain").val());
}
</script>
</head>
<body>
<input type="text" id="keyToShowInvalidDomain" name="keyToShowInvalidDomain" value="<%=responseMsg%>" onchange="Redirect()">
</body>
</html>
You are using selectors based on jQuery so you need to add jQuery library to your page. Please try this.
$(document).ready(function() {
$('#keyToShowInvalidDomain').change(function(){
// Call redirect function
});
}
Above code should work with JQuery.

How To get Text Area Data (Html File in Text area) using ajax And i need to send data to Php ? Ajax not sending my Text area data?

If I'm trying to send Html Data in textarea Code is failed. alert Working till Username data getting properly but ajax not sending my Data to Php server.
Javascript
var username=document.getElementById( "my_text" ).value;
if(username){
$.ajax({
type: 'post',
url: 'checkdata.php?username=username',
data: {
username:username,
},
success: function (response){
$( '#name_status' ).html(response);
if(response=="OK"){
return true;
}
else{
return false;
}
}
});
Html
<textarea id="my_text" >
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
</textarea>
There are a couple of places your code could be breaking down. This would be easier for us to help with if you provided console logs of errors.
1) If you haven't loaded jQuery yet then the $.ajax() won't be called. You may also need to do $(document).ready(); to make sure everything is loaded.
2) You are wrapping an entirely new DOM inside of a textarea. I'm not sure if that's a copy/paste mistake but it'll have strange effects on the result.
3) After your response it's apparent that you are actually trying to send html to the server..? Your error code from console suggests there's plenty else going on. It's hard to know how to help if we don't see everything. i.e. PHP and the rest of the client code.
3) Since your if statement isn't wrapped in a function call it is evaluated at runtime. So the code runs at the page load but nothing triggers it later. Which means username is always null.
If you want to fix this you need something to trigger the event. You can try:
HTML
<body>
<textarea id='my_text'></textarea>
<button id="submitButton">Submit</button>
</body>
JS
let sub = document.getElementById('submitButton');
sub.addEventListener('click', function(){
let username = document.getElementById('my_text').value;
if(username){
// Add Ajax Call Here
}
});
Backup.html or php
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Text editor</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript">
function view_text () {
var username=document.getElementById( "my_text" ).value;
console.log(username);
if(username){
$.ajax({
type: 'post',
url: 'checkdata.php',
data: {
username:username,
},
success: function (response){
$( '#name_status' ).html(response);
if(response=="OK"){
return true;
}
else{
return false;
}
}
});
}
else{
$( '#name_status' ).html("");
return false;
}
}
</script>
</head>
<body>
<input type="button" value="Execute >>" onclick="view_text()" class="button"/>
<textarea id="my_text" >
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
</textarea>
<span id="name_status"></span>
</body>
</html>

Categories

Resources