Jump to content


Check out our Community Blogs

Register and join over 40,000 other developers!


Recent Status Updates

View All Updates

Photo
- - - - -

Javascript to Add a Text Input field


  • Please log in to reply
27 replies to this topic

#25 daduber

daduber

    CC Lurker

  • Just Joined
  • Pip
  • 2 posts

Posted 07 June 2013 - 09:05 AM

<html>
<head>
<title></title>
<script language="javascript">
fields = 0;
function addInput() {
if (fields != 10) {
document.getElementById('text').innerHTML += "<input type='file' value='' /><br />";
fields += 1;
} else {
document.getElementById('text').innerHTML += "<br />Only 10 upload fields allowed.";
document.form.add.disabled=true;
}
}
</script>
</head>
<body>
<form name="form">
<input type="button" onclick="addInput()" name="add" value="Add input field" />
</form>
<div id="text">

</div>
</body>
</html>
Using this code works great. Anyone know how I can remove the last form element added. ex If the user pushed the button to add but then decided not to use the field.

Thanks...
  • 0

#26 CodoLogic

CodoLogic

    CC Addict

  • Advanced Member
  • PipPipPipPipPip
  • 158 posts
  • Programming Language:C, C++, C#, PHP, (Visual) Basic, JavaScript, PL/SQL, Visual Basic .NET, Transact-SQL, ActionScript, VBScript
  • Learning:C++, C#, Python, Ada, Lua, Bash

Posted 07 June 2013 - 10:00 AM

<html>
<head>
<title></title>
<script language="javascript">
fields = 0;
function addInput() {
if (fields != 10) {
document.getElementById('text').innerHTML += "<input type='file' value='' /><br />";
fields += 1;
} else {
document.getElementById('text').innerHTML += "<br />Only 10 upload fields allowed.";
document.form.add.disabled=true;
}
}
</script>
</head>
<body>
<form name="form">
<input type="button" onclick="addInput()" name="add" value="Add input field" />
</form>
<div id="text">

</div>
</body>
</html>
Using this code works great. Anyone know how I can remove the last form element added. ex If the user pushed the button to add but then decided not to use the field.

Thanks...

 

Do you mean, you need a button to remove the input if the button is pressed???


  • 0

If you find peoples answers helpful, like the post please or mark as best answer. ;)


#27 daduber

daduber

    CC Lurker

  • Just Joined
  • Pip
  • 2 posts

Posted 07 June 2013 - 01:11 PM

<script language="javascript">

fields = 0;

function addInput() {

if (fields != 10) {

document.getElementById('text').innerHTML += "Type:<label><select name='type[]'><option>Material</option><option>Misc</option></select>Task Code:</label><input type='text' name='taskcode[]'>Sub/Vender <input type='text' name='subvender[]'>Cost <input type='text' name='cost[]'><br>";

fields += 1;

} else {

document.getElementById('text').innerHTML += "<br />Only 10 upload fields allowed.";

document.form.add.disabled=true;

}

}



</script>
</head>
<body>
<form name="form" action="formtest.php" method="post">
  
  
  Type:
    <label>
      <select name="type[]">
        <option>Material</option>
        <option>Misc</option>
      </select>
      Task Code:
    </label>
    <input type="text" name="taskcode[]">
 
 Sub/Vender   <input type="text" name="subvender[]">
 Cost
    <input type="text" name="Cost[]">
    <br />
    <div id="text"> </div><br>
    <input type="button" onClick="addInput()" name="add" value="Add input field" />
    <input type="submit" value="Submit" />
  
</form>
This is actually waht im trying to do. The user will click on the add button until he has the right amount. If the user clicks too many times and it has too many: <option>Material</option><option>Misc</option></select>Task Code:</label><input type='text' name='taskcode[]'>Sub/Vender <input type='text' name='subvender[]'>Cost <input type='text' name='cost[]'><br> I need a button to remove the last one and if clicked again the one before that cause its gonna go into a db and I don't want blank fields.

Thanks...

Edited by daduber, 07 June 2013 - 01:11 PM.

  • 0

#28 roke77

roke77

    CC Lurker

  • Just Joined
  • Pip
  • 1 posts

Posted 10 June 2013 - 05:09 AM

Hi! Im Roke, from Argentina. Im working on this JS code as well, on Ruby on Rails, and Foundation. My version of the add/delete text field JS is this one (adds drug names to medication forms).

 

JS:

var drug_count = 0;

function addDrug() {
  document.getElementById('NewDrug').innerHTML +=
  "<div class='row' id='drug_row_"+ drug_count +"'>"+
    "<div class='large-10 columns'>"+
      "<input type='text' placeholder='Nueva Droga' name='drug_ids[]' "+
      "class=''/>"+
    "</div>"+

    "<div class='large-2 columns'>"+
      "<input type='button' onclick='rmvDrug("+ drug_count +")' "+
      "value='-' class='tiny button alert'/>"+
    "</div>"+
  "</div>";
  drug_count++;
}

function rmvDrug(count) {
  var drug_row = document.getElementById('drug_row_' + count);
  drug_row.parentNode.removeChild(drug_row);
}

HAML:

#NewDrug
%input{onclick: "addDrug();", type: "button", value: "+", class: 'tiny button success'}

So there's my version of a delete button on each new text field. On the screen works great.

 

Here is a cap:
sinttuloctr.png

But, i still have the problem sending this new fields data to the server after clicking the submit button. I see there is a post method in php, but how can i do it on rails?

I hope my code helps in some way.

Saludos!


Edited by roke77, 10 June 2013 - 07:16 AM.

  • 0




Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download