a little help on javascript/php code

  • tiffix
  • Student
  • Student
  • User avatar
  • Posts: 65
  • Loc: kenya

Post 3+ Months Ago

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);
  4. function addInput() {
  5.  arrInput.push(arrInput.length);
  6.  arrInputValue.push("");
  7.  display();
  8. }
  9. function display() {
  10.  document.getElementById('parah').innerHTML="";
  11.  for (intI=0;intI<arrInput.length;intI++) {
  12.   document.getElementById('parah').innerHTML+=createInput(arrInput[intI], arrInputValue[intI]);
  13.  }
  14. }
  15. function saveValue(intId,strValue) {
  16.  arrInputValue[intId]=strValue;
  17. function createInput(id,value) {
  18.  return "<input type='text' id='test "+ id +"' onChange='javascript:saveValue("+ id +",this.value)' value='"+ value +"'><br>";
  19. }
  20. function deleteInput() {
  21.  if (arrInput.length > 0) {
  22.    arrInput.pop();
  23.    arrInputValue.pop();
  24.  }
  25.  display();
  26. }


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.
  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Posts: 6230
  • Loc: South-Africa

Post 3+ Months Ago

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 ... ?
  • X3ndou
  • Proficient
  • Proficient
  • User avatar
  • Posts: 263
  • Loc: New Jersey

Post 3+ Months Ago

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!

Post Information

  • Total Posts in this topic: 3 posts
  • Users browsing this forum: No registered users and 94 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
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.