HTML with JavaScript, submit button

Question

I'm trying to write a simple widget to measure Net Promoter Score. This is what I have so far:

<!DOCTYPE html>
<html>
<body>
<link type="text/css" rel="stylesheet" href="NPSstyle.css"/>
    <h1>Net Promoter Score<h1>
        <p class="question">How likely are you to recommend this tool to a friend or colleague?</p>
<form id="myForm">

    <button type="button" id="button1">1</button>
    <button type="button" id="button2">2</button>
    <button type="button" id="button3">3</button>
    <button type="button" id="button4">4</button>
    <button type="button" id="button5">5</button>
    <button type="button" id="button6">6</button>
    <button type="button" id="button7">7</button>
    <button type="button" id="button8">8</button>
    <button type="button" id="button9">9</button>
    <button type="button" id="button10">10</button>
    <button type="submit" class="input submit">Submit</button>
</form>
<p class="explanation">Not likely............................................................Very likely</p>


<script>

var userRating

document.getElementById('button1').onclick = function () {
    console.log(this.id + " was clicked")
    userRating = 1;
}
document.getElementById('button2').onclick = function () {
    console.log(this.id + " was clicked")
    userRating = 2;
}
document.getElementById('button3').onclick = function () {
    console.log(this.id + " was clicked")
    userRating = 3;
}
document.getElementById('button4').onclick = function () {
    console.log(this.id + " was clicked")
    userRating = 4;
}
document.getElementById('button5').onclick = function () {
    console.log(this.id + " was clicked")
    userRating = 5;
}
document.getElementById('button6').onclick = function () {
    console.log(this.id + " was clicked")
    userRating = 6;
}
document.getElementById('button7').onclick = function () {
    console.log(this.id + " was clicked")
    userRating = 7;
}
document.getElementById('button8').onclick = function () {
    console.log(this.id + " was clicked")
    userRating = 8;
}
document.getElementById('button9').onclick = function () {
    console.log(this.id + " was clicked")
    userRating = 9;
}
document.getElementById('button10').onclick = function () {
    console.log(this.id + " was clicked")
    userRating = 10;
}


</script>

I'm currently trying to figure out how to get Submit to work. I want the user to press the button that represents their score, and then press submit to register their score. Right now, I just want their score to be displayed in console when they hit submit, but eventually it is going to be getting saved to a server and this will just be a widget that pops up over their screen in browser. I'm starting out making this thing in a vacuum to help myself learn. I would appreciate someone pointing me in the right direction or giving me a hint. This is my first taste of JavaScript so I'm still learning. Thanks!

Your question doesn't have enough information. How does the score get registered? Do you need to submit the score to the server? Do you want to trigger a page load or do you want this to happen in the background? etc. — Comptonburger
– Comptonburger, Commented Mar 9, 2016 at 18:51

Comptonburger · Accepted Answer · 2016-03-09 18:56:49Z

1

In the same way that you added onclick handlers to the buttons, you can add an onsubmit handler to the form.

document.getElementById('myForm').onsubmit = function() {
    console.log(userRating);
}

answered Mar 9, 2016 at 18:56

Comptonburger

5943 silver badges10 bronze badges

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

Collectives™ on Stack Overflow

HTML with JavaScript, submit button

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related