|
JavaScript - Dynamic Checkbox Array Problem
Hello,
I've a checkbox validation script to check for at least one ckeck. Code: <script type="text/javascript">
function chkChecks(){
isChecked=false
alert(document.forms["form1"]["checked[]"].length);
for(var i=0;i<document.forms["form1"]["checked[]"].length;i++){
if(document.forms["form1"]["checked[]"][i].checked){
isChecked=true
}
}
if(isChecked){
document.forms["form1"].submit()
}
else{
alert('Please select a checkbox')
}
}
</script>
for the form Code: <form name="form1" action="test.php"> <input type="checkbox" name="checked[]" value="1"> <input type="checkbox" name="checked[]" value="2"> <input type="checkbox" name="checked[]" value="3"> <input class="button_140" type="button" value="Check" onclick="chkChecks()"> </form> It works well for more than one checkboxes, but these are generated dynamically by PHP and if there is only one checkbox, document.forms["form1"]["checked[]"].length returns 'undefined'. Can I modify this to work in all cases? thanks, art. Similar TutorialsHi thier, I am using PHP to generate a page with a list of checkbox's on it. Then I am using JavaScript to validate that the user has selected at lest 1 of the given box's before I do a post back. But I cannot get my Javascript to see my CheckBox Array. Any help you can offer would be very useful thank you all in advance. Here is my PHP code used to build to Checkbox list. Code: while ($row = mysql_fetch_array($data, MYSQL_ASSOC))
{
if(is_null($row['Team_Number']))
{
$str1 = sprintf('<input type="checkbox" name=\'People\' value="%s">',$row['Member_ID']);
}
else if($row['Team_Number'] == $_REQUEST['T'])
{
str1 = sprintf('<input type="checkbox" name=\'People\' value="%s" checked>',$row['Member_ID']);
}
else
{
$str1 = sprintf('<input type="checkbox" name=\'People\' value="%s">',$row['Member_ID']);
}
$str = sprintf('%s,%s (%s)',$row['First'],$row['Last'],$row['Nick_Name']);
echo('<tr><td width ="10%" align="center">');
echo($str1);
echo('</td><td width="90%" align="Left">');
echo($str);
echo('</td >');
echo('</tr></td>');
}
And here is my Javascript, I've added the whole function incase it's not clear just from a code segment. Code: function TeamSetup()
{
var required = document.form1.BowlersPerTeam.value;
var total = document.form1.People.length;
var Tm = document.form1.TeamName.value;
var cnt = 0;
var peopleIDs = "";
var test = document.getElementsByName('People');
if(isArray(document.form1.People))
{
for(var i=0; i < total; i++)
{
if(document.form1.People[i].checked)
{
if(peopleIDs.length > 0)
{
peopleIDs = peopleIDs +",";
}
peopleIDs = peopleIDs + document.form1.People[i].value.toString();
cnt++;
}
}
}
else
{
if(document.form1.People.checked)
{
cnt=1;
peopleIDs = peopleIDs + document.form1.People.value.toString();
}
}
if(Tm.length > 0)
{
if(cnt == required || cnt > 0)
{
//Hand off to next step for completeing Processing.
var myForm = document.createElement("form");
myForm.action=window.location;
myForm.method="Post";
myForm.appendChild(createformInput("Process","PP"));
myForm.appendChild(createformInput("people",peopleIDs));
myForm.appendChild(createformInput("Team",GetQueryString("T")));
myForm.appendChild(createformInput("League",GetQueryString("L")));
myForm.appendChild(createformInput("TeamName",Tm));
document.body.appendChild(myForm);
myForm.submit();
}
else
{
alert('You need to Select at least 1 player');
}
}
else
{
alert('You need to enter the team name!');
}
}
Hello I am trying to find a way to use the check all javascript code to select all my checkboxes within a while...loop. Codes goes as follows: within the header on the top of page 1: <SCRIPT LANGUAGE="JavaScript"> function CheckAll(chk) { for (i = 0; i < chk.length; i++) chk[i].checked = true ; } function UnCheckAll(chk) { for (i = 0; i < chk.length; i++) chk[i].checked = false ; } </script> The code that displays the checkboxes, which is a page included onto page 1: echo "<a class='comp' onclick='singleHideandShow({$row['pr_id']})' style='cursorointer'>{$row['propname']}</a><p>"; $propqry = mysql_query("SELECT * FROM users WHERE propid={$row['pr_id']}"); //using the hide and show id number, once clicked it will display the below contents echo "<div id={$row['pr_id']} style='display:none;'>"; while($propf = mysql_fetch_assoc($propqry)) { if($propf['uactive'] == "yes") { $pactive = "active"; } else { $pactive = "deactivated"; } //displays the information from the DB with a checkbox echo "<form name='myform' id='formmsg' method='post' action='profile.php?paction=edit&find=none' >"; echo " <input type='checkbox' name='check_list' value='{$propf['us_id']}'> <a href='profile.php?paction=edit&pid={$propf['us_id']}' /><img src='../images/secure/edit.png' name='Edit' border='0' /></a> <a href='profile.php?paction=delete&pid={$propf['us_id']}' /><img src='../images/secure/delete.png' name='Delete' border='0' /></a><label class='cuser'> {$propf['fname']} {$propf['lname']}, ({$propf['uname']}), {$pactive}</label><br>"; } echo "</form>"; echo '<p><input type="button" name="Check_All" value="Check All" onClick="CheckAll(document.myform.check_list)"> <input type="button" name="Un_CheckAll" value="Uncheck All" onClick="UnCheckAll(document.myform.check_list)"> <p>'; echo "</div>"; I receive the following error message when I click on the Check All button. Message: 'length' is null or not an object Line: 15 Char: 13 Code: 0 URI: http://www.domainname.com/profile.ph...edit&find=none Can anyone help me figure this out? Hi all, I have a form where I want a single checkbox to toggle the selected/unselected status based on the status of that master checkbox. I have a working script that accomplishes this, but I'm having a problem now that I'm submitting the checkbox as an array. Here is the JS : Code: function checkAll()
{
if(document.resultForm.master.checked== true)
{
for(var i=0; i < document.resultForm.choices.length; i++)
{
document.resultForm.choices[i].checked=true;
}
}
else
{
for(var i=0; i < document.resultForm.choices.length; i++)
{
document.resultForm.choices[i].checked=false;
}
}
}
Here is the form that it currently works with : Code: <input type="checkbox" name="master"> <input type="checkbox" name="choices" value="choice 1"> <input type="checkbox" name="choices" value="choice 2"> <input type="checkbox" name="choices" value="choice 3"> <input type="checkbox" name="choices" value="choice 4"> And this is the form that I want it to work with instead : Code: <input type="checkbox" name="master"> <input type="checkbox" name="choices[]" value="choice 1"> <input type="checkbox" name="choices[]" value="choice 2"> <input type="checkbox" name="choices[]" value="choice 3"> <input type="checkbox" name="choices[]" value="choice 4"> Any help would be greatly appreciated! Guys, For some reason my script only works when I have at lease two checkboxes. To simulate the problem just run it once with two html input checkbox elements -> check one checkbox and press submit -> it works -> Now remove one input checkbox field and check the remaining checkbox & submit -> Bamm doesn't work... What am I doing wrong ? Code: <html>
<head>
<script>
function Check(chk)
{
for (i=0; i < chk.length; i++) chk[i].checked=document.ListActionForm.Check_ctr.checked ;
}
function desubmit()
{
if(get_args()==false) {alert("nothing_selected");return false;}
if(labelling(true)) return false;
}
function labelling(s) {return true;}
function get_args()
{
s=chkboxa2str(document.ListActionForm['listaction[]']);
if(s)alert(s);
if(s.length<8)return false;
else return s;
}
function chkboxa2str(chkbox_a) {
var list = "";
for(var i = 0; i < chkbox_a.length; i++){ if(chkbox_a[i].checked) { list += chkbox_a[i].value + " "; } }
return list;
}
</script>
</head>
<body>
<form action="?h=1296078874" method="post" name="ListActionForm" onsubmit="return desubmit()">
<input type='checkbox' name='listaction[]' value='2010102909103530'> Testbox 1<br>
<input type='checkbox' name='listaction[]' value='2010102909103532'> Testbox 2<br>
<input type="Submit" name="Submit" value="Versturen" >
</form>
</body>
</html>
Hi all, I am a relatively new to javacript and need some help. I have several arrays already defined: array_1 array_2 array_3 etc. I also have a few divs with ids and classes: <div id="1" class="sample"></div> <div id="2" class="sample"></div> <div id="3" class="sample"></div> etc. I am trying to use the class (sample) to run a function: (1) first I get the ID: current_id = $(this).attr("id"); (2) based on the id I want to display the array: alert('array_'+current_id); The problem is I get an alert box with the array name ("array_1") and not the CONTENT of the array. How do i solve this? Thanks!! Hey all! So there I was newly hired and tasked with pouring through someone else's code to see what could be modified and brought up to date. After successfully finding the errors and correcting them and fulfilling the tasks my new supervisor assigned me, he slaps me on the back and says, "Well done! Now make it dynamic!" By which he meant the chapter buttons I spent hours creating from the existing code. Here's what he wants: the old code has an array, we'll call it someArray, that is assigned its values by the instructional developer as html pages are added to the course. So for example the code might look like this, Code: var someArray = new Array(4);
someArray[0] = "video1/video1.html";
someArray[1] = "video2/video2.html";
someArray[2] = "video3/video3.html";
Now, each page has an associated chapter button. So video1/video1.html would have ch1Btn, video2/video2.html would have ch2Btn and so forth. Each button in turn calls a specific function which does only one thing - sets the currentPage variable to page associated with that button/array contents. For example, I have created the following functions to call each page: Code:
function doCh1(){currentPage = 0; goToPage();}
function doCh2(){currentPage = 1; goToPage();}
function doCh3(){currentPage = 2; goToPage();}
I should mention that all this is being done from within an html wrapper that calls each page into an iframe. The currentPage variable is assigned the url of one of the elements from the pageArray. My supervisor wants to be able to manually add pages to the pageArray and have the javascript code generate the associated buttons and function calls so when the learner clicks on one of the dynamically created buttons, s/he is taken to the correct page. Currently I'm using static images with the onclick calling the correct function to set my currentPage value and send the learner on his/her merry way. Is there a way to do all of this dynamically? If so, can you help me get my head around this by providing some examples? Sorry for the long post. Thank you, M I apologize in advance for my ignorance. I'm relatively new to javascript. I am trying to dynamically create a page based on information in a .txt. So far the code works. But only for a spacific line in the .txt. I would like it to create numbered divs and fill with approprate info from .txt for each line in .txt. Does that make sense? Any help you can provide would be greatly appriciated. Oh and I'm not worried about cross browser function this is for intra-net and all clients use Mozilla. P.S.: I will paste full code if necessary and it is explained exactly how. Is it: [ "my code goes here" ] or [code] my code goes here [code] Hi, I am stumped. I have been trying unsuccesfully for three days to figure something out, and it has brought me here. I am a noob javascripter, so please bear with me. I have created a page with an input button that refers to a function: Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)">
<meta name="created" content="Thu, 26 May 2011 03:39:57 GMT">
<meta name="description" content="">
<meta name="keywords" content="">
<title>Meltmedia Web Intern Test</title>
<style type="text/css">
<!--
body {
color:#000000;
background-color:#FFFFFF;
}
a { color:#0000FF; }
a:visited { color:#800080; }
a:hover { color:#008000; }
a:active { color:#FF0000; }
-->
</style>
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<LINK REL=StyleSheet HREF="what.css" TYPE="text/css" MEDIA=screen>
<script type="text/javascript">
//function ChangeBackground()
<!--{
// document.getElementById("column2").style.backgroundColor="#ffbdaa";
// document.getElementById("row1").style.backgroundColor="#ffbdaa";
// document.getElementById("row3").style.backgroundColor="#ffbdaa";
// document.getElementById("row4").style.backgroundColor="#ffbdaa";
// document.getElementById("mainbody").style.backgroundColor="#f7d7cd";
// } -->
function ChangeBackground() {
var colors = document.getElementsByClassName("changeme");
//alert(colors.length);
for (var i = 0; i < colors.length; i++) {
if (colors[i].className="changeme") {
colors[i].style.backgroundColor="ffbdaa";
}
}
}
//if (document.getElementsByClassName('changeme')[5].style.backgroundColor="#e8e8e00") {
// document.getElementsByClassName('changeme')[5].style.backgroundColor="#ffbdaa";
// }
//div1 original color is #e8e8e8
//div2 original color is #e2ebe4
//tablerows original color is #ccddd0
</script>
</head>
<body>
<div id="mainbody" class="changeme">
<img id="header" src="osx_header.jpg">
<div id="inset">
<div id="column1" class="column1">
<p class="text0">Lorem Ipsum Dolor Sit Amet</p>
<p class="text1">Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Aenean sed est et mi varius
euismod sed nec neque. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Maecenas ultricies pulvinar lacinia.
<a href="http://www.google.com/" rel="nofollow" target="_blank" style="color:blue">This is a link.</a>
</p>
<p class="text1" style="font-size:16px;">Lorem Ipsum Dolor Sit Amet</p>
<p class="text1">Sed a felis et eros gravida dignissim.
Quisque lobortis magna non purus vulputate
pellentesque. Mauris sit amet felis felis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nullam molestie lacinia arcu vitae pretium.<sup>2.3</sup>
</p>
<div id="unordered_list">
<ul id="blue_bullets">
<li>Vestibulum ante erat, laoreet quis pellentesque quis,
tincidunt fermentum turpis.
<li>Maecenas in mollis massa.
<ul>
<li>Ut tempus tincidunt molestie. Phasellus eget nulla
id erat scelerisque porttitor vel pharetra nibh.
<li>Class aptent taciti sociosqu ad litora torquent per
conubia nostra, per inceptos himenaeos.
</ul>
<li>Aenean ligula massa, tempor sed pulvinar sit amet, imperdiet a nisi.
</ul>
</div><!--end of ordered list-->
<div id="button">
<!-- <img src="btn-click-here.gif"> -->
<input type="button" onClick="ChangeBackground()" value=" ">
</div><!--end of button-->
<table id="table1">
<tr id="firstrow">
<th id="row1" class="changeme"></th>
<th id="row2" class="changeme"><strong>header1</strong></th>
<th id="row3" class="changeme"><strong>header2</strong></th>
<th id="row4" class="changeme"><strong>header3</strong></th>
</tr>
<tr>
<td>one</td>
<td>1234</td>
<td>bears</td>
<td>abcd</td>
</tr>
<tr>
<td>two</td>
<td>5678</td>
<td>beets</td>
<td>efgh</td>
</tr>
<tr>
<td>three</td>
<td>9101</td>
<td>battlestar</td>
<td>ijkl</td>
</tr>
<tr>
<td>four</td>
<td>1121</td>
<td>galactica</td>
<td>mnop</td>
</tr>
</table>
<!--end of table-->
<ol class="ordered">
<li>Integer molestie sodales risus eu commodo. <i>Duis eget est
dapibus neque congue</i> accumsan id eu nibh.
</li>
<li>Proin malesuada hendrerit lobortis. Integer et erat leo.
Praesent nec justo nulla. <i>Sed in dolor id neque faucibus
consequat.</i>
</li>
<li>Vestibulum sit amet justo id <strong>risus tempus ornare.</strong> Etiam
faucibus urna volutpat lorem dictum imperdiet.
</li>
</ol>
</div> <!--end of column1-->
<div id="column2" class="changeme">
<p class="text00"><strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</strong></p>
<p class="text2">Aenean sed est et mi varius euismod sed nec neque.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas
ultricies pulvinar lacinia. Sed a felis et eros gravida dignissim.
Quisque lobortis magna non purus vulputate pellentesque.</p>
<p class="text2">Mauris sit amet felis felis. Lorem ipsum dolor
sit amet, consectetur adipiscing elit. Nullam molestie lacinia arcu
vitae pretium. Vestibulum ante erat, laoreet quis pellentesque quis,
tincidunt fermentum turpis. Maecenas in mollis massa. Ut tempus
tincidunt molestie.</p>
<p class="text2">Phasellus eget nulla id erat scelerisque porttitor
vel pharetra nibh. Class aptent taciti sociosqu ad litora torquent
per conubia nostra, per inceptos himenaeos. Aenean ligula massa, tempor
sed pulvinar sit amet, imperdiet a nisi. Nulla ullamcorper posuere dolor,
ac rutrum velit sollicitudin ac. Ut felis leo, ultricies a bibendum ac,
luctus semper massa.</p>
</div> <!--end of column2-->
</div> <!--end of inset-->
</div>
</body>
</html>
i would like to change certain style elements of the array each time the button is clicked. I have 5 color sets i would like use for the page, so i would like the button to trigger the color change in a loop, ie when the last color group is reached, the next click returns to the original color set and it continues again. This is a demo page, not for actually publication. I am trying to teach myself javascript and this is an idea that came to me. The things i want to change are the background color of two div's and the top row of a table. My style sheet is seperate, and I will also do the same for the javascript once I can get it to work properly. Thank you in advance for any help. Hi all, I create textboxes dynamically by the following code function addElement() { var contentID = document.getElementById('content'); var newTBDiv = document.createElement('div'); newTBDiv.setAttribute('id','strText'+intTextBox); divname='strText'+intTextBox; newTBDiv.innerHTML = "Text "+intTextBox+": <input type='text' id='divid' +intTextBox name='txtbx[]'/>"; intTextBox = intTextBox + 1; contentID.appendChild(newTBDiv); } It works fine,but i want to get the values and validate it so i use the following code.. var idval=new Array(); for(var i=0;i<intTextBox;i++) { idval[i]=document.getElementById('divid').value; alert(idval[i]); } but it didn`t work out,Any suggestions really helpful. Thankyou. From the these form fields I want to be able to create an array in Javascript containing the same 'codes' that feature between the option tags (not the value="X") Code: <select name="options-1" id="options-1"> <option value="">Select an option</option> <option value="1">KA-WH</option> <option value="2">KA-BK</option> <option value="3">KA-GN</option> </select> <select name="options-2" id="options-2"> <option value="">Select an option</option> <option value="4">BADGE-1</option> <option value="5">BADGE-2</option> <option value="6">BADGE-3</option> </select> <select name="options-3" id="options-3"> <option value="">Select an option</option> <option value="7">E-WH</option> <option value="8">E-GD</option> <option value="9">E-BK</option> </select> for example, from the above, I want a JS array for 'option-1' that contains KA-WH, KA-BK and KA-GN; plus an array for 'option-2' that contains BADGE-1, BADGE-2 and BADGE-3. The above form fields will be created dynamically, may contain more or fewer items. I then want to use the JS arrays to pull in images of which filenames match the 'code' in the array. Hi, I want to check all checkboxes using one main checkbox. Then, the checkboxes will be disabled. But then, when the user unchecks the main checkbox, it must revert all the checkboxes to be enabled. How do I do so? Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>TSPL Admin</title>
<script type='text/javascript'>
function checkUncheckAll(checkAllState, chkbxGroup)
{
// Check that the group has more than one element
if(chkbxGroup.length > 0)
{
// Loop through the array
for (i = 0; i < chkbxGroup.length; i++)
{
chkbxGroup[i].checked = checkAllState.checked;
}
document.getElementById("Checkbox7").disabled = true;
document.getElementById("Checkbox8").disabled = true;
document.getElementById("Checkbox9").disabled = true;
document.getElementById("Checkbox10").disabled = true;
document.getElementById("Checkbox11").disabled = true;
document.getElementById("Checkbox12").disabled = true;
document.getElementById("Checkbox13").disabled = true;
document.getElementById("Checkbox14").disabled = true;
}
else
{
// Single element so not an array
chkbxGroup.checked = checkAllState.checked;
}
}
</script>
<style type ="text/css">
.style42
{
border-style: solid;
border-width: 1px;
margin-left: 10px;
width: 135px;
border-color: #8181F7;
text-align: left;
float:left;
}
.style45
{
float: left;
}
</style>
</head>
<body>
<form id="form1" method="post" action="default.aspx">
<br />
<div class="style19">
<tr>
<td align="left">
<div class="style45">
<input id="Checkbox6" name="checkall" onclick="checkUncheckAll(this, grp1);" type="checkbox" />All
</div>
<div class="style42">
<input name="grp1" id="Checkbox7" type="checkbox" />Account Admin<br />
<input name="grp1" id="Checkbox8" type="checkbox" />Network Admin<br />
<input name="grp1" id="Checkbox9" type="checkbox" />Organization Admin<br />
<input name="grp1" id="Checkbox10" type="checkbox" />Super Admin<br />
</div>
<div class="style42">
<input name="grp1" id="Checkbox11" type="checkbox" />Schema Admin<br />
<input name="grp1" id="Checkbox12" type="checkbox" />Troubleshooting Admin<br />
<input name="grp1" id="Checkbox13" type="checkbox" />Helpdesk Admin<br />
<input name="grp1" id="Checkbox14" type="checkbox" />Online Admin<br />
</div>
</td>
</tr>
</div>
</form>
</body>
</html>
hi all , I'm new to js , here is my problem : i want to make a button to toggle a checkbox , here is my code ,when i replace box.checked with boxVal it doesn't work! Code: <!DOCTYPE html>
<html>
<head>
</head>
<body>
<p><button>Toggle checkbox</button></p>
<input type="checkbox" id="box"/>
<script>
var button = document.getElementsByTagName("button")[0];
var box = document.getElementById("box");
var boxVal = document.getElementById("box").checked;
button.onclick = function(){
if (box.checked==false){ //when i replace box.checked with boxVal it doesn't work!
box.checked=true;
}
else if(box.checked==true){
box.checked=false;
}
}
</script>
</body>
</html>
hi i have 4 check boxes chk1 , chk2,chk3,chk4 also textbox1 , textbox2 textbox3 textbox4 when selecting one chk box (chk1) textbox1=45 textbox44=45 when chk1 checked if textbox2=56 textbox45=56 when chk2 checked plz give me code sample for me plzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz give me a answer hello, can anyone help me with a javascript-php-ajax problem? I have created a table with checkboxes and whenever an ajax function is called to refresh, the checkboxes that were highlighted and checked get reset, here is my javascript for the check function: $(document).ready(function() { $("#checkall").live('click',function(event){ $('input:checkbox:not(#checkall)').attr('checked',this.checked); //To Highlight if ($(this).attr("checked") == true) { //$(this).parents('table:eq(0)').find('tr:not(#chkrow)').css("background-color","#FF3700"); $("#policy").find('tr:not(#chkrow)').css("background-color","#FC9A01"); } else { //$(this).parents('table:eq(0)').find('tr:not(#chkrow)').css("background-color","#fff"); $("#policy").find('tr:not(#chkrow)').css("background-color","#FFF"); $("#policy").find('tr.alt:not(#chkrow)').css("background-color","#EAF2D3"); } }); $('input:checkbox:not(#checkall)').live('click',function(event) { if($("#checkall").attr('checked') == true && this.checked == false) { $("#checkall").attr('checked',false); $(this).closest('tr').css("background-color","#ffffff"); } if(this.checked == true) { $(this).closest('tr').css("background-color","#FC9A01"); CheckSelectAll(); } if(this.checked == false) { $(this).closest('tr').css("background-color","#ffffff"); $(this).closest('tr.alt').css("background-color","#EAF2D3"); } }); function CheckSelectAll() { var flag = true; $('input:checkbox:not(#checkall)').each(function() { if(this.checked == false) flag = false; }); $("#checkall").attr('checked',flag); } }); Hello, Could you pls tell me how to remove created element here by clicking "remove" button. I coulnt write anything I mean I tried something but couldnt manage. //document.getElementById(elementId).removeChild(newdiv); and could you also tell me how to collect datas in "myInputs[]2" text fields. I mean I need to calculate sum of all "myInputs[]2" text s values. Code: <script type="text/javascript">
var newdiv = document.createElement('div');
var count = 1;
var limit = 10;
function add(divName){
if (sayac == limit) {
alert("Message");
}
else {
newdiv.innerHTML = "Halı " + (sayac + 1) + " <br>\n\
<input type='text' name='myInputs[]'>m2\n\
<select id='selBidReceivedIsPM' name='selBidReceivedIsPM'>"
+ "<option value='3'>Mad</option>"
+ "<option value='5'>Is</option></select>\t\<input type='text' name='myInputs[]2'>";
document.getElementById(divName).appendChild(newdiv);
//document.getElementById(elementId).appendChild(slt);
++count;
}
}
function remove(){
}
</script>
<div id="dynamicInput">
Halı 1<br><input type="text" name="myInputs[]">m2
<select id="slt">
<option value="3">Mad</option>
<option value="5">Is</option>
</select>
<input type="text" name="myInputs[]2">
<input type="button" value="Add" onClick="add('dynamicInput');">
<input type="button" value="Remove" onClick="remove()">
</div>
Hi. I'm in JS kindergarten. I have a form with a field that asks for a full year. If the year is greater than 20 years ago, I'd like additional form fields to be revealed. If the year is equal to or less than 20 years ago, it will not reveal the fields. (And it should be based on getFullYear(), so I don't have to update the script every year, yeah?) I figured out how to script onclick functions and some basic .value == functions in order to show/hide just about every type of form field. So I don't need that info. But I'm unsure of how to calculate the value. I'd be interested to see your solutions. No rush. Thanks in advance. Hello there, new to this forum and starting with a quick question. Normaly I can figure things out myself but I'm a bit stuck on this one. I have two scripts. one is for TinyMCE (WYZIWYG editor): Code: tinyMCE.init({
mode : "textareas",
theme : "advanced",
plugins : "pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",
// Theme options - button# indicated the row# only
theme_advanced_buttons1 : "newdocument,save,|,styleprops,del,ins,attribs,|,visualaid,visualchars,template,pagebreak,|,preview,cleanup,code,print,|,|,help,fullscreen",
theme_advanced_buttons2 : "insertlayer,absolute,moveforward,movebackward,|,tablecontrols,|,hr,advhr,,charmapemotions,iespell,media,ltr,rtl,anchor,image,nonbreaking,|,insertdate,inserttime",
theme_advanced_buttons3 : "bold,italic,underline,strikethrough,|,outdent,indent,|,bullist,numlist,|,sub,sup,|,styleselect,formatselect,fontselect,fontsizeselect",
theme_advanced_buttons4 : "undo,redo,|,cut,copy,paste,|,pastetext,pasteword,|,search,replace,|,forecolor,backcolor,|,justifyleft,justifycenter,justifyright,justifyfull,|,blockquote,cite,|,abbr,acronym,|,link,unlink,|,removeformat",
content_css : '/CSS/TinyMCE.css',
theme_advanced_styles : "Test style=header1;",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
theme_advanced_resizing : true,
});
function setup() {
tinyMCE.init({
mode : "textareas",
theme : "advanced",
plugins : "pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",
// Theme options - button# indicated the row# only
theme_advanced_buttons1 : "newdocument,save,|,styleprops,del,ins,attribs,|,visualaid,visualchars,template,pagebreak,|,preview,cleanup,code,print,|,|,help,fullscreen",
theme_advanced_buttons2 : "insertlayer,absolute,moveforward,movebackward,|,tablecontrols,|,hr,advhr,,charmapemotions,iespell,media,ltr,rtl,anchor,image,nonbreaking,|,insertdate,inserttime",
theme_advanced_buttons3 : "bold,italic,underline,strikethrough,|,outdent,indent,|,bullist,numlist,|,sub,sup,|,styleselect,formatselect,fontselect,fontsizeselect",
theme_advanced_buttons4 : "undo,redo,|,cut,copy,paste,|,pastetext,pasteword,|,search,replace,|,forecolor,backcolor,|,justifyleft,justifycenter,justifyright,justifyfull,|,blockquote,cite,|,abbr,acronym,|,link,unlink,|,removeformat",
content_css : '/CSS/TinyMCE.css',
theme_advanced_styles : "Test style=header1;",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
theme_advanced_resizing : true,
});
}
first part loads tinymce when it's there on the page, second part loads it when a button is pushed. second script is for loading filecontent into a div: Code: function load_this(url) {
if (window.XMLHttpRequest) { // Non-IE browsers
req = new XMLHttpRequest();
req.onreadystatechange = targetDiv;
try {
req.open("GET", url, true);
} catch (e) {
alert(e);
}
req.send(null);
} else if (window.ActiveXObject) { // IE
req = new ActiveXObject("Microsoft.XMLHTTP");
if (req) {
req.onreadystatechange = targetDiv;
req.open("GET", url, true);
req.send();
}
}
}
function targetDiv() {
if (req.readyState == 4) { // Complete
if (req.status == 200) { // OK response
document.getElementById("main").innerHTML = req.responseText;
} else {
alert("Problem: " + req.statusText);
}
}
}
now the problem: I have this page with div 'main'. an url loads this script, but after loading the dynamic content into the div, the setup() script isn't working: Code: function load_editor(url) {
load_this(url);
setup();
}
where url=editor.php. The funny thing is: when I click the button to load the content into the div, the textarea (from editor.php) loads, but the javascript function to start tinymce isn't working! This is probably because right after loading the div with 'editor.php' the setup() script doens't recognise the freshly loaded content. However, when I place a link in 'editor.php' which calls javascript:setup(); and click it after loading the content, setup() does work. my question: How can I make it so, that, when I press a link or button to load the editor.php into a div, the setup() script recognises the fresh code and starts the WYSIWYG editor? Do I have to use state ready or something? And ifso, how do I do this? Or is there some other way I can do this? Kind regards and many thanks for your help! Kevin i have a script which i found on the internet. i modify that script according to my needs. what is in that script is there are three form fields with two buttons. one button is "Give me more fields" clicking on this button will give you more fields. and second button is submit so the data goes to server side and will be added to db. the problem is when i click give me more fields it gives me three more fields which is right but when i fill all these fields and click submit button it adds to the db but the data in the first three fields adds in the one row and the other three fields data adds in separate row which is not fine for me. so how can i do this so all the data will be added to only one row. here is js code Code: var counter = 0;
//Start a counter. Yes, at 0
function add_phone() {
counter++;
// I find it easier to start the incrementing of the counter here.
var newFields = document.getElementById('addQualification').cloneNode(true);
newFields.id = '';
newFields.style.display = 'block';
var newField = newFields.childNodes;
for (var i=0;i<newField.length;i++) {
var theName = newField[i].name
if (theName)
newField[i].name = theName + counter;
// This will change the 'name' field by adding an auto incrementing number at the end. This is important.
}
var insertHere = document.getElementById('addQualification');
// Inside the getElementById brackets is the name of the div class you will use.
insertHere.parentNode.insertBefore(newFields,insertHere);
}
here is my form Code: <form name="addAQualification" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post" enctype="multipart/form-data">
<fieldset>
<div id="phone">
Degree:
<input type="text" name="degree_0" value="" /><br>
CGPA/Grade:
<input type="text" name="cgpa_0" value="" /><br>
Institute:
<input type="text" name="institute_0" value="" /><br>
</div>
<div id="addQualification" style="display: none;">
Degree:
<input type="text" name="degree_" value="" /><br>
CGPA/Grade:
<input type="text" name="cgpa_" value="" /><br>
Institute:
<input type="text" name="institute_" value="" /><br>
</div>
<input type="button" id="add_phone()" onclick="add_phone()" value="Give me more fields!" /><br>
<input type="submit" name="submit" value="submit" />
</fieldset>
</form>
here is my php Code: <?php
if(isset($_POST['submit']))
//This checks to make sure submit was clicked
{
echo "You clicked submit!<br>";
echo "Here is your data<br>";
echo "<br>";
if ($_POST['cgpa_0'])
//This checks that the proper field has data
{
$continue = FALSE;
$i = 0;
while ($continue == FALSE)
{
if (isset($_POST['degree_'.$i]))
//This looks for an entry after 0 and increments
{
echo $_POST['degree_'.$i] . " = " . $_POST['cgpa_'.$i] . "<br>";
//Echoing the data
$degree1 = $_POST['degree_'.$i];
$cgpa1 = $_POST['cgpa_'.$i];
$institute1 = $_POST['institute_'.$i];
$db = mysql_connect("localhost");
mysql_select_db("test", $db);
$query = "INSERT INTO cv
(
degree1,
cgpa1,
institute1
)
VALUES
(
'$degree1',
'$cgpa1',
'$institute1'
)";
$result = mysql_query($query);
//The four lines above is the example on how the data would be put into a MySQL database. It's not used here
}
else
{
$continue = TRUE;
}
$i++;
}
}
}
?>
|
|||||||