2016-06-15 70 views
0

我創作的形式與多個表單field.I擁有了表單字段的姓名,手機,電子郵件和無推薦人。根據選擇的選項(無推薦人)....如何添加和刪除基於選擇多個表單域在PHP

在這裏,我創建參考,並賺取學生的錄取過程形式....當用戶選擇沒有引用作爲2我需要顯示的參考信息領域2倍,如果再次改變1手段展示場一次....選擇否的引薦我場顯示下面的字段名稱,電子郵件,手機,市場後......

$(document).ready(function() { 
 
    toggleFields(); 
 
    $("#select_btn").change(function() { 
 
    toggleFields(); 
 
    }); 
 

 
}); 
 
//this toggles the visibility of our parent permission fields depending on the current selected value of the underAge field 
 
function toggleFields() { 
 
    if ($("#select_btn").val() <= 5 && $("#select_btn").val() != 0) 
 
    $("#parentPermission").show(); 
 
    else 
 
    $("#parentPermission").hide(); 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<form method="POST"> 
 
    <p>Name: 
 
    <input type="text" name="player_name" /> 
 
    </p> 
 
    <p>Mobile: 
 
    <input type="text" name="mobile" /> 
 
    </p> 
 
    <p>Email: 
 
    <input type="text" name="player_email" /> 
 
    </p> 
 
    <p>No of Referrer: 
 
    <select id="select_btn" name="age"> 
 
     <option value="0">--Select--</option> 
 
     <option value="1">One</option> 
 
     <option value="2">Two</option> 
 
     <option value="3">Three</option> 
 
     <option value="4">Four</option> 
 
     <option value="5">Five</option> 
 
    </select> 
 

 
    <div id="parentPermission"> 
 
     <p>Name: 
 
     <input type="text" name="reference_name" /> 
 
     </p> 
 
     <p>Mobile: 
 
     <input type="text" name="reference_mobile" /> 
 
     </p> 
 
     <p>Email: 
 
     <input type="text" name="reference_email" /> 
 
     </p> 
 
     <p>City: 
 
     <select id="city" name="City"> 
 
      <option value="0">--Select City--</option> 
 
      <option value="Mumbai">Mumbai</option> 
 
      <option value="Chennai">Chennai</option> 
 
      <option value="Delhi">Delhi</option> 
 
      <option value="Jammu">Jammu</option> 
 
      <option value="Ooty">Ooty</option> 
 
     </select> 
 
     </p> 
 
     <p>Course: 
 
     <select id="course" name="Course"> 
 
      <option value="B.com">B.com</option> 
 
      <option value="B.A">B.A</option> 
 
      <option value="MBA">MBA</option> 
 
      <option value="B.Sc">B.Sc</option> 
 
      <option value="BCA">BCA</option> 
 
     </select> 
 
     </p> 
 
     <p>You must have parental permission before you can play.</p> 
 
    </div> 
 
    <p align="center"> 
 
     <input type="submit" value="Join!" /> 
 
    </p> 
 
</form>

現在它是表單域....但不會動態顯示基於選擇的表單域...例如,如果我選擇No的Referrer選項是2然後需要顯示錶單域2次...更改它3意味着顯示3次,更改爲1表示僅顯示一次...如何根據顯示和隱藏表單字段選擇???

回答

1

您需要使用$('div').clone().html()。看到下面的工作解決方案,它在html中有一些變化。

$(document).ready(function() { 
 
    $('#hidden-div').hide(); 
 
    $("#select_btn").change(function() { 
 
    toggleFields(); 
 
    }); 
 

 
}); 
 

 
function toggleFields() { 
 
    var selectVal = $("#select_btn").val(); 
 
    if (selectVal <= 5) { 
 
    $hiddenHtml = $('#hidden-div').clone().html(); 
 
    $("#parentPermission").html(''); 
 
    for (var i = 0; i < selectVal; i++) { 
 
     $("#parentPermission").append($hiddenHtml); 
 
    } 
 
    } 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<form method="POST"> 
 
    <p>Name: 
 
    <input type="text" name="player_name" /> 
 
    </p> 
 
    <p>Mobile: 
 
    <input type="text" name="mobile" /> 
 
    </p> 
 
    <p>Email: 
 
    <input type="text" name="player_email" /> 
 
    </p> 
 
    <p>No of Referrer: 
 
    <select id="select_btn" name="age"> 
 
     <option value="0">--Select--</option> 
 
     <option value="1">One</option> 
 
     <option value="2">Two</option> 
 
     <option value="3">Three</option> 
 
     <option value="4">Four</option> 
 
     <option value="5">Five</option> 
 
    </select> 
 
    <div id="hidden-div"> 
 
     <p>Name: 
 
     <input type="text" name="reference_name" /> 
 
     </p> 
 
     <p>Mobile: 
 
     <input type="text" name="reference_mobile" /> 
 
     </p> 
 
     <p>Email: 
 
     <input type="text" name="reference_email" /> 
 
     </p> 
 
     <p>City: 
 
     <select id="city" name="City"> 
 
      <option value="0">--Select City--</option> 
 
      <option value="Mumbai">Mumbai</option> 
 
      <option value="Chennai">Chennai</option> 
 
      <option value="Delhi">Delhi</option> 
 
      <option value="Jammu">Jammu</option> 
 
      <option value="Ooty">Ooty</option> 
 
     </select> 
 
     </p> 
 
     <p>Course: 
 
     <select id="course" name="Course"> 
 
      <option value="B.com">B.com</option> 
 
      <option value="B.A">B.A</option> 
 
      <option value="MBA">MBA</option> 
 
      <option value="B.Sc">B.Sc</option> 
 
      <option value="BCA">BCA</option> 
 
     </select> 
 
     </p> 
 
     <p>You must have parental permission before you can play.</p> 
 
    </div> 
 
    <div id="parentPermission"> 
 

 
    </div> 
 
    <p align="center"> 
 
     <input type="submit" value="Join!" /> 
 
    </p> 
 
</form>

+0

太謝謝你了..... –

+0

的Prs嗨,當我打印的崗位價值....我不打印所有後期價值...僅限最後價值...如何打印所有價值。例如。引薦2現在意味着它顯示最後一個值...我需要兩個引用值....? –

+0

@SakthiS它會更大的上下文。你應該發佈一個關於它的問題。將嘗試回答。 –

0

這可以通過.clone來實現()和編輯IDS /克隆的對象的名稱。或者:你的#select_btn已經有數字值,用它們在foreach中直接修改html()輸出。

+0

如何通過在foreach循環中選擇值 –

+0

最後... '索引= 0; (var index = 0; index <$('#select_btn')。val(); index ++){ //克隆我或用var索引創建它們 $('。dummy')。html('

「); //並繼續 }' – PCo

+0

不工作...我使用DIV的ID在克隆功能 –

-1

$(document).ready(function() { 
 
    $('#hidden-div').hide(); 
 
    $("#select_btn").change(function() { 
 
    toggleFields(); 
 
    }); 
 

 
}); 
 

 
function toggleFields() { 
 
    var selectVal = $("#select_btn").val(); 
 
    if (selectVal <= 5) { 
 
    $hiddenHtml = $('#hidden-div').clone().html(); 
 
    $("#parentPermission").html(''); 
 
    for (var i = 0; i < selectVal; i++) { 
 
     $("#parentPermission").append($hiddenHtml); 
 
    } 
 
    } 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<form method="POST"> 
 
    <p>Name: 
 
    <input type="text" name="player_name" /> 
 
    </p> 
 
    <p>Mobile: 
 
    <input type="text" name="mobile" /> 
 
    </p> 
 
    <p>Email: 
 
    <input type="text" name="player_email" /> 
 
    </p> 
 
    <p>No of Referrer: 
 
    <select id="select_btn" name="age"> 
 
     <option value="0">--Select--</option> 
 
     <option value="1">One</option> 
 
     <option value="2">Two</option> 
 
     <option value="3">Three</option> 
 
     <option value="4">Four</option> 
 
     <option value="5">Five</option> 
 
    </select> 
 
    <div id="hidden-div"> 
 
     <p>Name: 
 
     <input type="text" name="reference_name" /> 
 
     </p> 
 
     <p>Mobile: 
 
     <input type="text" name="reference_mobile" /> 
 
     </p> 
 
     <p>Email: 
 
     <input type="text" name="reference_email" /> 
 
     </p> 
 
     <p>City: 
 
     <select id="city" name="City"> 
 
      <option value="0">--Select City--</option> 
 
      <option value="Mumbai">Mumbai</option> 
 
      <option value="Chennai">Chennai</option> 
 
      <option value="Delhi">Delhi</option> 
 
      <option value="Jammu">Jammu</option> 
 
      <option value="Ooty">Ooty</option> 
 
     </select> 
 
     </p> 
 
     <p>Course: 
 
     <select id="course" name="Course"> 
 
      <option value="B.com">B.com</option> 
 
      <option value="B.A">B.A</option> 
 
      <option value="MBA">MBA</option> 
 
      <option value="B.Sc">B.Sc</option> 
 
      <option value="BCA">BCA</option> 
 
     </select> 
 
     </p> 
 
     <p>You must have parental permission before you can play.</p> 
 
    </div> 
 
    <div id="parentPermission"> 
 

 
    </div> 
 
    <p align="center"> 
 
     <input type="submit" value="Join!" /> 
 
    </p> 
 
</form>

+0

Downvote:沒有解釋的代碼牆並不是一個好的答案。 – tripleee

相關問題