We Keep Coding

HTML5 required attribute trigger action with jQuery

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);
}
});

Javascript Clear fields Function Not Working?

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.

Form resetting is not working

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.

Clearing file input box in Internet Explorer

I have an file upload box and a clear button on my page. When I press the clear button, I want the text in the file upload box to be cleared.
The following works in Firefox, but doesn't in IE (the text stays there). Is there a workaround for this?
$("#clear").click( function() {
$("#attachment").val("");
//document.myform.attachment.value = "";
})
HTML:
<form name="myform">
<input type="file" name="attachment" id="attachment" />
</form>
<br /><button id="clear">Clear Attachment</button>
jsFiddle

One solution I've found is simply doing:
document.getElementById('myUploadField').parentNode.innerHTML = document.getElementById('myUploadField').parentNode.innerHTML;
Seems like it shouldn't work, but it does.

This solution is more elegant than cloning the input element. You wrap a <form> around the element, call reset on the form, then remove the form using unwrap(). Unlike the clone() solutions above, you end up with the same element at the end (including custom properties that were set on it).
Tested and working in Opera, Firefox, Safari, Chrome and IE6+. Also works on other types of form elements, with the exception of type="hidden".
http://jsfiddle.net/rPaZQ/
function reset(e) {
e.wrap('<form>').closest('form').get(0).reset();
e.unwrap();
}​

It's readonly in IE8 onwards, so you can't clear it. The simplest way around this security feature is to replace the element with a copy.
Edit Found a previous answer to this that suggests the same approach! Clearing <input type='file' /> using jQuery

This worked for me:
$("input[type='file']").replaceWith($("input[type='file']").clone(true));

use simple javascript:
formname.reset();
See the Demo: http://jsfiddle.net/rathoreahsan/YEeGR/

Try to use the below method to clear the input file.
Include this script:
<script>
function clearFileInputField(tagId) {
document.getElementById(tagId).innerHTML =
document.getElementById(tagId).innerHTML;
}
</script>
Change HTML to this:
<div id="uploadFile_div">
<input type="file" class="fieldMoz" id="uploadFile" onkeydown="return false;" size="40" name="uploadFile"/>
</div>
<a onclick="clearFileInputField('uploadFile_div')" href="javascript:noAction();">Clear</a>`

Use the old-fashioned <input type="reset" value="clear this">

Problem Clearing TextBox in JavaScript

I am new to this, but I am trying to clear whatever content is in a text box. The code I have in the body section is as follows:
<body>
<FORM NAME = "frmOne" method=POST>
Name: <INPUT TYPE=text NAME=name onFocus="this.form.name.value=''" /><br />
<input type="button" value="Click To Clear" onClick="clearForm(this.form)">
</FORM>
<SCRIPT LANGUAGE="JAVASCRIPT">
function clearForm(form){
form.name.value = "";
</SCRIPT>
</body>
Problem is, clicking the button does nothing and anything in the Name box remains there! Can anyone suggest why? I am probably making a very basic mistake.
Thanks,
Stuart

It's because you have a syntax error, you are missing a }. It should be:
function clearForm(form){
form.name.value = "";
} // <- you have to close the function
Then it works.
Tools like Chrome developer tools or Firebug for Firefox help you to detect such errors. For example, your code results in the following error:
Uncaught SyntaxError: Unexpected end of input

Instead of using name, its good practise to use ids.
So for your input, use:
<INPUT TYPE=text NAME=name ID="myFormTextbox" onFocus="this.value=''" /><br />
And for your js:
function clearForm(form) {
document.getElementById("myFormTextbox").value = "";
}