ajax 배열 구분 문제 질문드립니다.
본문
배열중 특정부분만 불러다가 처리하려고 합니다.
아래 스크립대로 하면 첫번째 row만 작동을 합니다.
어떻게 수정을 해야 모두 작동을 할까요?ㅠㅠ
<script>
$(document).ready(function(){
$("#ustrkbtn").click(function(){
var vustrk = $("#ustrk").val();
var vwr_body_11 = $("#wr_body_11").val();
if(vustrk==''){alert('번호를 입력하세요')}
else{
$.post("/ajax2.php", //Required URL of the page on server
{ // Data Sending With Request To Server
ustrk:vustrk,
wr_body_11:vwr_body_11
},
function(response){ // Required Callback Function
$('#stage').html(response);
ustrkform.style.visibility="hidden";
ustrkbtn.style.visibility="hidden";
});
}
});
});
< /script>
<?
$wr_body_11 = explode("|",substr($view[wr_11], 1));
for ($i = 0; $i < count($wr_body_11); $i++) {
?>
<?php echo $wr_body_11[$i]; ?>
<form id="ustrkform" method="post">
< input type="text" name="wr_body_11" id="wr_body_11" value="<?php echo $i; ?>"/>
< input type="text" name="ustrk" id="ustrk" placeholder="번호를 입력하세요"/><br>
< /form>
< button id="ustrkbtn">등록</button>
<?php } ?>
** ajax2.php**
<?php
$ustrk= $_POST["ustrk"];
$wr_body_11= $_POST["wr_body_11"];
// Here, you can also perform some database query operations with above values.
echo "Number ". $ustrk ."!".$wr_body_11; // Success Message
?>
답변 1
id로 클릭이벤트나 값을 처리하셨는데요, id로 명명한 값은 문서에 하나만 나오도록 하는것이 기본입니다.
form부분을 for문으로 반복했으니 그만큼의 같은 id가 나와서 첫번째것만 인식하는 문제입니다.
<button type="button" class="ustrkbtn">등록</button>
이렇게 button의 id를 class로 바꾸시고 type을 button으로 주어 submit이 되지않도록 한 다음 </form> 윗줄로 옮겨주세요.
$("#ustrkbtn").click(function(){
var vustrk = $("#ustrk").val();
var vwr_body_11 = $("#wr_body_11").val();
여기는
$(".ustrkbtn").click(function(){
var f = this.form;
var vustrk = f.ustrk.value;
var vwr_body_11 = f.wr_body_11.value;
이렇게 바꿔보세요.
안되네요 ㅠ
ajax처리 자체는 잘 되는 걸겁니다. 지금보니 그 이후가 문제였겠네요.
뭘 하시려는건지는 모르겠습니다만 위 소스를 일단 좀 수정해봤습니다.
<script>
$(document).ready(function(){
$(".ustrkbtn").click(function(){
var f = this.form;
var formid = f.formid.value;
var vustrk = f.ustrk.value;
var vwr_body_11 = f.wr_body_11.value;
if(vustrk==''){alert('번호를 입력하세요')}
else{
$.ajax({
type: "POST",
url: "/ajax2.php",
cache: false,
async: false,
dataType: "json",
data: {
formid:formid,
ustrk:vustrk,
wr_body_11:vwr_body_11
},
success: function(response) {
$('#stage').html(response.html);
$('#'+response.formid).css('visibility', "hidden");
//$('#'+response.formid).hide(); // visibility로 감추는건 공간을 차지함. 완전히 안보이게 하려면 이 문장으로 교체.
}
});
}
return false;
});
});
</script>
<?
$wr_body_11 = explode("|",substr($view['wr_11'], 1));
for ($i = 0; $i < count($wr_body_11); $i++) {
echo $wr_body_11[$i];
?>
<form id="ustrkform_<?php echo $i; ?>" method="post">
<input type="hidden" name="formid" value="ustrkform_<?php echo $i; ?>"/>
<input type="text" name="wr_body_11" value="<?php echo $i; ?>"/>
<input type="text" name="ustrk" placeholder="번호를 입력하세요"/><br>
<button type="button" class="ustrkbtn">등록</button>
</form>
<?php } ?>
<div id="stage"></div>
ajax2.php
<?php
$ustrk= $_POST["ustrk"];
$wr_body_11= $_POST["wr_body_11"];
// Here, you can also perform some database query operations with above values.
$return = "Number ". $ustrk ."!".$wr_body_11; // Success Message
echo json_encode(array('html'=>$return, 'formid'=>$_POST['formid']));
?>