HTML5 contenteditable 자바 스크립트와 PHP를 사용하여 인라인 편집

나는 ajax를 처음 사용하므로 HTML5 contenteditable = "true"를 사용하여 인라인 편집으로 mysql 데이터베이스를 업데이트하는 간단한 ajax 스크립트를 요청하고 싶다.HTML5 contenteditable 자바 스크립트와 PHP를 사용하여 인라인 편집

이미 인터넷 검색을하고 있지만 아직 파악 방법을 모르겠습니다. 누군가 나를 자바 스크립트를 사용하여 제출 단추를 사용하지 않고도 데이터베이스를 업데이트 할 수있는 자바 스크립트를 제공 할 수 있습니까?

내가이 아이 패드에 액세스하고 휴대 전화도 내가 트위터 부트 스트랩을 사용하고 생각되기 때문에 jQuery를 사용하여 않으려는

은 여기 내 HTML5

<!DOCTYPE html> 
    <html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
     <title>Contact</title> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
     <meta name="description" content=""> 
     <!-- Le styles --> 
     <link href="../assets/css/bootstrap.css" rel="stylesheet"> 
     <link href="../assets/css/bootstrap-responsive.css" rel="stylesheet"> 
     <link href="../assets/js/google-code-prettify/prettify.css" rel="stylesheet"> 
    <style> 
     body { 
      padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */ 
     } 
    </style> 
<!-- HTML5 shim, for IE6-8 support of HTML5 elements --> 
<!--[if lt IE 9]> 
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> 
<![endif]--> 
<script src="../assets/js/jquery.js"></script> 
<script src="../assets/js/bootstrap.min.js"></script> 
<script src="../assets/js/google-code-prettify/prettify.js"></script> 
<!-- Fav and touch icons --> 
<link rel="shortcut icon" href="../assets/ico/favicon.ico"> 
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png"> 
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png"> 
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png"> 
<link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png"> 
</head> 

---- 
---- 
<div class="contact"> 
    <form class="form-horizontal" method="POST" action="updatecontactmaininfo.php"> 
     <?php 
      $sql=mysql_query("select * from contacts where SupplierId='$compid'"); 
      $dt=mysql_fetch_array($sql); 
     ?> 
     <table class="table table-bordered table-hover table-striped "> 
      <tr> 
       <td><i class="icon-user"></i> ID:</td> 
       <td><input type="text" name="SupplierId" value="<?=$dt[SupplierId]?>"></td> 
       <td><i class="icon-briefcase"></i> Company:</td> 
       <td><input type="text" name="CompanyName" value="<?=$dt[CompanyName]?>"></td> 
      </tr> 
      <tr> 
       <td><i class="icon-home"></i> Address:</td> 
       <td colspan="3"><input type="text" name="Address1" value="<?=$dt[Address1]?>"></td> 
      </tr> 
      <tr> 
       <td><i class="icon-map-marker"></i> City:</td> 
       <td><input type="text" name="City" value="<?=$dt[City]?>"></td> 
       <td><i class="icon-map-marker"></i> State:</td> 
       <td><input type="text" name="State" value="<?=$dt[State]?>"></td> 
      </tr> 
      <tr> 
       <td align="right" class="tdblue"><i class="icon-flag"></i> Country:</td> 
       <td><input type="text" name="Country" value="<?=$dt[Country]?>"></td> 
       <td align="right" class="tdblue"><i class="icon-envelope"></i> Zip:</td> 
       <td><input type="text" name="State" value="<?=$dt[ZipCode]?>"></td> 
      </tr> 
      <tr> 
       <td><i class="icon-volume-up"></i> Phone:</td> 
       <td><input type="text" name="Phone" value="<?=$dt[Phone]?>"></td> 
       <td><i class="icon-print"></i> Fax:</td> 
       <td><input type="text" name="Fax" value="<?=$dt[Fax]?>"></td> 
      </tr> 
      <tr> 
       <td><i class="icon-globe"></i> Website:</td> 
       <td><input type="text" name="website" value="<?=$dt[website]?>"></td> 
       <td><i class="icon-adjust"></i> Zone:</td> 
       <td><input type="text" name=Zone"" value="<?=$dt[Zone]?>"></td> 

       <input type="hidden" name="RecId" value="<?=$dt[RecId]?>"> 
       <input type="hidden" name="limit" value="<?=$limit?>"> 
      </tr> 
     </table> 
</div>

내 PHP (updatecontactmaininfo.php)입니다 is :

<?php 
    include("../config.php"); 

    $SupplierId    = $_POST[SupplierId]; 
    $CompanyName   = $_POST[CompanyName]; 
    $Address1    = $_POST[Address1]; 
    $City     = $_POST[City]; 
    $State     = $_POST[State]; 
    $Country    = $_POST[Country]; 
    $ZipCode    = $_POST[ZipCode]; 
    $Phone     = $_POST[Phone]; 
    $Fax     = $_POST[Fax]; 
    $website    = $_POST[website]; 
    $Zone     = $_POST[Zone]; 
    $RecId     = $_POST[RecId]; 
    $limit     = $_POST[limit]; 

    mysql_query("update contacts set SupplierId='$SupplierId', Address1='$Address1', City='$City', State='$State', Country='$Country', ZipCode='$ZipCode', Phone='$Phone', Fax='$Fax', website='$website' where RecId='$RecId'"); 

    header('Location:contactsform.php?limit='.$limit); 

?>

감사합니다.

출처

2012-11-22 Minanube

jQuery는 iPad와 스마트 폰에서도 작동합니다. –

또한 contenteditable을 사용하려는 이유가 무엇입니까? –

@ BotondBalázs 네, 그게 ipad에서 작동하는지는 알지만 부드럽게 보이지 않습니다. mysql을 직접 업데이트 (인라인 편집)하여 사람들이 테이블 필드 유형을 클릭하고 제출 버튼없이 자동으로 저장하도록 할 것이다. – Minanube

eventoninput에 contenteditable을 첨부 할 수 있습니다.

var el = document.getElementById('element_id') 
el.oninput = function(){ 
    // you can grab values of other inputs and send ajax call here 
}

출처

2012-11-22 10:15:08 Naveed

나는 자바 스크립트에 익숙하지 않다. 어떻게 스크립트를 사용 하는가? OnBlur OnFocus와 같은 것을 사용할 것입니까? – Minanube

'ajax' 호출 코드에 대해 묻고 있습니까? – Naveed

HTML5 contenteditable 자바 스크립트와 PHP를 사용하여 인라인 편집

답변

관련 문제