This is function that i created for clear text fields but when enter any custom values it doesn't clear
function clear(){
document.getElementById('bmw1').value="";
document.getElementById('bmw2').value="";
document.getElementById('ans').value="";
}
The fields which created in html
<input type="text" id="bmw1" placeholder="Enter 1st Number"/>
<input type="text" id="bmw2" placeholder="Enter 2nd Number"/>
<input type="text" id="ans" placeholder="Answer"/>
<button type="button" onClick="clear()">Clear Values</button>
You need to change the js function name from clear() to something else. Because clear() is a java script built in function/method.
Why re-invent the wheel? You can do that with basic HTML:
<input type="reset" value="Reset" />
Just make sure that is inside your form and it will clear all the values.
I believe JavaScript already has a clear() function, try renaming your method. The following works for me :
function erase(){
document.getElementById('bmw1').value = "";
}
Problem is with name of function which is already reserved for Document.
Please change your function name to other and it will work well.
Related
I've tried several different ways, including Pure-JS and jQuery, but I can't get my input text field to clear. Please help.
Here's the relevant HTML:
<div align="center" id="searchDiv"></div>
<input type="text" id="searchBar" size="40" onsubmit="loadAllItems()">
<input type="submit" id="searchButton" value="Search" onclick="loadAllItems()">
<input type="button" value="Reset" onclick="reset()">
I'm trying to submit the searchBar, run backend code, and then call the reset() function to avoid manually clearing the text field:
function reset() {
document.getElementById("gradeQuestionsForm").reset();
document.getElementById('Output1').innerHTML = '';
document.getElementById('Output1').innerHTML = '';
updateStatus('Form has been reset.');
}
I tested with a JSFiddle. Please advise.
With jQuery you can do like this
fiddle
$('#searchBar').val('');
Try document.getElementById("searchBar").value = '';
Also, you need to set LOAD TYPE TO No wrap -in <head> in your JSFiddle
.
See more on running script on JSFiddle here.
I've searched about all I can. I'm trying to change the text of an input field using its name. I have found many ways to do it by ID like:
<script>
function changeValue(o){
document.getElementById('type').value=o.innerHTML;
}
</script>
<button id="technician" onclick="changeValue(this)">Technician</button>
<button id="developer" onclick="changeValue(this)">Developer</button>
<input type="text" id="type" name="type" value="change" />
But what I need to accomplish is for inputs without ID's.
Something along the lines of:
<script>
function changeValue(o){
document.getElementsByName('NAME').value=o.innerHTML;
}
</script>
<button id="technician" onclick="changeValue(this)">Technician</button>
<button id="developer" onclick="changeValue(this)">Developer</button>
<input type="text" name="NAME" value="change" />
Is there any way of accomplishing this?
UPDATE
I'm trying to expand on the javascript you guys helped me with.
The Snippet:
<script>
function changeValue(o){
document.getElementsByName('NAME')[0].value=o.innerHTML;
}
</script>
<span onclick="changeValue(this)" style="cursor: pointer;">One</span>
<span onclick="changeValue(this)" style="cursor: pointer;">Two</span>
<img src='image.gif' onclick="changeValue(this.src)" />
<input type="text" name="NAME" value="SOMETHING">
The spans are working correctly, although I don't actually need them. I will have all images once I figure this out.
I have tried a few ways, but what I can find is not directly related to my use.
The end goal is to get the img src into the text input with js, preferably somewhat how it already exists. I feel it's really close.
getElementsByName() returns a collection. use [] to access individual elements
ex :
function changeValue(o){
document.getElementsByName('NAME')[0].value=o.innerHTML;
}
document.getElementsByName('NAME') returns a list of elements by name. You need to provide the index as
document.getElementsByName('NAME')[0].value=o.innerHTML
Use document.querySelector like so
document.querySelector('input[name="NAME"]').value = o.innerHTML;
jQuery way
$('input[name="NAME"]').val("im changed!")
I am not able to unhide a button inside a form. Outside the form it is working.
Also, is there a better way to easily do what I am trying?
<script>
function action() {
document.getElementById('hidden').style.visibility = 'visible';
}
</script>
<input type="text" onChange="action();" id="textfield" name="textfield" />
<input type="button" style="visibility: hidden" id="hidden" value="i am here" />
I try to be careful with id names that I don't accidentally use key words with the id name. Try changing the id="hidden" to id="btnIAmHere". Also action is already a method of a form.
Another way to hide something is to set style.display="none". To make it visible again, set style.display="block"
The difference between these two ways to make something invisible is that setting the visibility doesn't remove the space the object took up.
just call the method like this :
<input type="text" onChange="window.action();" id="textfield" name="textfield" />
I'm not sure but I think it's because the scope is not the same.
See the fiddle
That is due to the function name action(). May be the <form> confuses the function name -action with the form attribute- action. Thus, to make it working, just rename the function to action1() for example and it will work.
See the js
function action1() {
document.getElementById('hidden').style.visibility = 'visible';
}
I'm working on a prototype and I want to trigger an action after a submit but only if the required fields were filled.
I have this code
<button type="submit" onclick="doSomething()" class="btn btn-primary">Register</button>
And also an input on my form using the 'required' attribute from HTML 5, like this
<input type="text" class="form-control" placeholder="Name" required>
I want to trigger the action onclick only if the input was filled.
I suppose I could do this by checking if the input was filled using jQuery, I was wondering if there is a simpler way
Well, I have actually found a solution, if anyone is going through the same problem, this is how I did it.
Instead of using "onclick" on the button tag I added an "onsubmit" (I had no clue this existed) event inside my form tag with my doSomething function, like this:
<form onsubmit="doSomething()">
The function will only be called if the required inputs are filled, easy as that.
Thanks for the ones who tried to help anyway
Try using oninput event
function doSomething() {
console.log("do stuff")
}
document.querySelector("input").oninput = function() {
this.nextElementSibling.click()
}
<input type="text" class="form-control" placeholder="Name" required>
<button type="submit" onclick="doSomething()" class="btn btn-primary">Register</button>
Well you can always use this https://jsfiddle.net/2Lzo9vfc/26/
HTML
<button type="submit" class="btn btn-primary">Register</button>
<input type="text" class="form-control" placeholder="Name" required>
JS
$('button').click(function() {
var content = $('input').val();
if(content != '') {
alert(content);
}
});
I'm using the following code to reset the form fields.
document.getElementById("form1").reset();//form1 is the form id.
It is not working. I also tried with JQuery. Even JQuery also not working.
$("#reset").click(function(){
$('form1')[0].reset();
});
My html code is
<form name="form1" id="form1" method="post">
<h3>Personal Information</h3>
<h4>Name</h4>
<input type="text" id="fname" name="fname" maxlength=50 size=11/>
<input type="text" id="mname" name="mname" maxlength=15 size=8/>
<input type="text" id="lname" name="lname" maxlength=50 size=11/>
<input type="button" id="reset" value="Reset" onclick="Reset()"/>
</form>
I'm following W3Schools. Here is my Fiddle. Can you please explain the mistake?
The problem here is that you've set the id of your button to "reset". This automatically overwrites the built-in reset method of the form element.
The solution is to use a different id attribute for your button.
So instead of:
<input type="button" id="reset" value="Reset" />
Use something like:
<input type="button" id="reset-button" value="Reset" />
See this fiddle.
Have you simply try this : Reset
<input type="reset" value="Reset"/>
I finally solved my issue. the problem is "id=reset". Because it overrides the reset method . I changed it to id="reset1". Now it is working
If your objective is only to reset the form, you could try this:
<input type="reset" id="reset" value="Reset" onclick="this.form.reset();"/>
Looks like your seleting $('form1') as in an element with a tag name of form1, while i think you actually want to select it by the id:
$('#form1')[0].reset();
With jQuery, the correct selector is :
$('#form1') // Select with ID
OR
$('form[name=form1]') // Select with name
I've updated your fiddle.
Why vanilla js isn't working:
You don't have...
document.getElementById("form1").reset();//form1 is the form id.
...within a reset function. You could do this:
function Reset() {
document.getElementById("form1").reset();//form1 is the form id.
}
Why jQuery isn't working:
You don't need to do all that you're doing. It's much more simple than that. Also, look at your 'form1' selector. You should likely add '#form1' instead. jQuery selects are different than the getElementByID function. As you can probably assume by the name, the getElementByID function is already getting the element by the ID; however with jQuery you have to specify those things. Also, don't really need the onClick attribute with jquery.
Ok, see my new jsfiddle:
http://jsfiddle.net/ty9rU/17/
So i renamed the button to reset_btn
Basicly you had an element called reset inside the form, and that caused the issue.