<html>
<head>
<script>
function calledHere(value) { console.log(value); }
</script>
</head>
<body>
<form name="test">
<input type="button" value="click!" onclick="calledHere(test);" >
</form>
</body>
</html>
From the above code, in the onclick call passed wrongly the form name without quotes. But, the output displays the whole form DOM element. Don't know how it got the form element.
Any help will be more useful for my learning on javascript side.
Thanks in Advance!!!
You've already got the form element in your 'value' variable. The reason you're seeing the element's html logged is because console.log calls the .toString() method on the element.
This code demonstrates that 'value' references the form element:
<html>
<head>
<script>
function calledHere(value) { value.style.backgroundColor = "red" }
</script>
</head>
<body>
<form name="test">
<input type="button" value="click!" onclick="calledHere(test);" >
</form>
</body>
</html>
http://jsfiddle.net/John_C/KZ3KR/
This answer explains the scope of the variable; why you can pass the form name to the function: https://stackoverflow.com/a/1416157/1588990
Related
So I am new to javascript, and I know how to access DOM elements using getElementByXxx() methods. But in one example I saw that it's possible to access elements directly using their name or like:
<!DOCTYPE html>
<html>
<body>
<form name="myForm"><input type="button" id="btn"></form>
<script>
console.log(document.myForm);
console.log(document.myForm.btn);
</script>
</body>
</html>
Console:
<form name="myForm">
<input type="button" id="btn">
</form>
<input type="button" id="btn">
Which is very confusing to me. Google and online courses only say about getElementById(), querySelector(), and objects (and object collections). I really don't understand how this works. When I change to id for form it doesn't work
<!DOCTYPE html>
<html>
<body>
<form id="myForm"><input type="button" id="btn"></form>
<script>
console.log(document.myForm);
console.log(document.myForm.btn);
</script>
</body>
</html>
Console:
undefined
Uncaught TypeError: Cannot read property 'btn' of undefined
Also it seems like it only work with form and input, and not for paragraph or div. Am I missing some obvious things here? I'm sorry if my question is too basic.
I'm having problem with the following code,
The submit button is not binding to the jQuery script and the console is not printing anything. I can't figure out what the problem is..
<html>
<head>
<script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.2.min.js"></script>
</head>
<body>
<script>
// Variable to hold request
var request;
// Bind to the submit event of our form
$("#show").submit(function(event){
console.log ("Im here");
});
</script>
<!--form action="getVehiclePosition.php" method="GET"-->
<!--Name: <input type="text" name="name"><br>-->
<form id="show">
<input type="submit" value="Send">
</form>
</body>
</html>
You code is not working as at the time the script is interpreted and executed, the form does not exist in the DOM. Wrap your code in document-ready handler.
Specify a function to execute when the DOM is fully loaded.
Use
$(function () {
//Your code
})
OR, You can place the script tag below the form element
It is a silly mistake and the only thing that you have to change is to wrap the whole code in $(document).ready(function(){}); .
The updated code is :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<script>
$(document).ready(function(){
var request;
$("#show").submit(function(event){
console.log ("Im here");
});
});
</script>
<!--form action="getVehiclePosition.php" method="GET"-->
<!--Name: <input type="text" name="name"><br>-->
<form id="show">
<input type="submit" value="Send">
</form>
</body>
May be you can modify id form to "show123" and run again. if it's work => duplicate id show in page.
Glad help for you.
Hello guys I am New to javascript I want to know why does the html button disappears as soon as i click it. The browser shows the text but the button disappears. here is how my html looks likes
<html>
<head>
<script type="text/javascript">
function funcname(){
document.write("<br/> <br/> <br/> some text");
}
</script>
</head>
<body>
<form>
<input type="button" name="something" value="touch me" onclick="funcname()">
</form>
</body>
</html>
The write() method writes HTML expressions or JavaScript code to a document.
The write() method is mostly used for testing: If it is used after an HTML document is fully loaded, it will delete all existing HTML.
Answer from: source
<html>
<head>
<script type="text/javascript">
function funcname()
{
document.body.innerHTML += "Some Text";
}
</script>
</head>
<body>
<form>
<input type="button" name="something" value="touch me" onclick="funcname()">
</form>
</body>
</html>
Try above code it will work fine.If you use document.write() overwritten body so should be use document.body.innerHTML .
The Document.write function overwrites the document content when called, as stated by the Mozilla Developer Network:
Note: as document.write writes to the document stream, calling document.write on a closed (loaded) document automatically calls document.open which will clear the document.
Source: https://developer.mozilla.org/en-US/docs/Web/API/Document/write
document.write() will override your whole body element. If you want to override only specific parts, you could define a target and use innerHTML to change the text.
<html>
<head>
<script type="text/javascript">
function funcname(){
document.getElementById("someParagraph").innerHTML = "Paragraph changed!";
}
</script>
</head>
<body>
<form>
<input type="button" name="something" value="touch me" onclick="funcname()">
</form>
<p id="someParagraph">Hey<p>
</body>
</html>
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
submit is not a function in javascript
I am trying to submit form using JS, but no luck. Here is the code. JSFIDDLE
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
function validate () {
alert('start');
$('#myform').submit();
alert('end');
}
</script>
</head>
<body>
<form id="myform" name="myform" method="post" action="">
<input type="button" value="submit" id="submit" onclick="validate();" >
</form>
</body>
</html>
The question is "Why its not working?".
You have an form element with the id submit which conflicts with the form method submit, change the submit button id to something else.
You can access form elements as properties of the form object, so if you have a form say myForm and an input in the form with id or name submit then myForm.submit will be the input element with id submit and not the original submit method.
See http://jsfiddle.net/4kg8c/1/
The error in the console is
Uncaught TypeError: Property 'submit' of object #<HTMLFormElement> is not a function
The problem is you hijacked the sumit() function by naming an element submit. Change the button's id to btnSubmit.
I have modify your code with solution use that.
submit button's name is missing. and don't use name as "submit" of submit. it conflicts with JS so.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function validate () {
document.myform.submit();
}
</script>
</head>
<body>
<form id="myform" name="myform" method="post" action="">
<input type="button" name="save" value="submit" id="submit" onclick="validate();" >
</form>
</body>
</html>
If this is the exact code you have written, then I think you have ot included jQuery library in the page.
You need to include jQuery file before you can use the $("#myform") notation.
Also specify some action URL where you want to submit the page to ?
You use jQuery code (the $ function) but you do not include the jQuery source.
I would like to dynamically modify the values of certain form elements, more specifically certain input text fields. So far, whenever I load my html page, I am just getting the blank input field, but I am expecting it to contain the value of 1. Here is an example of how I am trying to do this.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<script type="text/javascript" src="javascript/jquery-1.6.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var myForm = $(this).getElementById('form1');
myForm.elements['Q01'].value = '1';
});
</script>
</HEAD>
<BODY>
<form id="form1">
<input type="text" name="Q01" maxlength="1" />
</form>
</BODY>
</HTML>
The reason this needs to be done dynamically is because the value of form could be different every time. Am I even approaching this correctly? Suggestions on how I can achieve my intended functionality?
-- EDIT --
None of the solutions seem to be doing the trick. Here is an update of my code:
<!DOCTYPE HTML>
<HTML>
<HEAD>
<script type="text/javascript" src="javascript/jquery-1.6.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//$("#Q01").val("1");
$("#form1 input[name='Q01']").val("1");
//$("input[name='Q01']").val('1');
});
</script>
</HEAD>
<BODY>
<form id="form1">
<input type="text" id="Q01" name="Q01" maxlength="1" />
</form>
</BODY>
</HTML>
I am expecting when I load the page, that the input text will have 1 in it. But the input text keeps showing up empty. Any ideas?
-- EDIT --
Here is a solution derived from the answers from below that I like:
<!DOCTYPE HTML>
<HTML>
<HEAD>
<script type="text/javascript" src="javascript/jquery-1.6.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#Q01").val("1");
});
</script>
</HEAD>
<BODY>
<form id="form1">
<input type="text" id="Q01" name="Q01" maxlength="1" />
</form>
</BODY>
</HTML>
If you are using jQuery you could just change the id attribute to name in the input elements and then do something like this:
$('#Q01').val('1')
The val method sets the value sou can find more here: http://api.jquery.com/val/
You've got your ready handler correct. One of the great things about jQuery is its selector engine. I recommend taking a look at the documentation to help familiarize yourself with it.
To do what you want, I'd recommend something like this:
$(document).ready(function() {
$("#form1 input[name='Q01']").val("1");
});
The #form1 is the same as document.getElementById("form1"). The input[name='Q01'] grabs all input elements that have a name attribute equal to Q01. The .val method sets the selected elements value to the string 1.
$(document).ready(function(){
$("form input[name='Q01']).val('1');
)};
This should work:
$("input[name='Q01']").val('1');
But why not to set id's to your inputs?
Hope it works