Back To Programming / Scripting / Coding Forum

a little help on javascript/php code

  • tiffix
  • Student
  • Student
  • User avatar
  • Joined: Jun 03, 2009
  • Posts: 65
  • Loc: kenya
  • Status: Offline

Post April 29th, 2010, 5:20 am

hello everyone, thanks for viewing this post. am having a problem coming up with a code that will allow my users to click on a button and automatically add a new input field. i would then pass these values to a 'PhP' page through 'post' in a form then be able to reference these values either using a while loop or a for loop so that i can write them to database. thanks for your help guys... :?

this is the javascript code
Code: [ Select ]
// JavaScript Document
var arrInput = new Array(0);
 var arrInputValue = new Array(0);

function addInput() {
 arrInput.push(arrInput.length);
 arrInputValue.push("");
 display();
}

function display() {
 document.getElementById('parah').innerHTML="";
 for (intI=0;intI<arrInput.length;intI++) {
  document.getElementById('parah').innerHTML+=createInput(arrInput[intI], arrInputValue[intI]);
 }
}

function saveValue(intId,strValue) {
 arrInputValue[intId]=strValue;
} 

function createInput(id,value) {
 return "<input type='text' id='test "+ id +"' onChange='javascript:saveValue("+ id +",this.value)' value='"+ value +"'><br>";
}

function deleteInput() {
 if (arrInput.length > 0) {
   arrInput.pop();
   arrInputValue.pop();
 }
 display();
}
  1. // JavaScript Document
  2. var arrInput = new Array(0);
  3.  var arrInputValue = new Array(0);
  5. function addInput() {
  6.  arrInput.push(arrInput.length);
  7.  arrInputValue.push("");
  8.  display();
  9. }
  11. function display() {
  12.  document.getElementById('parah').innerHTML="";
  13.  for (intI=0;intI<arrInput.length;intI++) {
  14.   document.getElementById('parah').innerHTML+=createInput(arrInput[intI], arrInputValue[intI]);
  15.  }
  16. }
  18. function saveValue(intId,strValue) {
  19.  arrInputValue[intId]=strValue;
  20. } 
  22. function createInput(id,value) {
  23.  return "<input type='text' id='test "+ id +"' onChange='javascript:saveValue("+ id +",this.value)' value='"+ value +"'><br>";
  24. }
  26. function deleteInput() {
  27.  if (arrInput.length > 0) {
  28.    arrInput.pop();
  29.    arrInputValue.pop();
  30.  }
  31.  display();
  32. }


and this is the html part
Code: [ Select ]
<p id="parah">Click below to dynamically create/remove input boxes in this field</p>
      <a href="javascript:addInput()">Add more input field(s)</a><br>
    <a href="javascript:deleteInput()">Remove field(s)</a>
  1. <p id="parah">Click below to dynamically create/remove input boxes in this field</p>
  2.       <a href="javascript:addInput()">Add more input field(s)</a><br>
  3.     <a href="javascript:deleteInput()">Remove field(s)</a>



of course i have the head part of the html ok.
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post April 29th, 2010, 5:20 am

  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Joined: Mar 12, 2007
  • Posts: 6228
  • Loc: South-Africa
  • Status: Offline

Post April 30th, 2010, 3:53 am

I use jQuery for these kind of things ... it's way easier to get it going. I can show you how I would do it in jQuery if you'd like ... ?
Let's leave all our *plum* where it is and go live in the jungle ...
  • X3ndou
  • Proficient
  • Proficient
  • User avatar
  • Joined: Nov 06, 2004
  • Posts: 263
  • Loc: New Jersey
  • Status: Offline

Post April 30th, 2010, 5:20 pm

Yeah, switch to using jQuery immediately. It will make your life a thousand times easier.

http://jquery.com/

Also, get a browser with some developer tools like a javascript console. Chrome has them built in. If you use Firefox download a copy of Firebug.

I had to do this recently actually, here's a quick overview of how to do it with jQuery.

Code: [ Select ]
<script type="text/javascript">
function add_input()
{
  $("#add-button").after("<input type='text' name='fields[]' size=40 maxlength=129 />");
}
</script>
<a id="add-button" href="#" onclick="add_input()">Add an input!</a>
  1. <script type="text/javascript">
  2. function add_input()
  3. {
  4.   $("#add-button").after("<input type='text' name='fields[]' size=40 maxlength=129 />");
  5. }
  6. </script>
  7. <a id="add-button" href="#" onclick="add_input()">Add an input!</a>


The add_input function begins by selecting the element in the DOM with the id 'add-button'; it then adds the html I passed after it using the after() method.

http://api.jquery.com/after/

Hope this helps!
"On the day *I* go to work for Microsoft, faint oinking sounds will be heard from far overhead, the moon will not merely turn blue but develop polkadots, and hell will freeze over so solid the brimstone will go superconductive." -Eric S. Raymond

Page 1 of 1

Post Information

  • Total Posts in this topic: 3 posts
  • Users browsing this forum: No registered users and 225 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.