-1

私はほとんどそこにいて、それを味わうことができますが、この最後の部分を getpost.php に渡すことはできません。基本的に、ユーザーがステップを追加できる動的テキストエリアがあります。彼らが5つのステップを追加した場合、それらのステップをPHP経由でmysqlデータベースに追加する必要があるとしましょう。これを行うために必要なphpがわかりません。どんな助けでも大歓迎です！

これが私のpost.phpで、手順は次のとおりです。

<head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>

<script type="text/javascript">

$(document).ready(function(){

var counter = 2;

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

if(counter>10){
        alert("Only 10 textboxes allow");
        return false;
}   

var newTextBoxDiv = $(document.createElement('div'))
     .attr("id", 'TextBoxDiv' + counter);

newTextBoxDiv.after().html('<p><label>Step #'+ counter + ' : </label><br>' +
      '<textarea rows="10" cols="150" type="text" name="textbox' + counter + 
      '" id="textbox' + counter + '" value="" >');

newTextBoxDiv.appendTo("#TextBoxesGroup");


counter++;
 });

 $("#removeButton").click(function () {
if(counter==1){
      alert("No more steps to remove");
      return false;
   }   

counter--;

    $("#TextBoxDiv" + counter).remove();

 });

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

var msg = '';
for(i=1; i<counter; i++){
  msg += "\n Step #" + i + " : " + $('#textbox' + i).val();
}
      alert(msg);
 });




});
</script>

</head>

<body>
Add new step below:<p>

<form action="getpost.php" method="post">
<div id='TextBoxesGroup'>
<div id="TextBoxDiv1">
    <label>Step #1 : </label><br />
    <textarea rows="10" cols="150" type='textbox' id='textbox1'></textarea>
</div>
</div>
<input type='button' value='Add Step' id='addButton'>
<input type='button' value='Remove Step' id='removeButton'>
<input type='button' value='Get TextBox Value' id='getButtonValue'>
<input type="submit" />
</form>


</body>
4

1 に答える 1

1

jqueryのcloneメソッドを使用して、テキストボックスを動的に作成できます。これを試して：

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js">   </script>
<script>
$(document).ready(function(){
var counterb = 1;
$("#addathletehistory").click(function(){
if(counterb>6){
        alert("Maximum 5 textarea allow");
        return false;
}   
$("#sport_history").clone().attr({"id":"sport_history"+counterb, "name":"sport_history"+counterb}).add("<br/>").appendTo("#stablehistory");
counterb++;
  });
});

このjqueryコードは、[さらに追加]ボタンをクリックして5つのテキスト領域を作成します。カウンターの値を追加すると、新しい各テキスト領域のIDと名前が変更されることに注意してください。お役に立てば幸いです。ハッピーコーディング！

于 2012-08-30T13:11:34.520 に答える