getting image name from an input field with JavaScript - javascript

please help me out on this little problem. I want to get the name of the image (with NO path and file extension) from an input field before that the form is submitted!
in other words, I want to check if this two name are the same, then proceed, if not, then return false;
My JavaScript code:
var pic = document.getElementById("photo1").value;
if (gyuru == null || gyuru == "" || gyuru == " ")
{
alert("Gyűrűszám nélkül nem lehet adatot lementeni!");
x.focus();
x.style.borderColor="#C30";
return false;
}else if (gyuru != pic){
alert("A kép neve nem egyezik meg a gyűrűszámal!");
return false;
}
And the image input form data:
<input type="file" id="photo1" name="photo1"/>

To get the filename without extension:
pic = pic.split('/').pop().split('\\').pop().replace(/[.][^.]+$/, "");

Related

When using a form that takes to the main website

I am doing a form window before you get in the main website so I tried to make it so that if you don't fill any of the spaces it will open a window alert asking to fill those spaces. Plus I'd like that you would only get to the main website if you fill all the spaces but yet the button on the form window always takes to the main website without requiring filling of the camps.
On the button I wrote this:
<a href="index1.html">
<input type="button" value="Terminar" onclick = location.href='index1.html' >
</a>
and on the js window I wrote the window alert command to each one of the categories:
if(frm.name.value=="" || frm.name.value==null || frm.name.length < 3) {
alert("Please write your first name ")
frm.name.focus();
return false;
It seems you are trying to validate the an input field based on a few criteria.
Your question is not clear. Is this what you are trying to do?
function validateInput() {
if (frm.value == "" || frm.value == null || frm.value.length < 3) {
alert("Please write your first name ")
frm.focus();
} else
location.href = 'index1.html'
}
<input type="text" id="frm" placeholder="Please write your first name" />
<input type="button" value="Terminar" onClick="validateInput()">
You want something like this. In your code the input is wrapped in an a tag. so it will always trigger the event. Adding a button the trigger the event will help.
button = document.getElementById('enter');
input = document.getElementById('fill');
button.onclick = function() {
if (input.value == null || input.value == "" || input.value == " ") {
alert('Please write your first name');
} else {
window.location.href = 'index1.html';
}
};
<input id="fill">
<button id="enter">Enter</button>

How to Convert "Different" Multiple <Button> Functions to Generic Function with <Select>?

How do I make so that the load buttons java functions works from a box with just one button, instead of two separate buttons that call on two "different" JavaScript functions?
In other words clarify the question:
I have two different functions that I need to fire, but from a with one to fire the function I choose in the selection box.
Remember: That the warnings and confirmation should still work, so there for I can not us one and the same load function for both options, because of the different warnings and confirmation.
NOTE: If it is possible without using jquery only with JavaScript that would be great, but if there is a solution with jquery then that will is good too as long as it works.
Here are my JavaScript codes:
function loadFileAsTextUNLIMITED()
{
valid = true;
if(document.fileTextBox.fileLoadName.value == "")
{
alert ("Please attach a file to upload")
valid = false;
}
{
if (confirm("Are you sure you want upload unknown file? Remember that if you uploaded a file that is not a text or a web page source code file, it may hang up your computer or it may destroy the file when you try to save it. So if you chose to upload it this way, you are doing it on your own risk.") )
{
var fileToLoad = document.getElementById("fileToLoad").files[0];
var fileReader = new FileReader();
fileReader.onload = function(fileLoadedEvent)
{
var textFromFileLoaded = fileLoadedEvent.target.result;
document.getElementById("inputTextToSave").value = textFromFileLoaded;
};
fileReader.readAsText(fileToLoad, "UTF-8");
} else {
window.alert("Good, it is advised you use the normal Load Text button and this button only if you have too. ")
}
}
}
function loadFileAsText()
{
valid = true;
if(document.fileTextBox.fileLoadName.value == "")
{
alert ("Please attach a file to upload")
valid = false;
}
{
var fup = document.getElementById('fileToLoad');
var fileName = fup.value;
var ext = fileName.substring(fileName.lastIndexOf('.') + 1);
if(ext == "TXT" || ext == "txt" || ext == "HTML" || ext == "html" || ext == "HTM" || ext == "htm" || ext == "JS" || ext == "js" || ext == "CSS" || ext == "css" || ext == "PHP" || ext == "php" || ext == "DOWNLOAD" || ext == "download")
{
var fileToLoad = document.getElementById("fileToLoad").files[0];
var fileReader = new FileReader();
fileReader.onload = function(fileLoadedEvent)
{
var textFromFileLoaded = fileLoadedEvent.target.result;
document.getElementById("inputTextToSave").value = textFromFileLoaded;
};
fileReader.readAsText(fileToLoad, "UTF-8");
}
else
{
alert("Upload a text or a web page file with source codes");
fup.focus();
return false;
}
}
}
Here are those parts of my HTML codes for it:
<input type="file" id="fileToLoad" name="fileLoadName">
<input type="button" onclick="loadFileAsText();showFileSize();" value=" Load Text / Source Code Files ">
<br>
<input type="button" onclick="loadFileAsTextUNLIMITED();showFileSize();" value=" On your own risk Load Any File Type">
<br>
<textarea id="inputTextToSave" name="inputTextToSave" rows="10" cols="70" placeholder="Type your text here:"></textarea>
To get the value of a select (not sure if it's a radio button, dropdown select or what - off the top of my head i forget the syntax to grab that value, but it's easy to google) check out this post: Get selected value in dropdown list using JavaScript?
Once you have the value you will just write a submit (button click) function that looks something like this:
function uploadDocument() {
var selectValue = //get the select value and store it here
valid = true;
if(document.fileTextBox.fileLoadName.value == ""){
alert ("Please attach a file to upload")
valid = false;
return;
}
if(selectValue === 'unlimited'){
loadFileAsTextUNLIMITED()
} else {
loadFileAsText()
}
}
Hopefully that is a little closer to what you are trying to accomplish

Either Can Not submit(); form in jQuery, or can not check if input fields are filled out

I am having trouble submitting the below form.
For background, I'm trying to "submit" a form for a delivery, and I need to know a) their pickup address, b) their dropoff address, and c) their description. I created <p class="error"> fields if those <input>s are empty (as in "Please enter a description").
If I remove the 'return false;' the form submits no matter what, but if I keep the 'return false;' the jQuery works (i.e. - error message appears) but now the form NEVER submits. Thoughts?
Here's my main.js
var main = function() {
$('form').submit(function() {
var pickup = $('#pickup').val();
if(pickup === "") {
$('.pickup-error').text("Please choose a pickup.");
}
var dropoff = $('#dropoff').val();
if(dropoff === "") {
$('.dropoff-error').text("Please choose a dropoff.");
}
var description = $('#description').val();
if(description === "") {
$('.description-error').text("Please tell us a little about what we're moving.");
}
return false;
});
};
$(document).ready(main);
var main = function () {
$('form').submit(function () {
var pickup = $('#pickup').val();
if (pickup === "") {
$('.pickup-error').text("Please choose a pickup.");
}
var dropoff = $('#dropoff').val();
if (dropoff === "") {
$('.dropoff-error').text("Please choose a dropoff.");
}
var description = $('#description').val();
if (description === "") {
$('.description-error').text("Please tell us a little about what we're moving.");
}
// did not pass validation
if (pickup != "" || dropoff != "" || description != "") {
return false;
}
// passed validation, submit
return true;
});
};
$(document).ready(main);

JavaScript prompt box: how to validate the cancel button (null)

I have some JavaScript that is supposed to act as an example of how you can validate prompt box inputs.
User clicks button, enters a name, the JavaScript validates the input and displays an appropriate message. If the name is fine, it says it is a good name, if you enter a number/symbol it says invalid input (all good so far). However, when the user clicks "cancel" on the prompt box, the message displays "null" is a good name. I have tried to catch this but it doesn't seem to work. How can I make it display a message saying you did not enter a valid name when the user clicks "cancel"?
Here is the JS fiddle for it: http://jsfiddle.net/TurgidWizard/jzzsqu06/
html:
<button onclick="Validation()">Click Me</button>
<p id="vresult"></p>
Javascript:
function Validation() {
document.getElementById("vresult").innerHTML = "";
PetName = prompt("Please enter your favourite pet's name:", "");
var T = Test(PetName);
if (T == false | T == "null") {
document.getElementById("vresult").innerHTML = "You did not enter a valid name!";
} else {
document.getElementById("vresult").innerHTML = PetName + " is a lovely name, good choice!!";
}
}
function Test(str) {
return /^[a-zA-Z]+$/.test(str)
}
Notice how I tried to use "if (T == false | T == "null")" to capture "null" ready for the invalid message.
Your syntax is a bad here:
if (T == false | T == "null")
null shouldn't be a string, or is || not |.
You also want to be checking if PetName is null, not the result of the regex.
The line should look like this:
if (!T || !PetName)
Here's your fiddle: http://jsfiddle.net/jzzsqu06/1/
just check if str is null (as opposed to "null")
function Test(str) {
return (str !== null) && /^[a-zA-Z]+$/.test(str);
}
then simply check
if (T === false) {
prompt will return the entered value if OK or return is pressed, including empty strings "", and null if Cancel is pressed.
Incorporating this line in your if condition deals with the cancel option:
if (T != '' && T != null){
document.getElementById("vresult").innerHTML = "You did not enter a valid name!";
}

Alert box is not working in function while validating username and password using if condition in javascript

function validate() {
var x=document.getElementById("user").value;
var y=document.getElementById("pass").value;
if(x==null || x==" ") {
alert("Enter username");
}
if(y==null || y==" ") {
alert("Enter password");
}
}
As Twonky commented, we need some additional information. The code that you posted is just a function. I suppose you have two inputs and a button? Do you want the alerts to show when a user clicks the button and the input fields are empty? If you do, you need to add this function as a callback to onclick event.
More about the events:
https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events
https://www.bitdegree.org/learn/onclick-javascript
https://www.w3docs.com/snippets/html/how-to-make-button-onclick-in-html.html
Edit: added corrected code and some links for further reading. The mistake was with looking for white space, instead for an empty string (" ", instead of "")
<!doctype html>
<html>
<head>
<title>Welcome</title>
<script>
function validateForm() {
var x=document.getElementById("user").value;
var y=document.getElementById("pass").value;
if(x==="" || x===null) {
alert("Enter username");
};
if(y==="" || y===null) {
alert("Enter password");
};
};
</script>
</head>
<body>
<div>
Username:<input type="text" name="un" id="user"/>
Password:<input type="password" name="ps" id="pass"/>
<input type="submit" onclick="validateForm()"/>
</div>
</body>
</html>
Further articles about these topics:
Stackoveflow thread about whitespace and empty strings
An article about the difference between == and ===
P.S.: I had also changed the element from form to div. Since you are using your function in this case as a security so the user wouldn't submit empty data, this is better for now, since form is submitted with your function call and div isn't. You can check the network tab to see, that the page reloads after the function is executed with form element and is not reloaded with the div element.
if(x === undefined || x === null || x.trim() === '') alert('Please enter a username');
if(y === undefined || y === null || y.trim() === '') alert('Please enter a password');

Categories