HTML form: validation and preventing page refresh when submit

Question

I have an HTML form with a submit button and would like to prevent page refresh after clicking Submit (I also have some AJAX calls in the click handler as well):

var rating_form = d3.select("body")
  .append('form')
  .attr('class', 'rating');

 // Appending up and down vote radio button
 var radio_groups = rating_form.append('div').attr('class', 'form-group');

 // Radio for up
 var radio_grp_chk = radio_groups
  .append('div')
  .attr('class', 'form-check form-check-inline upvote');
 radio_grp_chk
  .append('input')
  .attr('class', 'form-check-input')
  .attr('type', 'radio')
  .attr('name', 'voting-radio')
  .attr('value', 'thumbup')
  .attr("required", "");
 radio_grp_chk.append('span').text("upvote");


 // Radio for down
 var radio_grp_chk2 = radio_groups
  .append('div')
  .attr('class', 'form-check form-check-inline downvote');
 radio_grp_chk2
  .append('input')
  .attr('class', 'form-check-input')
  .attr('type', 'radio')
  .attr('name', 'voting-radio')
  .attr('value', 'thumbdown')
  .attr("required", "");
 radio_grp_chk2.append('span').text("downvote");

 // Appending text area
 rating_form
  .append('div')
  .attr('class', 'form-group')
  .append('textarea')
  .attr('class', 'form-control feedback-text')
  .attr('placeholder', 'Enter your text...');

 // Submit button
 rating_form
  .append('button')
  .attr('type', 'submit')
  .attr('class', 'btn btn-primary rating-btn')
  .text('Submit!');
    
  // Bind click event
  rating_form.select('.rating-btn').on('click', function () {
  d3.event.preventDefault();
  
  var current_text = $("form").find("textarea").val();
  var current_vote = $("form").find('input[name=voting-radio]:checked').val()

  console.log(
   'My text is: ' +
    current_text +
    " and the vote is: " +
    current_vote
  );

  // Some further AJAX calls here
 });

<!DOCTYPE html>
<head>
    <!-- bootstrap -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
        crossorigin="anonymous">
</head>

<body>
    <script src="https://d3js.org/d3.v5.min.js"></script>
    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.5.0.min.js" crossorigin="anonymous"></script>
</body>

To prevent auto-refresh when submitting, I use d3.event.preventDefault(); in the click listener.

However, this makes the form not validate (my radio buttons have required attribute) => clicking submit without selecting a radio choice will not show any error. So how do I resolve this?

score 0 · Answer 1 · answered May 29 '20 at 04:21

0

Not sure where this d3 object comes from but your submit handler probably needs to accept an event parameter:

  rating_form.select('.rating-btn').on('click', function (e) {
        e.preventDefault();
        ...

For details see https://api.jquery.com/event.preventDefault/

answered May 29 '20 at 04:21

kmoser

8,780
3
24
40

I built the form with D3 and `d3.event.preventDefault();` does the same thing as `e.preventDefault();` – hydradon May 29 '20 at 07:16
Does this help you? https://stackoverflow.com/questions/27348036/prevent-form-submit-but-retain-form-validation – kmoser May 29 '20 at 07:23

HTML form: validation and preventing page refresh when submit

1 Answers1