|
JavaScript - Creating Elements With Javascript/php, Need To Get Their Unique Id And Send It Back
(I also posted this on stackoverflow, but haven't had any replies.)
I have a script that sends a POST to a php file, and gets a new integer (primary key). Then the script creates 3 new divs, with that ID included in them as an attribute. Now, I need to be able to grab the ID and give it back to PHP when the user updates it. (It's currently a div, but later it will be an editable form.) I was going to do this by creating a button in the same script that I use to create the divs, bearing the same integer and calling a function. The problem with this concept, is that I have no idea how to create a Unique variable to pass along to the function, so it knows which number to look at. Obviously, if I have only one variable that gets overwritten with each new entry - after all of the rows load, only the last row will have a variable that matches its id. Another option is to find the value of all attributes that bear the name data-integer-question and pass its number/integer to a function, when the user does something like keyup enter. However, I have no idea how to do that. obj.returnIntJson holds the integer that I've been talking about, which changes for each row. rowNumberObj.qarowcontainer is just a reference for the parent div, which doesn't get edited by the user - you can ignore it. The script gives a result like this: <div id="questioncolumn" class="questionColumnCSS" data-integer-question="701"></div> Suggestions on how to proceed? Here's the code for one of the divs, Thanks. PHP Code: qaRowQuestion = document.createElement('div'); qaRowQuestion.setAttribute('id', "questioncolumn"); qaRowQuestion.setAttribute('data-integer-question', obj.returnIntJson); qaRowQuestion.setAttribute('class',"questionColumnCSS"); qaRowQuestionParent = document.getElementById(rowNumberObj.qarowcontainer); qaRowQuestionParent.appendChild(qaRowQuestion); Similar Tutorialshi, My script creates random numbers as shown in ; 2,5,8 1,4,5 8,9,4 5,3,3 1,1,2 2,5,8 5,3,3 ...... ...... but there are many duplications as in row1 and row6(2,5,8.)....row4 and row7 how can we modify the script so that there wont be any smilir lines.. thanks.. here is my script. PHP Code: <script> keywords1 = ["1","4","5","7","2","3"]; keywords2 = ["5", "9", "2", "10","11","6","4"]; keywords3 = ["13", "1", "3", "4", "6","7","8","2"]; var toplam=0; z1=keywords1.length z2=keywords2.length z3=keywords3.length toplam=z1*z2*z3; say=0; zaman=setInterval("yaz()",500); function yaz() { var keyword1 = keywords1[Math.floor(Math.random()*keywords1.length)]; var keyword2 = keywords2[Math.floor(Math.random()*keywords2.length)]; var keyword3 = keywords3[Math.floor(Math.random()*keywords3.length)]; say++; document.getElementById("kutu").innerHTML+=keyword1+".."+keyword2+".."+keyword3; document.getElementById("kutu").innerHTML+="<br>"; document.getElementById("kutu2").value=say; document.getElementById("kutu3").value=toplam; if(say>=toplam) dur(); } function dur() { clearInterval(zaman); } </script> <input type=button value=yazz onclick="yaz()">.. .<input type=button value=dur bakalım onclick="dur()"> ....<input type=text value="" id=kutu2 size=3> ....<input type=text value="" id=kutu3 size=3> <div id="kutu" style="position:absolute;top:5;left:250;background-color:yellow;border-style:solid;border-width:5;border-color:red;"></div> <div id="kutux1" style="position:absolute;top:5;left:350;background-color:yellow;border-style:solid;border-width:5;border-color:red;"></div> </body> </html> I'm a true newbie when it comes to JavaScript. To learn the language, I've set up a project for myself, a sort of board game. As it is, I have a series of divs, each with an image (img tag). The divs ids are "Space1", "Space2", "Space3", etc. I am trying to dynamically create child divs inside the space divs as player markers. Here is the code: Code: <script type="text/javascript">
for(intA=0;intA<=10;intA++){
var NewDiv=document.createElement("div")
NewDiv.setAttribute("id","Space"+intA+"Player1")
NewDiv.style.width="20px";NewDiv.style.height="20px"
NewDiv.style.position="relative"
NewDiv.style.left="10px";NewDiv.style.top="10px"
NewDiv.innerHTML="1"
NewDiv.style.backgroundColor="#333333"
NewDiv.style.border="2px solid black"
NewDiv.style.visibility="visible"
NewDiv.style.zIndex="1000"
document.getElementById("Space"+intA).appendChild(NewDiv)
}
</script>
The assumption is that this code should make a 20x20 gray box with a "1" in it. I've tried playing with the visibility and the z-index, but nothing is showing up. What am I doing wrong here? Forgive me, I come from a ColdFusion background and DOM manipulation is not one of my strongest assets. I am trying to dynamically create (and also delete) a row inside a table, which contains three cells that each have three form elements (a input box, a select drop-down box that is populated by a query to a database, and a textarea). Now all the JavaScript/jQuery examples I've seen for dynamically creating elements are very basic, nothing this complex. Could I get some help?! This is what I'm trying to dynamically create so that the user can add more options but also delete them. Would the jQuery clone() function be a good choice for this? Code: <tr> <td> <input type="text" id="rejectName" /> </td> <td> <select id="divSelectReason"> <option value="" selected="true">Enter Rejection Reason</option> <cfoutput query="queryReasonReturn"> <option>#codeAndReason#</option> </cfoutput> </select> </td> <td> <textarea id="editReason" cols="30"></textarea> </td> </tr> Now when a row is dynamically created I also have to access those values as well, so I would assume using a variable that counts each row created, and appends that iteration to the name of that particular element. Hi I am using back button with javascript:history.back(); on it but the page I want to go back have anchor link smth like: http://example.com/index.php#anchor_link How do I go back ? I've tried javascript.history.go(-1); a I am trying to get the images on this page to revert back to the original photo after hover releases. I am assuming this is a simple fix, but I am no programmer and just did this in dreamweaver. http://www.dataflurry.com/joey/ Hi, I was wondering if there is anyone who could help me! I'm creating a Javascript slideshow, I have 'back' & 'next' functions which work. However, I'm not sure how to create a 'start' and 'stop' function (have to be separate functions), here is my current code below? IS there a genius out there who can help?! ------------------------------------------- <div id="slideshow"> <div class="mainimage"> <img height="300px" src="images/homemainimage.jpg" width="300px" height="300px" name="photoslider"/> <script language="JavaScript1.1"> var photos=new Array() var which=0 photos[0]="images/css3.svg" photos[1]="images/cloudcomputing.png" photos[2]="images/Rss.jpg" photos[3]="images/html5.png" photos[4]="images/jQuery.png" photos[5]="images/firewall.png" function swapImage(){ if (which<photos.length-1){ which++ document.images.photoslider.src=photos[which] } setTimeout("swapImage()",10000); } window.onload=swapImage; function backward(){ if (which>0){ window.status='' which-- document.images.photoslider.src=photos[which] } } function forward(){ if (which<photos.length-1){ which++ document.images.photoslider.src=photos[which] } } </script> <input type="button" value="<<Back" name="B2" onClick="backward()"> <input type="button" value="Next>>" name="B1" onClick="forward()"><br> --------------------------------------------------------- Thanks in advance!! Reply With Quote 01-20-2015, 09:56 PM #2 felgall View Profile View Forum Posts Visit Homepage Master Coder Join Date Sep 2005 Location Sydney, Australia Posts 6,745 Thanks 0 Thanked 666 Times in 655 Posts It would be easier if you used setInterval rather than setTimeout as then you just need to use clearInterval to stop and setInterval to restart. Note also that both setTimeout and setInterval expect a function as their first parameter and not a string (except for IE3) and so the way you have it coded it has to eval() the string to convert it to a function. Also the language attribute on the script tag was replaced by a type attribute about 15 years ago. Also most browsers don't allow JavaScript to access window.status any more for security reasons. Hello, In the following code i'm trying to check if the value of the text field is exist in the array. the problem that the function dose not accept the the value(node.value) from the text field. 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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Text Validation</title>
<script type="text/javascript" language="javascript">
Array.prototype.inArray = function (value)
{
// Returns true if the passed value is found in the
// array. Returns false if it is not.
alert(value);
var i;
for (i=0; i < this.length; i++)
{
if (this[i] == value)
{
return true;
}
}
return false;
};
function cal(xx)
{
var node_list = document.getElementsByTagName('input');
arr = new Array("");
for (var i = 0; i < node_list.length; i++)
{
var node = node_list[i];
///alert(node_list.length);
// alert(node.value);
arr.push(node.value)
}
alert(xx.length);
//var arr= new Array(1,2,3,4,5,6,7,8,9,10);
if(xx.length!=0)
{
if(arr.inArray(xx))
{
alert("Your value is found in the Array");
}
else
{
alert("Your value is not found in the Array");
}
}
}
</script>
</head>
<body>
<form id="text_validation" name="text_validation" action="" method="post">
<table width="600" border="1">
<tr>
<td><label for="abc_text_1" id="abc_text_1_lb">Text 1</label> </td>
<td>:</td>
<td><input type="text" id="abc_text_1" name="abc_text_1" onblur="return cal(this.value);" /></td>
</tr>
<tr>
<td><label for="cde_text_2" id="cde_text_2_lb">Text 2</label> </td>
<td>:</td>
<td><input type="text" id="cde_text_2" name="cde_text_2" value="abc" /></td>
</tr>
<tr>
<td><label for="fgh_text_3" id="fgh_text_3_lb">Text 3</label> </td>
<td>:</td>
<td><input type="text" id="fgh_text_3" name="fgh_text_3" value="abcaaaaa" onblur="return testvalidation(fgh_text_3);" /></td>
</tr>
<tr>
<td><label for="ijk_text_4" id="ijk_text_4_lb">Text 4</label> </td>
<td>:</td>
<td><input type="text" id="ijk_text_4" name="ijk_text_4" onblur="return testvalidation(ijk_text_4);" /></td>
</tr>
<tr>
<td><label for="lmn_text_5" id="lmn_text_5_lb">Text 5</label> </td>
<td>:</td>
<td><input type="text" id="lmn_text_5" name="lmn_text_5" onblur="return testvalidation(lmn_text_5);" /></td>
</tr>
<tr>
<td><label for="opq_text_6" id="opq_text_6_lb">Text 6</label> </td>
<td>:</td>
<td><input type="text" id="opq_text_6" name="opq_text_6" onblur="return testvalidation(opq_text_6);" /></td>
</tr>
<tr>
<td><label for="rst_text_7" id="rst_text_7_lb">Text 7</label> </td>
<td>:</td>
<td><input type="text" id="rst_text_7" name="rst_text_7" /></td>
</tr>
<tr>
<td><label for="uvw_text_8" id="uvw_text_8_lb">Text 8</label> </td>
<td>:</td>
<td><input type="text" id="uvw_text_8" name="uvw_text_8" /></td>
</tr>
<tr>
<td><label for="xyz_text_9" id="xyz_text_9_lb">Text 9</label> </td>
<td>:</td>
<td><input type="text" id="xyz_text_9" name="xyz_text_9" /></td>
</tr>
<tr>
<td><label for="klm_text_0" id="klm_text_0_lb">Text 10</label> </td>
<td>:</td>
<td><input type="text" id="klm_text_0" name="klm_text_0" value="10" /></td>
</tr>
</table>
</form>
</body>
</html>
Hi all. I have a form that I am writing which needs to send information contained inside a textbox when the user presses the "Post Comment" button. I want it be sent as a parameter to the addComment() function. How can you do this??? I have been trying to figure it out for a while now but can't seem to get the syntax right. This is what my code looks like currently. If possible I would like this to work without referencing the name of this form. Code: <form method="post" name="form" action="" style="padding:0px; margin:0px;"> <textarea name="content" id="content" style="width:600px; height:114px; font-family:Verdana,Arial,Tahoma,Times New Roman; font-size:12px; border:1px #666 solid;" onFocus="this.value=''; this.onfocus=null;">Enter your comment...</textarea><br /> <input type="submit" value="Post Comment" id="v" name="submit" onclick="addComment(this.content.value);" /> <span id="wait"></span><span id="flash"></span> </form> Hey All, So im am putting together a website where i will have two javascript elements close together a simple drop-down navigation bar and an image viewer. The only problem is that when the drop down menu appears it is cut off by the image viewer and doesnt display in front of it. Does anyone know a line of code or solution to this? here are the urls for reference where overlapping isnt a problem: http://www.spectracompany.com/Template/TemplateAlt.html where the menu is cut off: http://www.spectracompany.com/Projec...n-Center1.html Thanks for helping!!! I have an ASP.Net page using a JavaScript File. The function in this file that resets the values of the elements works fine. Now I need to advance this function to reset some and not reset others. I can't seem to get the function to recognize the individual elements. I've tried many different syntaxes to make it happen with no luck. Most of the elements reside in a tab control (parent). I am using a nested Switch statement and the name as returned by doc.name method. Please reveiw the code below and see what I'm doing wrong. Code: for (i = 0; i <= document.forms[0].length; i++) {
doc = document.forms[0].elements[i];
//alert(doc.name + " - " + doc.type);
switch (doc.type) {
case 'text':
doc.value = ''; break;
/* switch (doc.name){
default:doc.value = '';
}*/
case 'textarea':doc.value = ''; break;
case 'checkbox':doc.checked = false; break;
case 'select-one':
//doc.options[0].selected = true;
//alert(doc.name + " - " + doc.type);
switch(doc.name){
case 'uwtBSSignUp_ctl0_ddlmodel':alert(doc.name + " - " + doc.type); break;
case 'uwtBSSignUp$_ctl0$ddlbuilding':break;
case 'uwtBSSignUp$_ctl0$ddlfloor'break;
default:doc.options[0].selected = true; break;
}
break;
default:break;}
}
I have a JavaScript function that Clears the values in all of the elements. This works fine, however, I want to modify the scriipt to clear some of the elements and leave the others alone. I seem to be having a problem getting the function to recognize the elements. (See Code). Code: function ClearAllControls() {
for (i = 0; i <= document.forms[0].length; i++) {
doc = document.forms[0].elements[i];
//alert(doc.name + " - " + doc.type);
switch (doc.type) {
case 'text':
doc.value = ''; break;
/* switch (doc.name){
default:doc.value = '';
}*/
case 'textarea':doc.value = ''; break;
case 'checkbox':doc.checked = false; break;
case 'select-one':
//doc.options[0].selected = true;
//alert(doc.name + " - " + doc.type);
switch(doc.name){
case 'uwtBSSignUp$_ctl0$ddlmodel':alert(doc.name + " - " + doc.type); break;
case 'uwtBSSignUp$_ctl0$ddlbuilding':break;
case 'uwtBSSignUp$_ctl0$ddlfloor'break;
default:doc.options[0].selected = true; break;
}
break;
default:break;}
}
var webTab = document.forms[0].getElementById('uwtBSSignUp');
if(webTab){alert('found');return;}
}
The nested switch statement is failing. The uwtBSSignUp element is a Infragistic Tab Control. I'm trying to prevent some of the controls on the tab panels not to clear. In addition the function doesn't run the alert to notify me that the tab control was recognized. If I run just the first switch statement it works and clears all of the elements. Am I using the right syntex or something? I have an ASP.Net page that uses functions in a .js file. I'm trying to reset the values in the controls on the form. The script I'm using works for Text boxes, TextArea boxes, and Check boxes, but, doesn't work for Select-One (DropDownList) or Select-Multi (List) controls. Included is the code. I use the alert() call as troubleshooting to insure the code segment is entered and the control is identified. The SelectIndex of the control is not being set. When this code is hard coded on the page it works. Code: function ClearAllControls() {
for (i = 0; i <= document.forms[0].length; i++) {
doc = document.forms[0].elements[i];
switch (doc.type) {
case 'text':doc.value = ''; break;
case 'textarea':doc.value = ''; break;
case 'checkbox':doc.checked = false; break;
case 'select-one':
doc.selectedindex = 0;
alert(doc.name + " - " + doc.type)
break;
default:break;}
}
}
Hi How do I send an array created in jQuery or Javascript to PHP? (page will be redirected to PHP) I'm thinking of URL parameters right now, but wont that result to a long URL? Is there another optimized way of sending the array? Here's my script. Which doesn't work. Here's my script, this works fine... send_array_to_other_page.html Code: $(function(){
//DECLARE ARRAY
var arr = new Array();
var i = 0;
$('#form').submit(function(e){
e.preventDefault();
var value = $('#box').val();
var index = arr.length;
var list = '';
//ADD VALUE TO ARRAY
arr[index] = value;
//OUTPUT VALUES IN ARRAY
for (var index in arr){
list+=index+': '+arr[index]+'<br/>';
$('#arrLength').html(arr.length);
}
//DISPLAY ARRAY
$('#display').html(list);
$('#form').get(0).reset(); //RESET FORM
});
$('#send').click(function(){
window.location = 'send_array_to_other_page_2.php?list='+arr;
});
});
This doesn't. It outputs Array content lost. Id also like to point out the the url of this page is send_array_to_other_page_2.php. Its missing the ?list= PHP Code: <?php $arr = $_GET['list']; echo 'The contents of the array are still... <br/>'; if(isset($arr)){ print_r($arr); } else { echo 'Array content lost'; } ?> Is it possible to use JavaScript to send a HTML FORM this way? (By the way, this is a huge guess - I don't know JavaScript very well) Code: <SCRIPT type="text/javascript">
function Cart1Function() {
get.INPUT.quantity.value
send.to.formsubmit1.php
}
function Cart2Function() {
get.INPUT.quantity.value
send.to.formsubmit2.php
}
</SCRIPT>
<FORM action="?" method="post" name="form">
<DIV>
<INPUT type="text" name="quanitity">
<INPUT type="submit" value="CART 1" onClick="Cart1Function">
<INPUT type="submit" value="CART 2" onClick="Cart2Function">
<DIV>
</FORM>
I want to make two forms sharing the same input (quantity). Hi there, I guess my question is very novice but I have to ask it. I can find lots of "form applications" on internet. But anytime I check them I cannot see any "send" button help. I mean I know that when I click it, it wont send the informations to my e-mail page. Because they don't show where to insert my email address there, in the example. So how can we make a form work for us, how can we arrange it to send the informations to our e-mail address? Do we need to use a php file for it? if yes, how? Regards and Thanks in advance Hi All, I have html pages with code like <div> <script type="text/javascript" src="http://myserver2/mysite/addhtm.js"></script> </div> the script adds some html code and random images selected from second server inside an iframe tag in the div tag. I need to examine this added html and image properties in my page using javascript. A search on internet did not help, it says elements inside iframe coming from different domain can not be accessed. Is there any workaround or hack available to access iframe contents from page javascript? Thanks Hi, I wanted to know if there is way in Javascript to send a hidden variable to an external URL without actually submitting to the URL? Code below is what I intend to do. I want to use an image to do an onClick event and send the name to an external URL without actually doing a submit. Code: <td width="25"> </td> <input type="image" src="images/btn_Activate.gif" onClick="window.location.href='www.abc.com'"> <input type="hidden" name="name" value="<% = name %>"> </td> Thanks. Jeeten. 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>
Below is a javascript function from my website that loops through nodes in an XML file retrieving certain information about those who joined in the current month/year. The part in red creates a link which when clicked runs a function called show() with the relevant i variable value e.g. show(2) for the second node if that is relevant. Anyway the red part works in Chrome but not Internet Explorer (surprise surprise). I did some research which says that .setattribute is not allowed in IE. How can I change the red code to create links for the relevant records which works in IE? Thank you for your help Code:
function displaymember() {
var d = new Date();
var curr_month = d.getMonth();
curr_month++;
if (curr_month < 10) curr_month = "0" + curr_month;
var curr_year = d.getFullYear();
for (i = 0; i < x.length; i++) {
membershipstatus = (x[i].getElementsByTagName("membership_status")[0].childNodes[0].nodeValue);
name = (x[i].getElementsByTagName("name")[0].childNodes[0].nodeValue);
body = (x[i].getElementsByTagName("body_type")[0].childNodes[0].nodeValue);
ethnicity = (x[i].getElementsByTagName("ethnicity")[0].childNodes[0].nodeValue);
sex = (x[i].getElementsByTagName("sex")[0].childNodes[0].nodeValue);
seeking = (x[i].getElementsByTagName("seeking")[0].childNodes[0].nodeValue);
date = (x[i].getElementsByTagName("date_joined")[0]);
month = (date.getElementsByTagName("month")[0].childNodes[0].nodeValue);
year = (date.getElementsByTagName("year")[0].childNodes[0].nodeValue);
newa = document.createElement("a");
aIdName = "my" + i + "a";
ahref = "#";
aclick = "show(" + i + ")";
newa.setAttribute("id", aIdName);
newa.setAttribute("href", ahref);
newa.setAttribute("onclick", aclick);
newa.innerHTML = name + " | " + body + " " + ethnicity + " " + sex + " with " + membershipstatus + " membership seeks " + seeking + "<br/>";
if (curr_month == month && curr_year == year) {
document.getElementById("member").appendChild(newa);
}
}
}
|
|||||||