What's wrong with this JQuery? - javascript

When I do
$(document).ready(function(){
$('form').live('submit', function(){
$('#template').tmpl([{ "id" : "555" }, { "in" : "checked" } ]).prependTo('#content');
});
});
with and with HTML
<!DOCTYPE html>
<html dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script src="http://jqueryui.com/ui/jquery.ui.core.js"></script>
<script src="http://jqueryui.com/ui/jquery.ui.widget.js"></script>
<script src="http://jqueryui.com/ui/jquery.ui.datepicker.js"></script>
<script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
<script type="text-x-jquery/template" id="template">
<form action="" method="post">
"${id}" <div class="cellData cellRadios"> <input name="ctype" value="individuel" type="radio" "${in}"/> </div>
</form>
</script>
</head>
<body>
<form action="" method="post">
<input value="Save" type="submit">
</form>
<br><br>
<div id="content"> </div>
then Error Console in Firefox says Syntax Error in line 1 of jquery.tmpl.min.js which is from JQuery.tmpl()
JSFiddle at
http://jsfiddle.net/Cu5Mj/4/
Is it
$('#template').tmpl([{ "id" : "555" }, { "in" : "checked" } ]).prependTo('#content');
that is wrong?
Update Updated JSFiddle and post with code that fails.

I changed the followings in your HTML:
<script type="text/x-jquery-tmpl" id="template">
<form action="" method="post">
"${Id}" <div class="cellData cellRadios"> <input name="ctype" value="individuel" type="radio" ${In} /> </div>
</form>
</script>
and your JavaScript:
$(document).ready(function(){
$('form').live('submit', function(){
$('#template').tmpl({ "Id" : "555","In" : "checked" }).prependTo('#content');
return false;
});
});
and it works for me now.
The problems I think was the template variable names, I capitalized them, and the template data was an array of 2 objects instead of a simple object. (Also changed the template script MIME a bit.)

Related

Why am I not getting a response from serialize()?

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>

onchange event iof javascript is not working?

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;

How to I call a function when form submit

Below is my part in my html page which is to get a threshold value and to call a function with the value
<form id="distance_input" onSubmit="return false;" >
<p>Enter a threshold</p>
<div class="col-md-8" style="display: inline-block; left:-30px">
<div class="col-md-4">
<div class="input-group">
<input type="text" class="form-control" id="usr" class="search" onkeydown="search(this)"> </input>
<span class="input-group-addon" style="width: 50px">km</span>
</div>
</div>
<div class="col-md-4" style="padding-left:0px; margin-left:-10px">
<input type="button" class="btn btn-success" value="Submit" id="myButton"> </input>
</div>
</div>
<p> </p>
</form>
<script type="text/javascript">
$('#myButton').click(function(){
var value = $("input[type=text]").val();
console.log(value+ " from the submit button");
set_to_threshold(value);
});
function search(ele) {
if(event.keyCode == 13) {
console.log(ele.value+" from enter button");
set_tothreshold(ele.value);
}
}
</script>
But when I do this I get the graphs do not get refreshed( set_tothreshold function gets new data for graph when the value is passes in the function) and shows that
Uncaught ReferenceError: search is not defined
at HTMLInputElement.onkeydown
when I tried with
<script type="text/javascript">
$('#myButton').click(function(){
var value = $("input[type=text]").val();
console.log(value+ " from the submit button");
set_to_threshold(value);
});
</script>
also when I press submit button no changes happened(even does not prints value in console).But why does the value does not get printed.Any help is appreciated.
$('#myButton').click(function(){
var value = $("input[type=text]").val();
console.log(value);
set_to_threshold(value);
});
function set_to_threshold(val){
console.log('do something here with val ', val);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<input type="text" value="input something"/>
<button id="myButton">click</button>
</body>
</html>
this is what you want . yourfunction call when form submit
<form id="distance_input" onSubmit="yourFunction(); return false;" >
Kindly include jquery in your file. It works fine.
<script
src="https://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous"></script>
Include this at the head section of the html page. And also there u referred function set_to_threshold() which is undefined. So only you are getting the error. Kindly write a function for it. it'll work!

TypeError: document.getElementById(...).submit is not a function

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>

Creating Textbox and Button using append in jquery (I'm getting duplicate result)

I am very new to jquery. Here what I'm trying to do is creating text box and button(login form). The following code is giveing me duplicate result. Is there something wrong with my code?
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready( function () {
$(".start").append('<div data-role="fieldcontain"><label for="username">User Name:</label><input type="text" name="username" id="username"></br><label for="password">Password:</label><input type="password" name="password" id="password"></div><div data-role="content"><input type="submit" value="Sign In"/></div>');
return false;
});
</script>
<br>
<br>
<div class="start">
<label class="control-label" for="inputEmail">Sign In to xRM 360</label>
</div>
<br>
<br>
</body>
</html>
What is happening is the $(document).ready is being called twice. I think this may have to do with jQuery mobile.
See here:
jQuery $(document).ready () fires twice
And here:
http://forum.jquery.com/topic/jquery-jquerymobile-document-ready-called-twice
for more information.
A quick fix is to put the script tag in the head tag. See example below.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready( function () {
$(".start").append('<div data-role="fieldcontain"><label for="username">User Name:</label><input type="text" name="username" id="username"></br><label for="password">Password:</label><input type="password" name="password" id="password"></div><div data-role="content"><input type="submit" value="Sign In"/></div>');
return false;
});
</script>
</head>
<body>
<br>
<br>
<div class="start">
<label class="control-label" for="inputEmail">Sign In to xRM 360</label>
</div>
<br>
<br>
</body>
</html>

Categories