Beim Hinzufügen von Namen in Eingabefeld von Formular und klicken Sie auf Senden ajax reloads Formular

Question

Ich öffne ein Formular in Magento Admin-Popup, wenn ich Namen Formularfelder hinzufügen und klicken Sie auf Speichern. Formular-Reloads und Ajax-Post werden ohne Fehler fehlgeschlagen.

Dies ist mein HTML-Code

<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> 

Das ist mein js Code ..

<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> 

und dies ist mein Ajax-Request Ausfall Bild.

und wenn ich entfernen Namen von der Ajax-Request Feld adaequat.

Bitte helfen

Ich versuchte es mit jQuery und seine Arbeits, aber ich will es mit einfachen js auf Ihre addccbtn Taste type="button"

Answer 1

add Attribut implementieren. Denn wenn Sie kein type Attribut angeben, verhält es sich wie die Übergabeschaltfläche. Und andere Möglichkeit, Formular senden und erneutes Laden der Seite zu verhindern, ist event.preventDefault Funktion zu verwenden.

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