help:question obout checkbox!

Page 1 of 1

11 Replies - 531 Views - Last Post: 23 June 2012 - 10:44 AM

#1 Maryam.m  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 9
  • Joined: 04-June 12

help:question obout checkbox!

Posted 20 June 2012 - 01:54 AM

hi
i have big problem
i have some checkboxes, i wana have new page by click in every checkbox(by a submit button).
for example i have 5 checkbox, i choose 3 of them,so by clicking on the submit it should to open new page,and this page should have information of that 3 chechboxes only.
please guide me to solve this problem! :sad2:

Is This A Good Question/Topic? 0
  • +

Replies To: help:question obout checkbox!

#2 Atli  Icon User is online

  • D.I.C Lover
  • member icon

Reputation: 3045
  • View blog
  • Posts: 4,562
  • Joined: 08-June 10

Re: help:question obout checkbox!

Posted 20 June 2012 - 01:59 AM

Hey.

You can use a server-side language, like PHP or ASP.NET, to process the forum submission and create the page based on what is selected. Do you know how to use any such language?

You may also be able to make this work using Javascript. It can read what you've selected when you submit the form, and redirect you to another page according to your choices. It can even manipulate the current page to show you the content without having to redirect you, but that's a little more effort, and requires you to learn it pretty well.
Was This Post Helpful? 1
  • +
  • -

#3 Maryam.m  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 9
  • Joined: 04-June 12

Re: help:question obout checkbox!

Posted 20 June 2012 - 12:00 PM

Excuseme but can you explain more?
Was This Post Helpful? 0
  • +
  • -

#4 Atli  Icon User is online

  • D.I.C Lover
  • member icon

Reputation: 3045
  • View blog
  • Posts: 4,562
  • Joined: 08-June 10

Re: help:question obout checkbox!

Posted 20 June 2012 - 12:37 PM

Sure. Which parts do you need more details on?

Essentially, you either have the option of sending the checkbox selection to a server-side script by submitting it to another page, or you have the option of using client-side scripting (Javascript) to read the checkboxes when a button is clicked and update the current page with the information needed.

If you go with the server-side option you'll need to pick a server-side language: PHP, ASP.Net, Java, Perl, Python, Lua, etc... Most servers support either PHP or ASP.NET so one of those should be fine. - You'll of course have to learn the basics of that language though.

If you go with the client-side option you'll need to use Javascript to listen for either a form submission or the click of a button, and when that happens to read your checkboxes to see which are selected. Then you'd have it either redirect to another page with the info on those checkboxes or you update the current page with the info for those checkboxes.

Either way you need to learn the basics of one of those languages. Of the three I'd say PHP is the easiest option with the most gradual learning curve, and it's the most widely supported.

This post has been edited by Atli: 20 June 2012 - 12:40 PM

Was This Post Helpful? 1
  • +
  • -

#5 Maryam.m  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 9
  • Joined: 04-June 12

Re: help:question obout checkbox!

Posted 21 June 2012 - 09:16 AM

pleas see this code
<HTML>
<head>
<TITLE>my resume</TITLE>
</head>
<body>

<FORM method="POST" ACTION="information.html">
<center>
Select from here: <br><br>
<table>
<tr>
    <td> 
        <input TYPE=checkbox name=information VALUE=contact >
    </td>    
    <td>    
        contact info
    </td>
</tr>

<tr>
    <td> 
        <input TYPE=checkbox name=information VALUE=personal>
    </td>    
    <td>    
        personal info
    </td>
</tr>

<tr>
    <td> 
        <input TYPE=checkbox name=information VALUE=edu >
    </td>    

    <td>    
        education info
    </td>
</tr>

<tr>
    <td> 
        <input TYPE=checkbox name=information VALUE=favorites>
    </td>    

    <td>    
        favorites
    </td>
</tr>
</table>
<br> <INPUT TYPE=submit name=submit Value="Submit">
</center>
</FORM>
</BODY>
</HTML>


so for example you choose favorites and education info adn click on submit then open a page ,on that page how can show all the informations of my favorits and education...this problem made me crazy.... :/ :D
and of course on the next page( information.html )i should write java script.

This post has been edited by modi123_1: 21 June 2012 - 09:22 AM
Reason for edit:: highlight the lines THEN click the code tags button in the 'format text' box of the post.

Was This Post Helpful? 0
  • +
  • -

#6 Atli  Icon User is online

  • D.I.C Lover
  • member icon

Reputation: 3045
  • View blog
  • Posts: 4,562
  • Joined: 08-June 10

Re: help:question obout checkbox!

Posted 21 June 2012 - 09:39 AM

View PostMaryam.m, on 21 June 2012 - 04:16 PM, said:

... how can show all the informations of my favorits and education...

I've already told you about the two ways you can do that. Your form seems to be expecting some server-side processing script to handle it, judging by the fact that you use POST, but you are sending it to a static .html page. That won't work. You need a server-side script to handle POST data.

Like I say, you can either send the data to a server-side script via a form, or you can use Javascript to process the stuff client-side. I suggest you look into the server-side method using PHP. (There are a lot of tutorials online that cover PHP form handling.)

View PostMaryam.m, on 21 June 2012 - 04:16 PM, said:

and of course on the next page( information.html )i should write java script.

No, that won't work. When you send the form using POST, your selection will not be available to client-side code. If you want to do this using Javascript, you'd be better of not sending the form at all. Just use Javascript on the original page to update that page according to what is chosen. There is no need to use two separate pages if you choose to use Javascript.


One more thing. The way you name your check-boxes is problematic. Each of them has the same name: "information", which means only one of your selected boxes will be sent with the form. (Likely the last selected box in the markup.) - Check-boxes, unlike radio-boxes, need separate names. They aren't different values for the same field.

If you are using a server-side language like PHP, you can append a "box" bracket to the end of the name of fields, and then they will be sent as an array of values: name="information[]"
Was This Post Helpful? 0
  • +
  • -

#7 Maryam.m  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 9
  • Joined: 04-June 12

Re: help:question obout checkbox!

Posted 21 June 2012 - 09:52 AM

yes I know what you say...
but our professor toldو you should write it only with html and javascript code.

Quote

If you want to do this using Javascript, you'd be better of not sending the form at all. Just use Javascript on the original page to update that page according to what is chosen. There is no need to use two separate pages if you choose to use Javascript.

could you tell me how?
Was This Post Helpful? 0
  • +
  • -

#8 Atli  Icon User is online

  • D.I.C Lover
  • member icon

Reputation: 3045
  • View blog
  • Posts: 4,562
  • Joined: 08-June 10

Re: help:question obout checkbox!

Posted 21 June 2012 - 10:18 AM

You can use Javascript to monitor events happening to elements on the current page, like when checkboxes are checked or when forms are submitted. It can then execute code to alter what is actually shown on the page.

For instance, the simplest way to monitor a checkbox for changes is to create a Javascript function and then execute it in the onchange attribute of the boxes. The function will then execute when the box contents are changed and you can update the page accordingly.
<!DOCTYPE HTML>
<html>
	<head>
		<title>Example</title>
		<meta charset="UTF-8"/>
		<script>
		/* A function that will be attached to the checkboxes
		 * and executed when you check or uncheck them. */
		function onBoxChange(e) {
			// Get a refernece to all the checkboxes on the page
			// in the form of an array that we can loop over.
			var boxDiv = document.getElementById("boxes");
			var boxes = boxDiv.getElementsByTagName("input");
			
			// Build a list of the values of all the boxes that
			// are checked by looping over the list of boxes
			// retrieved above.
			var checked = [];
			for (var i = 0; i < boxes.length; ++i) {
				if (boxes[i].checked) {
					checked.push(boxes[i].value);
				}
			}
			
			// Then show this list in the output <pre> element.
			var output = document.getElementById("output");
			output.innerHTML = checked.join(",");
		}
		</script>
	</head>
	<body>
		<h1>Select boxes!</h1>
		<div id="boxes">
			<!--
				By calling the function defined above in the
				"onchange" property of each of the checkboxes
				we make it so that everytime their state is changed
				the function is executed, thus updating the list
				of values showin in the output area.
			-->
			<input type="checkbox" value="First" onchange="onBoxChange(event);"/> First<br/>
			<input type="checkbox" value="Second" onchange="onBoxChange(event);"/> Second<br/>
			<input type="checkbox" value="Third" onchange="onBoxChange(event);"/> Third<br/>
		</div>
		<pre id="output"></pre>
	</body>
</html>

You can use this same concept to do what you are after, by having each of the boxes execute a function in their "onchange" property that shows or hides info relating to that box.
Was This Post Helpful? 1
  • +
  • -

#9 Maryam.m  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 9
  • Joined: 04-June 12

Re: help:question obout checkbox!

Posted 21 June 2012 - 10:44 AM

thanks but one more question(please excuse me :blush: )
you wrote for example value="First" but my content of checkbox is not only one word it's a lot of information ,i mean when i choose First,all my education infomation should be print...it is my problem!
Was This Post Helpful? 0
  • +
  • -

#10 Atli  Icon User is online

  • D.I.C Lover
  • member icon

Reputation: 3045
  • View blog
  • Posts: 4,562
  • Joined: 08-June 10

Re: help:question obout checkbox!

Posted 21 June 2012 - 10:56 AM

That was only a very simple, generic example. It's not going to work unless you modify it to work for your specific needs.

As you pointed out, you would obliviously not put all the info you need to display into the checkebox value attribute. You would either have it ready in the page in a hidden HTML element that you show using Javascript (look up the display: none CSS style) or you'd call it in from an external data source using AJAX and inject it into the page via the DOM. (The first method is by far simpler.)
Was This Post Helpful? 1
  • +
  • -

#11 Maryam.m  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 9
  • Joined: 04-June 12

Re: help:question obout checkbox!

Posted 21 June 2012 - 11:18 AM

oh yes thanks a million for your big help :)
Was This Post Helpful? 0
  • +
  • -

#12 Maryam.m  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 9
  • Joined: 04-June 12

Re: help:question obout checkbox!

Posted 23 June 2012 - 10:44 AM

HEY! :bananaman:
finally i could find it. :bananaman:
yessssssssss!!! :bananaman:
THAT'S IT!!!! :bananaman: :D
<html>
<head>
<title>
my page
</title>
<script language="javascript" type="text/javascript">
var txt ="";
function createOrder()
{
var myCheckBox=document.forms[0].myCheckBox;
var i;
for (i=0;i<myCheckBox.length;i++)
{
if (myCheckBox[i].checked)
{
txt = txt + myCheckBox[i].value + "<br />";
}
}
}
function showMessage() {
document.write(txt);
document.write('<br /><br /><a href=checkbox.html>Back to HomePage</a>');
}
</script>

</head>
<body>
<p><b>Select one or more ...</b></p>
<form method="get" >
<input type="checkbox" name="myCheckBox" value="First name : <b><font color=red>Maryam</font></b></br>Last name : <b><font color=red>Mohammadi</font></b></br>Sex : <b><font color=red>Female</font></b><br />"> Personal Information<br />
<input type="checkbox" name="myCheckBox" value="BirthDay : <b>1992</b><br />"> BirthDay<br />
<input type="checkbox" name="myCheckBox" value="Email : <a href=mailto:mm_137042@yahoo.com>mm_137042@yahoo.com</a><br />"> Email address<br />
<input type="checkbox" name="myCheckBox" value="It is an image : <img src=image.png />"> a picture<br />

<br />
<input type="button" onclick="createOrder(),showMessage()" value="Send order">
</form>
</body>
</html>
Was This Post Helpful? 0
  • +
  • -
Page 1 of 1