I have a working form that generates a string, and by clicking on a button it places the string inside a text area box.
I also have a reset button that suppose to reset all fields but not the text area with the strings.
Here is some of my code.
HTML:
<form>
<!--some more code and inputs-->
</tbody> </table> </p> <p> <input value="Generate URL" onclick="createURL1();" type="button">
<input name="result" size="70" class="clearit" type="text" ></input>
<input type="button" value="Add The Link" onClick="addtext();"></p>
<textarea id="t5" style="width:600px;" name="outputtext" ></textarea><br><br>
</p> </td> </tr> </tbody> </table>
<input type="reset" value="Clear" id="reset" ></input>
JavaScript:
$(document).ready(function(){
$('#reset').on('click',function(e){
e.preventDefault();
$('.clearit').val("");
});
});
I gave all the inputs that I want to reset a class (clearit) and the reset button got an ID: reset. The only field I didn't want to be reset got a different id.
it's supposed to work and its not.. Please Help :)
use this javascript function and exclude the element with id you dont want to reset and you can specify the way to reset either by left input blank or dropdown equal -1
and it works on IE and fire fox tesed
function resetLabels()
{
//mainForm is the name of form
var cells = document.mainForm.elements;
for (var i= 0; i < cells.length; i++) {
if(cells[i].name !='txtName')//for example to not reset by name
cells[i].value='';
// cells[i].className = '';
// cells[i].style.color = 'black';
// or cells[i].value='-1' for drop down
// or cells[i].name= ''; name and id to compare and exclude specific elements
// or cells[i].id= '';
//and i suggest to name like txt... and ddl...to
//know the type by name and id or just check the type
//of element by using cells[i].type
}
}
Related
How to add multiple contact numbers within a single textbox and also a X(clear) button for each of the text added using javascript?
Below is a part of my HTML page
Contact No:<input type="text" id="no"><input type="button" value="ADD" id="add" onclick="javascript:addContact();">
<input type="text" id="text_name" style="width: 300px;height:50px;" />
Here is my javascript function
function addContact(){
var temp = document.createElement("input");
temp.innerHTML="<input type='search' value='' alt='clear' >";
var contact_added=document.getElementById("text_name").value;
var contact=document.getElementById("no").value;
document.getElementById("text_name").value=contact+temp+contact_added;
}
This is what I get as my output
![My output]
However what I need is that for every text that I enter,it should be follow by a clear so that I can clear that selected block of text
function addContact(){
temp="<input type='search' value=''. alt='clear' >";
var contact_added=document.getElementById("text_name").value;
var contact=document.getElementById("no").value;
document.getElementById("text_name").value=contact+temp+contact_added;
}
However this doesnt solve your problem. I think it isnt a good idea, doing this with inputs and buttons. This only makes it complicated.
At first make a form with a hidden field:
<form action="submit.php" method="post">
<input name="contacts" id="contacts_hidden" style="display:none">
</form>
<div id="contacts">
</div>
//your submit button and input
Now you can do:
contacts=[];
function addContact(){
newcontact=document.getElementById("no");
contacts.push(newcontact.value);
newcontact.value="";
render();
}
function delete(i){
contacts.splice(i,1);
render();
}
//this takes the contacts array and adds it to the page + hidden submit field
function render(){
hidden=document.getElementById("contacts_hidden");
all=document.getElementById("contacts");
content="";
for(i=0;i<contacts.length;i++){
//add a delete button
content+=contacts[i]+"<a href='javascript:delete("+i+")'>Delete</a>";
}
all.innerHTML=content;
hidden.value=contacts.join(";");
}
How do I reset the form fields more elegant compared to the code below? The code is working. But if I have lots of form fields it does not look so nice. Is there a more compact way?
<script>
function setSearchCriteria(){
var searchcriteria = document.getElementById("TherapistSearch-SearchCriteria");
searchcriteria.value = "";
}
function setCity(){
var city = document.getElementById("TherapistSearch-City");
city.value = "";
}
function setLastName(){
var lastname = document.getElementById("TherapistSearch-LastName");
lastname.value = "";
}
function setFirstName(){
var firstname = document.getElementById("TherapistSearch-FirstName");
firstname.value = "";
}
}
</script>
<input type="button" class="btn btn-default" value="Reset form"
onclick="javascript:clearForms();javascript:setSearchCriteria();setCity();setLastName();setFirstName();" title="Reset form"/>
Give a css class to your input fields.
<input type="text" id="firstName" class="resettable" />
<input type="text" id="firstName" class="resettable" />
<select id="states" class="selectResettable">
<option value="0">Select an option </option>
<option value="1">Michigan</option>
<option value="2">Ohio</option>
<select>
<input type="button" id="resetBtn" />
And use this css class(es) as jQuery selector(s) to get all of this inputs and set the value to empty/default value. I also removed the onclick from button HTML markup as we are going to do it in the unobtrusive javascript way.
Add this javascript where we are registering the code for the click event on our button.
$(function(){
$("#resetBtn").click(function(e){
alert("Reset button clicked");
//Set the input text fields to empty string
$("input.resettable").val("");
//Reset the dropdowns.
$(".selectResettable").val("0")
//If you want to do something else, Do it here.
});
});
Simply use HTML the way it's meant to be used, and take advantage of the reset button:
<input type="reset" class="btn btn-default" value="Reset form" title="Reset form"/>
This requires no JavaScript, no additional functionality, and is a native component of HTML forms. Using type="button" gives the element the appearance of a button, but strips the default functionality; using type="reset" gives the appearance of a button and gives the default functionality of resetting the parent <form> element to its default page-load state.
References:
<input> element type attribute-values.
<input type="reset" id="resetBtn" class="resettable" />
use reset type of button or call reset method on form as below
<input type="button"
class="btn btn-default"
value="Reset form"
onclick="document.getElementById('myForm').reset();"
title="Reset form"/>
I have an input text field with a placeholder attribute. The placeholder disappears when I enter text, but I would like the the placeholder text to reappear after I click the button, "clear," or when the text field is empty. What are some ways I can achieve this?
Below is the code I have below. I tried
document.text.value = "hello";
but the text "hello" stays in the box when I start typing.
HTML
<input type="text" placeholder="hello">
<input type="button" value="clear" onclick(clearText)>
Javascript
function(clearText) {
document.text.value = " ";
}
When the text field is empty, the placeholder will reappear automatically.
When the clear button is clicked, you can use onclick attribute on the button and define the function like this:
Implementation with pure JS:
<script>
function clearText() {
// we use getElementById method to select the text input and than change its value to an empty string
document.getElementById("my_text").value = "";
}
</script>
<!-- we add an id to the text input so we can select it from clearText method -->
<input id="my_text" type="text" placeholder="hello">
<!-- we use onclick attribute to call the clearText method -->
<input type="button" value="clear" onclick="clearText();">
JSFiddle Demo
Or you can use jQuery:
<script>
function clearText() {
$("#my_text").val("");
}
</script>
<input id="my_text" type="text" placeholder="hello">
<input type="button" value="clear" onclick="clearText();">
JSFiddle Demo
The easiest way to do it:
<input placeholder="hello" onchange="if (this.value == '') {this.placeholder = 'hello';}"
/>
You were very close
HTML :
<input type="text" id='theText' placeholder="hello">
<input type="button" value="clear" onclick='clearText()'>
JavaScript :
clearText = function(){
document.getElementById('theText').value = "";
}
Demo : http://jsfiddle.net/trex005/7z957rh2/
There are multiple problems with your javascript syntax, starting from function declarations and ending with onclick event specification.
However, you were on the right way, and code below does the trick:
<input type="text" placeholder="hello">
<input type="button" value="clear" onclick="document.querySelector('input').value=''">
However, it will only work if this is the only input box in your document. To make it work with more than one input, you should assign it an id:
<input type="text" id="text1" placeholder="hello">
<input type="button" value="clear" onclick="document.querySelector('#text1').value=''">
and use "text2" and so on for other fields.
You should not forget to set "return false;"
document.getElementById('chatinput').onkeypress = function(){
var key = window.event.keyCode;
if (key === 13) {
var text = this.value;
var object = document.getElementById('username_interface');
email = object.email;
username = object.username;
empty = /^\s+$/;
// function Send Message
this.value = "";
return false;
}else{
return true;
}}
I have a form with a bunch of inputs. Sometimes the form will have 1 input and sometimes up to 10 inputs. When someone fills out each input I want a tag field at the bottom to be populated also. Right now I have it working but only with a set number of inputs. (3 at the moment).
Im trying to figure out how to make it work regardless of how many inputs there are on the page.
HTML
Input1 <input id="input1" name="input1" type="text" value="" />
<br/>
Input2 <input id="input2" name="input2" type="text" value="" />
<br/>
Input3 <input id="input3" name="input3" type="text" value="" />
<br/>
<p>List of inputed text</p>
<span id="allInputs"></span>
Jquery
$("#input1,#input2,#input3").change(function () {
var inputArray = [$("#input1").val(), $("#input2").val(), $("#input3").val()];
$("#allInputs").text(inputArray.join(' '));
});
A nice to have also would be putting them into another input instead of a span and adding a comma after each one except for the last one.
I know Im probably missing something very simple here.
In your example you are only allowing for 3 inputs as you have 3 input boxes, when any of those input boxes change your tags are then being transferred to the span.
Now it sounds like you wish to allow for multiple entries regardless of how many inputs. You could try something simple such as the below fiddle.
http://jsfiddle.net/K2g4z/
Html:
<div>
<strong>Enter your tag and click add</strong>
<br/>
<input type="text" id="tagEntry" />
<button id="tagAdd">Add</button>
</div>
<div>
<strong>Entered Tags</strong>
<br/>
<input type="text" id="tagsEntered" />
</div>
Javascript:
var tags = [];
$(function() {
$('#tagAdd').click(function(){
//get the tag value and trim the spaces
var tVal = $('#tagEntry').val().trim();
if(tVal == '')
return;
//reset the entry box
$('#tagEntry').val('');
//verify tag not already saved
for(var i=0;i<tags.length;i++)
if(tags[i] == tVal)
return;
//add the tag to the array
tags.push(tVal);
//set the tags entry box
$('#tagsEntered').val(tags.join(', '));
});
});
UPDATE:
The JSFiddle link http://jsfiddle.net/K2g4z/1/ now supports using multiple inputs of as many as you need. To achieve this instead of selecting on element ID we bind to a class name. Given the following Html.
<div>
<strong>Enter your tag and click add</strong>
<br/>
<strong>Tag 1</strong>
<input type="text" id="tagEntry" class="tagEntry" />
<br/>
<strong>Tag 2</strong>
<input type="text" class="tagEntry" />
<br/>
<strong>Tag 3</strong>
<input type="text" class="tagEntry" />
<br/>
<strong>Tag 4</strong>
<input type="text" class="tagEntry" />
<br/>
<strong>Tag 5</strong>
<input type="text" class="tagEntry" />
</div>
<div>
<strong>Entered Tags</strong>
<br/>
<input type="text" id="tagsEntered" />
</div>
All the tag input boxes have a class of tagEntry now this class will become our selector. With the following JS we can bind the blur event to every tag that has a class of tagEntry. This will now update the tags box every time any of the inputs changed.
var tags = [];
$(function() {
$('.tagEntry').blur(function(){
//get the tag value and trim the spaces
var tVal = $(this).val().trim();
if(tVal == '')
return;
//reset the entry box
$(this).val('');
//verify tag not already saved
for(var i=0;i<tags.length;i++)
if(tags[i] == tVal)
return;
//add the tag to the array
tags.push(tVal);
//set the tags entry box
$('#tagsEntered').val(tags.join(', '));
});
});
As you can see our handler binds to all the inputs, as any of the inputs receives the blur event the method of extracting the tags is executed.
$("#input1,#input2,#input3").change(function () {
var inputArray = [$("#input1").val(), $("#input2").val(), $("#input3").val()];
$("#masterinput").val(inputArray.join(' '));
});
You probably want to narrow the selector so it isn't selecting all text inputs on the page.
var inputs$ = $("input:text").change(function () {
var inputArray = [];
$.each(inputs$, function(i, v) {
inputArray.push($(v).val());
}
$("#allInputs").text(inputArray.join(' '));
});
Here you go:
var str = "";
$("input[type=text]").change(function () {
$("input[type=text]").each(function(){
str += $(this).val()+",";
};
});
$("#allInputs").html(str);
I have the following code which I use to add text-boxes dynamically on click of button. It works.
<div id="forms" name="forms">
<input name="winner[]" type="text" id="tag" size="20"/><br/>
</div>
<input type="button" name="addmore" id="addmore" value="Add More Winners" onclick="addForm()"/>
The javascript for the above code is:
function addForm() {
$("#forms").append(
"<input type ='text' class='winner' name='winner[]'><br/>");
$(".winner").autocomplete("autocomplete.php", {
selectFirst: true
});
}
I am using auto complete to get data from database in the text-box
What I want is - suppose if a user clicks on add more winner button but does not want to add any data in the textbox, I should give him a button to delete the extra text-box.
How should the JavaScript be written for this?
Do see my above code
var i=0;
function addForm() {
i++;
$("#forms").append(
"<input type ='text' id='input_'"+i+" class='winner' name='winner[]'><button onclick='delete('"+i+"')' id='button_'"+i+">delete</button><br/>");
$(".winner").autocomplete("autocomplete.php", {
selectFirst: true
});
function delete(i)
{
$("#input_"+i).remove();
$("#button_"+i).remove();
}
simply use a counter to set an ID to inputs and buttons and send that counter to delete function;
Simply use the code below :
$("#forms").append("<p><input type ='text' class='winner' name='winner[]' ><button onclick='$(this).parent().remove()'>delete</button></p>");
Try this function.
function removeElement()
{
if(intTextBox != 0)
{
var contentID = document.getElementById('content');
contentID.removeChild(document.getElementById('strText'+intTextBox));
intTextBox = intTextBox-1;
}
}
Try adding a remove button while adding a text box dynamically to remove the text box if necessary
Here is the html code
<div id="forms" name="forms">
<input name="winner[]" type="text" id="tag" size="20"/><br/>
</div>
<input type="button" name="addmore" id="addmore" value="Add More Winners" />
Here is the jQuery code
$('#addmore').click(function () {
$('#forms').append('<input type ="text" class="winner" name="winner[]"><input type="button" onclick="$(this).prev().remove();$(this).remove();">');
});
Here is the demo