How to change a value when i onclick

Question

So I have a drop down list like this:

<select name="store-cost" class="target">
    <option value = '100'>100</option>
    <option value = '500'>500</option>
    <option value = '1500'>1500</option>
</select>

and jquery to see what the user has chosen

$( ".target" ).change(function() {
    console.log($( this ).val());
});

and i have a button that calls jquery function:

<a href="#" onclick = donateNow(100)>Donate</a>

How do I change the value in the function donateNow according to the user's option?

Many thanks

EDIT, sorry didn't make myself clear, I would like to change I would like to change the function donateNow() param according to the user's chosen option

@felix he did not mean to change the value of select element.. he wants to change the parameter of `donateNow` function according the the select element's value...! — Rajaprabhu Aravindasamy, Jun 17 '14 at 05:22
You can get it inside `function donatenow()` by `$( ".target" ).val()` — Shaunak D, Jun 17 '14 at 05:22
@FelixKling The OP is not asking how to change the selected value. They are asking how to retrieve it to put into a different function. Yes the question is a duplicate but it isn't THAT duplicate :) — Jane S, Jun 17 '14 at 05:23
Put simply, you don't pass any argument to `donateNow` and retrieve the value inside the function instead. Or if you really want to make the function accept an argument, pass the value to the function. You already know how to *get* the value. — Felix Kling, Jun 17 '14 at 05:24
Please be aware of the [nasty pitfalls with inline event handlers](http://stackoverflow.com/a/21975639/218196). — Felix Kling, Jun 17 '14 at 05:30

Joe · Accepted Answer · 2014-06-17T05:35:03.563

1

The quick and dirty:

<a href="#" onclick="donateNow($('.target').val())">Donate</a>

The better practice:

<a href="#" onclick="donateNow()">Donate</a>
<script type="text/javascript">
function donateNow() {
  var amount = $('.target').val();
  //use amount
}
</script>

edited Jun 17 '14 at 05:35

answered Jun 17 '14 at 05:23

Joe

2,596
2
14
11

1

what's this..? how would a script works outside of a script tag..? – Rajaprabhu Aravindasamy Jun 17 '14 at 05:25
@RajaprabhuAravindasamy Why would `donateNow(100)` work at all? This is exactly the way to go! – Bergi Jun 17 '14 at 05:26
2

@RajaprabhuAravindasamy: The onclick value accepts arbitrary JS. – Felix Kling Jun 17 '14 at 05:26
I'd suggest to put the attribute value inside `"` quotes. The `'` should not make any troubles, but I'm not 100% sure. – Felix Kling Jun 17 '14 at 05:27
1

@Scorpion yeah that's true, link given by felix clearly states that. – Rajaprabhu Aravindasamy Jun 17 '14 at 05:29

Shaunak D · Answer 2 · 2014-06-17T05:40:29.847

1

Demo

Try this,

Update : a better way.

You can get the value in the function definition.

<a href="#" >Donate</a>

$( ".target" ).change(function() {
    console.log($( this ).val());
});

$("a:contains('Donate')").click(function(){
     donateNow($( ".target" ).val()):
});
function donateNow(selectedVal){
    console.log(selectedVal);
}

edited Jun 17 '14 at 05:40

answered Jun 17 '14 at 05:24

Shaunak D

20,588
10
46
79

1

Do you alter every function definition if you want to use the function with different values? – Bergi Jun 17 '14 at 05:28

score 0 · Answer 3 · answered Jun 17 '14 at 06:53

You can try below:

<select name="store-cost" class="target">
    <option value = '100'>100</option>
    <option value = '500'>500</option>
    <option value = '1500'>1500</option>
</select>
<a href="#" onclick = "donateNow($('.target').val())">Donate</a>

And in your javascript:

function donateNow(currValue)
{
    alert('you donated: '+ currValue);
}

Here you can check it on jsFiddle:

How to change a value when i onclick

3 Answers3