Add textbox when button is pressed - javascript

I know this can be accomplished in Javascript (I hope!) I have a couple of forms on my page, but I cannot guess how many the user will need, so is there some magic which can be done in javascript which when a button is pressed this:
<input name="userfile[]" type="file" /><br />
<input type="text" value="Description goes here." name="imagedescription2" maxlength="20" onfocus="this.value = '';" /><br />
Is added to a designated area? Keeping in mind adding a number onto the name if the button is pressed eg name="imagedescription3" next name="imagedescription4" and so forth
This may be posted around the internet, I know it would be, I just don't know how to thorougly phrase my question

If possible, I recommend adding jQuery to your project. It makes DOM manipulation easy.
http://api.jquery.com/category/manipulation/
An example might look like this
Add Item
<div id="#wrapper">
<input type="text" value="Description goes here." name="imagedescription1" maxlength="20" onfocus="this.value = '';" /><br />
<input type="text" value="Description goes here." name="imagedescription2" maxlength="20" onfocus="this.value = '';" /><br />
</div>
<script>
$(function(){
var i = 3; // i would be incremented with each add.
$("#myButton").click(function(){
$('<input type="text" value="Description goes here." name="imagedescription' + i + '" maxlength="20" onfocus="this.value = '';" /><br />').appendTo('#wrapper');
});
return false;
});
</script>

You can write a JS function for adding textboxes and call the function when the button is pressed.
The function should go along these lines....
var count;
function functionName()
{
count++;
document.Write('<input type="text" value="..." name="imagedescriptor'+count+'" max..');
}
Hopefully it works.

Try this:
var i = 2;
var sourceTextNode = document.getElementsByName("imagedescription2")[0];
function createTextBox(){
var newNode = sourceTextNode.cloneNode(false);
newNode.setAttribute("name", ++i);
var parent = sourceTextNode.parentNode;
if(parent.lastchild == sourceTextNode) {
parent.appendChild(newNode);
} else {
parent.insertBefore(newNode, sourceTextNode.nextSibling);
}
}
function btnClicked(){
createTextBox();
}

another jQuery solution:
Live Demo
$("#f_add").click(function(e) {
var field = document.createElement('input');
$(field).attr('type', 'text');
$(field).attr('name', 'field[]');
$("#thenewhotness").append(field);
e.preventDefault();
});
<form id="thenewhotness">
<button id="f_add">Add Extra Field</button>
<input type="text" name="field[]">
</form>

Related

Iterate through a form with JavaScript

I would like to pick a random name out of a form that i can fill with names. I have a function to add more form field dynamicly.
Here is my code so far :
<form>
<div id="dynamicInput">
<input class="inputs" type="text" name="input1" placeholder='Type name' required>
<input class="inputs" type="text" name="input2" placeholder='Type name' required>
<input class="inputs" type="text" name="input3" placeholder='Type name' required>
<input class="inputs" type="text" name="input4" placeholder='Type name' required>
</div>
<input type="button" class="login login-submit" value="Add a member" onClick="addInput('dynamicInput');">
<input type="button" name="login" class="login login-submit" value="Roll the wheel!" onClick="rollIt();">
</form>
My Javascript functions are as follows :
function addInput(divName){
if (counter == limit) {
alert("You have reached the limit of adding " + counter + " inputs");
}
else {
var newdiv = document.createElement('div');
newdiv.innerHTML = "<input class='inputs' type='text' name='input" + counter + "' placeholder='Type name' >";
document.getElementById(divName).appendChild(newdiv);
counter++;
}
}
function rollIt() {
var inputs = document.getElementsByTagName('input');
for (var i = 0; i < inputs.length; i++) {
console.log(inputs[i]);
}
}
I have two questions :
My friends are laughin at my face because of the onClick usage. Is it that bad ?
How could i store the form values in a list ? I tried to show them with the rollIt function with no success.
maybe something like this:
function randomName(){
var inputs = document.getElementsByTagName('input');
randomName = document.querySelector('[name="input'+(Math.floor(Math.random() * inputs.length) + 1)+'" ]').value;
return randomname;
}
this simply returns random value of input[name="input+x"]
ps: document.querySelector is not supported by all platforms so to be sure just add a getElementByAttribute function you can get everywhere around the web
About your question : My friends are laughin at my face because of the onClick usage. Is it that bad ?
In fact, don't put inline javascript is better for some reasons :
Separate presentation from controller layer. (HTML / JavaScript).
So maintainability is improved because of the first reason for you and mates.
Better way to debug your code. You don't have to check multiples files, only .js
According to this post, you can't put inline js in cache and so improve your user experience.
So try to avoid those inline onclick usages.

Validate input textbox with image

I have 13 input text boxes simply to collect information from user. I'm trying to add a little bit of logic that when user clicks next button check to see if input field is blank and if so place a X image after the textbox. Where I'm getting up up at is if I put text in the box then it will not outline the box in red but still places an X after the form.
I've tried using the $.each() and $.filter()
Here is the js:
var invalid = '<img src="css/Filtration/img/x.png" /> ';
$('.btn').click(function () {
var inputs = $(":input").filter(function () {
return this.value === "";
});
if (inputs.length) {
$(inputs).css('border-color', 'red').after(invalid);
console.log(inputs.length);
}
});
Here is some of the input text boxes not all :
<label>First Name:</label>
<input type="text" name="First Name" class="txtbox" id="firstName" />
<label>Last Name:</label>
<input type="text" name="Last Name" class="txtbox" id="lastName" />
<label>Email Address:</label>
<input type="text" name="Email Address" class="txtbox" id="email" />
<label>Company:</label>
<input type="text" name="Company" class="txtbox" id="company" />
Try this:
var invalid = '<img src="css/Filtration/img/x.png" /> ';
$('.btn').click(function () {
$(":input").each(function () {
if($(this).val() == '' ){
$(this).css({borderColor: 'red'}).after(invalid);
}
});
});
Note that if you had not previously set other border css parameters, the color may not work. So this pattern can take care of it in that case:
.css({border: '1px solid red'})
Now, :input is a bit broad and therefore inefficient. Therefore, its better to say:
$(':text', '#container').each(...
Where #container is, of course, the container of all your inputs.
Please, consider use jquery Validate, you can see examples here and documentation here

put cursor at end of text input's value

So, currently I have a text-input-field with a value that is also autofocused.
On page load, the value is selected / highlighted. Is there a way I can put the cursor at the end of the value text instead of highlighting it in javascript or CSS?
Here is a js fiddle where the autofocused text's value is highlighted: http://jsfiddle.net/TaGL5/
Here is the HTML code: <input type="text" value="value text" autofocus />
Upgrade to #harsha's answer
I found that to make solution work with Firefox,
we need temporary reset value to "not-equal of value", then set it back
<input type="text" autofocus value="value text" onfocus="var temp_value=this.value; this.value=''; this.value=temp_value" />
This works for me
<input type="text" autofocus value="value text" onfocus="this.value = this.value;"/>
Use Jquery for this:
$(function() {
var input = $("#txt1");
var len = input.val().length;
input[0].focus();
input[0].setSelectionRange(len, len);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<input type="text" id="txt1" value="Lorem" style="width:400px;" />
But some browsers don't support enter code here property, in which case use this:
$(document).ready(function(){
$("#search").focus(function(){
if (this.setSelectionRange)
{
var len = $(this).val().length;
this.setSelectionRange(len, len);
}
else
{
$(this).val($(this).val());
}
});
$("#search").focus();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input id="search" type="text" value="mycurrtext" size="30" name="search" />
This question already exist on stackoverflow:
Reference1
Reference2
Use this, its nice work for me...
<input type="text" name="txt" value="value text" autofocus="" onfocus="this.setSelectionRange(this.value.length,this.value.length);">
OR add this line to your input element
onfocus="this.setSelectionRange(this.value.length,this.value.length);"
You can add this parameter to your text input field:
onmouseover="this.setSelectionRange(this.value.length,this.value.length);"
onfocus="this.setSelectionRange(this.value.length,this.value.length);"
NB: Works well under Chromium in 2017.
Select element by class or id, then focus, and then re-insert value.
<input type="text" class="element-to-autofocus" value="Some existed text" />
<script>
temp_el = document.querySelector('.element-to-autofocus');
temp_el.focus();
temp_value = temp_el.value;
temp_el.value = '';
temp_el.value = temp_value;
</script>

How to chang all <input> to its value by clicking a button and change it back later?

The problem: I have a page with many <input> fields (just say all are text fields)
I would like to have a button, when click on it, all input fields will become plaintext only.
e.g. <input type="text" value="123" /> becomes 123
and if I click on another button, the text will change back to
e.g. 123 becomes <input type="text" value="123" />
Is there an automatic way to scan for all the <input>s and change them all at once using javascript and jquery.
Thank you!
Edited
Seems you guys are getting the wrong idea.
Read what I have written again: e.g. <input type="text" value="123" /> becomes 123
I have value="123" already, why would I want to set the value again???
What I want is e.g.
<body><input type="text" value="123" /><input type="text" value="456" /></body> becomes <body>123456</body> and later <body>123456</body> back to <body><input type="text" value="123" /><input type="text" value="456" /></body>
Use this to go one way,
$('input').replaceWith(function(){
return $('<div />').text(this.value).addClass('plain-text');
});​​​
and this to go the other.
$('.plain-text').replaceWith(function(){
return $('<input />').val($(this).text());
});
​
Check this link http://jsfiddle.net/Evmkf/2/
HTML:
<div id='divInput'>
<input type="text" value='123' />
<br/>
<input type="text" value='456' />
<br/>
<input type="text" value='789' />
</div>
<div id='plainText' style='display:none'></div>
<div>
<input type="button" id='btnPlain' value='Make It Plain' />
<input type="button" id='btnInput' value='Make It Text' />
</div>​
Javascript:
$("#btnPlain").bind('click',function(){
$("#plainText").html('');
$("#divInput input[type=text]").each(function(index){
$("#plainText").append('<span>'+$(this).val()+'</span>');
$("#divInput").hide();
$("#plainText").show();
});
});
$("#btnInput").bind('click',function(){
$("#divInput").html('');
$("#plainText span").each(function(index){
$("#divInput").append('<input type="text" value="'+$(this).text()+'"/><br/>');
$("#plainText").hide();
$("#divInput").show();
});
});
​
Try this FIDDLE
$(function() {
var arr = [];
$('#btn').on('click', function() {
var $text = $('#inp input[type="text"]');
if( $text.length > 0){
$text.each(function(i) {
arr[i] = this.value;
});
$('#inp').html(arr.join());
}
else{
if(arr.length <= 0){
}
else{ // Add Inputs here
var html = '';
$.each(arr, function(i){
html += '<input type="text" value="' + arr[i]+ '"/>'
});
$('#inp').html(html);
}
}
});
});
​
You need to create a hidden element for each input, then use jquery to hide the input, show the hidden element and give it the inputs value.
<input type="text" value="123" id="input_1" />
<div id="div_1" style="display:none;"></div>
$("#div_1").html($("input_1").val());
$("#input_1").hide();
$("#div_1").show();

Prevent tab text highlight / disable tab text selection

Here's a sample form:
<form action="#" method="post">
Name:<br />
<input type="text" name="name" value="your name" /><br />
E-mail:<br />
<input type="text" name="mail" value="your email" /><br />
<input type="submit" value="Send">
</form>
When you tab to a text input, the value gets highlighted. How can it be disabled?
Any help is appreciated!
Mike
var $yourInput;
$yourInput = $("#your_input");
setTimeout(function() {
return $yourInput.selectRange($yourInput.val().length, $yourInput.val().length);
}, 10);
selectRange function you can find here: jQuery Set Cursor Position in Text Area
Hello here is the solution. Dirty one:
html:
<input type="text" id="a" />
<input type="text" id="b" />
Javascript:
$("input").focus(function(){
if($(this).val() != ""){
var elm = $(this);
var val = elm.val();
setTimeout(function(){elm.val(val);},1);
}
});
Demo: http://jsfiddle.net/naveed_ahmad/S2UPs/
This is working, at least in Firefox. It triggers the "End" key:
$('input[type=text]').bind('focus',function(){
var e = jQuery.Event("keydown");
e.which = 35; // # key code for end key
$("input[type=text]").trigger(e);
return false;
});

Categories