I am trying to reset every input that has been entered on this form when the "reset" button
gets clicked. Below is my code that I tried using, the reset button wont reset anything.
Thank you.
<form id="todoForm">
<input type="text" id="todoInput" placeholder="Input new note..">
<input type="text" id="description" placeholder="Input description..">
<button type="button" id="button" onclick="todoList()">Submit</button>
<button type="button" id="reset" onclick="resetForm()">Reset</button>
</form>
<ol id="todoList">
</ol>
function todoList() {
var item = document.getElementById("todoInput").value
var text = document.createTextNode(item)
var addItem = document.createElement("li")
addItem.appendChild(text)
document.getElementById("todoList").appendChild(addItem)
var item = document.getElementById("description").value
var text = document.createTextNode(item)
var addItem = document.createElement("p")
addItem.appendChild(text)
document.getElementById("todoList").appendChild(addItem)
}
function resetForm() {
document.getElementById(todoList).reset();
}
Don't add a reset button.
Assuming this is a todo app users can just delete the todo after creating it. Adding a reset button probably won't provide much value to users, instead it will most likely frustrate ones that click it by mistake.
Related
I need to reset only the form fields that are changed (reset to previous value).
I tried to use the reset but it completely resets the entire form and I don't need this.
How can I do this?
function clearResult() {
document.getElementById("save").reset();
}
<div class = "container">
<form method="post" id="save" onload="onLoad()">
<div class="field">
<label for="id"> ID:</label>
<input type="number" id="id" name="id" />
</div>
<div class="field">
<label for="type"> Fragment Type: </label>
<input type="text" id="type" name="type" />
</div>
<div class="button">
<button type="submit" class="full">Save changes</button>
<input type="button" value="Cancel" onclick="clearResult()" />
</div>
</form>
</div>
First of all you should to store the predefined values of form elements to set them back when you want to reset them back.
Then you can use this globally defined initial values to set them back whnever reset event occurs.
var id, type;
const form = document.getElementById('save');
document.onload = (event) => {
id = form.id.value;
type = form.type.value;
};
function clearResult() {
form.id.value = id;
form.type.value = type;
};
It was simple. When page load just get values from that fields.
Make with document.onload:
var firstValue = document.getElementById("yourFieldId").value;
After form submit get values like below:
var currentValue = document.getElementById("yourFieldId").value;
And after submit in reset check if CURRENT VALUES equal with VALUES FROM FIRST TIME
Example
if(firstValue != currentValue){
document.getElementById("yourFieldId").value = firstValue;
}
here is my code
I have tried using javascript with onClick but then my submit button won't work. Then I tried changing it into the normal button and it still won't work. I tried putting it into the form and still won't work. So, I don't know how to reset the button for my form. This is my school work and I'm still a student so please help me. I would appreciate your help soo much.
The Form types: reset and submit need a context. I mean you have to wrap all inputs inside a form. <form>....</from>. Then reset has the context to reset all fields inside his context / form.
Otherwise if you dont want use form you can do it by Javascript.
function reset() {
document.getElementById('input_1').value = ''
document.getElementById('input_2').value = ''
}
<input id="input_1" value="Hello"><br/>
<input id="input_2" value="World">
<br/>
<button onclick="reset()">RESET</buton>
You should use javascript for reset your inputs
Notice: Keep in mind that the Enter key also works when using the form
<div>
<div id="like-form">
<input type="text" placeholder="Name" />
<input type="email" placeholder="Email" />
<input type="password" placeholder="Password" />
</div>
<button type="button" id="like-reset">
Reset
</button>
</div>
You can use Ajax to submit information, But to reset
document.getElementById("like-reset").addEventListener("click" () => {
// forEach
[].slice.call(document.getElementById("like-form").children).forEach(input => {
input.value = "";
});
// For
const inputs = document.getElementById("like-form").children;
for (let i = 0; i < inputs.length; i++) {
inputs[i].value = "";
}
});
U should set all inputs and reset button inside form.
Like so:
<form>
<input type="text">
<input type="reset" value="Reset">
</form>
That way it should work.
I’m trying to use innerHTML to add an li item according to user input (in a textbox). Is there any way to create new list item other than using createElement or appendChild?
const user = document.getElementById('btn');
const inputEle = document.getElementById("submit");
const userList = document.getElementById('itemList');
user.addEventListener('click', (e) => {
userList.innerHTML += `<li>${inputEle.value}</li>`;
});
<input type="text" id="submit">
<button type="button" id="btn">Add</button>
<ul id="itemList"></ul>
I found out that the problem is in html file, where i put my button and input inside ul
<ul>
<input type="text" id="submit" >
<button type="button" id="btn">Add</button>
</ul>
I'm not really sure the best way to go about this but I've laid the framework.
Basically, I would like to add the functionality so that when my #moreItems_add button is clicked and calls the moreItems function, I simply want to add a new Input field below it, and so on. I want to limit this to 10 fields though, so I show that in the function.
The only trick is, I will be submitting all fields via ajax to save to the database, so I need to try and keep track of an ID with each.
What's the best way to continue the javascript here so that I can append an input field on button press and keep track of IDs for each?
<div class="modal-body">
<form id="Items">
<label id="ItemLabel">Item 1:</label>
<input type="text" name="Items[]">
<button id="moreItems_add" onclick="moreItems()" id="moreItems">More Items</button>
</form>
</div>
<div class="modal-footer">
<input type="submit" name="saveItems" value="Save Items">
</div>
<!-- modal JS -->
<script type="text/javascript">
function moreItems(){
var MaxItems = 10;
//If less than 10, add another input field
}
</script>
You can use the jQuery .insertBefore() method to insert elements right before "more items" button. Below is the code representing this:
var maxItems = 1;
function moreItems() {
if (maxItems < 10) {
var label = document.createElement("label");
label.id="ItemLabel"+maxItems;
label.innerHTML = "Item "+(maxItems+1)+": ";
var input = document.createElement("input");
input.type='text';
input.name = 'item'+maxItems;
$('<br/>').insertBefore("#moreItems_add");
$(label).insertBefore("#moreItems_add");
$(input).insertBefore("#moreItems_add");
maxItems++;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="modal-body">
<form id="Items">
<label id="ItemLabel">Item 1:</label>
<input type="text" name="Items[]">
<button type="button" id="moreItems_add" onclick="moreItems()" id="moreItems">More Items</button>
</form>
</div>
<div class="modal-footer">
<input type="submit" name="saveItems" value="Save Items">
</div>
Something like this should do the trick:
<!-- modal JS -->
<script type="text/javascript">
var MAX_ITEMS = 10,
added = 0;
function moreItems(){
if (added >= MAX_ITEMS) return;
var newField = document.createElement('input');
newField.type = 'text';
// TODO: Any field setup.
document.getElementById('items').appendChild(newField);
added++;
}
</script>
In terms of tracking each field with an ID, that should always be done by the back-end for data integrity and safety reasons.
some years ago I've wrote an article about making a repeated section using jQuery.
The live example is available on jsFiddle.
In the example you can find that both "add" and "remove" button are available, however you can set just the "add" button for your purpose.
The idea to limit to specific number of repeated boxes is to watch the number of repeatable elements just created in the context. The part of code to change in the live example is rows 13-18:
// Cloning the container with events
var clonedSection = $(theContainer).clone(true);
// And appending it just after the current container
$(clonedSection).insertAfter(theContainer);
There you should check if the number of repeated elements is less than <your desired number> then you will allow the item to be created, else you can do something else (like notice the user about limit reached).
Try this:
const maxItens = 10,
let itensCount = 0;
function moreItems() {
if (itensCount++ >= maxItens) {
return false;
}
let newInput = document.createElement('input');
// use the iterator to make an unique id and name (to submit multiples)
newInput.id = `Items[${itensCount}]`;
newInput.name = `Items[${itensCount}]`;
document.getElementById('items').appendChild(newInput);
return false;
}
Add type "button" to stop submiting the page (also, your button have two ID):
<button id="moreItems_add" onclick="moreItems();" type="button">More Items</button>
The submit button must be inside the form to work:
<form>
<div class="modal-body">
<div id="Items">
<label id="ItemLabel">Item 1:</label>
<input type="text" name="Items[]">
</div>
<button id="moreItems_add" onclick="moreItems()" id="moreItems">More Items</button>
</div>
<div class="modal-footer">
<button type="submit">Save Items</button>
</div>
</form>
To append itens in sequence the button must be outside of div "itens".
when I am removing form tag then it is working but after adding form tag from HTML it is not working. following is the code on which I am trying and what is the reason it is not working
function abc() {
var i, ele, node, parent;
var num = document.getElementById("name").value;
//num=parseInt(num);
var parent = document.getElementById("listName");
var node = document.createTextNode(num);
var ele = document.createElement("option");
ele.append(node);
parent.appendChild(ele);
//alert(num);
//num++;
document.getElementById("name").value = "";
}
<form>
<input type="input" id="name" list="listName" />
<datalist id="listName"></datalist>
<input type="submit" onclick="abc()" />
</form>
Valuing the attribute type of the input element with the submit value means submit the form.
The button documentation states indeed :
submit: The button submits the form data to the server. This is the
default if the attribute is not specified, or if the attribute is
dynamically changed to an empty or invalid value.
You don't have any form, so the current page is considered as the actual form.
As you click on the button, the function associated to onclick() is first invoked.
It adds the option in the dataList but you will never see it because the form is submitted and so you come back to the initial state of the html page.
You don't want submit a form but having a button to bind a click event to a function.
So don't use the submit type but the button type for your input :
<input type="button" value="add option" onclick="abc()" />
that matches to your requirement :
button: The button has no default behavior. It can have client-side
scripts associated with the element's events, which are triggered when
the events occur.
As a side note, your function is more complex as required and introduces too many variables that may create side effects.
This is enough :
function abc() {
var nameElement = document.getElementById("name");
var newOptionElement = document.createElement("option");
newOptionElement.textContent = nameElement.value;
var listNameElement = document.getElementById("listName");
listNameElement.appendChild(newOptionElement);
nameElement.value = "";
}
<form>
<input type="input" id="name" list="listName" />
<datalist id="listName"></datalist>
<input type="button" onclick="abc()" />
</form>
Because you used button as submit type.
If you need client side manipulation then it should not be maintain the page state (means not submit).
In your case if you will use
<input type="button" onclick="abc()" />
in place
<input type="submit" onclick="abc()" />
so it will be solve your problem.
change the html to type=button
<input type="button" onclick="abc()"/>
this works for me :
html ->
<input type="text" class='form-control' list="city" >
<datalist id="city">
</datalist>
js and jq ->
$("#city").empty(); // first empty datalist
var options=[];
options[0] = new Option('landan');
options[1] = new Option('york');
options[2] = new Option('liverPool');
$("#city").append(options);