Pass a Checkbox Value to Javascript Function

Question

ajwei810192 10 Junior Poster in Training

14 Years Ago

Hi,

I am a newbie in Ajax, and I am trying to figure out how to pass the value of an item from my HTML form through Javascript/Ajax.

Here is the code:

  <form action="" id="name">             
            <p><input type="checkbox" value="Weather" name="news[]"
                onclick="showRSS(document.name.news[].checked)"/> Weather</p>

This is what I have in my showRSS function:

function showRSS(str)
{
   alert(str);
  }

This does not seem to be working, is there something I have missed here to that the value in my checkbox input would be passed through the showRSS function?

Thanks for your help.

javascript

Edited 11 Years Ago by Reverend Jim because: Fixed formatting

3 Contributors
8 Replies
8K Views
1 Day Discussion Span
Latest Post 14 Years Ago Latest Post by rajarajan2017

rajarajan2017

14 Years Ago

<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<SCRIPT LANGUAGE="JavaScript">
function check(field)
{
 for (i=0;i<field.length;i++)
	if (field[i].checked==true)	alert(field[i].value);
}
</script>
</head>

<body>
<form name="myform" action="" method="post">
<b>Your Favorite Scripts & Languages</b><br>
<input type="checkbox" name="list" value="Java">Java<br>
<input type="checkbox" name="list" value="Javascript">Javascript<br>
<input type="checkbox" name="list" value="Active Server Pages">Active Server Pages<br>
<input type="checkbox" name="list" value="HTML">HTML<br>
<input type="checkbox" name="list" value="SQL">SQL<br>

<input type="button" name="commit" value="Submit" onClick="check(document.myform.list)"/>
<br>
</form>


</body>
</html>

The code will list the value of checkbox you selected.

rajarajan2017

14 Years Ago

Use a submit button to parse the checked values, you implemented onClick on every input, that will parse your request immediately and your page will print what you selected at the first time. So please use a submit button:

i) Click the check boxes
ii) Give submit

Edited 14 Years Ago by rajarajan2017 because: n/a

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

ajwei810192 10 Junior Poster in Training · Answer 1 · 2010-05-12T18:11:37+00:00

<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<SCRIPT LANGUAGE="JavaScript">
function check(field)
{
 for (i=0;i<field.length;i++)
	if (field[i].checked==true)	alert(field[i].value);
}
</script>
</head>

<body>
<form name="myform" action="" method="post">
<b>Your Favorite Scripts & Languages</b><br>
<input type="checkbox" name="list" value="Java">Java<br>
<input type="checkbox" name="list" value="Javascript">Javascript<br>
<input type="checkbox" name="list" value="Active Server Pages">Active Server Pages<br>
<input type="checkbox" name="list" value="HTML">HTML<br>
<input type="checkbox" name="list" value="SQL">SQL<br>

<input type="button" name="commit" value="Submit" onClick="check(document.myform.list)"/>
<br>
</form>


</body>
</html>

The code will list the value of checkbox you selected.

Ok, maybe I am trying to do something not as straight forward, I fiddled around your example, and modified my code to:

<!DOCTYPE html SYSTEM "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>My Page</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <script language="javascript" type="text/javascript">
            function check(field){
            var str ="";
            for (i=0;i<field.length;i++)
            if (field[i].checked==true) str = str + field[i].value + "\t";
            document.write(str);
            }
</script>
    </head>
    <body>
        <!--fill in the nav content-->
            <h1>News Source</h1>
            <p style="color:green;font-size:14px">Your Life and Interests</p>
            <form action="" name="form1" method="post">
                <p><span><input type="checkbox" value="Weather" name="news"
                            onclick="check(document.form1.news)"/> Weather</span>
                    <span><input type="checkbox" value="Food" name="news"
                            onclick="check(document.form1.news)"/> Food</span>
                    <span><input type="checkbox" value="Travel" name="news"
                            onclick="check(document.form1.news)"/> Travel</span>
                   </p>
            </form>
            <div id="rssOutput"><!--This is a test--></div>
    </body>
</html>

This is what I get: F [Xerces] Element type "field.length" must be followed by either attribute specifications, ">" or "/>".

What does this mean? Is there something I have missed here?
Thanks for your help.

scrappedcola 11 Posting Whiz in Training · Answer 2 · 2010-05-12T20:59:38+00:00

If you are just passing the form value to the function showRSS what you have is really close. Try

<form action="" id="name"> 
<p><input type="checkbox" value="Weather" name="news[]"
onclick="showRSS(this);"/> Weather</p>

function showRSS(el)
{
alert(el.value);
}

This is just javascript no ajax involved. If you were to use an http request object to pass this value back to the server side and then this would be ajax. When you have a click event you can use the keyword this to refer to the triggering element. If you want to learn more of basic javascript check out the Douglas Crockford lectures on yahoo. He tends to ramble and isn't a great teacher but he really knows his stuff (his books on Javascript are imho the best out there).

ajwei810192 10 Junior Poster in Training · Answer 3 · 2010-05-12T21:42:21+00:00

Use a submit button to parse the checked values, you implemented onClick on every input, that will parse your request immediately and your page will print what you selected at the first time. So please use a submit button:
i) Click the check boxes
ii) Give submit

I did try to implement what you suggested, and sadly it still didn't work.

Here is my code:

<form action="" onsubmit="check(document.form1.news)" name="form1" method="post">
                <p><span><input type="checkbox" value="Weather" name="news"/> Weather</span><input type="submit"                   value="Submit"/></p></form>

My Javascript function:

function check(field)
{
var str ="";
for (i=0;i<field.length;i++)
if (field[i].checked==true) str = str + field[i].value + "\t";
document.write(str);
}

Apparently, it does not seem to behave what I think it should be doing, because when I push submit, the screen refreshes with no boxes checked.

Have I done something wrong here?
Thanks for your help.

scrappedcola 11 Posting Whiz in Training · Answer 4 · 2010-05-13T01:32:01+00:00

The reason why your screen refreshes with no boxes checked is because when you submit the form it's hitting the pages URL again passing to the page name value pairs of the elements within the form. The check function is happening but since you are returning true the submit is passing through to the page. You can do one of two things.
Either return false in the onsubmit function

<form action="" onsubmit="check(document.form1.news); return false;" name="form1" method="post">
                <p><span><input type="checkbox" value="Weather" name="news"/> Weather</span><input type="submit"                   value="Submit"/></p></form>

or place the check function on the submit button as a onclick and change the type from submit to just a button.

<form action="" name="form1" method="post">
    <input type="checkbox" value="Weather" name="news"/> Weather
    <input type="button" value="Submit" onclick="check(document.form1.news)" />
</form>

Either way a quick way to see if you are even getting to the check function is to either set up a few alerts or if you are using IE8/FF console.log("message here"); You maybe getting to the check function but not getting to the input boxes. Sometimes document.formName.element doesn't work. You may wish to use

document.getElementsByName("news");

if you aren't even getting the inputs via document.form1.news.

ajwei810192 10 Junior Poster in Training · Answer 5 · 2010-05-13T04:28:27+00:00

Thanks to your descriptive explanation. I tried all three methods, and it looks like the one where you defined submit as a button is the one that works. Thank you for your help! Now I am on the road to Ajax!

rajarajan2017 · Answer 6 · 2010-05-13T10:20:54+00:00

My fist post itself give you the solution, I think you couldn't read it clearly whatever scrappedcola said is in the reply. Anyway thanks to scrappedcola for clearly explained. COOL! And mark the thread as solved if it is solved.