Forgot Password ??

PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone

	Registered : 109,037

HOME > PHP > PHP Forum > ติดปัญหาการตรวจสอบเงื่อนไขเช็คอายุและเพศในการแสดงตาราง

ติดปัญหาการตรวจสอบเงื่อนไขเช็คอายุและเพศในการแสดงตาราง

เริ่มหัวข้อใหม่

jojo

โพสกระทู้ ( 80 )
บทความ ( 0 )

ติดปัญหาการนำ input value อายุจากผู้ใช้มาคำนวณร่วมกับการเลือกเพศ
เงื่อนไขคือ
1. อายุต่ำกว่า 12 ปี เพศชายให้แสดงตาราง 333
2. อายุต่ำกว่า 12 ปี เพศหญิงให้แสดงตาราง 111
3. อายุมากกว่า 12 ปี เพศชายให้แสดงตาราง 444
4. อายุมากกว่า 12 ปี เพศหญิงให้แสดงตาราง 222
แนะนำการแก้ไข

Code (PHP)

<html>
<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script> 
function update (el) {
    var $F = $('tr.showF');
    var $M = $('tr.showM');

    if (el.checked && el.value === 'M') {
        $F.hide();
        $M.show();
    } else {
        $F.show();
        $M.hide();
    }
}

$(function () {
    update($('input:checked')[0]);
    $('input[name="fromType"]').change(function () {
        update(this);
    });
});
</script>
</head>
<body>

<form action="Save.php" name="frmAdd" method="post"><br>
อายุ <input type="text" name="sname" id="textfield">
<br>
<table id="CurrentProperty">
    <tr>
        <td colspan="3">
            <p>
            <label>เพศ:</label>
            <br/>
           
            <input type="radio" value="M" name="fromType" checked="checked" />
            ชาย
            <input type="radio" value="F" name="fromType" />
            หญิง</p>            <br>
            </td>
    </tr>
    <tr class="showF">
      <td colspan="3">ตารางหญิง
        <table width="215" border="1">
  <tr>
    <th width="153"> <div align="center">111</div></th>
    </tr>
  <tr>
    <td>&nbsp;</td>
    </tr>
</table>

        <table width="215" border="1">
          <tr>
            <th width="153"> <div align="center">222</div></th>
          </tr>
          <tr>
            <td>&nbsp;</td>
          </tr>
        </table>
        <br>
          <input type="submit" name="submit" value="submit">
          
       </td><br>
    </tr>
    <tr class="showM">
        <td colspan="3"> ตารางชาย
            <table width="218" border="1">
              <tr>
                <th> <div align="center">333</div></th>
              </tr>
              <tr>
                <td>&nbsp;</td>
              </tr>
  <tr>
    <th width="91"> <div align="center">444</div></th>
    </tr>
  <tr>
    <td>&nbsp;</td>
    </tr>
</table>
        

<br>
  <input type="submit" name="submit" value="submit">
</form>

</body>
</html>

Tag : PHP, MySQL, JavaScript, Action Script, Ajax, jQuery

ประวัติการแก้ไข
2016-10-10 15:42:50
2016-10-10 15:45:15
2016-10-10 15:45:44

Date : 2016-10-10 15:39:23

By : mininovaa

View : 803

Reply : 6

No. 1

Mr.กล้า

โพสกระทู้ ( 5,105 )
บทความ ( 4 )

ใน code ตัวอย่าง ยังไม่มีการประกาศตัวแปร var ที่เกิดจาก input text ครับ

Date : 2016-10-11 09:40:31

By : apisitp

No. 2

jojo

โพสกระทู้ ( 80 )
บทความ ( 0 )

ผมได้เพิ่มส่วนรับค่า input value

Code (PHP)

<script>
function myFunction() {
var x = document.getElementById("users").value;
document.getElementById("numb").innerHTML = x;
}
</script>
อายุุ<input type="text" name="users" id="users" onkeyup="myFunction()">
<p id="numb"></p>
<br>

เขียนต่อยังไงครับให้สามารถตรวจสอบเงื่อนไขได้

Date : 2016-10-11 10:24:58

By : mininovaa

No. 3

Mr.กล้า

โพสกระทู้ ( 5,105 )
บทความ ( 4 )

<script>
function myFunction() {
var x = document.getElementById("users").value;
if (x.length > 0) {
alert(x);
}
document.getElementById("numb").innerHTML = x;
}
</script>
อายุุ<input type="text" name="users" id="users" onkeyup="myFunction()">
<p id="numb"></p>
<br>

ปกติใช้ jquery ไม่แน่ใจว่า .length ใช้ได้กับ javascript หรือเปล่า

var users= $("input[name=users]").val();
if (users.length > 0) {
$("#numb").after(users);
}

Date : 2016-10-11 13:28:26

By : apisitp

No. 4

jojo

โพสกระทู้ ( 80 )
บทความ ( 0 )

ผมทำตามแล้วไม่ตรงตามเงื่อนไข

1.ต้องกรอกอายุ
2.เลือกเพศ
3.ตารางที่แสดง เกิดจาก 1+2

เงื่อนไขตามข้างบน

Date : 2016-10-12 08:46:34

By : mininovaa

No. 5

Mr.กล้า

โพสกระทู้ ( 5,105 )
บทความ ( 4 )

<html>
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
    $('#showF_under12').hide(); //ซ่อน
    $('#showF_over12').hide(); //ซ่อน
    $('#showM_under12').hide(); //ซ่อน
    $('#showM_over12').hide(); //ซ่อน

    $('#frmAdd').on('click','#submit',function(){
        alert("ทำงานเพราะคลิกปุ่ม submit ");
      var age = $("input[name=age]").val(); //รับค่า อายุ
        alert("แสดงอายุ : " + age);
        var sex = $("#frmAdd input[name=sex]:checked").val();
        alert("แสดงเพศ : " + sex);
    //ค่าที่รับมาเป็น M ชาย
    if(sex == 'M'){

        if(age > 12){ // อายุมากกว่า 12
          $('#showM_over12').show();

          $('#showF_under12').hide(); //ซ่อน
          $('#showF_over12').hide(); //ซ่อน
          $('#showM_under12').hide(); //ซ่อน
        }else{ // อายุน้อยกว่า 12
          $('#showM_under12').show();
          $('#showF_under12').hide(); //ซ่อน
          $('#showF_over12').hide(); //ซ่อน
          $('#showM_over12').hide(); //ซ่อน
        }

      }else{
    //ค่าที่รับมาไม่ใช่ M  แสดงว่ามีค่าเป็น F
      if(age > 12){ // อายุมากกว่า 12
          $('#showF_over12').show();
          $('#showF_under12').hide(); //ซ่อน
          $('#showM_under12').hide(); //ซ่อน
          $('#showM_over12').hide(); //ซ่อน

        }else{ // อายุน้อยกว่า 12
          $('#showF_under12').show();
          $('#showF_over12').hide(); //ซ่อน
          $('#showM_under12').hide(); //ซ่อน
          $('#showM_over12').hide(); //ซ่อน
        }
    }
    });
});
</script>
</head>
<body>
<form action="Save.php" id="frmAdd" name="frmAdd" method="post">
<hr>
อายุ <input type="text" name="age" id="age">
<hr>
            <label>เพศ:</label>
            <br/>
            <input type="radio" value="M" name="sex" />
            ชาย
            <input type="radio" value="F" name="sex" />
            หญิง
<hr>
 <div id="showF_under12">ผู้หญิง อายุ < 12 แสดง 111</div>
 <div id="showF_over12">ผู้หญิง อายุ > 12 แสดง 222</div>
 <div id="showM_under12">ผู้ชาย อายุ <  12 แสดง 333</div>
 <div id="showM_over12">ผู้ชาย อายุ >  12 แสดง 444</div>
<hr>
  <input type="button" name="submit" id="submit" value="submit">
</form>
</body>
</html>

code มันตัดได้สั้นกว่านี้ หากจับ element มาใช้ใหม่ แต่ทดสอบให้ดูการทำงาน จะได้เข้าใจ jquery มากขึ้นครับ

ประวัติการแก้ไข
2016-10-12 13:46:59
2016-10-12 18:13:09

Date : 2016-10-12 13:42:54

By : apisitp

No. 6

jojo

โพสกระทู้ ( 80 )
บทความ ( 0 )

ขอบคุณครับ

Date : 2016-10-13 08:57:18

By : mininovaa

ค้นหาข้อมูล

แสดงความคิดเห็น

Re : ติดปัญหาการตรวจสอบเงื่อนไขเช็คอายุและเพศในการแสดงตาราง

รายละเอียด

เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

อัพโหลดแทรกรูปภาพ

Notice

เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ
อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง

เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง

โดย

อีเมล์

บวกค่าให้ถูก