編輯個人資料：單選按鈕與Ajax和JavaScript檢查

級別：初級編輯個人資料：單選按鈕與Ajax和JavaScript檢查

我試圖在JavaScript文件中使用AJAX從數據庫查看我的用戶配置文件數據到HTML頁面，讓用戶可以更新它。我可以使用ajax查看配置文件，並可以使用javascript更新它。但帶有單選按鈕的信息無法更改。當我選擇另一個值時，它選擇「多值」，所以它無法更新，因爲他們說它有一個空值。

如何編輯/更改單選按鈕（jenis kelamin和golongan darah）的值，而不會在數據庫更新中出現多個值和錯誤？

我不知道什麼是錯。你可以幫幫我嗎？這是我的代碼。

謝謝。

我的PHP代碼在服務器側：newpass.php作爲控制器

<?php if (! defined('BASEPATH')) exit('No direct script access allowed'); 

class newpass extends CI_Controller { 

    function __construct() 
    { 
     parent::__construct(); 
     $this->load->model('newpass_model','npmod'); 
    } 

    //to get the user profile 
    public function read() { 
     $iduser = $this->session->userdata('id'); 
     if(isset($iduser)) 
     echo json_encode($this->npmod->getByIdUser($iduser)); 
    } 

    //to edit the user profile 
    public function update() { 
     $s = $this->npmod->update(); 
     echo $s; 
    }  
} 
?>

我的PHP代碼在服務器側：newpass_model.php作爲模型

<?php if (! defined('BASEPATH')) exit('No direct script access allowed'); 

class newpass_model extends CI_Model { 

    //to get the user profile 
    function getByIdUser($iduser) { 
     $iduser = intval($iduser); 

     $query = $this->db->where('iduser',$iduser)->limit(1)->get('pasien'); 

     if($query->num_rows() > 0) { 
      //return $query->row(); 
      $row = $query->row(); 

      $tgl = $row->tgllahir; 
      $myDateTime = DateTime::createFromFormat('Y-m-d', $tgl); 
      $newDateString = $myDateTime->format('d-m-Y'); 

      $data = array(
      'nama' => $row->nama, 
      'tempatlahir' => $row->tempatlahir, 
      'tgllahir' => $newDateString, 
      'jeniskelamin' => $row->jeniskelamin, 
      'tinggi_badan' => $row->tinggi_badan, 
      'berat_badan' => $row->berat_badan, 
      'goldarah' => $row->goldarah, 
      'kontak' => $row->kontak, 
      'nokontak_kel' => $row->nokontak_kel, 
      'email_kel' => $row->email_kel 
      ); 
      return $data; 

     } else { 
      return array(); 
     } 
    } 

    //to edit the user profile 
    public function update() { 
    $iduser = $this->session->userdata('id'); 

    $tgl = $this->input->post('tanggal'); 
    $myDateTime = DateTime::createFromFormat('d-m-Y', $tgl); 
    $newDateString = $myDateTime->format('Y-m-d'); 

    $jkl = $this->input->post('jeniskelaminL'); 
    $jkp = $this->input->post('jeniskelaminP'); 
    if($jkl==''){ 
     $jk=$jkp; 
    }else{ 
     $jk=$jkl; 
    } 
    $golA = $this->input->post('golonganA'); 
    $golB = $this->input->post('golonganB'); 
    $golAB = $this->input->post('golonganAB'); 
    $golO = $this->input->post('golonganO'); 

    if($golA!=''){ 
     $gol=$golA; 
    }else if($golB!=''){ 
     $gol=$golB; 
    }else if($golAB!=''){ 
     $gol=$golAB; 
    }else { 
     $gol=$golO; 
    } 

     $data = array(
      'nama' => $this->input->post('nama'), 
      'tempatlahir' => $this->input->post('tempat'), 
      'tgllahir' => $newDateString, 
      'jeniskelamin' => $jk, 
      'tinggi_badan' => $this->input->post('tinggi'), 
      'berat_badan' => $this->input->post('berat'), 
      'goldarah' => $gol, 
      'kontak' => $this->input->post('kontak'), 
      'nokontak_kel' => $this->input->post('kontak_kel'), 
      'email_kel' => $this->input->post('kontak_em') 
      ); 

     if($this->input->post('nama')=='' || $this->input->post('tempat')=='' || $newDateString=='' || $jk=='' || 
     $this->input->post('tinggi')=='' || $this->input->post('berat')=='' || $gol=='' || $this->input->post('kontak')=='' || 
     $this->input->post('kontak_kel')=='' || $this->input->post('kontak_em')=='') 
     { 
      echo "0";   
     } 
     else 
     { 
      $this->db->where('iduser',$iduser); 
      $this->db->update('pasien',$data); 
      if ($this->db->affected_rows() >= '1') 
      { 
      echo "1"; 
      }else{ 
      echo "0"; 
      } 

     } 

    } 
} 
?>

我客戶端的javascript代碼：editprofile.js

/*Don't forget to add set_ip.js and jquery before you use this script in HTML page to make it work*/ 
var urlini = seturl(); 
var part= 'newpass/'; 

var readUrl = urlini+part+'read';  

$(function() { 
    readUsers(); 
}); //end document ready 

//to update profile 
function update_profile() { 
    alert("click tombol simpan"); 
    name = /^([-a-z0-9_-]{5,50})+$/i.test($("#nama").val()); 
    bb = /^([-0-9_-])+$/i.test($("#berat").val()); 

    var form_reg = $("input").val(); 
    if(form_reg == "") 
    { 
     alert("Semua data harus diisi."); 
    } 
    else if(!name || !bb) 
    { 
     alert("Terdapat kesalahan atau data kosong pada pengisian data.\nPastikan password Anda sesuai."); 
    } 
    else 
    {  
     $.post(urlini+part+'update', 
      $('#edit_profile').serialize(),function(msg){ 
      if(msg == '1') 
      {    
       alert("Data berhasil disimpan!"); 
       window.location="home.html"; 
      } 
      else if(msg == '0') 
      { 
       alert("Masih ada data yang kosong."); 
      } 
     }); 
    } 
} 

function readUsers() { 
$.ajax({ 
     url: readUrl, 
     dataType: 'json', 
     type: 'GET', 
     success: function(response) { 

       $('#nama').val(response.nama); 
       $('#tempat').val(response.tempatlahir); 
       $('#tanggal').val(response.tgllahir); 
      if(response.jeniskelamin=="L"){ 
       $('input:radio[name=jeniskelaminL]')[0].checked = true;    
      }else{ 
       $('input:radio[name=jeniskelaminP]')[0].checked = true; 
      } 
       $('#tinggi').val(response.tinggi_badan); 
       $('#berat').val(response.berat_badan); 
      if(response.goldarah=='A'){ 
       $('input:radio[name=golonganA]')[0].checked = true;    
      }else if(response.goldarah=='B'){ 
       $('input:radio[name=golonganB]')[0].checked = true; 
      }else if(response.goldarah=='AB'){ 
       $('input:radio[name=golonganAB]')[0].checked = true; 
      }else{ 
       $('input:radio[name=golonganO]')[0].checked = true; 
      } 
       $('#kontak').val(response.kontak); 
       $('#kontak_kel').val(response.nokontak_kel); 
       $('#kontak_em').val(response.email_kel); 
       //--- assign id to hidden field --- 
       $('#userId').val(response.iduser); 
      } 
    }); 
} // end readUsers

在客戶端我的html代碼：settings.html

<!DOCTYPE HTML> 
<html> 
<head> 
<meta name="viewport" content="width=device-width,initial-scale=1.0"/> 
<link rel="stylesheet" type="text/css" href="css/style1.css" /> 

<link href="date/kendo.common.min.css" rel="stylesheet"> 
    <link href="date/kendo.default.min.css" rel="stylesheet"> 

    <script src="date/js/jquery.min.js"></script> 
    <script src="date/js/kendo.web.min.js"></script> 
    <script src="date/js/console.js"></script> 
    <script src="jq/proses/set_ip.js"></script> 
    <script src="jq/proses/editprofile/editprofile.js"></script> 
    <script src="jq/proses/script.js"></script> 

<script> 
     $(document).ready(function() { 
     // create DatePicker from input HTML element 
     $("#tanggal").kendoDatePicker({ 
     start: "date", 
     depth: "year", 
     format: "dd/MM/yyyy", 
     }); 
    }); 
    </script> 
<title>edc - e diabet consult</title> 
</head> 
<body> 
<h1 align="center">Edit Profile</h1> 
<p align="center" class="navigation"> 
<a href="home.html" title="Kembali ke CPanel"> 
<img src="ico/home.png"> 
</a> 
<a href="pengaturan.html" title="Change Password"> 
<img src="ico/pass.png"> 
</a> 
<a href="ranges.html" title="Set Target Range"> 
<img src="ico/setting.png"> 
</a> 
</p> 
<div id="updateDialog"> 
<form id="edit_profile" action=""> 
<p width="50%" align="center"> 
<strong>Nama Pasien</strong><br> 
<input type="text" maxlength="350" id="nama" name="nama"><br> 

<strong>Tempat Lahir</strong><br> 
<input type="text" maxlength="350" id="tempat" name="tempat"><br> 

<strong>Tanggal Lahir</strong><br> 
<input type="text" maxlength="350" id="tanggal" name="tanggal" value="01-02-2013"><br> 
<br> 
<strong>Jenis Kelamin</strong><br> 
<input class="float" type="radio" id="jeniskelaminL" name="jeniskelaminL" value="L">Laki-Laki 
<input class="float" type="radio" id="jeniskelaminP" name="jeniskelaminP" value="P">Perempuan<br><br> 

<strong>Tinggi Badan (cm)</strong><br> 
<input type="text" id="tinggi" name="tinggi"><br> 

<strong>Berat Badan (kg)</strong><br> 
<input type="text" id="berat" name="berat" value=''><br> 

<strong>Golongan Darah</strong><br> 
<input class="float" type="radio" id="golonganA" name="golonganA" value="A">A 
<input class="float" type="radio" id="golonganB" name="golonganB" value="B">B 
<input class="float" type="radio" id="golonganAB" name="golonganAB" value="AB">AB 
<input class="float" type="radio" id="golonganO" name="golonganO" value="O">O<br> 
<br> 

<strong>Kontak Pasien</strong><br> 
<input type="text" id="kontak" name="kontak" value=''><br> 

<strong>Kontak Keluarga</strong><br><br> 
<strong>No.Telepon</strong><br> 
<input type="text" id="kontak_kel" name="kontak_kel" value=''><br> 

<strong>Email</strong><br> 
<input type="text" id="kontak_em" name="kontak_em" value=''><br> 

<input type="button" value="Simpan" onclick="update_profile()" id="simpan" class="button"/> 
<input type="reset" value="Reset" class="button"> 

</p> 
<br><br/> 
</form> 
</div> 
</body> 
</html>

來源

2013-03-27 me123chan

不知道我理解的問題，但如果你希望用戶只能選擇一個值，單選按鈕應具備的一樣的名字。

例如：

<input class="float" type="radio" id="golonganA" name="golongan" value="A">A 
<input class="float" type="radio" id="golonganB" name="golongan" value="B">B 
<input class="float" type="radio" id="golonganAB" name="golongan" value="AB">AB 
<input class="float" type="radio" id="golonganO" name="golongan" value="O">O<br>

現在只有1的值可以選擇爲「golongan」你可以得到的值（A，B，AB或O）這樣的：

$gol = $this->input->post('golongan')

在JavaScript中，設置像這樣的正確單選按鈕：

$('input:radio[name=golongan][value='+response.goldarah+']')[0].checked = true;

來源

2013-03-27 08:09:54 bjornarvh

**它的工作原理！非常感謝你** – me123chan 2013-03-27 08:32:02

編輯個人資料：單選按鈕與Ajax和JavaScript檢查

回答

相關問題