admin管理员组

文章数量:1357388

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

  • javascript
  • html
  • ruby-on-rails
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
Add a ment  | 

2 Answers 2

Reset to default 5

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

本文标签： htmlGet radio button value on submit with JavaScriptStack Overflow

版权声明：本文标题：html - Get radio button value on submit with JavaScript - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744079550a2587374.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。