0
<form action="http://www.google.com/">
  <textarea name="text"></textarea>
  <input type="submit" name="review" value="Review" />
</form>

This is my basic form I am trying to replicate the stackoverflow review your question feature with.

To do this I am using the following jQuery:

$(function(){
  let hasUserReviewedTheForm = false;
  $('form').submit(function(){
    if(!hasUserReviewedTheForm) { // Review the form
      $('html, body').animate({scrollTop : $(".Anchor").offset().top}, 300); // anchor
      hasUserReviewedTheForm = true; // Has clicked Once
      return false; // Cancel form action
    } else { 
      // Submit the form
    }
  });
});

Being inside of the submit function, the else statement would not be a place to change the text. So I tried placing the if condition around the function, which made the submit never return true.

I then tried creating a separate if condition outside of the function like so:

$(function() {
  let hasUserReviewedTheForm = false;
  if(hasUserReviewedTheForm) {
    $('input.review').val('Submit');
  }

  $('form').submit(function(){
    if(!hasUserReviewedTheForm) { // Review the form
      $('html, body').animate({scrollTop : $(".Anchor").offset().top}, 300);
      hasUserReviewedTheForm = true;
      return false; // return false to cancel form action
    } else { // Submit the form
          
    }
  });
});

That also had no effect, I'm not sure where to go with this.

How can I change the value of my submit after it has been clicked?

This is now a fully functional demo for anyone referencing the same thing here on CodePen

DrCustUmz
  • 77
  • 7

2 Answers2

1

Use this after changing the value of the boolean variable:-

$('input[name=review]').prop('value', 'Submit');

Your selector is not working because that's not the correct way to access an input by name attribute. I tried the above selector in your Codepen and it is working perfectly.

Kay
  • 142
  • 2
  • 10
  • Lol thanks again Kay, I actually figured it out and was typing my answer at the same time. Are there any benefits to using `.prop` rather than `.val('Submit');` – DrCustUmz Nov 22 '20 at 04:56
  • 1
    Here check this out [link](https://stackoverflow.com/questions/22093534/prop-vs-val-setting-an-input-text-value-with-jquery) – Kay Nov 22 '20 at 05:00
  • I found that through google before seeing your post lol good reference to have here though. And just like in that post, its going to be user preference. Personally I like `.val` for simplicity. Where this would be in effect I'm not worried about a tiny page speed difference. – DrCustUmz Nov 22 '20 at 05:05
  • Yeah that's true, it all comes down to the user preference. – Kay Nov 22 '20 at 05:06
  • end result https://codepen.io/-GiR/pen/eYzwjyo thank you for helping. I will be adding a full form with live preview to that, just had to figure out the review type function first. – DrCustUmz Nov 22 '20 at 05:21
1

You can target your input by name using $('input[name=review]') then to change the value use .val('Submit')

A full example based on the code provided would look like:

$(function(){
  let hasUserReviewedTheForm = false;
  $('form').submit(function(){
    if(!hasUserReviewedTheForm) { // Review the form
      // anchor
      $('html, body').animate({scrollTop : $(".Anchor").offset().top}, 300);
      hasUserReviewedTheForm = true;
      $('input[name=review]').val('Submit');       // Replace button value
      return false; // return false to cancel form action
    } else { // Submit the form
      
    }
  });
});
DrCustUmz
  • 77
  • 7