JavaScript — при добавлении имени в поле ввода формы и нажмите на кнопку отправить форму перезагрузки AJAX

Я открываю форму во всплывающем окне администратора magento, когда добавляю имя в поля формы и нажимаю на кнопку Сохранить. перезагружается форма и сообщение 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.

введите описание изображения здесь

и если я удаляю имя из поля, запрос ajax работает нормально.

Пожалуйста помоги

Я попробовал это с JQuery и он работает, но я хочу реализовать это с простым JS

0

Решение

добавить атрибут к вашему addccbtn кнопка type="button" , Потому что если вы не укажете type атрибут, по умолчанию он будет действовать как кнопка отправки.
И другой способ предотвратить отправку формы и перезагрузку страницы — использовать event.preventDefault функция.

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

Другие решения

Других решений пока нет …

По вопросам рекламы [email protected]