I have a script where I use checkboxes and javascript to display additional items if the checkboxes are checked.
This seems to be working just fine most of the time.
There is one checkbox however that is giving problems.
I assume because of the javascript magic associated with it.
When checking it and then unchecking it, the checkbox always returns isset after post.
Never checking the checkbox and submitting returns not set as it should.
Checking and submitting returns checked as it should
checking, unchecking and submitting returns ... checked!
I have set up an example on http://vampke.uphero.com/tst.php
Here is the code:
if($_SERVER['REQUEST_METHOD'] == 'POST') {
if(isset($_POST['se_currentitem'])) echo "CHECKBOX = ISSET";
else echo "CHECKBOX = NOT SET";
}
echo <<< EOD
<!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>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
.hiddenDiv {display: none;}
.visibleDiv{display: block;}
</style>
</head>
<body>
<script language="javascript" type="text/javascript">
<!--
var currentitem = 0;
function toggle_currentitem(){
mydiv = document.getElementById("currentitemcontainer");
if (document.getElementById('se_currentitem').checked){
mydiv.className = "visibleDiv";
if(currentitem==0){
addcurrentitem();
}
}
else {
mydiv.className = "hiddenDiv";
}
}
function addcurrentitem(){
currentitem++;
var newitem = document.createElement('div');
newitem.id = currentitem;
newitem.innerHTML= "<p><strong><em>new item</em></strong><br /><label>select a number:</label><select name='se_currentitem[]'><option value='1'>1</option><option value='2'>2</option><option value='3'>3</option><option value='4'>4</option><option value='5'>5</option></select></p>";
document.getElementById('currentitem').appendChild(newitem);
}
//-->
</script>
<form action ="" method="post">
<input type="checkbox" id="se_currentitem" name="se_currentitem" value="1" onchange="toggle_currentitem()" /><label for="se_currentitem">click the checkbox to activate the items</label> <br />
<div id="currentitemcontainer" class="hiddenDiv">
<div id="currentitem"></div>
<a id='addnewcurrent' onclick='addcurrentitem()'>add item</a>
</div>
<input type="submit" name="submit" value="submit" />
</form>
</body>
</html>
does anyone know what's going on?
The checkbox is named se_currentitem and the select menu is named se_currentitem[]. PHP's $_POST array treats these as the same.
When you check the box, you create the select menu.
When you uncheck the box, you hide the select menu, but it remains in the DOM, and is submitted by the browser. Notice in the Network inspector (or tcpflow, etc.). that the browser submits both se_currentitem and se_currentitem[].
You should rename the checkbox so it is not called se_currentitem (or rename the select menu so it is not called se_currentitem[]).
Related
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.
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 have the following code:
<!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>
<style type="text/css">
body {background-color:Gray;}
body {text-align:left;}
</style>
<title>My First Project</title>
</head>
<body>
<form>
<table border="1" align="center">
<u><h5>Size</h5></u>
<tr><td><input type="radio" name="size" id="small" />Small</td></tr>
<tr><td><input type="radio" name="size" id="medium" />Medium</td></tr>
<tr><td><input type="radio" name="size" id="large" />Large</td></tr>
</table>
<br />
<script type="text/javascript">
if (document.getElementById('small').checked) {
document.getElementById('total').innerHTML = '$1.00';
}
else {
}
</script>
<div id="total">$0.00</div>
</form>
</body>
</html>
I wanted the script to change the text within div total to $1.00 instead of $0.00 when the radiobutton with id small was checked. However, nothing happens when I select it. What am I missing?
You've to invoke a function on some event -- JS basically runs on events!!
<input type="radio" name="size" id="small" onclick="yourFxn()" />Small</td>
In your script
function yourFxn(){
if (document.getElementById('small').checked) {
document.getElementById('total').innerHTML = '$1.00';
}
else {
}
}
scripts are read sequentially. When your javascript runs, there is no element with id total on the page because it is below the script.
But even if you move the code below, it still won't work because there is no click event atached to the radiobutton. your script only checks if the radiobutton is somehow magically selected on page load and changes the text. for exemple this code will change the text but it requires you to hardcode the checked radiobutton:
<!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>
<style type="text/css">
body {background-color:Gray;}
body {text-align:left;}
</style>
<title>My First Project</title>
</head>
<body>
<form>
<table border="1" align="center">
<u><h5>Size</h5></u>
<tr><td><input type="radio" name="size" id="small" checked="checked" />Small</td></tr>
<tr><td><input type="radio" name="size" id="medium" />Medium</td></tr>
<tr><td><input type="radio" name="size" id="large" />Large</td></tr>
</table>
<br />
<div id="total">$0.00</div>
<script type="text/javascript">
if (document.getElementById('small').checked) {
document.getElementById('total').innerHTML = '$1.00';
}
else {
}
</script>
</form>
</body>
</html>
What I think you really want to do is to attach a "click" EVENT to the radiobutton.
You can read more here:
http://www.w3schools.com/jsref/event_onclick.asp
The reason why you are not getting $1.00 is that - code inside will execute on page load. but what you need is to set the div's value on some event of a radio and NOT ON page load event.
so use your code in some function and call that function on radio button's click event
Here is a working example based on the critical parts of your code: http://jsfiddle.net/9hxDq/
You need to execute your code in response to an event (such as a click, a load event, or in response to an input being clicked)
Some of your markup was invalid (U tag inside of a TABLE)
HTML
<table border="1" align="center">
<tr><td><input type="radio" name="size" id="small" />Small</td></tr>
<tr><td><input type="radio" name="size" id="medium" />Medium</td></tr>
<tr><td><input type="radio" name="size" id="large" />Large</td></tr>
</table>
<input type="button" value="Calculate" onclick="calculate()" />
<div id="total">$0.00</div>
JavaScript
function calculate()
{
if (document.getElementById('small').checked)
{
document.getElementById('total').innerHTML = '$1.00';
}
else
{
alert("not checked!");
}
}
Tie the click event on the radio button to your code via:
var small = document.getElementById('small');
if (small.addEventListener) {
small.addEventListener('click', calc, false);
} else if (small.attachEvent) {
small.attachEvent('onclick', calc);
}
function calc() {
if (document.getElementById('small').checked) document.getElementById('total').innerHTML = '$1.00';
};
jsFiddle example.
The reason it isn't updating is because the script appears in the code before the <div id='total'>. And, more importantly, because the script gets executed immediately when it appears in the page, so it is run before the total element is added to the DOM.
To fix this, you need to either move the script lower in your HTML code, or make the script run only after the page has finished loading. The first of those options is a quick fix to get you up and running; the latter is probably the more recommended option.
To get it to run only after the page has finished loading, wrap it into a function, and use the onload event on the page to trigger it. Alternatively, if you're using JQuery, add it as a $(document).ready() function.
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();
how do I create it so that when I click "report user", a box displays and it shows a list of reasons why to report the user and a submit button.
I rarely use javascript...can someone point me in the right direction.
The basic approach is to toggle the CSS display with Javascript. This is the break down of the below code:
Attach an event to the links when the page loads. This is what the window.onload part does.
Identify the links and box with document.getElementById
Use an anonymous function to capture the display toggle
Toggle the display with style.display.
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Onclick Example</title>
<script type="text/javascript">
window.onload = function(){
var link = document.getElementById('rulink');
var box = document.getElementById('box');
var close = document.getElementById('close');
link.onclick = function(){
box.style.display = 'block'
}
close.onclick = function(){
box.style.display = 'none';
}
}
</script>
<style>
div{
display:none;
background:#f00;
width:100px;
}
</style>
</head>
<body>
report user
<div id="box">
<ul>
<li>abc</li>
<li>def</li>
</ul>
Close
</div>
</body>
Look into onclick events.
I would look into jquery, it makes javascript much easier. Using jquery you could perform that using one line of code such as:
$('.<link class>').click(function(){$('.<list class>').show()});
You can do it this way, but it's pretty crude:
<a href="" onclick="document.getElementById('something').style.display='inherit';return false" >###</a>
<input style="display:none" type="text" id="something" />
That's the "hard way", but understanding how it works is important.
It is worth it to use a JavaScript framework. Jquery is the most popular and it can seriously make doing any UI work WAY easier.
You can shorten that onclick to:
$('#something').show()
<script>
document.getElementById("showHide").onclick = function() {
var theDiv = document.getElementById("foo");
if(theDiv.style.display == 'none') {
theDiv.style.display = 'block';
this.innerHTML = 'Hide';
} else {
theDiv.style.display = 'none';
this.innerHTML = 'Show';
}
}
</script>
<span id="showHide">Show</span>
<div id="foo" style="display:none">
<form method="post">
<h3>Here are some reasons</h3>
Blah: <input type="checkbox"/><br />
Blah: <input type="checkbox"/><br />
Blah: <input type="checkbox"/><br />
<input type="submit" value="submit" />
</form>
</div>
Try it here: http://jsfiddle.net/8TNmn/2/ and see Click to show more - maybe JS?