Jquery preventDefault가 작동하지 않습니다.

Question

그래, 다른 포럼을 둘러 보았고, 왜 내 것이 아직도 ... GAH인지 알 수 없습니다. 양식이 제출하지 않도록 preventDefault()를 호출합니다. 나는 아무 것도 설정하지 않은 후 폼 태그에 액션 속성을 전혀 제공하지 않았다.

제출 버튼을 제출 대신 버튼으로 시도했지만 여전히 작동하지 않는 것 같습니다. 양식은 제출할 때 페이지를로드하는 중입니다. 나는 AJAX로 사용자 샵에서 아이템의 가격을 업데이트하려고 노력하고 있으므로 span 태그의 페이지를 다시로드하지 않고도 가격을 업데이트합니다.

는 HTML

:

<form id="price_form" method="POST" action="http://alkharia.localhost/user/shop/priceitem/3" accept-charset="UTF-8"><input type="hidden" name="csrf_token" value="P0oW2VxJ6HTg79ksIYl6U3R5QKapeFGwkkUKiNlQ"> 
<div class="row clearfix"> 
    <div class="full"> 
     <label for="price">Price</label> 
     <input maxlength="6" type="text" name="price" value="0" id="price"> </div> 
</div> 
<div class="row"> 
    <div class="full"> 
     <input type="hidden" name="item_id" value="3"> 
     <input type="submit" value="Submit"> </div> 
</div> 

</form> 

JQuery와 :

$('#price_form').submit(function(e) { 
    e.preventDefault(); 
    var price = $('#price').val(); 
    if((Math.floor(price) == price) && ($.isNumeric(price)) && (price.length <= 6)) { 
     var itemID = $('#item_id').val(); 

     $.ajax({ 
     type: 'POST', 
     url: 'http://'+urlBase+'/user/shop/priceit/'+itemID+'/'+price, 
     success: function(msg) { 
      $('#cur_price_'+itemID).html(msg); 
     } 
    }); 
    } else { 
    alert('You can only enter an integer that is less than 999,999!'); 
    return false; 
    } 
}); 

Answer 1

나는 전부 e.preventDefault()을 제거하는 것, 그리고 경우/else 문 외부에 return false; 이동합니다.

조건이 충족되면 AJAX 호출이 이루어집니다. 그렇지 않은 경우 경고가 표시됩니다. 어느 쪽이든, 양식은 제출되지 않습니다.

편집 버전 :

$('#price_form').submit(function(e) { 
    var price = $('#price').val(); 

    if((Math.floor(price) == price) && ($.isNumeric(price)) && (price.length <= 6)) { 
     var itemID = $('#item_id').val(); 

     $.ajax({ 
      type: 'POST', 
      url: 'http://'+urlBase+'/user/shop/priceit/'+itemID+'/'+price, 
      success: function(msg) { $('#cur_price_'+itemID).html(msg); } 
     }); 
    } else { 
     alert('You can only enter an integer that is less than 999,999!'); 
    } 

    return false; 
}); 

Answer 2

앵커 태그와 함께 '제출'입력을 교체 #에 HREF를 설정하고 그에 AJAX 기능을 결합한다.

Answer 3

제출 양식 대신 입력 [유형 = 제출] 클릭 이벤트에 이벤트를 바인드하십시오.

Answer 4

제출을 버튼으로 변경하면 JS를 클릭 이벤트에 바인딩 할 수 있습니다.

Difference between <input type='button' /> and <input type='submit' />

Answer 5

좋아 보인다 같은 스크립트 파일이 나타난다하더라도 .. 어떻게 든 포함되지되지 않았습니다 ..하지만 난 자바 스크립트 대화 상자를 사용하고 있기 때문에 나는 모르는 경우 대화 상자의 맨 아래에 해당 스크립트를 다시 포함시켜야합니다. 그러나 내가 그것을했을 때, 그것은 모든 것을 고쳤습니다. 이상하게 보입니다. 그러나 나는 여전히 false를 리턴 한 이후로 또 다른 질문을 던졌습니다. e.preventDefault()보다 더 나은 대안입니다.