Register form breaks after changing submit button value with jQuery

Question

I need to change the submit button value (text) based on the selection made in a certain register form field. I accomplished this by using jQuery:

(function ($) {
$(function() {
$("#edit-field-registrierung-als-und").change(function() {
if ( this.value == "2") {
$("#registersubmit").val("Kostenpflichtig registrieren");
}
else {
$("#registersubmit").val("Jetzt registrieren");
}
});
});
}(jQuery));

The submit button value changes as expected. But the form is not sent anymore after submitting. The page refreshes and the entered data is still in there. I don't get any error in the console or error log. I think drupal expects the very term and is 'confused' to get a different one. Does somebody know how to resolve this?

This is my register page: https://my-business-location.com/registrierung The first field on the page influences the submit button value (option 2).

Answer 1

Based on what Clive said and your response regarding the Ajax stuff, I edited your code. I am assuming you only want to change the text of the button for display purposes.

(function ($) {
  $(function() {

    // Create a copy of the button
    $('#registersubmit').after('<input id="new-submit" class="form-submit" value="Jetzt registrieren">');
    // Hide original
    $('#registersubmit').hide();
    // When copy  is clicked, "click" the original
    $('#new-submit').click(function(){
      $('#registersubmit').click();
    });
    // Your code with changed IDs
    $("#edit-field-registrierung-als-und").change(function() {
      if ( this.value == "2") {
        $("#new-submit").val("Kostenpflichtig registrieren");
      }
      else {
        $("#new-submit").val("Jetzt registrieren");
      }
    });
  });
}(jQuery));

Can't test it as you appear to have the code active right now, but it should work fine in this scenario.