my HTML code:
<form action="Generator.klx" method="post" onsubmit="genarate('hiddenField')">
<input type="hidden" id="hiddenField" name="hidden" value=""/>
<input type="submit" name="submit"/>
</form>
my JavaScript:
function genarate(hiddenField){
var field = document.getElementById(hiddenField);
field.value = "new Value";
}
But it just didnot work :(. Can anybody tell me where I was wrong?
Thank you
Your code as quoted should be working, and does in my tests with a variety of browsers. (I've tried it locally, with a POSTed form, but you can also try it here: http://jsbin.com/ehoro4/1 I've changed the method to GET so you can see the result in the URL.)
My guess is that you have something else on the page with the name or id "hiddenField", other than just the hidden field you've quoted. If you change the name of the field to "fluglehorn" or something else that's (um) unlikely to be elsewhere on your page, it may well work. That's because the namespace used by getElementById is (sadly) quite crowded.
Alternately, are you sure that genarate is appearing at global scope? (E.g., it's outside of all other functions.) Because your onsubmit attribute requires that genarate be global. So this works:
<form action="#" method="get" onsubmit="genarate('hiddenField')">
<input type="hidden" id="hiddenField" name="hidden" value=""/>
<input type="submit" name="submit"/>
</form>
<script>
function genarate(hiddenField){
var field = document.getElementById(hiddenField);
field.value = "new Value";
}
</script>
but for example this would not:
<form action="#" method="get" onsubmit="genarate('hiddenField')">
<input type="hidden" id="hiddenField" name="hidden" value=""/>
<input type="submit" name="submit"/>
</form>
<script>
(function() { // Begin scoping function to avoid global symbols (not uncommon)
function genarate(hiddenField){
var field = document.getElementById(hiddenField);
field.value = "new Value";
}
})();
</script>
Also recommend using a debugger (there's no excuse for not using client-side debuggers here in 2011) to set a breakpoint on the genarate function and walk through, to see what's going wrong.
crud.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="JavaScript.js"></script>
</head>
<body>
<input type="text" name="name" id="name" onfocus="opConfig.reloadPrice()">
<button type="button" onclick="myFun()">submit</button>
<button type="button" onclick="update()">update</button>
<br><br>
<p id="table"></p>
</body>
</html>
JavaScript.js
var arr = [];
var index;
function myFun()
{
var name = document.getElementById('name').value;
arr.push(name);
table();
}
function table(){
var text = "<table border=1><tr><th>username</th><th>action</th></tr>"
for (var i = 0; i < arr.length; i++) {
text+="<tr><td>"+arr[i]+"</td><td><button
onclick=myDELE("+i+");>delete</button><button
onclick=myEdit("+i+");>edit</button></td></tr>"
}
text+="</table>";
console.log(text);
document.getElementById('table').innerHTML = text;
tablehidden();
}
function myDELE(i)
{
var name = arr.splice(i,1);
// name.splice(i,1);
console.log(name);
table();
tablehidden();
}
function tablehidden(){
if (!arr.length) { document.getElementById('table').hidden=true; }
else{document.getElementById('table').hidden=false;}
}
function myEdit(i)
{
text = document.getElementById('name').value = arr[i];
index = i;
}
function update(){
arr[index]=document.getElementById('name').value ;
table();
tablehidden();
}
Related
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>
I am creating an application. The HTML file is like the following:
<!DOCTYPE html>
<html>
<body style="background-color: #ccc">
<script type="javascript">
function validateform(){
alert("Hello");
var firstnameErr="";
var valid = true;
var name = document.myform.fname.value;
var types = /^[a-zA-Z]+$/;
if (fname==null || fname=="") {
firstnameErr = "required";
valid = false;
} else if (!fname.value.match(types)) {
firstnameErr = "format error";
valid = false;
}
return valid;
}
</script>
<form name="myform" method="post" onsubmit="return validateform()" action="/Project/ViewList.php">
Firstname : <input type="text" name="fname" placeholder="First name" maxlength="20">
<span class="error">*
<script type="javascript">
document.write(firstnameErr);
</script>
</span>
<input type="submit" name="submit" value="Submit">
</form>
</body>
</html>
When I click on the submit button, it straightaway redirects to "ViewList.php" without seeming to run validatefom(). I added the alert() to check whether the function is executing or not. I want my form to submit only when it meets the validation requirements, not when valid is false.
Besides Typo errors, The main problem that I found is your script is not get executed and your validateform() method is not available. It happened because your script tag type attribute is not correct <script type="javascript">
To make it work you need to change it to this
<script type="text/javascript">
And please change your validation method validateform() as it has too may typo.
What is wrong with the code is that the OP is validating the old-fashioned way with an HTML5 form. Prior to HTML5, you had to use JavaScript for front-end validation; now things are much simpler and easier, too. Of course, the OP would replace the value of the action in the following example with the desired URL.
Note: there were errors in the OP's code, but if you get rid of the JavaScript and code the HTML making sure to add the following to the text input:
required pattern="[a-zA-Z]+"
then the form validates. In other words, you don't have to work so hard when you use HTML5 for form validation :)
<form id="myform" name="myform" method="POST" action="https://www.example.com">
<label for="fname">Firstname</label>: <input name="fname" placeholder="First name" maxlength="20" required pattern="[a-zA-Z]+">
<input type="submit" name="submit" value="Submit">
</form>
For those who prefer to do things the old-fashioned way, see this revision of the OP's code. Note: it uses a minimum of variables, employs short-cuts for less verbosity, and is organized with functions. Also, it is kind to the user's hands, too.
The way you have done you will never be able to use document.write to output anything, use this, working for me:
<!DOCTYPE html>
<script>
function validateform(){
alert("Hello");
var valid = true;
var fname = document.myform.fname.value;
var types = /^[a-zA-Z]+$/;
if (fname==null || fname=="") {
firstnameErr = 'required';
valid = false;
} else if (!fname.match(types)) {
firstnameErr = 'format error';
valid = false;
}
document.getElementById('msg').innerHTML = firstnameErr;
return valid;
}
</script>
<form name="myform" method="post" onsubmit="return validateform()" action="/Project/ViewList.php">
Firstname : <input type="text" name="fname" placeholder="First name" maxlength="20">
<span class="error">* <label id='msg'></label> </span>
<input type="submit" name="submit" value="Submit">
</form>
</body>
It looks you have a series of typo in your code,
try this
<!DOCTYPE html>
<html>
<body style="background-color: #ccc">
<script>
function validateform() {
var firstnameErr = "";
var valid = true;
var name = document.myform.fname.value;
var types = /^[a-zA-Z]+$/;
if (name == null || name == "") {
firstnameErr = "required";
valid = false;
} else if (!name.match(types)) {
firstnameErr = "format error";
valid = false;
}
return valid;
}
</script>
<form name="myform" method="post" onsubmit="return validateform()" action="/Project/ViewList.php">
Firstname : <input type="text" name="fname" placeholder="First name" maxlength="20">
<span class="error">*
<script>
document.write(firstnameErr);
</script>
</span>
<input type="submit" name="submit" value="Submit">
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script>
function getElements()
{
var v = document.getElementById('view');
var x=document.getElementsByTagName("input");
for(var i=0; i<x.length; i++){
v.innerHTML = x[i].value+"<br>";
}
}
</script>
</head>
<body>
<input type="text" size="20"><br>
<input type="text" size="20"><br>
<input type="text" size="20"><br><br>
<input type="button" onclick="getElements()" value="How many input elements?">
<p id='view'></p>
</body>
</html>
This is my code where I want to fetch the values of the fields and iterate them below in the "p" tag but it kept showing me the value of the last input which is the submit value.
The nature of the program was for me to fetch data from many inputs elements including file, upload field and submit them to the server script.
You need to change your html and javascript as following which will not give you button's value(which is not needed) :
HTML:
<input type="text" size="20"><br>
<input type="text" size="20"><br>
<input type="text" size="20"><br><br>
<button onclick="getElements()" value="How many input elements?" >How many input elements?</button>
<p id='view'></p>
JS:
function getElements()
{
var v = document.getElementById('view');
v.innerHTML = "";
var x=document.getElementsByTagName("input");
for(var i=0; i<x.length; i++){
v.innerHTML += x[i].value+"<br>";
}
}
DEMO : http://jsfiddle.net/f7bLq0b4/
Make the below change in your code to make it work.
<!DOCTYPE html>
<html>
<head>
<script>
function getElements()
{
var v = document.getElementById('view');
var x=document.getElementsByTagName("input");
for(var i=0; i<x.length; i++){
v.innerHTML += x[i].value+"<br>";
}
}
</script>
</head>
<body>
<input type="text" size="20"><br>
<input type="text" size="20"><br>
<input type="text" size="20"><br><br>
<button onclick="getElements()">How many input elements?</button>
<p id='view'></p>
</body>
</html>
To append a string you need to use +=.
I want to create text fields according to user's input and show the text fields through JavaScript function but this code is not working!
<html>
<head>
<title>Create text Fields according to the users choice!</title>
<script type="script/JavaScript">
function createTextField(){
var userInput = parseInt(document.form2.txtInput.view);
for(var i=0; i<=userInput;i++)
{
document.write('<input type="text">');
}
}
</script>
</head>
<form action="http://localhost.WebProg.php" method="post" name="form2">
<p>How many text fields you want to create? Enter the number below!</p>
Input: <input type="text" name="txtInput">
<input type="button" name="btnInput" value="Create" onclick="createTextField();">
</form>
</html>
Please Replace this line:
var userInput = parseInt(document.form2.txtInput.view);
To
var userInput = parseInt(document.getElementsByName('txtInput')[0].value);
function createTextField(){
// alert(document.getElementById('txtInput').value);
var userInput = parseInt(document.getElementsByName('txtInput')[0].value);
for(var i=0; i<userInput;i++)
{
document.write('<input type="text">');
}
}
<html>
<head>
<title>Create text Fields according to the users choice!</title>
</head>
<form action="http://localhost.WebProg.php" method="post" name="form2">
<p>How many text fields you want to create? Enter the number below!</p>
Input: <input type="text" name="txtInput" id="txtInput">
<input type="button" name="btnInput" value="Create" onclick="createTextField();">
</form>
</html>
You shouldn't use document.write. The correct way to do it is to append the inputs to a div.
Demo on Fiddle
HTML:
<form action="http://localhost.WebProg.php" method="post" name="form2">
<p>How many text fields you want to create? Enter the number below!</p>Input:
<input type="text" name="txtInput" />
<input type="button" name="btnInput" value="Create" />
<div></div>
</form>
JavaScript:
var btn = document.getElementsByTagName("input")[1];
btn.onclick = function () {
var userInput = parseInt(document.getElementsByTagName("input")[0].value, 10);
for (var i = 0; i <= userInput - 1; i++) {
document.getElementsByTagName("div")[0].innerHTML += "<input type='text' />"
}
};
Jquery is better option to add dynamic input/div's easy to manipulate DOM.
Check the following code
<div class="box">
<label> Enter input value </label>
<input type="number" id="in_num"/>
<button type="button" id="submit"> submit </button>
<h3> Append input values</h3>
<div id="dynamicInput"></div>
</div>
$(document).ready(function(e){
$('#submit').click(function(){
var inputIndex = $('#in_num').val();
for( var i=0; i<inputIndex; i++)
{
$('#dynamicInput').append('<input type=text id=id_'+ i +'/>');
}
});
});
Demo URl: http://jsfiddle.net/sathyanaga/75vbgesm/3/
Change:
var userInput = parseInt(document.form2.txtInput.view);
To:
var userInput = parseInt(document.getElementById("txtInput").value);
And give the input textbox an id (I used "txtInput", but it can be anything).
I believe you also need to change the loop from, when I typed "2" it created 3 inputs instead of 2.
this code returns "ReferenceError: work is not defined" when clicking the submit button and I haven't found why. (I'm also using CakePHP)
My idea is to create a validator object, create functions in it, and then instantiate and use it.
HTML:
<html>
<head>
<script>
<?php echo $this->Html->script('validate'); ?>
</script>
</head>
<body>
<br>
<br>
<br>
<br>
<form name="form" action="mailtest.php" method="post">
name <input type="text" name="name">
mail <input type="text" name="mail">
comment <input type="text" name="comment">
<input type="button" name="button" value="click"
onClick="work(this.form)">
</form>
</body>
</html>
JavaScript:
var validator = function() {
var name;
name = form.name.value;
var mail;
mail = form.mail.value;
var comment;
comment = form.comment.value;
validate: function()
{
form.name.value = "NO!";
}
}
function work(form)
{
v = new validator();
v.validate();
}
If you change your validator function to the following the error disappears
var validator = function() {
var name;
name = form.name.value;
var mail;
mail = form.mail.value;
var comment;
comment = form.comment.value;
this.validate = function()
{
form.name.value = "NO!";
}
}
Firstly, check your syntax it is not valid. You cannot set properties to function like you do with validate: function() {...}.
Secondly, you don't path this.work to validator so it won't be defined inside it.
Thirdly, I am not sure this is a good idea to make new instance ob object every time you click the button. Why don't just use simple function call here?
<head>
<script>
function validate(form) {
var name = form.name.value,
mail = form.mail.value,
comment = form.comment.value;
form.name.value = "NO!";
};
function work(form) {
validate(form);
}
</script>
</head>
<body>
<br>
<br>
<br>
<br>
<form name="form" action="mailtest.php" method="post">name
<input type="text" name="name">mail
<input type="text" name="mail">comment
<input type="text" name="comment">
<input type="button" name="button" value="click" onClick="work(this.form)">
</form>
</body>
Also, if want want to understand objects in JS (it can be tricky) and you them, I would recommend you read this two blog posts: JavaScript Objects in Detail and OOP In JavaScript: What You NEED to Know.
The problem was that in this case (weird) Cakephp didn't recognize the file by calling it with echo $this->HTML->script(validate); so I had to use validate.js .....