How to pass 2 or more arguments from HTML inputs to a Javascript function

Question

I have these inputs:

<input type='radio' id='1' name='s' onclick='pieces(this.value);'  value='6'>6
<input type='radio' id='2' name='s' onclick='pieces(this.value);'  value='12'>12
<input type='radio' id='3' name='s' onclick='pieces(this.value);'  value='24'>24
<input type='radio' id='11' name='v' onclick='pieces(this.value);'  value='yes'>Yes
<input type='radio' id='12' name='v' onclick='pieces(this.value);'  value='no'>No

I want to pass the value from "name='s'" to var1, and value from "name='v'" to var2 to the function pieces(var1, var2) when the radio button is clicked.

@arttronics, already editted. thanks

Ivo San
– Ivo San

2012-06-30 08:35:32 +00:00
Commented Jun 30, 2012 at 8:35 — Ivo San
– Ivo San, Commented Jun 30, 2012 at 8:35

arttronics · Accepted Answer · 2012-07-01 02:01:09Z

1

You can pass the arguments in the following different ways:

function antguider(name, url){
    alert("Name = "+name+" URL = "+url);
}

HTML Part

<input type="button" onclick=antguider('AntGuider','http://antguider.blogspot.com') value="Click Without Quotation" />
<input type="button" onclick="antguider('AntGuider','http://antguider.blogspot.com')" value="Click With Quotation" />
<input type="button" onclick="antguider(12345,'http://antguider.blogspot.com')" value="No Quotation Needed For Button" />

edited Jul 1, 2012 at 2:01

arttronics

9,9202 gold badges29 silver badges63 bronze badges

answered Jun 30, 2012 at 6:08

Muthukumar Jayamurugan

1,8352 gold badges17 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

arttronics Over a year ago

You are missing double quotes for the first onclick attribute. This markup will not validate and can cause parsing issues.

arttronics Over a year ago

If you have reference to using onclick in element tag without quotation for first input button, please provided it. Thank you.

Muthukumar Jayamurugan Over a year ago

In an HTML attribute without Quotation also work. Quotation is used to group. Example) title="Click Event" will work and title=Click Event will take the first value(Click) only. That is if a word doesn't contains space then no need of Quotation.

arttronics Over a year ago

Why then does your non-spaced onclick fail W3C validation? Ok, I just found a great article that describes your Answer and why it fails validation. +1 for a great answer! Reference: article

Muthukumar Jayamurugan Over a year ago

It is not a correct way to use like that. But it is working in all the Major Browsers.

|

ThinkingStiff · Accepted Answer · 2012-07-01 02:31:11Z

1

You can get values of both radio inputs in Javascript method itself using document.getElementsByName() method or this should also work,
Try using func(document.getElementsByName('s'),document.getElementsByName('v'))

Below code should help,

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script src="js1/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
    alert('Ok');
    $('#btn').click(function(){
        var r1=$('input:radio[name=s]').val();
        var r2=$('input:radio[name=v]').val();
        show(r1,r2);
    });
});

function show(r1,r2){
    alert(r1);
    alert(r2);
}
</script>
</head>
<body>
<input type='radio' id='1' name='s' onclick='pieces(this.value);'  value='6'>6
<input type='radio' id='2' name='s' onclick='pieces(this.value);'  value='12'>12
<input type='radio' id='3' name='s' onclick='pieces(this.value);'  value='24'>24


<input type='radio' id='11' name='v' onclick='pieces(this.value);'  value='yes'>Yes
<input type='radio' id='12' name='v' onclick='pieces(this.value);'  value='no'>No

<button id="btn">Submit</button>
</body>
</html>

edited Jul 1, 2012 at 2:31

ThinkingStiff

65.4k31 gold badges148 silver badges241 bronze badges

answered Jun 30, 2012 at 6:01

Mayank

8161 gold badge11 silver badges12 bronze badges

3 Comments

Mayank Over a year ago

You can change show function to get values there also as shown below, function show(){ var r1=$('input:radio[name=s]').val(); var r2=$('input:radio[name=v]').val(); alert(r1); alert(r2); }

Ivo San Over a year ago

why that code doesn't work, i applied that to ajax and it seems like only the 1st variable (r1) got value. xmlhttp.open('GET','url.php?a1='+r1+'&a2='+r2,true);

arttronics Over a year ago

@ivory-santos, this particular Answer requires that you choose two radio buttons as nothing is set from the beginning. Check out the previous comment with the jsFiddle I provided. Cheers!

swiecki · Accepted Answer · 2012-07-01 06:51:13Z

0

For 2 inputs, this can easily be done with JQuery.

va1=$("input[name=s]").val();
va2=$("input[name=v]").val();

Then call the desired function, passing in your values as parameters.

func(va1,va2);

edited Jul 1, 2012 at 6:51

swiecki

3,4833 gold badges25 silver badges19 bronze badges

answered Jun 30, 2012 at 5:52

Mohit Pandey

3,8597 gold badges28 silver badges38 bronze badges

Collectives™ on Stack Overflow

How to pass 2 or more arguments from HTML inputs to a Javascript function

3 Answers 3

7 Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related