0

How can we trigger 2 action from 1 button? How do we make a button/or links which can go/scroll to element "#result" and trigger the function "calculateThis" (proceed data from a form)

How do I mix the these into 1 button/link?

 <a href="#result">Submit</a>

and

 <button class="button" onclick="calculateThis(this.form); return false;">Submit</button>

// UPDATED Here is the complete code

<script type="text/javascript">
function calculateThis(form) {
var userweight=parseInt(form.weight.value, 10);
var caffeineamount=parseInt(form.caffein.value, 10);
var caffeinetimes=parseInt(form.caffeintimes.value, 10);
var totalcaffeine=caffeineamount*caffeinetimes;

console.log(totalcaffeine)
// Calculate max caffeine per person
var maxcaffeine=userweight*10;

// Calculate remaining after 24 hours
// Half life = 6 hours
var totalcaffeineafter=totalcaffeine*(1/16);

// Calculating how many hours until the caffeine completely digested
var totaldigest=totalcaffeine;
var digesttime=0;

while (totaldigest>0.05) {
totaldigest=totaldigest*(1/2);
digesttime++;
}

digesttime=digesttime*6;

// Calculating when the user will probably die of overdose
var countcaffeine=0;
var overdosetime=1;

while (countcaffeine<maxcaffeine){
countcaffeine=countcaffeine+totalcaffeine;
overdosetime++;
}

// Show total amount of caffeine
document.getElementById("showtotalkafein").innerHTML=totalcaffeine;

// Show amount of caffeine after 1 day
document.getElementById("showtotalkafeinsetelah").innerHTML=totalcaffeineafter;

// Show digest time
document.getElementById("showwaktudigest").innerHTML=digesttime;

// Show overdose
document.getElementById("showberapakali").innerHTML=overdosetime;

return false;
}
</script>

<form class="form">
Weight<br />
<input type="text" name="weight" class="required" value="" /><p /> 
Amount of caffein in coffee<br />
<input type="text" name="caffein" class="required" value="" /><p /> 
How many times drinking coffeein a day<br />
<input type="text" name="caffeintimes" class="required" value="" /><p />
<a href="#result" onClick="calculateThis(this.form); return false;">Submit</a>
</form>
<br />&nbsp;<br />&nbsp;<br />&nbsp;<br />&nbsp;<br />&nbsp;<br />&nbsp;<br />&nbsp;<br />&nbsp;<br />&nbsp;<br />&nbsp;<br />&nbsp;<br />&nbsp;<br />&nbsp;<br />&nbsp;<br />&nbsp;<br />&nbsp;<br />&nbsp;<br />&nbsp;<br />&nbsp;<br />&nbsp;<br />&nbsp;<br />&nbsp;<br />&nbsp;<br />&nbsp;<br />&nbsp;<br />&nbsp;<br />

<h1 id="result">Result</h1>
<p id="showtotalkafein">Show Caffein Total Here</p> 
<p id="showtotalkafeinsetelah">Show Caffeine Amount After 24 hours</p> 
<p id="showwaktudigest">Show Digest Time Here</p> 
<p id="showberapakali">Show Overdose Time Here</p>

2 Answers 2

1

You should be able to do the same as in the button, i.e

<a href="#result" onClick="calculateThis(this.form); return false;">Submit</a>

Doesn't this work?

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

1 Comment

It does make us go to the element #result, but it does not process the function "calculateThis" :(
0

JaggenSWE's answer is almost there, but don't return false since this suppresses default behaviour, which is to follow the link.

<a href="#result" onClick="calculateThis(this.form);">Submit</a>

I wouldn't advise using inline event handlers though.

Edit

This works. http://jsbin.com/uwatab/3/

Its always preferable to attach an onsubmit handler to a form, rather than button onclick. This way, pressing enter in your form still executes your javascript.

7 Comments

It does make us go to the element #result, but it does not process the function "calculateThis" :(
no, it does not says that there is any error w/ the javascript :/
Does your button object have a form property?
Yes it does :) I have updated the question with a complete code . I've tried <a href="#result"><button class="button" onclick="calculateThis(this.form); return false;">Submit</button></a> but it does not give the result I wanted
By default, a elements don't have form properties. Try this.parentNode
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.