2013-08-22 43 views
0

嗨,你想幫我。即時通訊的PHP新手。我想在我的數據庫中插入就業信息,並在窗體放置處隱藏da div。將數據插入數據庫後隱藏div

HTML:

<div class="toggler"> 
    <div id="effect" class="ui-widget-content ui-corner-all"> 
     <form name="empform" method="post" action="profile.php" autofocus> 
      <input name="employ" type="text" id="employ" pattern="[A-Za-z ]{3,20}" 
      placeholder="Who is your employer?"> 
      <input name="position" type="text" id="position" pattern="[A-Za-z ]{3,20}" 
      placeholder="What is your job description?"> 
      <input name="empadd" type="text" id="empadd" pattern="[[email protected]#$% ]{5,30}" 
      placeholder="Where is your work address?"> 
      <input name="empcont" type="text" id="empcont" pattern="[0-9]{11}" title="11-digit number" 
      placeholder="Contact number"> 
      <input name="btncancel" type="button" class="btncancel" value="Cancel" 
      style="width:60px; border-radius:3px; float:right"> 
      <input name="btndone" type="submit" class="btndone" value="Done" style="width:60px; border-radius:3px; float:right"> 
     </form> 
    </div> 
</div> 

PHP:

if (isset($_POST['btndone'])) { 
    $employ = $_POST['employ']; 
    $position = $_POST['position']; 
    $empadd = $_POST['empadd']; 
    $empcont = $_POST['empcont']; 
    $empdate = $_POST['empdate']; 
    $empID = $alumniID; 
    $obj - > addEmployment($employ, $position, $empadd, $empcont, $empdate, $empID); 
} 

JS:

<script> 
    $(function() { 
     function runEffect() { 
      var selectedEffect = "highlight"; 
      $(".toggler").show(selectedEffect); 
     }; 

     function runDisplay() { 
      var selectedDisplay = "highlight"; 
      $("#empdisplay").show(selectedDisplay); 
     }; 
     $(".btncancel").click(function() { 
      $(".toggler").hide(); 
      return false; 
     }); 
     $(".btndone").click(function() { 
      runDisplay(); 
      $(".toggler").hide(); 
      return false; 
     }); 
    } 
</script> 
+3

這裏有什麼問題?代碼不工作?你卡在哪裏?你有什麼錯誤嗎? –

+0

你的php代碼是在同一頁的html頁面或在不同的php文件? –

+1

ajax在哪裏? –

回答

0

你應該做一個AJAX調用保存數據然後隱藏DIV,成纔是這樣的:

$('form[name="empform"]').submit(function(e) { 
    e.preventDefault(); 
    $.post($(this).attr('action'), $(this).serialize(), function(data) { 
     $('div.toggler').hide(); 
    }); 

}); 
+2

您需要防止默認表單提交,例如'return false'。 – jcubic

+0

或'e.preventDefault();' – Nukium

1

嘗試這個

HTML

<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> 
</head> 

<body> 
<div class="toggler"> 
    <div id="effect" class="ui-widget-content ui-corner-all"> 
     <form id="empform" name="empform" method="post" action="profile.php" autofocus> 
      <input name="employ" type="text" id="employ" pattern="[A-Za-z ]{3,20}" 
      placeholder="Who is your employer?"> 
      <input name="position" type="text" id="position" pattern="[A-Za-z ]{3,20}" 
      placeholder="What is your job description?"> 
      <input name="empadd" type="text" id="empadd" pattern="[[email protected]#$% ]{5,30}" 
      placeholder="Where is your work address?"> 
      <input name="empcont" type="text" id="empcont" pattern="[0-9]{11}" title="11-digit number" 
      placeholder="Contact number"> 
      <input name="btncancel" type="button" class="btncancel" value="Cancel" 
      style="width:60px; border-radius:3px; float:right"> 
      <input id="submit"name="btndone" type="submit" class="btndone" value="Done" style="width:60px; border-radius:3px; float:right"> 
     </form> 
    </div> 
</div> 
<script> 
    $(document).ready(function() { 
     //$("#form").prev 
    $('#submit').click(function(event) { 
    //alert (dataString);return false; 
    event.preventDefault(); 
    $.ajax({ 
     type: "POST", 
     url: 'profile.php', 
     dataType:"html", 
     data: $("#empform").serialize(), 
     success: function(msg) { 
       alert("Form Submitted: " + msg); 
     //alert($('#form').serialize()); 
     $('div.toggler').hide(); 
     } 
    }); 

    }); 
    }); 
</script> 
</html> 

PHP profile.php

<?php 
    if (isset($_POST)) { 
     $employ = $_POST['employ']; 
     $position = $_POST['position']; 
     $empadd = $_POST['empadd']; 
     $empcont = $_POST['empcont']; 
     $empdate = $_POST['empdate']; 
     $empID = $alumniID; 
     $obj - > addEmployment($employ, $position, $empadd, $empcont, $empdate, $empID); 

    } 
?> 

蔭不確定你的領域

echo $ empdate = $ _POST ['empdate']; $ empID = $ alumniID; 他們不是形式,而是作品!...

+0

它不會隱藏div。你是什​​麼意思表單名稱更新? – user2706335

+0

並且它也不會將數據插入到我的數據庫中。 – user2706335

+0

@ user2706335你改變了網址? – 2013-08-22 10:00:44

1

你好,這是我會做什麼

var request = $.ajax({ 
    url: "profile.php", 
    type: "POST", 
    data: $('#form').serialize() 
}); 

request.done(function(msg) { 
    $('#form').hide(); 
}); 

request.fail(function(jqXHR, textStatus) { 
    alert("Form failed"); 
}); 

如果你有一些疑惑與jQuery的Ajax訪問this link

如果你不這樣做了解jqXHR是什麼,我建議你訪問此鏈接http://www.jquery4u.com/javascript/jqxhr-object/

執行上點擊


$('#form').submit(function(){ 

var request = $.ajax({ 
    url: "profile.php", 
    type: "POST", 
    data: $('#form').serialize() 

}); 

request.done(function(msg) { 
    $('#form').hide(); 
}); 

request.fail(function(jqXHR, textStatus) { 
    alert("Form failed"); 
}); 
}); 
+0

它顯示1秒鐘並立即隱藏表格。我將$('#formId')更改爲$('#form'),因爲這是我的表單ID – user2706335

+0

當然,我使用#formId作爲示例;)。如果它幫助你,請驗證答案=) – manuvendev

+0

@ user2706335我的代碼自動執行。如果你想在點擊時做到這一點,你應該把它附加到一個函數。看看編輯後的版本 – manuvendev