The below code works well on localhost using XAMPP. But it doesn't work on another server.
<!DOCTYPE html>
<html>
<head>
<script src="jquery-latest.js"></script>
</head>
<body>
word: <input type="text" id="sub" />
user: <input type="text" id="user" />
<button type="button" id="btn">Click Me!</button>
<script>
$("#btn").click(function () {
var word=$("#sub").val();
var usr=$("#user").val();
alert("hi");
});
</script>
</body>
</html>
I have got 2 errors from Chrome inspect element:
Uncaught SyntaxError: Unexpected end of input jquery-latest.js:5669
Uncaught ReferenceError: $ is not defined
check jquery-latest.js is same directory with html file. Otherwise code is ok and also works.
add type in the script. try this
<script type="text/javascript" src="jquery-latest.js"></script>
You need to wire up the click handler in the $(document).ready() event.
<!DOCTYPE html>
<html>
<head>
<script src="jquery-latest.js"></script>
<script>
$(document).ready(function() {
$("#btn").click(function () {
var word=$("#sub").val();
var usr=$("#user").val();
alert("hi");
});
});
</script>
</head>
<body>
word: <input type="text" id="sub" />
user: <input type="text" id="user" />
<button type="button" id="btn">Click Me!</button>
</body>
</html>
Related
JQuery Part
I just started using JQuery. First I wanted to create a a input box with an button that alerts the text that is in that box. This is the way I wanted to do that.
$(document).ready(function() {
$('#hit').click(function() {
alert($('#term').val());
});
});
That is the code in the html body part. Here im not sure if I have to declare the id with an # or not. I tried both but It didnt work for both.
My Code
<!DOCTYPE html>
<html>
<head>
<title>Button Event</title>
<script src="cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"> $(document).ready(function() { $('#hit').click(function() { alert($('#term').val()); }); }); </script>
</head>
<body> <input id="term" type="text" value="enter your search"> <button id="hit" type="button" name="Button">Search</button> </body>
</html>
I am really new to JavaScript and Jquery. When I run this code there are no errors or something like that in the console just blank. The Button and Input field are on the website but when I enter something and click the button after that nothing happens. That´s why im sure there are some mistakes in that code.
$(document).ready(function() {
$('#hit').click(function() {
alert($('#term').val());
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="term" type="text" value="enter your search" />
<button id="hit" type="button" name="Button">Search</button>
here has worked, do you have imported a jquery library?
Resolution with your code:
<!DOCTYPE html>
<html>
<head>
<title>Button Event</title>
</head>
<body> <input id="term" type="text" value="enter your search"> <button id="hit" type="button" name="Button">Search</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function() { $('#hit').click(function() { alert($('#term').val()); }); });
</script>
</body>
</html>
I am trying to call a function in an external JavaScript file from an HTML-file. The goal is to work with the content of a form there.
I tried so many things and always got the Error "ReferenceError: Can't find variable: X"
The positioning of the jquery javascript file loading
The positioning of the <script src="XXX"> call
Calling the function from the button "onclick" or the form "onsubmit"
Trying to call the javascript file from an embedded script in the HTML
This is what my JavaScript file and my HTML looks like right now:
function submit(e) {
answerText = document.getElementById("text").value;
// Do something with it.
}
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="/scripts/debug_alerts.js" type="text/javascript"></script>
</head>
<body>
<form id="validation-form" onsubmit="return submit(e)">
<input type="text" class="form-control" name="text" id="text" placeholder="Text" required>
<button type="button" class="btn btn-primary" onclick="submit(e)">Send</button>
</form>
</body>
I also tried
function doSomething() {
// Do something
}
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="/scripts/debug_alerts.js" type="text/javascript"></script>
</head>
<body>
<form id="validation-form" onsubmit="return submit(e)">
<input type="text" class="form-control" name="text" id="text" placeholder="Text" required>
<button type="button" class="btn btn-primary" onclick="submit(e)">Send</button>
</form>
<script>
function submit(e) {
doSomething();
}
</script>
</body>
In both cases, it returned the same error over and over again: "ReferenceError: Can't find variable: X". In the first example, X being "submit" and in the second "doSomething".
All help is very welcome. I know there are similar headlines here, but non of the solutions did anything for me.
Hey so when I ran the code without the e as a parameter for the submit function in the html it didn't give me the error. I think it may be because the e is the place holder for the text of the submit function in this case. Hope this helps.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="/scripts/debug_alerts.js" type="text/javascript"></script>
</head>
<body>
<form id="validation-form" onsubmit="return submit(e)">
<input type="text" class="form-control" name="text" id="text" placeholder="Text" required>
<button type="button" class="btn btn-primary" onclick="submit()">Send</button>
</form>
<script type="text/javascript">
function submit(e) {
answerText = document.getElementById("text").value;
// Do something with it.
}
</script>
</body>
</html>
I'm very new to jQuery. I've been trying to use the .serialize method in jQuery, but I can not seem to garner a response. I've checked console on Microsoft Edge, Internet Explorer, and Chrome but there's no indication of anything happening past connecting to the latest library (3.4.1). My HTML and JavaScript code are below:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<title></title>
<script language="JavaScript" type="text/javascirpt" src="https://code.jquery.com/jquery-3.4.1.js">
</script>
</head>
<body>
<form name="ourform" id="ourform" action=''>
<select name="salute">
<option>Mr.</option>
<option>Mrs.</option>
</select>
<br>
First Name: <input type="text" name="firstname"/>
Last Name: <input type="text" name="lastname"/>
<br>
<select name="region" multiple="multiple">
<option>North</option>
<option>South</option>
<option>East</option>
<option>West</option>
</select>
<br>
<textarea rows="6" cols="20" name="comment">
</textarea>
<input type="submit" name="g" value="submit" id="g"/>
</form>
<div class="results">Your Results</div>
<script language="JavaScript" type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.js">
$(document).ready(function(){
$('#ourform').submit(function(event){
event.preventDefault();
var myform = $('#ourform').serialize();
alert(myform);
return false;
});
});
</script>
</body>
</html>
Any help you could provide would be greatly appreciated.
Edit: Since it seems you want to disable the default submit behavior for the button, adding the type="button" attribute removes the need to cancel the default behavior.
When you are including your own javascript within <script> tags you don't need the src attribute (this was causing the 404)
updated jsfiddle
...
<button id="g" name="g" value="submit">Submit</button>
</form>
<div class="results">Your Results</div>
<script language="JavaScript" type="text/javascript">
$(document).ready(function() {
$('#g').click(function(event) {
//event.preventDefault();
var myform = $('#ourform').serialize();
alert(myform);
return false;
});
});
</script>
</body>
</html>
The $ is undefined is caused by jquery failing to load, which is caused by misspelling 'javascript' in
<script language="JavaScript" type="text/javascirpt" src="https://code.jquery.com/jquery-3.4.1.js">
</script>
You can't include an src attribute and have data in the tag - if you have src, your script tag must be empty.
Simply use two separate ones:
<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#ourform').submit(function(event){
event.preventDefault();
var myform = $('#ourform').serialize();
alert(myform);
return false;
});
});
</script>
I have been working on this from hours and still coudn't figure it out. this is really frustrating this simple code is also not working now.
<html>
<head>
<script language='javascript'>
function pp(){
document.getElementById("ppimg").src = document.getElementById("pp").value;
alert('burah');
}
</script>
</head>
<body>
<form method="post">
<input onchange="pp()" type="file" name="pp" >
<input type="submit" >
</form>
</body>
</html>
help please or I will need psychiatrist now
The problem with your code is you are having the name field of the input tag same as the function name. Change your name tag with anything else and it should work.
Checkout this code.
<!DOCTYPE html>
<html>
<body>
<form>
<input type="file" name="ppasd" id="pip" onchange="pp()">
</form>
<script type="text/javascript">
function pp() {
alert('hi')
}
</script>
</body>
</html>
I hope this code work for you.
<html>
<body>
<script language="JavaScript" type="text/javascript">
function inform(){
var filename = document.getElementById('myFile').value;
alert(filename);
}
</script>
<form name="form1">
Please choose a file.
<input type="file" name="uploadbox" size="35" onChange='inform()' id="myFile">
</form>
</body>
</html>
If this code work as you want please comment here it work or not. Happy Coding :)
It seems there is some kind of reference problem with pp. Use the following code and it should work
<html>
<head>
</head>
<body>
<form method="post">
<input onchange="callback()" type="file" id="pp" >
<input type="submit" >
</form>
<script language='javascript'>
function callback(){
document.getElementById("ppimg").src = document.getElementById("pp").value;
alert('burah');
}
</script>
</body>
</html>
P.S It is a good practice to add javascript code at the end of the html.
P.S 2 it will still get an error because there is no element with id ppimg
I hope it helps
that's not working ?
that's because you use function after put element
so do this instead :
<html>
<head>
</head>
<body>
<form method="post">
<input onchange="pp()" type="file" name="pp" >
<img id="ppimg"/>
<input type="submit" >
</form>
<script language='javascript'>
function pp(){
document.getElementById("ppimg").src = document.getElementById("pp").value;
alert('burah');
}
</script>
</body>
</html>
and if it's hard !
you can change pp() to pp;
I'm having an error that I can't find the solution and I don't have to use jQuery; I don't have any div with submit as name
My code is
<!DOCTYPE html>
<html>
<head>
<script>
function formSubmit()
{
document.getElementById('web').submit();
}
</script>
</head>
<body>
<form action="class003.php" id="g_form" method="POST">
<input type="text" name="f1" value="">
</form>
<div id="web" onclick="formSubmit()">click</div>
</body>
</html>
on chrom I'm getting this error
Uncaught TypeError: document.querySelector(...).submit is not a
function
at formSubmit (test2.html:8)
at HTMLDivElement.onclick (test2.html:19)
on Firefox the same error
TypeError: document.getElementById(...).submit is not a function[Learn
More]
You need to submit form not the div
Make it
document.getElementById('g_form').submit();
You mistyped the id of your element. It should be g_form.
function formSubmit()
{
document.getElementById('g_form').submit();
}
You using id of Your div but for submitting the form You need to specify the id of Your Form element
So just change the
function formSubmit()
{
document.getElementById('g_form').submit(); // Change the Id here
}
Hopes It will help
<!DOCTYPE html>
<html>
<head>
<script>
function formSubmit()
{
document.getElementById('g_form').submit(); // Change the Id here
}
</script>
</head>
<body>
<form action="class003.php" id="g_form" method="POST">
<input type="text" name="f1" value="">
</form>
<div id="web" onclick="formSubmit()">click</div>
</body>
</html>
Here is your solution.
<!DOCTYPE html>
<html>
<head>
<script>
function formSubmit()
{
document.forms['g_form'].submit();
}
</script>
</head>
<body>
<form action="class003.php" id="g_form" name="g_form" method="POST">
<input type="text" name="f1" value="">
</form>
<div class="button1" onClick="formSubmit();">Click</div>
</body>
</html>