CODEWITHSUNDEEP
javascripthtmlsubmit
Spance
Spance

Reputation: 607

HTML with JavaScript, submit button

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!

Upvotes: 0

Views: 80

Answers (1)

Comptonburger
Comptonburger

Reputation: 594

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);
}

Upvotes: 1

Related Questions