2017-11-28 2 views
0

프로그래밍이 그리 좋지 않습니다. 나는 하나의 기능에 대해 작업하고 있는데, 이는 양식 데이터를 제출 한 후에 양식이 숨어있는 것입니다. 여기서 동적으로 생성 된 양식 수입니다. 양식을 여러 번 제출하는 것을 방지하기 위해 양식 데이터를 제출하면 양식을 숨길 필요가 있습니다. 여기에 div div 안에 숨어있는 형식을 사용했습니다. 그것은 해결책을 알려 주시기 바랍니다 작동하지 않습니다.양식을 제출 한 후 양식을 숨기는 방법

<script> 
 
$(document).ready(function(){ 
 
    $(".nav-tabs a").click(function(){ 
 
     $(this).tab('show'); 
 
    }); 
 
}); 
 
function frmsubmit() 
 
{ 
 
    var frm = document.getElemetsByName('formdata')[0]; 
 
    frm.submit(); 
 
    frm.reset(); 
 
    return false; 
 
} 
 
$('#submit_0').click(function() { 
 
\t \t $.ajax({ 
 
\t \t \t url:"section.php?status=result", 
 
\t \t \t data:$('#f_0').serialize(), 
 
\t \t \t success:function(data) 
 
\t \t \t { 
 
\t \t \t \t alert(data); 
 
\t \t \t \t $('#f_0')[0].reset(); 
 
\t \t \t } 
 
\t \t }); 
 
\t }); 
 
    // Haven written same code for submit_0 to submit_10 
 
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <h3>Enter the values:</h3><br> 
 
    <ul class="nav nav-tabs"> 
 
    <?php 
 
    foreach($clasarr as $temp) 
 
    { 
 
    ?> 
 
    <li><a href="#<?php echo $temp; ?>"> <?php echo $temp; ?> </a </li> 
 
    <?php 
 
    } 
 
    ?> 
 
    </ul> 
 
<div class="tab-content"> 
 
    <?php 
 
    $y=0; 
 
    foreach($clasarr as $temp) 
 
    { 
 
    ?> 
 
    
 
    <div id="<?php echo $temp; ?>" class="tab-pane fade"> 
 
    <form name="formdata" action="" method="post" class="form-horizontal" id="f_<?php echo $y; ?>"> 
 
\t \t \t <div class="col-md-offset-2 col-md-10"> 
 
\t \t \t \t <h3> CLASS: <?php echo $temp; ?></h3> 
 
\t \t \t </div> 
 
\t \t \t <input type="text" name="idr" id="idr" value="<?php echo $id; ?>" hidden> 
 
\t \t \t <input type="text" name="clss" id="clss" value="<?php echo $temp; ?>" hidden> 
 
\t \t \t <div class="form-group"> 
 
\t \t \t \t <label class="control-label col-sm-2" for="totalb">Budgeted #:</label> 
 
\t \t \t \t <div class="col-sm-3"> 
 
\t \t \t \t <input type="text" class="form-control" name="totalb" id="totalb" value="<?php echo $totalarr[$y]; ?>"> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t \t <div class="form-group"> 
 
\t \t \t \t <label class="control-label col-sm-2" for="received">Received #:</label> 
 
\t \t \t \t <div class="col-sm-3"> 
 
\t \t \t \t <input type="text" class="form-control" name="received" id="received_<?php echo $y; ?>" onblur="getcsv(<?php echo $y; ?>),getupload(<?php echo $y; ?>),getexpected(<?php echo $y; ?>)"/> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t \t <div class="form-group"> 
 
\t \t \t \t <label class="control-label col-sm-2" for="deleted"> Deleted data #:</label> 
 
\t \t \t \t <div class="col-sm-3"> 
 
\t \t \t \t <input type="text" class="form-control" name="deleted" id="deleted_<?php echo $y; ?>" onblur="getcsv(<?php echo $y; ?>),getupload(<?php echo $y; ?>),getexpected(<?php echo $y; ?>)"/ > 
 
\t \t \t \t </div> 
 
\t \t \t </div> \t 
 
\t \t \t <div class="form-group"> 
 
\t \t \t \t <label class="control-label col-sm-2" for="csvno"> CSV Number #:</label> 
 
\t \t \t \t <div class="col-sm-3"> 
 
\t \t \t \t <input type="text" class="form-control" name="csvno" id="csvno_<?php echo $y; ?>" onload="getupload(<?php echo $y; ?>)"> 
 
\t \t \t \t </div> 
 
\t \t \t </div> \t 
 
\t \t \t <div class="form-group"> 
 
\t \t \t \t <label class="control-label col-sm-2" for="duplicate"> Duplicate #:</label> 
 
\t \t \t \t <div class="col-sm-3"> 
 
\t \t \t \t <input type="text" class="form-control" name="duplicate" id="duplicate_<?php echo $y; ?>" onblur="getupload(<?php echo $y; ?>),getexpected(<?php echo $y; ?>)" onclick="getupload(<?php echo $y; ?>)"/> 
 
\t \t \t \t </div> 
 
\t \t \t </div> \t 
 
\t \t \t <div class="form-group"> 
 
\t \t \t \t <label class="control-label col-sm-2" for="upload"> Upload #:</label> 
 
\t \t \t \t <div class="col-sm-3"> 
 
\t \t \t \t <input type="text" class="form-control" name="upload" id="upload_<?php echo $y; ?>"> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 

 
\t \t <br><br> 
 
\t \t \t <div class="form-group"> 
 
\t \t \t \t <div class="col-sm-offset-2 col-sm-2"> 
 
\t \t \t \t <input class="btn btn-info" type="submit" name="submit" id="submit_<?php echo $y; ?>" value="submit" onclick="frmsubmit()"> 
 
\t \t \t \t <input class="btn btn-info" type="reset" name="Reset" value="Reset"> 
 
\t \t \t \t </div> \t \t 
 
\t \t \t </div> 
 
\t \t 
 
\t \t </form> 
 
    </div> 
 
\t <?php 
 
\t $y++; 
 
}

+0

'form' 태그에서'onclick = "frmsubmit()"'을 제거하고 다시 시도하지 않는 이유는 무엇입니까? – gurvinder372

+0

제출 버튼의 동적 ID를 설정하는 이유는 무엇입니까? – Pedram

+0

@ gurvinder372 not working ... 호출 할 수없는 함수를 호출하지 않고 호출 할 수 있습니다. –

답변

1

당신은 모두 input type = "submit"onclick 이벤트 핸들러를 필요로하지 않을 수 있습니다 submit 입력은 충분합니다.

ajax가 양식 데이터를 제출하는 데 사용되므로 제출 단추의 기본 작동을 방지해야 할 필요가 있습니다.

동적 형태 이드 대신 class를 사용하여 생성하면서 또한이

<input class="btn btn-info" type="submit" name="submit" id="someId" value="submit"> 

input type "submit" 바꾸기는

 <form name="formdata" action="" method="post" class="form-horizontal someFormClass" 
     id="someDynamicId"> 
        // rest of the code 
     </form> 
(추정 ID 정도로 모든 새로운 폼 작성이 ID를 변경한다 동적이다)

기본 동작을 방지하려면 event.preventDefault();을 추가하십시오. Ajax 성공 내부에서 양식을 숨기는 이벤트

35는 희망이 의사 코드는

+0

위의 코드를 변경 한 후 모든 양식이 숨어있는 첫 번째 양식 제출 여기에 위의 제안 클래스 이름은 모든 양식에 대해 동일하게 될 것이며 아약스에서는 클래스 이름으로 숨겨져 있으므로 모든 양식이 숨겨져 있습니다. –

+0

@AvinashT는 코드를 수정했거나 그렇지 않은 경우 ID가 확실한 경우 당신이 할 수있는'$ ("body #formId"). hide()' – brk

+0

해결책 주셔서 감사합니다. 나는 formid로 시험해 보았습니다. 고마워요. –

1

당신이 뭘하려는 건지의 터무니없이 단순화 된 버전. div의 양식, 클릭 후크에서 jQuery를 클릭하면 제출 클릭시 div가 숨겨집니다.

$('#submit').click(function() { 
 
    $('#f_0').hide(); 
 
    return false; 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="f_0"> 
 
    <form name="formdata" action="" method="post" class="form-horizontal" id="f_1"> 
 
    <input class="btn btn-info" type="submit" name="submit" id="submit" value="submit"> 
 
    <input class="btn btn-info" type="reset" name="Reset" value="Reset"> 
 
    </form> 
 
</div>

+0

마침내 그것은 작동 .. 감사합니다 형제. 솔루션을 주셔서 감사합니다 .. 내게 알려주세요 하드 코딩 오전 ??? –

0

@AvinashT 도움이 될 것입니다 그러나 아약스 호출이 이루어 여부되고있다? gurvinder372 아약스를 호출하고 양식 데이터 테이블 에 entring되어

@ 성공적으로 위의 논의를 바탕으로

, 당신은 단지 form

$('#submit_0').closest("form").hide() 
을 숨기기 위해 성공 핸들러이 줄을 추가 할 필요가

여기에서 동적으로 생성 된 양식 수입니다. 양식을 여러 번 제출하는 것을 방지하기 위해 양식 데이터를 제출하면 양식을 숨길 필요가 있습니다. 두 핸들러을 (하나 onclick을 통해이며 submit 클릭 이벤트 처리기를 통해 다른)이 있기 때문에

양식 , 여러 번 제출되고있다.

submit 클릭 이벤트 처리기가 이미 양식 제출을 처리하고 있으므로 양식 태그에서 onclick="frmsubmit()"을 제거해야합니다.

관련 문제