سوال: ارسال فیلد ها به صورت تک تک در حلقه [بایگانی]

View Full Version : سوال: ارسال فیلد ها به صورت تک تک در حلقه

funpatogh

جمعه 25 مرداد 1392, 02:01 صبح

سلام
من 10 تا input دارم با مشخصات زیر که قرار ارسال بشه به فایل check.php

<input class="jadval" id="1" type="text" maxlength="1" />
<input class="jadval" id="2" type="text" maxlength="1" />
<input class="jadval" id="3" type="text" maxlength="1" />
<input class="jadval" id="4" type="text" maxlength="1" />
<input class="jadval" id="5" type="text" maxlength="1" />
<input class="jadval" id="6" type="text" maxlength="1" />
<input class="jadval" id="7" type="text" maxlength="1" />
<input class="jadval" id="8" type="text" maxlength="1" />
<input class="jadval" id="9" type="text" maxlength="1" />
<input class="jadval" id="10" type="text" maxlength="1" />
<input class="jadval" id="11" type="text" maxlength="1" />
<input class="jadval" id="12" type="text" maxlength="1" />
<input class="jadval" id="13" type="text" maxlength="1" />
<input class="jadval" id="14" type="text" maxlength="1" />
<input class="jadval" id="15" type="text" maxlength="1" /><br />
<input style="font-family:Tahoma; width:200px; font-size:12px; background-color:#666; color:#FFF;" type="button" id="check" value="بررسي پاسخ ها" />

کاربر 1 حرف میتونه توی هر فیلد وارد کنه حالا میخوام بعد از اینکه دکمه بررسي پاسخ ها زده شد border هر فیلد درست سبز بشه و جواب غلط قرمز بشه
مشکلم اینجاست که جواب وقتی 1 باشه راحت میشه کار کرد اما وقتی قرار هست چندین جواب برگرده چه طوری باید کار کنم

یا اگر میشه تمام فیلد ها رو باهم ارسال کرد چه طوری جواب برگشت رو با هم دریافت کنم و پردازش کنم

Reza1607

جمعه 25 مرداد 1392, 08:54 صبح

اسم فيلدها رو به صورت آرايه اي بده اين جوري
name="input[]"
از اونور هم با foreach‏ آرايه رو بخون

foreach($_POST["input"] as $item){
#codehato ro inja bezarin
}

اكه بخواين با جي كوئري اين كار رو بكنيد بايد يك كلاس مشترك به فيلدها بديد

$.each(".cls_namd",function(index,item){
//codehaton ro inja bezarin
})

jalil_gh

جمعه 25 مرداد 1392, 12:47 عصر

اگه از متد ajax تو جی‌کوئری استفاده میکنید میتونید داده‌ها رو در یک شی جاوااکسریپت قرار بدید و خاصیت data تو متد ajax رو برابر با این شی قرار بدید. اینطوری خود جی‌کوئری داده ها رو قبل از ارسال برای شما serialize میکنه.
var dataToSend = {};

for (var i = 1; i <= 15; i++) {
dataToSend[i] = $('#' + i).val();
}

/*
dataToSend will be like this:
dataToSend = {
'1': 'A',
'2': 'B',
...
}
*/

$.ajax({
type: 'post',
url: 'check.php',

data: dataToSend, // data goes here

dataType: 'json',
success: function(data) {
// you can use data as javascript object
},
error: function() {}
});
حالا میتونید تو check.php اینطوری به این اطلاعات دسترسی داشته باشید.

$one = $_POST['1'];
$two = $_POST['2'];
البته این کارا رو میتونید تو یه حلقه for هم انجام بدید.

بعدش شما میتونید check.php رو جوری تنظیم کنید که اطلاعات رو به صورت json برگردونه. برای این کار هم میتونید از تابع ()json_encode تو php استفاده کنید.
وقتی که اطلاعات اومد شما میتونید تو متد success متد ajax به اون اطلاعات به صورت یک شی جاوااسکریپت دسرسی داشته باشید.

funpatogh

شنبه 26 مرداد 1392, 00:03 صبح

سلام ممنون از جواب هاتون
من طبق گفته های دوست عزیز jalil_gh (http://barnamenevis.org/member.php?282160-jalil_gh) دارم عمل میکنم
آقا فایل index.html من اینجوری شد

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://www.bitrepository.com/demo/username-checker/jquery-1.2.6.min.js"></script>
<style type="text/css">
.object_ok{
border: 1px solid green;
color: #333333;
}
.object_error{
border: 1px solid #AC3962;
color: #333333;
}

</style>
<SCRIPT type="text/javascript">
$(function() {
$("#check").click(function(){

for (var i = 1; i <= 10; i++) {
dataToSend[i] = $('#' + i).val();
}

$.ajax({
type: 'post',
url: 'check.php',

data: dataToSend, // data goes here

dataType: 'json',
success: function(data) {

for (var key in data) {
alert(data[key]);
}

}
});

});

});

</SCRIPT>
</head>
<body dir="Rtl">
<div align="center" style="width:100%">
<input class="jadval" id="1" type="text" maxlength="1" />
<input class="jadval" id="2" type="text" maxlength="1" />
<input class="jadval" id="3" type="text" maxlength="1" />
<input class="jadval" id="4" type="text" maxlength="1" />
<input class="jadval" id="5" type="text" maxlength="1" />
<input class="jadval" id="6" type="text" maxlength="1" />
<input class="jadval" id="7" type="text" maxlength="1" />
<input class="jadval" id="8" type="text" maxlength="1" />
<input class="jadval" id="9" type="text" maxlength="1" />
<input class="jadval" id="10" type="text" maxlength="1" /><br>

<input style="font-family:Tahoma; width:200px; font-size:12px; background-color:#666; color:#FFF;" type="button" id="check" value="check" />
</div>
</div>
</body>
</html>
و check.php هم اینجوری

<?php
$one = $_POST['1'];
$two = $_POST['2'];
$three = $_POST['3'];
$four = $_POST['4'];
$five = $_POST['5'];
$six = $_POST['6'];
$seven = $_POST['7'];
$eight = $_POST['8'];
$nine = $_POST['9'];
$ten = $_POST['10'];

//جواب صحيح فيلد ها
$answer=array();
$answer[1]='a';
$answer[2]='b';
$answer[3]='c';
$answer[4]='d';
$answer[5]='e';
$answer[6]='f';
$answer[7]='g';
$answer[8]='h';
$answer[9]='i';
$answer[10]='j';

$out1=($answer[1]==$one)?'1':'0';
$out2=($answer[2]==$two)?'1':'0';
$out3=($answer[3]==$three)?'1':'0';
$out4=($answer[4]==$four)?'1':'0';
$out5=($answer[5]==$five)?'1':'0';
$out6=($answer[6]==$six)?'1':'0';
$out7=($answer[7]==$seven)?'1':'0';
$out8=($answer[8]==$eight)?'1':'0';
$out9=($answer[9]==$nine)?'1':'0';
$out10=($answer[10]==$ten)?'1':'0';

echo json_encode(array(1=>$out1,2=>$out2,3=>$out3,4=>$out4,5=>$out5,6=>$out6,7=>$out7,8=>$out8,9=>$out9,10=>$out10));

?>

من اینا رو چک کردم ولی خوب جوابی نگرفتم
سوال اولم اینه که توی

success: function(data) { // you can use data as javascript object
},

چه طوری آرایه ای که از json گرفتم رو میتونم بهش دسترسی داشته باشم و پردازش کنم
می خوام که فیلد ها هر کدام جوابش درست بود (از json مقدار 1 بر میگردونه در صورت صحیح بودن) بهش کلاس object_ok رو اضافه کنه و در صورت غلط بودن بهش کلاس object_error رو اضافه کنه

حالا اینا همه برای 10 تا فیلد هست وقتی فیلد ها بیشتر باشه مثلا 200 تا توی check.php چه طوری باید کار کنم

حالا میتونید تو check.php اینطوری به این اطلاعات دسترسی داشته باشید.
1
2
$one = $_POST['1'];
$two = $_POST['2'];

البته این کارا رو میتونید تو یه حلقه for هم انجام بدید.

چون مسلما الان برای یادگیری جواب هارو توی check.php گزاشتم ولی خوب اصلش باید توی دیتابیس باشه و دیگه اینجوری نخواهد بود

$answer=array();
$answer[1]='a';
$answer[2]='b';
$answer[3]='c';
$answer[4]='d';
$answer[5]='e';
$answer[6]='f';
$answer[7]='g';
$answer[8]='h';
$answer[9]='i';
$answer[10]='j';

$out1=($answer[1]==$one)?'1':'0';
$out2=($answer[2]==$two)?'1':'0';
$out3=($answer[3]==$three)?'1':'0';
$out4=($answer[4]==$four)?'1':'0';
$out5=($answer[5]==$five)?'1':'0';
$out6=($answer[6]==$six)?'1':'0';
$out7=($answer[7]==$seven)?'1':'0';
$out8=($answer[8]==$eight)?'1':'0';
$out9=($answer[9]==$nine)?'1':'0';
$out10=($answer[10]==$ten)?'1':'0';

jalil_gh

شنبه 26 مرداد 1392, 09:59 صبح

شما میتونید تو فایل php اول داده های ورودی کاربر رو بگیرید و تو یه آرایه قرار بدید. بعد جواب‌های صحیح رو هم از database بگیرید و اونارو هم تو یه آرایه قرار بدید و اون دوتا رو باهم مقایسه کنید و خروجی موردنظر رو تولید کنید.
یه چیزی تو این مایه‌ها:

<?php

$userAnswers = array();
for($i = 1; $i <= 10; $i++) {
array_push($userAnswers, $_POST[$i]);
}

$answers = array();
//now get the answers from database and put then into $answers

// now compare them and populate the $out array
$out = array();

for ($j = 0; $j < 10; $j++) {
array_push($out, array(
'result' => ($answers[$j]==$userAnswers[$j]) ? '1' : '0'
));
}

echo json_encode($out);

?>

بعد سمت مروگر میتونید داخل ()success به این اطلاعات دسترسی پیدا کنید و کارهای لازم رو انجام بدید.
//...
success: function(data) {

for (var i = 0; i < data.length; i++) {
var $elem = $('#' + (i+1));

if (data[i]['result'] === '1') {
$elem.addClass('object_ok');
} else {
$elem.addClass('object_error');
}
}
}
//...

funpatogh

شنبه 26 مرداد 1392, 10:29 صبح

مرسی تست میکنم بهتون خبر میدم:تشویق:

funpatogh

شنبه 26 مرداد 1392, 11:53 صبح

عزیز باز من جواب نگرفتم
توی console میگه که
dataToSend is not defined
index.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://www.bitrepository.com/demo/username-checker/jquery-1.2.6.min.js"></script>
<style type="text/css">
input.jadval {
font-family: Tahoma,Arial,Helvetica;
font-size: 14px;
font-weight:500;
text-align: center;
vertical-align: top;
background: #ffffff;
color: #000000;
width: 25px;
height: 25px;
border: 1px solid;
margin:1px;
}
input[type="text"]:disabled
{
background:#CCC;
cursor:default;

}

.object_ok{
border: 1px solid green;
color: #333333;
}
.object_error{
border: 1px solid #AC3962;
color: #333333;
}

</style>
<SCRIPT type="text/javascript">
$(function() {

$("#check").click(function(){

for (var i = 1; i <= 10; i++) {
dataToSend[i] = $('#' + i).val();
}

$.ajax({
type: 'post',
url: 'check.php',

data: dataToSend, // data goes here

dataType: 'json',
success: function(data) {

for (var i = 0; i < data.length; i++) {
var $elem = $('#' + (i+1));

if (data[i]['result'] === '1') {
$elem.addClass('object_ok');
} else {
$elem.addClass('object_error');
}
}
}
});

});//click check

});//function

</SCRIPT>
</head>
<body dir="Rtl">
<div align="center" style="width:100%">
<input class="jadval" id="1" type="text" maxlength="1" />
<input class="jadval" id="2" type="text" maxlength="1" />
<input class="jadval" id="3" type="text" maxlength="1" />
<input class="jadval" id="4" type="text" maxlength="1" />
<input class="jadval" id="5" type="text" maxlength="1" />
<input class="jadval" id="6" type="text" maxlength="1" />
<input class="jadval" id="7" type="text" maxlength="1" />
<input class="jadval" id="8" type="text" maxlength="1" />
<input class="jadval" id="9" type="text" maxlength="1" />
<input class="jadval" id="10" type="text" maxlength="1" /><br>

<input style="font-family:Tahoma; width:200px; font-size:12px; background-color:#666; color:#FFF;" type="button" id="check" value="check" />
</div>
</div>
</body>
</html>
check.php

<?php
$userAnswers = array();
for($i = 1; $i <= 10; $i++) {
array_push($userAnswers, $_POST[$i]);
}

$answer=array();
$answer[1]='a';
$answer[2]='b';
$answer[3]='c';
$answer[4]='d';
$answer[5]='e';
$answer[6]='f';
$answer[7]='g';
$answer[8]='h';
$answer[9]='i';
$answer[10]='j';

// now compare them and populate the $out array
$out = array();

for ($j = 1; $j <= 10; $j++) {
array_push($out, array(
'result' => ($answer[$j]==$userAnswers[$j]) ? '1' : '0'
));
}

echo json_encode($out);

?>

نمونش اینجاست شما هم نگاه کنید
www.funpatogh.com/23/ (http://www.funpatogh.com/23/)

jalil_gh

شنبه 26 مرداد 1392, 14:48 عصر

شما باید اول کدهای جاوااسکریپتتون dataToSend رو تعریف کنید.
$(function() {

var dataToSend = {};

$("#check").click(function(){

for (var i = 1; i <= 10; i++) {
dataToSend[i] = $('#' + i).val();
}

$.ajax({
type: 'post',
url: 'check.php',

data: dataToSend, // data goes here

dataType: 'json',
success: function(data) {

for (var i = 0; i < data.length; i++) {
var $elem = $('#' + (i+1));

if (data[i]['result'] === '1') {
$elem.addClass('object_ok');
} else {
$elem.addClass('object_error');
}
}
}
});

});//click check

});//function

funpatogh

شنبه 26 مرداد 1392, 15:58 عصر

باز هم جواب نمیده
این جوریش کردم

$(function() {
var dataToSend =array {};

$("#check").click(function(){

for (var i = 1; i <= 10; i++) {
dataToSend[i] = $('#' + i).val();
}

console اینو میگه
[16:36:11.428] POST http://www.funpatogh.com/23/check.php [HTTP/1.1 200 OK 406ms]
check.php مشکل داره از نظر شما؟

jalil_gh

شنبه 26 مرداد 1392, 20:36 عصر

خط سوم از کدی که تو پست شماره ۸ قرار دادم رو نگاه کنید. روش تعریف شی در جاوااسکریپت همونه.
من اون خط رو به demo شما اضافه کردم همه چی درست کار میکنه. فقط یکم اشکال منطقی داره...
در ضمن dataToSend آرایه نیست بلکه یک شی جاوااسکریپته.

funpatogh

شنبه 26 مرداد 1392, 20:45 عصر

شرمنده
من توی کد array نوشتم اشتباها اما توی تستم درست نوشتم
بینید اینجارو
http://www.funpatogh.com/23/
کار نمیکنه
خروجی از check.php بر می گرده اما خوب فیلد ها رو تغییر نمیده
http://www.funpatogh.com/23/check.php

jalil_gh

شنبه 26 مرداد 1392, 21:06 عصر

به نظر مشکل از فایل php باید باشه که درست مقایسه نمیکنه.

funpatogh

شنبه 26 مرداد 1392, 21:09 عصر

راهی هست که بشه دید وقتی فرم ارسال میشه چی بر می گردونه؟که بشه راحت کد php را مشکل یابی کرد

jalil_gh

شنبه 26 مرداد 1392, 21:25 عصر

بله. اگه از فایرفاکس استفاده میکنید میتونید از افزونه فایرباگ استفاده کنید. اگر هم از کروم استفاده میکنید ctr+shift+i رو فشار بدید قسمت web instpector باز میشه. از اون قسمت برید به قسمت Network . اونجا همه ترافیک وب سایت رو میتونید مشاهده کنید.
در ضمن من کد php رو به این صورت تغییر دادم فک کنم درست شد.

<?php
$userAnswers = array();
for($i = 1; $i <= 10; $i++) {
$userAnswers["$i"] = $_POST["$i"];
}

$answer=array();
$answer[1]='a';
$answer[2]='b';
$answer[3]='c';
$answer[4]='d';
$answer[5]='e';
$answer[6]='f';
$answer[7]='g';
$answer[8]='h';
$answer[9]='i';
$answer[10]='j';

// now compare them and populate the $out array
$out = array();

for ($j = 1; $j <= 10; $j++) {
array_push($out, array(
'result' => ($answer["$j"] == $userAnswers["$j"]) ? '1' : '0'
));
}

echo json_encode($out);

?>

funpatogh

شنبه 26 مرداد 1392, 21:38 عصر

متاسفانه باز هم کار نمی کنه
http://www.funpatogh.com/23/index.html

jalil_gh

شنبه 26 مرداد 1392, 21:46 عصر

کار میکنه که؟؟؟ مثلا اگه کاراکتر a رو تو فیلد اولی وارد کنی بعد از چک کردن کلاس object_ok بهش اضافه میشه و به بقیه هم کلاس object_error اضافه میشه.

funpatogh

شنبه 26 مرداد 1392, 21:54 عصر

مشکل از بخش php نیست
من الان فایل check.php را تغییر دادم به این صورت که خروجی رو اینجوری میده بیرون

[{"result":"1"},{"result":"1"},{"result":"1"},{"result":"0"},{"result":"0"},{"result":"0"},{"result":"0"},{"result":"0"},{"result":"0"},{"result":"0"}]

این رو باز کنید و دستی خروجیش رو ثابت کردم
www.funpatogh.com/23/check.php (http://www.funpatogh.com/23/check.php)
الان باید 3 تا از فیلد ها رو سبز کنه و باقی قرمز باشه اما خوب کار نمیکنه و فکر میکنم که بخش آژاکسش مشکل داره

success: function(data) {

for (var i = 0; i < data.length; i++) {
var $elem = $('#' + (i+1));

if (data[i]['result'] === '1') {
$elem.addClass('object_ok');
} else {
$elem.addClass('object_error');
}
}
}

funpatogh

شنبه 26 مرداد 1392, 22:02 عصر

کار میکنه که؟؟؟ مثلا اگه کاراکتر a رو تو فیلد اولی وارد کنی بعد از چک کردن کلاس object_ok بهش اضافه میشه و به بقیه هم کلاس object_error اضافه میشه.
یعنی الان دور input جواب صحیح سبز میشه؟:متعجب:

jalil_gh

شنبه 26 مرداد 1392, 22:06 عصر

تو قسمت css اینا رو
.object_ok{
border: 1px solid green;
color: #333333;
}
.object_error{
border: 1px solid #AC3962;
color: #333333;
}
به
input.object_ok{
border: 1px solid green;
color: #333333;
}
input.object_error{
border: 1px solid #AC3962;
color: #333333;
}
تغییر بدید درست میشه.

funpatogh

شنبه 26 مرداد 1392, 22:13 عصر

خدا خیرتون بده درست شد
ولی یک مشکل کوچیک هنوز داره
وقتی جواب رو درست بنویسم و دکمه رو بزنم سبز میشه و قتی همون رو غلط کنم و دکمه رو بزنم قرمز میشه و بعد که دوباره درستش میکنم و دکمه رو میزنم دیگه تغییر نمیکنه و همون جور قرمز می مونه

jalil_gh

شنبه 26 مرداد 1392, 22:22 عصر

چون وقتی درست وارد میکنید کلاس object_ok بهش اضافه میشه و وقتی که غلط وارد کنید کلاس object_error بهش اضافه میشه بدون اینکه کلاس object_ok برداشته بشه. دفعه بعد که درست وارد میکنید چون کلاس object_ok وجود داره دیگه اضافه نمیشه و چو object_error بعد از object_ok آضافه شده نسبت به اون اولویت داره. (چی گفتم؟!)

به هر حال شما میتونید وقتی که پاسخ اومد داخل success اول همه کلاس های object_ok و object_error رو حذف کنید.
با این حساب success به این شکل در میاد.
for (var i = 0; i < data.length; i++) {
var $elem = $('#' + (i+1));
$elem.removeClass('object_ok').removeClass('object _error');

if (data[i]['result'] == '1') {
$elem.addClass('object_ok');
} else {
$elem.addClass('object_error');
}
}

funpatogh

شنبه 26 مرداد 1392, 22:34 عصر

آقا چی شد کیف کردم دست گلت درد نکنه

funpatogh

شنبه 26 مرداد 1392, 22:56 عصر

عزیز مممنون یک سوال دیگه پرسیده بودم که خودم جوابم رو گرفتم و نخواستم مزاجم وقت شما هم بشم

exlord

یک شنبه 27 مرداد 1392, 17:49 عصر

کد همه دوستان درسته ولی بعضیاشون بهینه نیستن ...

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<form id="jadval_form">
<input class="jadval" id="1" type="text" maxlength="1"/>
<input class="jadval" id="2" type="text" maxlength="1"/>
<input class="jadval" id="3" type="text" maxlength="1"/>
<input class="jadval" id="4" type="text" maxlength="1"/>
<input class="jadval" id="5" type="text" maxlength="1"/>
<input class="jadval" id="6" type="text" maxlength="1"/>
<input class="jadval" id="7" type="text" maxlength="1"/>
<input class="jadval" id="8" type="text" maxlength="1"/>
<input class="jadval" id="9" type="text" maxlength="1"/>
<input class="jadval" id="10" type="text" maxlength="1"/>
<input type="button" id="check" value="check"/>
</form>
<script src="jquery.1.8.3.min.js"></script>
<script>
$(document).ready(function () {
$('#check').click(function () {
var dataToSend = {'input': {}};
$('#jadval_form input[type=text]').each(function () {
dataToSend.input[$(this).attr('id')] = $(this).val();
});
$.ajax({
type: 'post',
url: 'check.php',
data: dataToSend,
dataType: 'json',
success: function (data) {
$('.jadval').removeClass('object_error').removeCla ss('object_ok');
$.each(data.input, function (index, item) {
$('.jadval#' + index).addClass('object_' + item);
});
},
error: function (e) {
console.log(e);
}
});
});
});
</script>
</body>
</html>

$data = $_POST['input'];
$answers = array();
$return_data = array();

foreach ($data as $key => $input) {
if (isset($answers[$key]) && $answers[$key] === $input) {
$return_data['input'][$key] = 'ok';
} else
$return_data['input'][$key] = 'error';
}

echo json_encode($return_data);

jalil_gh

دوشنبه 28 مرداد 1392, 10:48 صبح

اینا رو گفتین یادم افتاد removeClass رو میتونیم به این صورت هم بنویسیم.
$('.jadval').removeClass('object_error object_ok');