magento表单提交处理程序

时间:2015-09-11 13:58:57

标签: javascript jquery forms magento

我们有一个正在使用WebForms2插件的magento站点,并最终使用类似以下生成代码的表单:

HTML

<form action="http://example.com/magento/index.php/webforms/index/iframe" method="post" name="webform_2" id="webform_2" enctype="application/x-www-form-urlencoded" class="webforms-lg-test" target="webform_2_iframe">
  <input type="hidden" name="submitWebform_2" value="1"/>
  <input type="hidden" name="webform_id" value="2"/>

  <div id="fieldset_0" class="fieldset fieldset-0 ">
    <ul class="form-list">
      <li class="fields ">
        <div id="field_11" class="field  type-text webforms-fields-11 webforms-fields-name">
          <label id="label_field11" for="field11">Name</label>
          <div class="input-box">
            <input type='text' name='field[11]' id='field11' class='input text ' style='' value="" />
          </div>
        </div>
      </li>
    </ul>
  </div>

  <div class="buttons-set">
    <p class="required">* Required Fields</p>
    <button type="button" class="button" id="webform_2_submit_button" onclick="webform_2_submit()" title="submit">
      <span>
        <span>Submit</span>
      </span>
    </button>
    <span class="please-wait" id="webform_2_sending_data" style="display:none;">
      <img src="http://example.com/magento/skin/frontend/default/default/images/opc-ajax-loader.gif" alt="Sending..." title="Sending..." class="v-middle"/>
      <span id="webform_2_progress_text">Sending...</span>
    </span>
  </div>
</form>

JS

var webform_2 = new VarienForm('webform_2', 0);
var webform_2_submit = function(){
  var form = webform_2;
  if(form.validator && form.validator.validate()){
    form.submit();
    $('webform_2_submit_button').hide();
    $('webform_2_sending_data').show();
  }
};

棘手的部分是我们有一个可以与所有表单一起使用的附加工具。以前我们只是将它挂钩到表单提交处理程序,但是Magento / WebForms使用的这个特殊方法不会触发提交处理程序。

我们工具代码的示例:

var forms = document.getElementsByTagName('form');
for(i=0; i<forms.length; i++) {
  forms[i].addEventListener('submit', function() {
    alert('form submitted');
  } 
}

我们也使用了jQuery方法,但减少了依赖性。它也没用。

$('form').on('submit', function(e) {
  alert('form submitted');
});

问题

Magento中是否有特定的东西我可以使用这个实现,我可以挂钩而不是标准的提交处理程序?或者以不同/更好的方式观察表单的提交处理程序?

1 个答案:

答案 0 :(得分:0)

使用Prototype我能够覆盖现有的提交处理程序。

VarienForm.prototype.submit = VarienForm.prototype.submit.wrap(function($super, url) {
    //-- your code can go before OR after the default form behavior

    //-- include this if you want to include the previous submit behavior
    $super(url);
    return false;
});