Народ, подскажите со скриптом! Есть форма, 5 текстовых строк. Нужно сделать так, чтобы пользователь заполнял их не обязательно все, главное чтобы последоватеьно. Т.е. вначале открыто только первое поле, юзер вписывает символы и открывается второе поле, вписывает во второе поле - открывается 3-е... т.д.
Если число полей фиксированое, то можно прятать с помощью стилей Код (Text): <div id="d1"><input type="text"></div> <div id="d2" style="display: none"><input type="text"></div> <div id="d3" style="display: none"><input type="text"></div> <div id="d4" style="display: none"><input type="text"></div> <div id="d5" style="display: none"><input type="text"></div> <input type="button" value="add" onclick="if (i<=5){document.getElementById('d'+i).style.display=''; i++;}"> <script> i=2; </script>
вотъ Код (Text): <html> <head> <title>1111</title> <script language="javascript"> ch=2; function show(id){ id=id+1; if (id==ch){ document.getElementById('tr'+ch).className='style1'; ch++; } } function sf(){ if (ch<6){ document.getElementById('t'+ch).focus(); } } </script> <style> .style1{ } .style2{ display:none; } </style> </head> <body> <table border="1"> <tr><td><input type="text" name="text1" id="t1" value="" onBlur="show(1)" /></td></tr> <tr class="style2" id="tr2"><td><input type="text" name="text2" id="t2" value="" onBlur="show(2)" /></td></tr> <tr class="style2" id="tr3"><td><input type="text" name="text3" id="t3" value="" onBlur="show(3)" /></td></tr> <tr class="style2" id="tr4"><td><input type="text" name="text4" id="t4" value="" onBlur="show(4)" /></td></tr> <tr class="style2" id="tr5"><td><input type="text" name="text5" id="t5" value="" /></td></tr> <tr><td><input type="button" value="пАшел" onFocus="sf();"/></td></tr> </table> </body> </html>
Спасибо огромное! Я немного переделал: Код (Text): <div id="d1"><input type="text" onclick="if (i<=5){document.getElementById('d'+i).style.display=''; i++;}"></div> <div id="d2" style="display: none"><input type="text" onclick="if (i<=5){document.getElementById('d'+i).style.display=''; i++;}"></div> <div id="d3" style="display: none"><input type="text" onclick="if (i<=5){document.getElementById('d'+i).style.display=''; i++;}"></div> <div id="d4" style="display: none"><input type="text" onclick="if (i<=5){document.getElementById('d'+i).style.display=''; i++;}"></div> <div id="d5" style="display: none"><input type="text" onclick="if (i<=5){document.getElementById('d'+i).style.display=''; i++;}"></div> <script> i=2; </script> А можно сделать как-то чтобы поля ниже не появлялись, а просто появлялась возможность вписывать в следующее поле текст?. (поля сразу все видны)
Так? Код (Text): <input type="text" id="t" disabled> <input type="button" onClick="document.getElementById('t').disabled=false;" value="Enable">
Код можно немного упростить Код (Text): <div id="d1"><input type="text" onclick="document.getElementById('d2').style.display='';"></div> <div id="d2" style="display: none"><input type="text" onclick="document.getElementById('d3').style.display='';"></div> <div id="d3" style="display: none"><input type="text" onclick="document.getElementById('d4').style.display='';"></div> <div id="d4" style="display: none"><input type="text" onclick="document.getElementById('d5').style.display='';"></div> <div id="d5" style="display: none"><input type="text"></div>
Всем огромное спасибо! Сделал, что хотел: Код (Text): <input type="text" id="t1" onClick="document.getElementById('t2').disabled=false;"> <br><input type="text" id="t2" disabled onClick="document.getElementById('t3').disabled=false;"> <br><input type="text" id="t3" disabled onClick="document.getElementById('t4').disabled=false;"> <br><input type="text" id="t4" disabled onClick="document.getElementById('t5').disabled=false;"> <br><input type="text" id="t5" disabled>