I have started javascript DOM manipulation, I come across an error maybe.
Whenever I input in name field like jaykumar and press click me button .In demo, jaykumar comes and with in few microseconds go.
function myfunction() {
var x = document.getElementById("myform").elements["fname"].value;
document.getElementById("demo").innerHTML = x;
}
<form id="myform">
name<input type="textbox" name="fname"> email
<input type="textbox" name="email">
<button onclick="myfunction()"> Click me</button>
</form>
<div id="demo"></div>
A button inside a form's default behaviour is to submit the form. To change this make the button of type="button"
function myfunction() {
var x = document.getElementById("myform").elements["fname"].value;
document.getElementById("demo").innerHTML = x;
}
<form id="myform">
name<input type="textbox" name="fname"> email
<input type="textbox" name="email">
<button type="button" onclick="myfunction()"> Click me</button>
</form>
<div id="demo"></div>
Related
I have code to ask the user to enter their name and display it in a <p> element
function my() {
var x = document.getElementById("tt").textContent;
document.getElementById("demo").innerHTML = x;
}
<h1> Whats your name ? </h1>
<form method="POST">
<input type="text" id="tt" placeholder="Enter Name : ">
<input type="checkbox" checked>
</form>
<button onclick="my">Submit now</button>
<p id="demo"></p>
</div>
i expect the output will be print name of user
2 items:
An input element doesn't have textContent, it has a value.
When delcaring an onclick handler, include the parenthesis () to indicate it's a function call.
function my() {
var x = document.getElementById("tt").value;
document.getElementById("demo").innerHTML = x;
}
<h1> Whats your name ? </h1>
<form method="POST">
<input type="text" id="tt" placeholder="Enter Name : ">
<input type="checkbox" checked>
</form>
<button onclick="my()">Submit now</button>
<p id="demo"></p>
</div>
You are having some syntax errors in code. Missing (), properties of input context.
function display(){
console.log('here')
document.getElementById("demo").innerHTML =document.getElementById("tt").value;
}
<h1> Whats your name ? </h1>
<form name = "myForm">
<input type="text" name = "name" id="tt" placeholder="Enter Name : ">
<input type="checkbox" checked>
</form>
<input type="submit" onclick="display()">
<p id="demo"></p>
</div>
</body>
To learn about syntax and javascript.
You should use the value property rather than the textContext property. input type fields use value and have no textContent.
Additionally, your onclick is incorrectly defined. I recommend using javascript:myFunction() format, when executing a function in this manner. See below:
function my() {
var x = document.getElementById("tt").value;
document.getElementById("demo").innerHTML = x;
}
<h1> Whats your name ? </h1>
<input type="text" id="tt" placeholder="Enter Name : ">
<input type="checkbox" checked>
<button onclick="javascript:my()">Submit now</button>
<p id="demo"></p>
You'll notice I also removed the form node. If you don't preventDefault on a form it will refresh the page upon submit.
It's fine for this kind of thing to just not use a form tag. But if you wanted to keep it, you'll want to select it and preventDefault behavior like this:
var myForm = document.querySelector('form');
myForm.addEventListener('submit', function(e) {
e.preventDefault();
});
You missed the round brackets:
<button onclick="my()">Submit now</button>
I want to get the user filled form and display their output.
So I tried this:
<form name="testForm">
<input type="text" name="username" id="username">
<br>
<input type="text" name="password" id="password">
<br>
<input type="submit" value="Submit" onClick="myFunc()">
</form>
<div id="demo"></div>
<script>
function myFunc(){
var x = document.getElementById('username').value;
document.write(x);
}
</script>
This works as intended. Now, I just want to change the way it displays by making it display in the div with the id demo.
So this is what I tried:
<form name="testForm">
<input type="text" name="username" id="username">
<br>
<input type="text" name="password" id="password">
<br>
<input type="submit" value="Submit" onClick="myFunc()">
</form>
<div id="demo"></div>
<script>
function myFunc(){
var x = document.getElementById('username').value;
document.getElementById('demo').innerHTML =x;
}
</script>
Now as you can see, this doesn't work. It actually displays the results and then reloads a blank screen. I can't seem to understand why this is happening.
From my code, I can see that I've assigned x to the username value. So all I am doing is instead of using document.write (which worked), I am just wanting it to display in the div. However it displays and loads a blank screen.
Can someone please let me know what am I doing wrong? How can I display under the div demo of what the user typed in for username field. Is it a syntax error?
ps: I am self learning and practicing, so I just tried to play with username. Once I do that I will apply the same codes for password.
you can use preventDefault() to stop submit button from submitting.
<form name="testForm">
<input type="text" name="username" id="username">
<br>
<input type="text" name="password" id="password">
<br>
<input type="submit" value="Submit" onClick="myFunc(event)">
</form>
<div id="demo"></div>
<script>
function myFunc(event){
event.preventDefault();
var x = document.getElementById('username').value;
document.getElementById('demo').innerHTML =x;
}
</script>
You need to prevent form submission.
Change myFunc to:
function myFunc (evt) {
evt.preventDefault();
// everything else
}
How can I know which form I clicked? Is it possible with a button class instead of buttons with id?
$(document).ready(function () {
$(".form-buttons").click(function () {
//I only want the form which corresponds to the button I clicked
var formDates = $(form).serialize()
alert ("You clicked "+formDates)
})
})
<form id="form1">
<input type="text" value="date1" name="name1"/>
<input type="text" value="date2" name="name2"/>
<input type="text" value="date3" name="name3"/>
<button type="button" class="form-button"></button>
</form>
<form id="form2">
<input type="text" value="date4" name="name1"/>
<input type="text" value="date5" name="name2"/>
<input type="text" value="date6" name="name3"/>
<button type="button" class="form-button"></button>
</form>
Yes use class instead of id for similar elements. Please try this.
Note: form-button is the class name in your HTML and not form-buttons
$(document).ready(function () {
$(".form-button").click(function () {
var formDates = $(this).closest('form').serialize();
alert ("You clicked "+formDates)
})
})
I think you be looking for
$('.form-button').on('click', function () {
alert($(this).parents('form').attr('id')); // Check the ID of the form clicked
});
something Maybe Like mentioned above.
You can get the name of the element by using the this keyword which refer, in a DOM event, to the cibled element :
$(document).ready(function () {
$(".form-buttons").click(function () {
alert('You clicked the form' + this.parentElement.getAttribute('id'));
})
})
You can do this in a few different ways. You can traverse up the DOM and see which form is used or -and this is my favorite- you can submit the form!
Solution 1: Traversing up the DOM
<script>
$(document).ready(function () {
$(".form-button").click(function () {
var clicked_form = $(this).parent();
var formDates = clicked_form.serialize();
alert ("You clicked "+formDates);
})
})
</script>
</head>
<body>
<form id="form1">
<input type="text" value="date1" name="name1"/>
<input type="text" value="date2" name="name2"/>
<input type="text" value="date3" name="name3"/>
<button type="button" class="form-button"></button>
</form>
<form id="form2">
<input type="text" value="date4" name="name1"/>
<input type="text" value="date5" name="name2"/>
<input type="text" value="date6" name="name3"/>
<button type="button" class="form-button"></button>
</form>
</body>
Solution 2: Submit the form
You already are using the form, so why not submit it? Change the buttons to input elements with type submit and intercept the submit event, like this. This is how I think it should be done. It is also better for user experience because the user can just submit the form by pressing enter.
<script>
$(document).ready(function () {
$("form").on('submit', function (e) {
e.preventDefault();
var formDates = $(this).serialize()
alert ("You clicked "+formDates)
})
})
</script>
</head>
<body>
<form id="form1">
<input type="text" value="date1" name="name1"/>
<input type="text" value="date2" name="name2"/>
<input type="text" value="date3" name="name3"/>
<input type="submit" class="form-button"></input>
</form>
<form id="form2">
<input type="text" value="date4" name="name1"/>
<input type="text" value="date5" name="name2"/>
<input type="text" value="date6" name="name3"/>
<input type="submit" class="form-button"></input>
</form>
</body>
Check this fiddle on how I would do it.
https://jsfiddle.net/xtfeugav/
Simple use
$("form").submit(function(e) {
to listen for every submit on all the forms you have. To get the ID of the form you use
var formid = $(this).attr('id');
I used e.preventDefault(); to prevent the form don't update the page.
Remember to use <input type="submit" value="Submit"> on your forms to make this work.
Its a simple code, hope it helps.
Here the code that I made and not working looking to see how I would get my sum into the result field, Also looking how to make a reset button to clear all the text from the fields.
JSBin.
<html>
<head>
<script>
function addition() {
var x = +document.getElementById('num1').value;
var y = +document.getElementById('num2').value;
document.getElementById('result').value = x + y;
document.result.submit()
}
function reset() {}
</script>
</head>
<body>
<header>
<h1>Calculator Using Forms & JavaScript</h1>
</header>
<form>
Number 1:
<input type="number" id="num1" value="0" autofocus>
<br> Number 2:
<input type="number" id="num2" value="0">
<br> Result:
<input type="text" id="result" value="0" readonly>
<br>
</form>
<input type="button" onclick="addition()" value="addition">
</body>
</html>
Why do you want to submit the form?
You can use document.forms. to access the form.
Try this:
<html>
<head>
<script>
function addition() {
var x = +document.getElementById('num1').value;
var y = +document.getElementById('num2').value;
document.getElementById('result').value = x + y;
document.forms.calculator.submit()
}
function reset() {
document.forms.calculator.reset();
}
</script>
</head>
<body>
<header>
<h1>Calculator Using Forms & JavaScript</h1>
</header>
<form name="calculator">
Number 1:
<input type="number" id="num1" value="0" autofocus>
<br> Number 2:
<input type="number" id="num2" value="0">
<br> Result:
<input type="text" id="result" value="0" readonly>
<br>
</form>
<input type="button" onclick="addition()" value="addition">
<input type="button" onclick="reset()" value="reset">
</body>
</html>
Do you want this one?
jsbin
<html>
<head>
<script src="https://code.jquery.com/jquery-3.0.0-alpha1.js"></script>
<script>
function addition() {
var x = +document.getElementById('num1').value;
var y = +document.getElementById('num2').value;
document.getElementById('result').value = x + y;
//document.result.submit()
//if you want use submit, use this code. if only see the result, don't use this
//Submit is receive data, so you can't see a result.
//document.getElementById('formId').submit();
//jquery submit
//$("form")[0].submit();
}
function reset() {
//no jquery
document.getElementById('formId').reset();
//jquery
//$("form")[0].reset();
}
</script>
</head>
<body>
<header>
<h1>Calculator Using Forms & JavaScript</h1>
</header>
<form id="formId">
Number 1:
<input type="number" id="num1" value="0" autofocus>
<br> Number 2:
<input type="number" id="num2" value="0">
<br> Result:
<input type="text" id="result" value="0" readonly>
<br>
</form>
<input type="button" onclick="addition()" value="addition">
<input type="button" onclick="reset()" value="reset">
</body>
</html>
Note that forms can be submitted without clicking the submit button, so if you want something to happen on submit, attach a listener to the form's submit handler. To reset a form only requires a reset button, no code.
Form controls must have a name to be successful and submit their value with the form, and you can pass a reference to the form using this from the listener so you don't need to use getElementById.
Implementing the above significantly reduces the amount of code required.
In the following, the submit listener returns false so prevents the form from submitting. If you want the form to submit, just remove the return statement from the in–line listener:
function addition(form) {
form.result.value = +form.num1.value + +form.num2.value;
}
<form name="calculator" onsubmit="addition(this); return false;">
Number 1:
<input type="number" name="num1" value="0" autofocus>
<br> Number 2:
<input type="number" name="num2" value="0">
<br> Result:
<input type="text" name="result" value="0" readonly>
<br>
<input type="submit" value="Submit form">
<input type="reset">
</form>
You may not want to submit the form at all, in that case you can make the submit button a plain button and call the function from there, but remember to stop the form submitting otherwise.
just give an id to the form and in your reset function, just do
document.getElementById("myForm").reset();
updates:
according to ROBG's comments, you don't need to bind a function to the button.
you can simply add a
<input type="reset">
to reset all fields of the form, and if the button is out the form, you can do
<input form="formID" type="reset">
to associate to specific form.
I am having trouble outputing text to a div in Javascript. When I call the function on button click it displays the text for a fraction of second and then disappears. Why is it so? The code is given below;
Code:
function val(){
var x = document.getElementById('us').value
document.getElementById("demo").innerHTML = x;
}
HTML:
<form method="post">
<p id="demo"></p>
<br />
<input type="text" id="us" name="username"></input>
<br />
<button type="submit" onclick="val()">Sign Up</button>
</form>
<form method="post">
<p id="demo"></p>
<br />
<input type="text" id="us" name="username"></input>
<br />
<button type="button" id="asd">Sign Up</button>
</form>
$('#asd').click(function () {
var x = document.getElementById('us').value
document.getElementById("demo").innerHTML = x;
});
FIDDLE
I made a few changes. I changed the button type from submit to button also i added an id for the button. check it
You have a submit button in a form, its default action is to submit the form that is why the result is disappearing(the page is getting refreshed).
Since you really don't want to submit the form(here you are just doing some dynamic changes to the page), one easy solution is to change the type of the button to button
function val() {
var x = document.getElementById('us').value
document.getElementById("demo").innerHTML = x;
}
<form method="post">
<p id="demo"></p>
<br />
<input type="text" id="us" name="username"></input>
<br />
<button type="button" onclick="val()">Sign Up</button>
</form>
Another solution is to prevent the default action of the submit button click by returning false
Try this:
Your code works as expected but as you have taken button type as submit, i submits the form.
function val() {
var x = document.getElementById('us').value
document.getElementById("demo").innerHTML = x;
}
<form method="post">
<p id="demo"></p>
<br />
<input type="text" id="us" name="username"></input>
<br />
<button type="button" onclick="val()">Sign Up</button>
</form>