CODEWITHSUNDEEP
javascriptfirefox
Jamie
Jamie

Reputation: 7431

Why does this javascript code for submitting a form not work in Firefox?

I wanted to remove buttons on a form submission to let users know that "it's being worked on ...". I wrote some javascript to do the work as well as a python function to set things up server side. Here is a resulting html example:

<html>
  <head>
    <script type="text/javascript">
function proceed_validate() {
    return true;
}
function form_button_reenable(span) {
    "use strict";
    var att = Object.create(null);

    att.id = span.getAttribute('data-id');
    att.value = span.getAttribute('data-value');
    att.style = span.getAttribute('data-style');

    span.innerHTML = "<input type=submit class=form_button onclick=\\"form_button_disable(this);\\" id=\\"" + att.id + "\\" value=\\"" + att.value + "\\" style=\\"" + att.style + "\\" />";
    return;
}
function form_button_disable(button) {
    "use strict";
    var span = button.parentElement,
        form = button.form;

    if (span.id !== "span_" + button.id) {
        alert("HTML not formatted as expected.");
        return;
    }

    if (span.getAttribute('data-buttonreplace') === "true") {
        span.innerHTML = "<em>" + span.getAttribute('data-changetext') + "</em>";
    } else {
        button.disabled = true;
        button.value = span.getAttribute('data-changetext');
    }

    // Run the form's onsubmit event if there is one.
    // The onSubmit event doesn't do a submission, just validation.
    if (form.onsubmit !== null) {
        // The onSubmit event may do validation, if it failed, revert
        if (!form.onsubmit()) {
            // Some forms don't want to be reverted
            if (span.getAttribute('data-autorevert') == "true") {
                // Use the attributes in the span tag to recreate the <input> tag.
                form_button_reenable(span);
            }
            return;
        }
    }
    form.submit();
}
    </script>
  </head>
  <body>
    <FORM ACTION="order-review.cgi" METHOD=post onsubmit="return proceed_validate();"> 
      First name: <input type="text" name="fname">
      <span id="span_place_order" data-id="place_order" data-value="Place Order" data-style="line-height:17px;" data-buttonreplace="true" data-changetext="<b>Verifying order ...</b>" data-autorevert="true">
         <input type=submit id="place_order" class=form_button style="line-height:17px;" value="Place Order" onclick="return form_button_disable(this);"/>
      </span>
    </FORM>
  </body>
</html>

This worked (great) on my test server, but about 20-30% of the users of the website get stuck with the form never submitting.

For my on edification, is there a more portable way to do this that doesn't involve jquery? (That's a site policy)

Edit Turns out the problem is isolated to Firefox. At least Firefox v26 and v27. I didn't bother testing beyond that.

Edit II Something (rather, nothing) happens when the form.submit(); function is invoked.

Upvotes: 0

Views: 174

Answers (1)

Jamie
Jamie

Reputation: 7431

I solved this problem based on comments left by cookiemonster who discovered that submit event disappeared in the innerHtml string was overwritten.

Now, I include the <em> tag inside the <span>, but set its display style type of the <em> tag to 'none'. This way displaying the button is a matter of flipping the button <input> and <em> tags style display properties. As long as they are out of phase, only one of the elements appear. Which is exactly what I want. 

// enabling button
em.style.display = 'none';
button.style.display = ''; 

// disabling button
em.style.display = '';
button.style.display = 'none';

Upvotes: 1

Related Questions