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>
Related
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>
I have set of input boxes to add names and designaions.and iwant to print those in a <p> tag when user click print button. how to proceed.
<div class="form-group">
<label for="inputRegNo" >Name & Designation<span style="color:#c0392b;padding-left:5px;">*</span></label>
<div class="form-group">
<input required type="text" name="fname[]" class="fname" onkeyUp="document.getElementById('refa5').innerHTML = this.value" placeholder="Name" />
<input required type="text" name="lname[]" placeholder="Designation" />
</div>
</div>
<div class="form-group">
<label for="inputRegNo" ></label>
<div class="form-group">
<input type="text" name="fname[]" placeholder="Name" class="fname" onkeyUp="document.getElementById('refa5').innerHTML = this.value" />
<input type="text" name="lname[]" placeholder="Designation" />
</div>
</div>
print
<div>
<label>Name & Designation</label>
<p id="refa5"> - </p>
</div>
its looks you are new in javascript.. it's simple give the name to all the input field like
<input type="text/checkbox" name="txtName">
and in javascript you can access this field value by
<script type="text/javascript">
var name = document.getElementsByName("txtName");
</script>
if you wish to print the element on button click simply specify their click event on javascript like
function onClick() {
alert("helo from click function");
}
and then on button ..
<input type="button" onclick="onClick()">
w3schools is a great resource for this. Here is some example code on how to do this :
<button onclick="myFunction()">Click me</button>
<input id="inputID"></input>
<p id="demo"></p>
<script>
function myFunction() {
var inputID = document.getElementById("inputID").value;
document.getElementById("demo").innerHTML = inputID;
}
</script>
What the code above does is it takes the value of an input, then it sets the innerHTML of a <p> element to it. You can obviously do this with other things like <h1> elements as well.
Before anyone marks this as a duplicate, I have looked at many sites and am currently using this one - jQuery - passing value from one input to another for guidance, yet no result... I am trying to pass a value from one input in one form to another input in a 'table'. I have put it in a table because of a very weird reason - it does not display a Sparql value when in a form only displays in a table so the input was placed in a table. My code is below:
Form
<form onclick="txtFullName.value = txtFirstName.value +'_'+ txtLastName.value">
First name : <input type="text" name="txtFirstName" value="#ViewBag.FirstName"/> <br><br>
Last name : <input type="text" name="txtLastName" value="#ViewBag.LastName" /> <br><br>
Full name : <input type="text" id="txtFullName" name="txtFullName"> <br><br />
<input id="submit12" type="button" value="Submit">
</form>
Table
<table id="results">
<Full name:
<br>
<input id="userInput" type="text" name="fullname" ${userJson.userId == ''?'': 'disabled'} value="#ViewBag.DisplayName">
<br>
<input id="submit" type="submit" value="Submit">
</table>
JQUERY
$('#submit12').on('click', function (e) { //Form submit
$('#userInput').change(function () {
$('txtFullName').val($(this).val());
});
});
I am trying to display the txtFullName into userInput input when pressing submit but right now only the `txtFullName' is displayed when pressing submit. Also the submit is the submit button in the FORM.
Anymore info needed let me know:)
You need to change the onclick to action on the form if you are trying to use submit button. The other way is to use input type button instead of submit:
So:
$(document).ready(function() {
$('#submit12').on('click', function (e) {
console.log('test');
$("#txtFullName").val($("#txtFirstName").val() + '_' + $("#txtLastName").val());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
First name : <input type="text" id="txtFirstName" value="First"/> <br><br>
Last name : <input type="text" id="txtLastName" value="Last" /> <br><br>
Full name : <input type="text" id="txtFullName" name="txtFullName"> <br><br />
<input id="submit12" type="button" value="Submit">
</form>
If you want to display txtFullName into userInput, simply do something like this:
$('#submit12').on('click', function (e) { //Form submit
$('#userInput').val($('#txtFullName').val());
});
And why do you need change function there , if yo need changes when click submit.
Edit your JQuery like this:
$('#submit12').on('click', function (e) { //Form submit
$('#userInput').change(function () {
$('#txtFullName').val($(this).val());
});
});
$('#submit').on('click', function () { //Form submit
$('#userInput').val($('#txtFullName').val());
});
I don't clearly understand why you do it but It can fix your code.
It is not entirely clear what the two buttons do, but the operation itself is really very simple. See comments inline for explanations:
// Wait until the DOM is loaded and all elements are avaialble
window.addEventListener("DOMContentLoaded", function(){
// Get references to the DOM elements you'll need
var theForm = document.getElementById("frmTest");
var txtFirstName = document.getElementById("txtFirstName");
var txtLasttName = document.getElementById("txtLastName");
var txtFulltName = document.getElementById("txtFullName");
var txtUserInput = document.getElementById("txtUserInput");
var btn1 = document.getElementById("btnSubmit1");
var btn2 = document.getElementById("btnSubmit2");
// Function to join names together
function combine(){
txtFullName.value = txtFirstName.value + '_' + txtLastName.value;
}
// Set event handlers
frmTest.addEventListener("click", combine);
btn1.addEventListener("click", combine);
});
<!-- Keep you JavaScript out of your HTML -->
<form id="frmTest">
First name : <input type="text" id="txtFirstName" name="txtFirstName" value="#ViewBag.FirstName">
<br><br>
Last name : <input type="text" id="txtLastName" name="txtLastName" value="#ViewBag.LastName" >
<br><br>
Full name : <input type="text" id="txtFullName" name="txtFullName"> <br><br />
<input id="btnSubmit1" type="button" value="Combine Names">
<table id="results">
<Full name:
<br>
<input id="txtUserInput" type="text" name="fullname" ${userJson.userId == ''?'': 'disabled'} value="#ViewBag.DisplayName">
<br>
<input id="btnSubmit2" type="submit" value="Submit">
</table>
</form>
I am creating a small webpage that will add two input fields together and place the result in another input field. This is what I have:
<html>
<head>
<title>Calculator</title>
<script type="text/javascript">
function add(){
var num1 = parseInt(document.calc.num1.value);
var num2 = parseInt(document.calc.num2.value);
var answer = (num1+num2);
document.getElementById('res').value = answer;
}
</script>
</HEAD>
<BODY>
<FORM NAME="calc">
<INPUT TYPE ="button" NAME="add" Value="+" onClick="add()">
<hr/>
<INPUT TYPE ="text" NAME="num1" Value="">
<INPUT TYPE ="text" NAME="num2" Value="">
<hr/>
<INPUT TYPE ="text" ID="res" NAME="result" VALUE="">
</FORM>
</BODY>
</HTML>
And I am getting the following error when I press the + button.
Uncaught TypeError: object is not a function
Try changing the function name from add to addNumbers or something like that.
onclick is the right attribute to handle click
onClick="add()"
Switch this bit to
onclick="add()"
The problem is the name of the function "add()", change the name and you will see that it will works!
HTML
<p>
<label for="field1">Field 1</label>
<input type="number" id="field1"/>
</p>
<p>
<label for="field2">Field 2</label>
<input type="number" id="field2"/>
</p>
<p>
<label for="total">Total</label>
<input readonly type="number" id="total"/>
</p>
<p>
<input type="button" id="calc" value="Calculate"/>
</p>
Javascript
Goes in a script tag in head.
function sumFields(fields) {
var total = 0;
// goes through each field and adds them to the total
for(var i=0,l=fields.length; i<l; i++)
{ total += parseInt(document.getElementById(fields[i]).value); }
document.getElementById('total').value = total;
}
function calc_click() {
// runs when the button is clicked
sumFields(['field1','field2']);
}
// main function
function init() {
// add button functionality
document.getElementById('calc').addEventListener('click',calc_click,false);
}
// fires when the DOM is loaded
document.addEventListener('DOMContentLoaded',init,false);
I checked for duplicates but didn't find an exactly same problem so here we go. I have two radio-buttons and I need to return their values upon form submission. The problem is that when I click the submit button I always get the same radio-button value. Here is some code:
<div id="automatic">
<p>Title1
<input type="radio" id ="mode" name="mod" value="auto" >
</p>
</div>
<div id="selection">
<p>Title2
<input type="radio" id ="mode" name="mod" value="nonauto" >
</p>
</div>
<form id="search" action="test.jsp" method="GET" onsubmit="if (document.getElementById('search_text').value.length < 1) return false;">
<input id="search_text" type="text" name="q">
<input id="searchButton" type="submit" onclick="displayRadio()" value="Search" autocomplete="off" size="115">
</form>
And here is the Javascript code:
function displayRadio() {
alert(document.getElementById("mode").value)
}
Use different ids and use your function to lookup which of them is checked and return the value of that.
function displayRadio() {
var modeauto = document.getElementById('modeauto');
var modenoauto = document.getElementById('modenoauto');
var value = modeauto.checked ? modeauto.value : modenoauto.value;
alert(value);
}
I would recommend using jQuery for simplicity though.