ok so i have a script that when you click a link it dynamicly adds a form field is it possible to make it so when it is submitted it goes to "example.com?7" (7 because of 7 files)
what i mean is if i click it 5 times and there are 5 file fields and i choose 5 files can i make the action link mysite.php?5
here is the script:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="application/javascript">
function add(){
var field = document.createElement('input');
field.setAttribute("type", "file");
field.setAttribute("name", "yo");
document.getElementById('myform').appendChild(field);
}
</script>
</head>
<body>
<form id="myform" name="form1" enctype="multipart/form-data" method="post" action="">
<p>File:
<input type="file" name="hello" id="hello" />
</p>
<p>
<input name="submit" type="submit" value="Submit" />
</p>
</form>
Click Here
</body>
</html>
Thanks a lot!
I suggest giving the new added fields class = "classX" and when you submit the form count the no of elements with the specified class with getElementsByClassName
I find it simpler than incrementing a value each time a field is added
I would keep it simple and keep track of how many file fields you have added. Just update the url every time you add a new file field.
var numFileElements = 1;
function add(){
var field = document.createElement('input');
field.setAttribute("type", "file");
field.setAttribute("name", "yo");
var myForm = document.getElementById('myform');
myForm.appendChild(field);
++numFileElements;
myForm.setAttribute('action', '?'+ numFileElements);
}
Just keep an extra hidden field in the form (call it "count"), and have the script increment its value whenever it adds another file input.
Something like?
function doSubmit() {
var myForm = document.getElementById('myForm'); //Get myForm
var childNodes = myForm.childNodes; //Count child nodes
var fields = 0;
for ( var node in childNodes ) {
if ( childNodes[node].tagName == 'P' ) fields++;
}
myForm.setAttribute('action', 'mysite.php?'+fields);
}
It counts all P elements directly below myForm. Not perfect, but it ought to work! Just add an onsubmit='doSubmit();
Related
I have a problem by populating a HTML select.
This select is in an form that first is loaded into a div. (see the code below)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" />
<link rel="stylesheet" type="text/css" href="style.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
function createForm(){
$("#formdiv").load("Register.html");
var itemval= '<option value="OT">OT</option>';
document.getElementById("sel").appendChild(itemval);
}
function validateForm(){
// ...
}
</script>
</head>
<body onload="createForm()">
<div id="formdiv" >
// here will be the form
</div>
</body>
The Register.html is a simple form
<h2>Register</h2>
<form name="registerForm" id="registerForm" onsubmit="validateForm()">
Select:<select name="sel" id="sel"></select>
<input type="submit" value="Submit">
</form>
The function createForm() should populate, here as a first test, the select tags. But unfortunately it does not show any option in the browser.
Hope some of you are more experienced than I and can hint me to the solution.
Thanks in advance!
Here the problem is that you use appendChild with a String,
you should use innerHTML to insert a string, or of you want to append
do createElement and then append, appendChild accepts Node as a parameter,
in your case its better use add() method on select
http://www.w3schools.com/jsref/met_select_add.asp
<script type="text/javascript">
function createForm() {
var option = document.createElement("option");
option.text = "OT";
option.value = "OT";
document.getElementById("sel").add(option);
}
function validateForm() {
// ...
}
</script>
<div id="formdiv">
<form name="registerForm" id="registerForm" onsubmit="validateForm()">
Select:
<select name="sel" id="sel"></select>
<input type="submit" value="Submit">
</form>
</div>
<h2>Register</h2>
See jsfiffle link: http://jsfiddle.net/qgfbhgwd/
with a working example
You have 2 mistakes:
Use jQuery load function because is async so you are creating the content before loading the file register.html
appendChild needs a DOM Element instead of a string
This code fix your problem, hope it helps:
function createForm(){
var populateSelect = function() {
var itemsValues = ['OT', 'FOO', 'BAR'];
var items = document.createDocumentFragment();
itemsValues.forEach(function(el) {
var option = document.createElement("option");
option.value = el;
option.innerHTML = el;
items.appendChild(option);
});
document.getElementById("sel").appendChild(items);
};
$("#formdiv").load("register.html", populateSelect);
}
You can't add <option value="OT">OT</option> directly as appendChild, so use javascript createElement and always better to write a callback function for jquery load() to manipulate DOM.
function createForm() {
$("#formdiv").load("Register.html", function () {
//var itemval = '<option value="OT">OT</option>';
var itemval = document.createElement("option");
itemval.setAttribute("value", "OT");
itemval.innerText = "OT";
document.getElementById("sel").appendChild(itemval);
});
}
i got got confused when i run the static js and html below
i want to dynamicly add option by clicking button, but when i put it under the form , it will do acition post, unless i put it out of form ,it works. what's the reason? i didn't set type as "submit" for the add button, does any button clicked in form will cause form action?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>作业管理</title>
</head>
<body>
<form enctype="multipart/form-data" method="POST" >
<div id="postform">
本次作业标题
<input type="text" name="title" />
<br>
<div class="postoption">
添加项目
<input type="text" name="option[]" />
音频文件
<input type="file" name="radio[]" />
答案
<input type="text" name="answer[]" />
</div>
</div>
<button id="add">添加输入项</button>
<input type="submit" value="提交" />
</form>
<script type="text/javascript">
window.onload = function(){
var add = document.getElementById("add");
add.onclick = function(){
addOption();
}
}
function addOption(){
var postForm = document.getElementById("postform");
var postoptions = document.getElementsByClassName("postoption");
var op = postoptions[0];
var optionClone = op.cloneNode(true);
postForm.appendChild(optionClone);
};
</script>
</body>
</html>
The <button> element is a submit button by default. You can change this with the type="button" attribute, which makes it do nothing by default, or calling preventDefault on the event. But I'd go with the attribute since then your intention is semantically clear without actually running the script.
I want to create a TextField in which when I give any input it show on div and this script is showing inputs but not properly...
I don't know where I am making mistakes and I request that please give your answers only in JavaScript please don't use jquery. Thank you .
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<form name="form">
<input name="t" value="" onkeypress="printvalues();">
</form>
<div id="divId"></div>
</body>
</html>
script
function printvalues() {
var div = document.getElementById("divId");
div.innerHTML += form.t.value;
}
Here is my code with output
function printvalues() {
var div = document.getElementById("divId");
div.innerHTML = document.form.t.value;
}
EDIT:The keypress event executes before the value of textbox is changed so use keyup() event which triggers when the key is released instead like
<input name="t" value="" onkeyup="printvalues();">
Your solution is here....
Just change onkeypress to onkeyup
Made below changes and enjoy..
function printvalues(a) {
var div = document.getElementById("divId");
div.innerHTML=a;
}
<input type="text" name="t" onkeyup="printvalues(this.value);">
console.log(value); does not log anything but the number on the left is incrimented everyime i click and it indicates that the console.log() call is made, just not showing what I put into it.
Also, a side question is how could I do this if the javascript is in a different file? Thank you
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title>Star Delete</title>
<!--<script type="text/javascript" src="StarDelete.js"></script>-->
</head>
<body>OKAY DELETE STAR YES ;D!
<form>
<input type="text" id="formValueId" name="valueId"/>
<input type="button" id="theButton"/>
</form>
<script type ="text/javascript">
var button = document.getElementById("theButton"),
value = button.form.valueId.value;
//value = document.getElementById("formValueId").value;
button.onclick = function() {
console.log(value);
}
</script>
</body>
</html>
http://jsfiddle.net/3wjRJ/1/
var button = document.getElementById("theButton"),
value = button.form.valueId.value;
Here you go, the issue was that you were declaring the value variable when the javascript was first loaded, therefore it was always blank.
I am trying to get the user to put something into the text area and the output should be what he wrote repeapiting x amount of times, but I get an error "document.forme is undefined".
Can you please help me understand why it is undefined?
My code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>input home work</title>
<script type="text/javascript">
var help= document.forme.tryout.value;
for (x=1; x<=10;x++){
function numberCheak (){
document.write("this is"+" "+help++);
}
}
</script>
</head>
<body>
<form name="forme">
<input name="tryout" type="text" />
<input type="button" value="click me" onClick="numberCheak();"/>
</form>
</body>
</html>
Ok, you have a few problems. The first is that you are trying to access a form element that doesn't exist yet: the script is above the form element, so the form doesn't exist when you try to get it. If you move the script to the bottom of the page it will work better.
Second, the loop should be inside the function, not wrapped around the function.
Third, document.write has weird side effects and causes the document to be rewritten and will stop the script from continuing correctly.
Here's my revised script
function numberCheak() {
var help = document.forme.tryout.value;
for (var x = 1; x <= 10; x++) {
document.getElementById("output").innerHTML += help;
}
}
and the HTML form that goes with it
<form name="forme" id="forme">
<input name="tryout" type="text" />
<input type="button" value="click me" onclick="numberCheak();" />
<span id="output"></span>
</form>
You can see it in action on jsFiddle.
Forms are stored in collection and can be accessed like this:
var form = document.forms[i];
or
var form = document.forms[name];
In your case, i is 0 and name is forme.