I was wondering if it is possible to set user input as a variable..
My code is:
<input id="userBlank" type="text" value="Click" onclick="userInput();">
<div id="userInput"></div>
<script>
function userInput(){
userInput.innerHTML = userBlank.value
</script>
So basically, I want to how I can set userInput.value as a variable so I can use it to calculate other things. I tried putting var at the front but it didn't work..
Put you input inside of a form and get the value by using getElementById!
<form id="form" onsubmit="return false;">
<input id="userBlank" type="text" value="Click" onclick="userInput();">
</form>
<script>
function userInput(){
var userInput = document.getElementById("userBlank").value;
alert(userInput);
}
</script>
When you are using id in an element, use document.getElementById
<script>
function userInput(){
var myValue = document.getElementById('userBlank').value ;
document.getElementById('userInput').innerHTML = myValue ;
}
</script>
If you want to use function then you can do like this
<form id="form" onsubmit="return false;">
<input id="userBlank" type="text" value="Click" onclick="userInput();">
</form>
<script>
function userInput(){
var userInputVar = document.getElementById("userBlank").val();
console.log(userInputVar)
alert(userInputVar);
}
<script>
Related
Friends,
Plz check out my code and tell me why am not getting the result if I use form tag.
When I remove the form tag, I get the result. why can't I get the expected result if I use form tag ? Your suggestions can help me understand this better !! thank u ..
CODE :
<html>
<head>
<title>ADDITION OF 2 NOS</title>
<script type="text/javascript">
function add() {
var x=document.getElementById("value1").value;
var y=document.getElementById("value2").value;
var z=x+y;
document.getElementById("result").innerHTML=z;
}
</script>
</head>
<body>
<center>
<form name="form1" id="form1_id">
ENTER NO 1 : <input type="text" name="value1" id="value1"><br>
ENTER NO 2 : <input type="text" name="value2" id="value2"><br>
<input type="submit" value="SUBMIT" onclick="add()">
<p id="result"></p>
</form>
</center>
</body>
</html>
You need numerical values. document.getElementById("value1").value returns a string.
var x = +document.getElementById("value1").value;
// ^ cast to number
To prevent submitting, you need to include
<form onsubmit="return false;">
as well.
function add() {
var x = +document.getElementById("value1").value;
var y = +document.getElementById("value2").value;
var z = x + y;
document.getElementById("result").innerHTML = z;
}
<form name="form1" id="form1_id" onsubmit="return false;">
ENTER NO 1 : <input type="text" name="value1" id="value1"><br>
ENTER NO 2 : <input type="text" name="value2" id="value2"><br>
<input type="submit" value="SUBMIT" onclick="add()">
<p id="result"></p>
</form>
First of all, your submit element is causing the form to submit. It does the add() then submits the form. To prevent that, use onsubmit="return false;" like so:
<script type="text/javascript">
function add()
{
var x=document.getElementById("value1").value;
var y=document.getElementById("value2").value;
var z=x+y;
document.getElementById("result").innerHTML=z;
}
</script>
<body>
<center>
<form name="form1" id="form1_id" onsubmit="return false;">
ENTER NO 1 : <input type="text" name="value1" id="value1"><br>
ENTER NO 2 : <input type="text" name="value2" id="value2"><br>
<input type="submit" value="SUBMIT" onclick="add()">
<p id="result"></p>
</form>
Second of all, you're doing concatenation in your add() function. If you want to really add the numbers, use
var z = parseInt(x) + parseInt(y);
in your add() function. If you expect decimals use parseFloat() instead.
Okay, when that submit button is clicked and it's present in one (or more) form(s) a redirect happens. This redirect happens because the form will be submitted after that click.
So, to stop this redirect you need to prevent the default action of the browser to this form at its submit event, e.g., give it a callback, then return exact false at this function, or call [Event]#preventDefault.
form1 = document.form1
var form1
form1.addEventListener('submit', function (event) {
event.preventDefault()
}, false)
Done. Note: your sum actually concatenates strings. I'd also note that the HTMLFormElement#submit method wouldn't trigger this submit event, and that's good.
<form action='productsphp.php' method='post'>
<button type="button" onclick="add1()">Add</button>
<input type="hidden" id="p1" value="" name="p1"/>
<input type="submit" value="Save" />
</form>
<script type="text/javascript">
function add1(){
var p= document.getElemenetById('p1').value;
var p1=0;
p1=p+1;
p=p1;
}
</script>
In the productsphp.php page
<?php
if(isset($_POST['p1'])){
$p1=$_POST['p1'];
echo "p1 is".$p1;
}
?>
It is not working.
I want everytime the button is clicked to go the add1() function and increment it.So I can know how many clicks the user has clicked.Then when pressing save to save the number of clicks in the hidden value and then take the value and save it in the database.But the value is still nothing.please help
Your function name has a typo (getElemenetById, extra e) and you never resend the value to the input field. Try:
<form action='productsphp.php' method='post'>
<button type="button" onclick="add1()">Add</button>
<input type="hidden" id="p1" value="" name="p1"/>
<input type="submit" value="Save" />
</form>
<script type="text/javascript">
function add1(){
var p= !parseInt(document.getElementById('p1').value) ? 0 : parseInt(document.getElementById('p1').value);
p++;
document.getElementById('p1').value = p;
}
</script>
You do not have to use another element at all, you could manipulate an attribute on your current element like data-clicks. It would look like this:
<button type="button" onclick="add1(this);" data-clicks="0">Add</button>
And the function will be:
function add1(element){
var currentClicks = element.getAttribute('data-clicks');
element.setAttribute('data-clicks', currentClicks + 1);
}
Reducing the DOM elements on your page improves performance, consider that.
Try this:
function add1(){
var p = document.getElementById('p1').value,
p1 = parseInt(p) + 1;
document.getElementById('p1').value = p1;
}
This way, you use the value of p1 after calculating it.
You should also need to set the initial value of p1:
<input type="hidden" id="p1" value="0" name="p1"/>
<form action='productsphp.php' method='post'>
<button type="button" onclick="add1()">Add</button>
<input type="text" id="p1" value="" name="p1"/>
<input type="submit" value="Save" />
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
function add1(){
var p= document.getElementById('p1');
if(p.value) {
p.value = parseInt(p.value) +1;
}else {
p.value = 1;
}
}
</script>
Here is a 1-liner :D
function add1(){
document.getElementById("p1").value = Number(document.getElementById("p1").value) + 1
}
Note: Your clicks count could be cheated easily with this way. use ajax with jquery instead
You could use simple javascript
<script type="text/javascript">
var i=document.getElementById('p1').value;
i=(isNaN(i))?0:i;
function add1(){
count++;
//alert(count);
document.getElementById('p1').value=count;
}
</script>
Or Jquery
<script>
var i=$('#p1').val();
i=(isNaN(i))?0:i;
$('button').click(function(){
$('#p1').val(++i);
});
</script>
Here is complete html file
<html>
<head>
<script src="jquery.min.js"></script>
</head>
<body>
<form action='productsphp.php' method='post'>
<button type="button" onclick="add1()">Add</button>
<input type="hidden" id="p1" value="" name="p1"/>
<input type="submit" value="Save" />
</form>
<script type="text/javascript">
//use one at a time. This is just a demonstration how to do this in both
//jquery and javascript
/* Javascript way of doing this -
var i=document.getElementById('p1').value;
i=(isNaN(i))?0:i;
function add1(){
i++;
document.getElementById('p1').value=i;
}
*/
/* JQuery way of doing this*/
var i=$('#p1').val();
i=(isNaN(i))?0:i;
$('button').click(function(){
$('#p1').val(++i);
});
</script>
</body>
</html>
I have a form in which there is one text field is provided with a submit button.On clicking submit button,it redirects to second php page from first php page.
index.php
<form action="submit.php" method="get">
<input type="text" name="search" id="search" />
<input type="submit" value="submit" onclick="convert()" />
</form
<script type="text/javascript">
function convert()
{
alert("hi");
var str ;
str = document.getElementById("search").value;
document.writeln(str.toLowerCase());
}
</script>
On submitting the form,i want the url to become like submit.php?search=text
I want this text to be in lower case,although if text entered is uppercase.
Please guide me how to make this text lower case,I am using the above script for converting it to lower case.But its not converting the text in lower case in URL.
Please guide me on this..
There was a few errors, you were missing the right angle bracket on </form> and you were trying to write the value rather than setting the field value, try this...
<form action="submit.php" method="get">
<input type="text" name="search" id="search" />
<input type="submit" value="submit" onclick="convert();" />
</form>
<script type="text/javascript">
function convert() {
alert("hi");
var str;
var srch=document.getElementById("search");
str = srch.value;
srch.value=str.toLowerCase();
}
</script>
You can do this only using javascript with a few extra stuff:
1) Give your <form> an id
<form action="submit.php" method="get" id="form1">
2) Make your <input> type as button. The reason for this is because we want to make sure the convert() function is executed first, and after that we will submit the form.
<input type="button" value="submit" onclick="convert()" />
3) Finally javascript to:
function convert()
{
alert("hi");
var str ;
str = document.getElementById("search");
str.value = (str.value.toLowerCase());
//get the form id and submit it
var form = document.getElementById("form1");
form.submit();
}
Fiddle
You are use form element so you can get any elements inside form element access by name, Here Our form name is form1 and inside this form inputbox name="search" and access this value by this way, document.form1.search.value.toLowerCase();
Check this Demo jsFiddle
JavaScript
function convert() {
alert("hi");
var str = document.form1.search.value.toLowerCase();
document.writeln(str);
//console.log(str);
}
HTML
<form name="form1" method="get">
<input type="text" name="search" id="search" />
<input type="submit" value="submit" onclick="convert();" />
</form >
try like this:
alert("hi");
document.getElementById("search").value = document.getElementById("search").value.toLowerCase();
return true;
Fiddle Live
i am sure this is quite a numb question to ask and most probably the most basic one. i am just a starter for JS.
i am trying to access the value of input field by document.getElementById and it is returning null to me i am not sure why here is the code.
<html>
<head>
<script type="text/javascript">
var name = document.getElementById("e_name");
alert(name);
</script>
</head>
<body>
<form action="" method="post">
<input type="text" name="name" id="e_name" value="Enter your Name"/>
<input type="submit" name="submit"/>
</form>
</body>
</html>
the following code prints the value null in alert box. what is wrong?
Update :
When i use the following code.
<html>
<head>
</head>
<body>
<form action="" method="post">
<input type="text" name="name" id="name" value="Enter your Name"/>
<input type="submit" name="submit"/>
</form>
<script type="text/javascript">
var name = document.getElementById('name').value;
alert(name);
</script>
</body>
</html>
it prints Enter your Name but if i change the value it does not print the changed value. i would want to perform the following for validation purpose
a) holds the value of e_name in a javascript variable in the head tag
b) so that i should be able to process it for validation.
how do i do it?
Because you're calling that line of script even before document object is ready!
Try this
<body>
<form action="" method="post">
<input type="text" name="name" id="e_name" value="Enter your Name"/>
<input type="submit" name="submit"/>
</form>
<script type="text/javascript">
var name = document.getElementById("e_name").value;
alert(name);
</script>
</body>
Or this in your head tag.
<script type="text/javascript">
window.onload = function() {
var name = document.getElementById("e_name");
alert(name);
}
</script>
The Javascript code is executing before that HTML has loaded. The element with id="e_name" doesn't actually exist in the document yet.
function validate()
{
var nam=name.value;
alert("name"+nam);
}
I have an HTML form whose action should be set dynamically through JavaScript. How do I do it?
Here is what I am trying to achieve:
<script type="text/javascript">
function get_action() { // Inside script tags
return form_action;
}
</script>
<form action=get_action()>
...
</form>
You cannot invoke JavaScript functions in standard HTML attributes other than onXXX. Just assign it during window onload.
<script type="text/javascript">
window.onload = function() {
document.myform.action = get_action();
}
function get_action() {
return form_action;
}
</script>
<form name="myform">
...
</form>
You see that I've given the form a name, so that it's easily accessible in document.
Alternatively, you can also do it during submit event:
<script type="text/javascript">
function get_action(form) {
form.action = form_action;
}
</script>
<form onsubmit="get_action(this);">
...
</form>
Plain JavaScript:
document.getElementById('form_id').action; //Will retrieve it
document.getElementById('form_id').action = "script.php"; //Will set it
Using jQuery...
$("#form_id").attr("action"); //Will retrieve it
$("#form_id").attr("action", "/script.php"); //Will set it
Very easy solution with jQuery:
$('#myFormId').attr('action', 'myNewActionTarget.html');
Your form:
<form action=get_action() id="myFormId">
...
</form>
Actually, when we want this, we want to change the action depending on which submit button we press.
Here you do not need even assign name or id to the form. Just use the form property of the clicked element:
<form action = "/default/page" >
<input type=submit onclick='this.form.action="/this/page";' value="Save">
<input type=submit onclick='this.form.action="/that/page";' value="Cancel">
</form>
Change the action URL of a form:
<form id="myForm" action="">
<button onclick="changeAction()">Try it</button>
</form>
<script>
function changeAction() {
document.getElementById("myForm").action = "url/action_page.php";
}
</script>
document.forms[0].action="http://..."
...assuming it is the first form on the page.
Do as Rabbott says, or if you refuse jQuery:
<script type="text/javascript">
function get_action() { // inside script tags
return form_action;
}
</script>
<form action="" onsubmit="this.action=get_action();">
...
</form>
Setting form action after selection of option using JavaScript
<script>
function onSelectedOption(sel) {
if ((sel.selectedIndex) == 0) {
document.getElementById("edit").action =
"http://www.example.co.uk/index.php";
document.getElementById("edit").submit();
}
else
{
document.getElementById("edit").action =
"http://www.example.co.uk/different.php";
document.getElementById("edit").submit();
}
}
</script>
<form name="edit" id="edit" action="" method="GET">
<input type="hidden" name="id" value="{ID}" />
</form>
<select name="option" id="option" onchange="onSelectedOption(this);">
<option name="contactBuyer">Edit item</option>
<option name="relist">End listing</option>
</select>