Prior to submitting a form, I would like to check if a file has been attached and pop up a warning message saying that a file needs to be attached if it hasn't been. I was wondering how to accomplish this using JavaScript or Prototype or JQuery etc?
Assuming you are using an <input type="file"> field, you can simply check if the element's value is a non-empty string:
<form method="POST">
<input type="file" id="attachment" />
<input type="button" onClick="checkAttachment();" value="Send" />
</form>
<script type="text/javascript">
function checkAttachment() {
if (document.getElementById('attachment').value !== '') {
alert('File Attached');
}
else {
alert('No File Attached');
}
}
</script>
Related
i have a problem with my script, the only problem is outputting error.
the error just bricks after submit_button. so that means when the fields are empty it has to output error and it works but the problem the output just bricks
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<form method="post">
<input type="text" id="text_field1" />
<input type="text" id="text_field2">
<button type="submit" id="submit_button">Submit</button>
<button type="submit">Submit</button>
<p id="error_resp"></p>
</form>
<script>
$("#submit_button").click(function() {
if ($("#text_field1").val() == "")
$('#error_resp').text('please fill the required field');
else if ($("#text_field2").val() == "")
$('#error_resp').text('please fill the required field');
else
return true;
});
</script>
There are few issues in your form HTML.
You are not using preventDefault() method which will prevent the default behavior of a form so the inout can be validated.
Also, you do not need check empty input like == "" You can just ! to say if my input is empty then show error message
You are displaying errors in error_resp ideally use .html to clear the previous message and replace with new message
You can read more about .html here
Run snippet to below to see it working.
$("#submit_button").click(function(e) {
e.preventDefault();
if (!$("#text_field1").val()) {
$('#error_resp').html('please fill the first required field');
} else if (!$("#text_field2").val()) {
$('#error_resp').html('please fill the second required field');
} else {
$('#myForm').submit();
console.log('All looking good. Form will submit now')
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post" id="myForm" action="filename.php">
<input type="text" id="text_field1" />
<input type="text" id="text_field2">
<button type="submit" id="submit_button">Submit</button>
<p id="error_resp"></p>
</form>
Here is my form:
<form id="myForm">
<input id="htmlString" type="text" name="htmlField" ><br>
<input type="Submit" value="Submit" >
</form>
And need to fill it from console.
just to use it in my app,
Will inject javascript with data to local html file.
I tried to make the form without a submit button like so:
<body>
<form id="myForm">
<input id="htmlString" type="text" name="htmlField" ><br>
</form>
<script>
htmlString.oninput = function(){
///do some stuff
}
</script>
</body>
Expecting that :
document.getElementById('htmlString').value="moo" ;
It automatically submit the form, because here oninput used.
But it just stayed filled with inputs and not proceed further.
Tried with other solution:
form = document.getElementById("myForm")
form.submit()
But it just refreshed the page and not submitted the form.
The need is just one filed without else, and inject my string to it with javascript to run functions embedded in the html.
Try making the input button hidden.
<body>
<form id="myForm">
<input id="htmlString" type="text" name="htmlField" ><br>
<input type="Submit" value="Submit" style="display: none" >
</form>
<button onclick="simulateConsole()">Try it</button>
<script>
htmlString.oninput = function(){
if(this.value === "moo") {
myForm.submit();
}
}
// This event will be triggered even if you use console
htmlString.onsubmit = function(){
if(this.value === "moo") {
// do something onSubmit
}
}
function simulateConsole() {
// you can simulate this in console
htmlString.value = "moo";
myForm.submit();
}
</script>
</body>
I hope it helps.
You need to supply an action to the form, otherwise it will just reload the page.
See more here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form
I'm trying to check if the textbox is empty for my form. However, whenever I try to hit submit instead of an alert box message, telling me Firstname is empty I get "Please fill out filled".
('#submit').click(function() {
if ($('#firstname').val() == '') {
alert('Firstname is empty');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="elem" autocomplete="on">
First Name:
<br>
<input type="text" name="firstname" id="firstname" required placeholder="Enter the first name" pattern="[A-Za-z\-]+" maxlength="25"><br>
<input type="submit" id="submit" value="Submit" />
</form>
Firstly I'm assuming that the missing $ is just a typo in the question, as you state that you see the validation message appear.
The reason you're seeing the 'Please fill out this field' notification is because you've used the required attribute on the field. If you want to validate the form manually then remove that attribute. You will also need to hook to the submit event of the form, not the click of the button and prevent the form submission if the validation fails, something like this:
$('#elem').submit(function(e) {
if ($('#firstname').val().trim() == '') {
e.preventDefault();
alert('Firstname is empty');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="elem" autocomplete="on">
First Name:
<br>
<input type="text" name="firstname" id="firstname" placeholder="Enter the first name" pattern="[A-Za-z\-]+" maxlength="25"><br>
<input type="submit" id="submit" value="Submit" />
</form>
Personally I'd suggest you use the required attribute as it saves all of the above needless JS code - unless you need more complex logic than just checking all required fields have been given values.
Because you have the required property set.It is giving you Please fill out field validation as the error message.It is the validation that HTML5 is performing.
For this please make one function like :
function Checktext()
{
if ($('#firstname').val() == '') {
alert('Firstname is empty');
return false;
}
else
{
return true;
}
}
now call this function on submit button click like :
<input type="submit" id="submit" value="Submit" onclick="return check();" />
I have this application with a file input and a submit input. I want the submit input to be disabled until the file input has a value. How do I check this kind of information with JS? I tried adding a "required" to the file input, but it still doesn't work...
Should I just use PHP and check if $_FILE isset()?
Should I just use PHP and check if $_FILE isset()?
It is good practice to ensure that the server gets what is expected. So yes, additional checks for a file and eventual mischiefs should also be done on the server.
Here is an example of what you want on the client-side.
JSFiddle
HTML
<form name="fileForm" onchange="changed()">
<input type="file" name="image">
<input type="submit" name="submit" disabled>
</form>
JavaScript
function changed() {
var form = document.forms.fileForm;
if(form.image.value.length > 0) {
form.submit.removeAttribute("disabled");
} else {
form.submit.setAttribute("disabled", "");
}
}
Try this
<form name="form1">
<input type="file" name="image" id="file_upload">
<input type="submit" name="submit" id="btn_submit" >
</form>
jQuery(document).ready(function()
{
/*To disable the button on load*/
jQuery("#btn_submit").attr('disabled','disabled');
jQuery("#file_upload").change(function()
{
var file_value= jQuery(this).val();
if(jQuery(this).val() === '')
{
jQuery("#btn_submit").attr('disabled','disabled');
}
else
{
jQuery("#btn_submit").removeAttr('disabled');
}
});
});
This is my code for my login page:
http://pastebin.com/RGVrW0Hi
It's the field right under the body tag.
All the way down there is a scipt tag with my function. I'm trying to check if the user has typed something inside the "Navn" field, if not it should return false.
I have tried it in a smaller page that look like this:
http://pastebin.com/d1vzyDvd
Can anyone point me in the right direction?
If you want to get any field by name use
var value = document.getElementsByName("navn")[0].value;
// By Id
var value = document.getElementsById("navn").value;
Use document.getElementsByName("navn").value[0] instead of document.famular.navn.value to get the value of an input field by its name.
function validerform125() {
if (document.getElementsByName("navn")[0].value == "") {
alert("NEEEJ!!!");
return false;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<form name="famular" action="vanillahost.html" method="post" onsubmit="return validerform125()">
Navn
<input name="navn" type="text">
<br/>Email
<input name="email" type="email">
<br/>
<div>
<input type="submit" name="send" value="send">
</div>
</form>
You add [0] to document.getElementsByName("navn") because getElementsByName returns a NodeList object which represents a collection of elements with the specified name (In your case: "Navn"). By adding [0] you are basically returning the first element found.
better if you can include jquery in your html, will give you a nicer interface to interact with html elements.
In java-script you can try the following code
<body>
<div>
<form name="famular" action="vanillahost.html" method="post" onsubmit="return validerform125()">
Navn <input name="navn" type="text"><br/>
Email <input name="email" type="email"><br/>
<div>
<input type="submit" name="send" value="send">
</div>
</form>
</div>
</body>
<script>
function validerform125() {
var x = document.forms["famular"]["navn"].value;
if (x == null || x == "") {
alert("Name must be filled out");
return false;
}
}
</script>