在表单的输入字段中添加名称并单击提交ajax重新加载表单

时间:2016-04-28 08:14:16

标签: javascript php ajax magento prototype

我在magento admin popup中打开一个表单,当我在表单字段中添加名称并单击“保存”时。表单重新加载和ajax发布失败,没有任何错误。

这是我的HTML代码

<form enctype="multipart/form-data">
<table cellspacing="0" id="" class="form-list">
        <tbody><tr>
            <td class="label"><label for="authnetcim_cc_type">Credit Card Type <span class="required">*</span></label></td>
            <td class="value">
                  <select id="<?php echo $_code ?>_cc_type"  class="<?php echo $require.$_code; ?>_require" name="karan">
                        <option value=""><?php echo $this->__('--Please Select--')?></option>
                        <option value="AE">American Express</option>
                        <option value="DI">Discover</option>
                        <option value="JCB">JCB</option>
                        <option value="MC">Mastercard</option>
                        <option value="VI">Visa</option>
                    </select>
            </td>
        </tr>
        <tr>
            <td class="label"><label for="authnetcim_cc_number">Credit Card Number <span class="required">*</span></label></td>
            <td class="value">
                  <input type="text" id="<?php echo $_code ?>_cc_number"  title="<?php echo $this->__('Credit Card Number') ?>" class="input-text <?php echo $require.$_code; ?>_require validate-cc-number" autocomplete="off" value="" />
            </td>
        </tr>
        <tr>
            <td class="label"><label for="authnetcim_expiration">Expiration Date <span class="required">*</span></label></td>
            <td class="value">
                 <select id="<?php echo $_code ?>_expiration"  class="month <?php echo $require.$_code; ?>_require">
                            <option value="">Month</option>
                            <option value="1">Jan</option>
                            <option value="2">Feb</option>
                            <option value="3">Mar</option>
                            <option value="4">Apr</option>
                            <option value="5">May</option>
                            <option value="6">Jun</option>
                            <option value="7">Jul</option>
                            <option value="8">Aug</option>
                            <option value="9">Sept</option>
                            <option value="10">Oct</option>
                            <option value="11">Nov</option>
                            <option value="12">Dec</option>
                        </select>

                <select id="<?php echo $_code ?>_expiration_yr" class="year <?php echo $require.$_code; ?>_require">
                    <option value="">Year</option>
                    <option value="2015">2015</option>
                    <option value="2016">2016</option>
                    <option value="2017">2017</option>
                    <option value="2018">2018</option>
                    <option value="2019">2019</option>
                    <option value="2020">2020</option>
                    <option value="2021">2021</option>
                    <option value="2022">2022</option>
                    <option value="2023">2023</option>
                    <option value="2024">2024</option>
                    <option value="2025">2025</option>
                </select>
            </td>
        </tr>
    </tbody>
</table>
<div class="buttons-set">
        <button class="button submit-addccbtn" id="addccbtn" title="Submit"><span><span>Submit</span></span></button>
    </div>

</form>

这是我的js代码..

<script type="text/javascript">
    //<![CDATA[
    var id = '<?php echo $recordId ?>';
    var url = '<?php echo $saveUrl ?>';
    function closePopup() {
        Windows.close('browser_window');
    }
    document.getElementById("addccbtn").onclick = function() {saveccard()};
    function saveccard() {
        var dataString ='id='+id;
        new Ajax.Request(url, {
                method: 'POST',
                parameters: dataString,
                onSuccess: function(response) {
                    var json = response.responseText.evalJSON(true);
                    if(json.success){
                        window.parent.closePopup();
                    }
                },
                onFailure: function(response) {
                    //location.reload();
                }
            });
        }



//]]>
</script>

这是我的ajax请求失败图片。

enter image description here

如果我从字段中删除名称ajax请求正常工作。

请帮忙

我尝试使用jquery及其工作,但我想用普通的js实现它

1 个答案:

答案 0 :(得分:0)

addccbtn按钮type="button"中添加属性。因为如果你没有指定type属性,默认它就像提交按钮一样。 防止表单提交和重新加载页面的其他方法是使用event.preventDefault函数。

document.getElementById("addccbtn").addEventListener("click", function(event){
    event.preventDefault();
   // your savecard() code here
})