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.
Related
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'm doing a webserver with jsp, i'm validating the log in and i found a conflict.
I got:
<form action="Autenticacion" method="POST" class="form">
<input type="text" name="Username" placeholder="Username">
<input type="password" name="Password" placeholder="Password">
<button type="submit" class="loginbutton" name="login" >Login</button>
<button type="submit" id="usuario_nuevo">Nuevo Usuario</button>
</form>
On the button properties, i really need id and name.
id = Because it calls a JS who animates the tag.
name = Because do the validation on webservice.
My code on js is:
$(".loginbutton").click(function(event){
event.preventDefault();
$('form').fadeOut(500);
$('.wrapper').addClass('form-success');});
This calls another css, now i want to fix this, because i need to use both, the first "id" for the animation and then "name" for the validation and send to another jsp page (that already got coded and work).
EDIT 1: Already added the noconflict on Jquery, but only do the validation, not the id animation.
EDIT 2: changed id for class
What is works for me is -
$("#submit").click(function(event){
event.preventDefault();
$('#page').animate({opacity:0},400, function(){
$('form').submit();
});
});
It look like you didn't submit form after fadeout.
Add one more line
"$('form').submit();" after $('.wrapper').addClass('form-success') in your code.
It seems that you could change the id to whatever you want, and instead adding the click event with jQuery('#login').click(), you could use jQuery('.loginButton').click(). Don't forget to add the loginButton class for the button.
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.
How can i simulate a click of the button below? I tried using the javascript
$("#Save").click() but it didnt work. Does this have to do with it not working because there is no id but name?
<input class="button" type="submit" name="Save" value="Save" onclick="OnSubmit(this.form);">
What javascript command in my browser would i use to simulate the click of Save following something like i tried to use?
Much help appreciated! Im new to this
It appears your using jQuery with an id selector (# denotes an id), however the element doesn't have an id. Since the element does have a name attribute, an attribute selector can be used by jQuery. An appropriate selector would be:
$('input[name="Save"]').click(); //Assuming no other elements have name=Save
JS Fiddle: http://jsfiddle.net/pJD3R/
You could also change the markup to work with your existing selector by adding an id attribute:
<input id="Save" class="button" type="submit" name="Save" value="Save" onclick="OnSubmit(this.form);">
$("#Save").click() mean you target an element with the id save but you don't have any id on your input.
<input class="button" id="save" type="submit" name="Save" value="Save" onclick="OnSubmit(this.form);">
$('input[name=Save]').click(function(){
alert('Do Something');
});
I am using the below code using Jquery to set my form fields
$("#frmlogin").reset()
above is the code I use to reset the fields in the below form
<form name='frmlogin' method='POST' id="login_form" style="margin:0 auto; margin-top:50px; width: 40%; height:300px; text-align:center;">
<input class="oFormJumbo oFormMed oInputText" type="text" name="requiredLogin" placeholder="Login Id" AUTOCOMPLETE=OFF />
<div class="cleaner h10"></div>
<input class="oFormJumbo oFormMed oInputText " type="password" value="" name="password" placeholder="Password" AUTOCOMPLETE=OFF onfocus="changetoUpperCase(document.frmlogin.requiredLogin.value);" />
<div class="cleaner h10"></div>
Forgot Password?
<div class="cleaner"></div>
<input style="margin-left:0px; " class="submit_btn float_l" type="button" value="Sign In" name="Sign In" onClick="javascript:func_get_data();"/>
<input style="margin-left: 200px; " class="submit_btn float_r" type="button" value="Reset" id="reset" name="reset" onclick="javascript:Reset()"/>
</form>
For some reason the code is not working. The JavaScript is throwing the following exception
TypeError: $("#frmlogin").reset is not a function
[Break On This Error]
$("#login_form").reset()
Can anyone Tell me Why is it not working?. I have included Jquery.js.
According to Adils suggestion I even tried
*$("#login_form")[0].reset()*
now it gives
TypeError: $("#frmlogin")[0] is undefined
[Break On This Error]
$("#frmlogin")[0].reset()
What is it I am missing?
I tried every code suggested bellow except Amit Agrawal since I want to use Jquery. None wok. I know my code to rest is proffer. There is something that I am missing in the form
Is there some reason you've overlooked the reset input element?
http://jsfiddle.net/BhTv5/
<input type="reset" />
You are using jQuery object to call reset on, use DOM object to call reset, you can convert jQuery object to DOM object using indexer.
Change
$("#login_form").reset()
To
$("#login_form")[0].reset()
Edit based on comments, The other cause of problem is id and name of your reset button. Surprisingly if there is any input with id or name reset then form.reset() function stops working. Change the id and name of reset button and the above code will work.
Live Demo
Change
<input style="margin-left: 200px; " class="submit_btn float_r" type="button" value="Reset" id="reset" name="reset" onclick="javascript:Reset()/>
To
<input style="margin-left: 200px; " class="submit_btn float_r" type="button" value="Reset" id="myreset" name="myreset" />
Binding event with button
$('#myreset').click(function () {
$("#login_form")[0].reset();
});
try this code u won't get the type error.you declared id is wrong you declared the form Name not id try to use the id and reset the form.
document.getElementById("login_form").reset();
(OR)
$("#login_form").reset();
reset is javascript method and needs DOM object
it should be
$("#login_form")[0].reset()
You have to get the name with attribute selector:
$('form[name="frmlogin"]').reset();
or with id:
$('#login_form').reset();
Your code breaks because you are not referencing the form with correct property.
Using JavaScript
document.getElementById("login_form").reset();//Use the id of the form
Using jQuery
("#login_form").reset();