I have this pretty basic HTML here that I'm going to be turning into an iframe eventually, it's basically just a simple widget that gets a score on the users end and then I want it to send the data back to my rails backend. Right now, I'm trying to figure out how to get the score when a user checks a button and hits submit.
<html>
<head>
</head>
<body>
<h1 style="text-align:center">Net Promoter Score!</h1>
<form id="NPSform"; style= "text-align:center">
<input type="radio" name="scores" id="1" value="1"> 1
<input type="radio" name="scores" id="2" value="2"> 2
<input type="radio" name="scores" id="3" value="3"> 3
<input type="radio" name="scores" id="4" value="4"> 4
<input type="radio" name="scores" id="5" value="5"> 5
<input type="radio" name="scores" id="6" value="6"> 6
<input type="radio" name="scores" id="7" value="7"> 7
<input type="radio" name="scores" id="8" value="8"> 8
<input type="radio" name="scores" id="9" value="9"> 9
<input type="radio" name="scores" id="10" value="10"> 10
<input type="submit" name="mysubmit" value="Submit"/>
</form>
</body>
<script>
var scores
</script>
</html>
How can I get the score when a user hits submit?
Thanks
I have this pretty basic HTML here that I'm going to be turning into an iframe eventually, it's basically just a simple widget that gets a score on the users end and then I want it to send the data back to my rails backend. Right now, I'm trying to figure out how to get the score when a user checks a button and hits submit.
<html>
<head>
</head>
<body>
<h1 style="text-align:center">Net Promoter Score!</h1>
<form id="NPSform"; style= "text-align:center">
<input type="radio" name="scores" id="1" value="1"> 1
<input type="radio" name="scores" id="2" value="2"> 2
<input type="radio" name="scores" id="3" value="3"> 3
<input type="radio" name="scores" id="4" value="4"> 4
<input type="radio" name="scores" id="5" value="5"> 5
<input type="radio" name="scores" id="6" value="6"> 6
<input type="radio" name="scores" id="7" value="7"> 7
<input type="radio" name="scores" id="8" value="8"> 8
<input type="radio" name="scores" id="9" value="9"> 9
<input type="radio" name="scores" id="10" value="10"> 10
<input type="submit" name="mysubmit" value="Submit"/>
</form>
</body>
<script>
var scores
</script>
</html>
How can I get the score when a user hits submit?
Thanks
Share Improve this question asked Apr 27, 2016 at 16:09 SpanceSpance 6074 gold badges13 silver badges30 bronze badges 1- do you want to submit the form and send the data using ajax ?? Or just simply want to do direct form post?? – Farhad Rakib Commented Apr 27, 2016 at 16:24
2 Answers
Reset to default 5Strictly Using Ruby on Rails
Since all of your radio button elements use the same name attribute, only the selected value is going to be posted to the server.
So when you submit the form, you should be able to access the value using the corresponding name value of "scores" using the params collection :
params[:scores]
You can read more about using parameters for Ruby on Rails here.
Using Javascript
If you wanted to retrieve your selected value using Javascript when your <form> was submitted, you could create an event listener to listen for the submit event to be triggered and then grab the selected value :
<!-- Notice the getScore() function will be called when the form is submitted -->
<form id="NPSform" ... onsubmit='getScore();'>
<!-- Elements omitted for brevity -->
<input type="submit" name="mysubmit" value="Submit"/>
</form>
<script>
function getScore(){
// Get the selected score (assuming one was selected)
var score = document.querySelector('input[name="scores"]:checked').value;
alert(score + ' was selected!');
}
</script>
You can see an example of this demonstrated here and seen below :
If you want value using jquery, you can do something like
$('input[name=mysubmit]').on('click', function(e){
e.preventDefault();
console.log($('input[name=scores]:checked').val());
});