We Keep Coding

JavaScript Alert Displaying Peculiar Value

I have the following text input field (StartDate) in my form:
<form id="Form1" name="form" runat="server" onsubmit="return formValidate(this)">
<table>
<tr>
<td class="label">
Start Date:
</td>
<td>
<input type="text" name="StartDate" maxlength="10" />
</td>
</tr>
</table>
When I type in a value, like "03/26/2017," and alert the StartDate's value, I receive an odd value.
Here is the alert:
function formValidate(formObj)
{
alert(formObj.elements.item('StartDate').value);
}
I am running this in Chrome Version 48.0.2564.116 m. Any help will be appreciated!

formObj.elements.item('StartDate').value
needed to be changed to
formObj.elements["StartDate"].value
My guess is the browser version I'm using is having trouble with the ".item" usage. Changing it as reflected above seems to fix the issue.

onClick didn't work inside form?

Usually I see people use form to create input :
<form action="">
<table>
<tr>
<td><label for="Fname">First Name</label></td>
<td><input type="text" name="Fname" class="form-control" id="fname"></td>
</tr>
<tr>
<td><label for="Lname">Last Name</label></td>
<td><input type="text" name="Lname" class="form-control" id="lname"></td>
</tr>
<tr>
<td><label for="address">address</label></td>
<td><input type="text" name="address" class="form-control" id="address"></td>
</tr>
<tr>
<td><label for="phone">phone</label></td>
<td><input type="text" name="phone" class="form-control" id="phone"></td>
</tr>
<tr>
<td><input type="submit" value="submit" onclick="submit();"></td>
</tr>
</table>
</form>
It's make my submit button didn't work, but as soon as I remove the form tag it's work :
<table>
<tr>
<td><label for="Fname">First Name</label></td>
<td><input type="text" name="Fname" class="form-control" id="fname"></td>
</tr>
<tr>
<td><label for="Lname">Last Name</label></td>
<td><input type="text" name="Lname" class="form-control" id="lname"></td>
</tr>
<tr>
<td><label for="address">address</label></td>
<td><input type="text" name="address" class="form-control" id="address"></td>
</tr>
<tr>
<td><label for="phone">phone</label></td>
<td><input type="text" name="phone" class="form-control" id="phone"></td>
</tr>
<tr>
<td><input type="submit" value="submit" onclick="submit();"></td>
</tr>
</table>
My js only like this :
var Fname= document.getElementById("fname");
var Lname= document.getElementById("lname");
var Address= document.getElementById("address");
var Phone= document.getElementById("phone");
var Result= document.getElementById("result");
function submit(){
var valueFname=Fname.value;
var valueLname=Lname.value;
var valueAddress=Address.value;
var valuePhone=Phone.value;
Result.innerHTML="hello, "+valueFname+" "+valueLname+" good to see you. Your contact number is "+valuePhone+" , and your address "+valueAddress;
}
Why cant I wrap all my input inside form? does it need additional code?

its make my submit button didnt work
No, your submit button is working fine. Therein lies the problem you're seeing, in fact. Your JavaScript code is executing, but the time between showing any output and reloading the page because you've submitted a form is nearly instantaneous.
So your JavaScript works. And your form works. Everything works.
but as soon as i remove the form tag its work
Not quite. When you remove the form tag the form submission no longer works. All you've done is prevent the form from submitting, because you no longer have a form.
why cant i wrap all my input inside form?
You can. But it really depends on what you're trying to do. If you have a form and you want to submit it, use a form element. If you don't want to submit anything as a form, you can leave it out. That's its only purpose.
You can have inputs on the page anywhere you like, they don't need to be in forms. If you just want to interact with them via JavaScript then you can do that without a form element.

Forms are made to make HTTP methods (such as POST or PUT).
So, if you need that input's information take part in a http method, you NEED TO use form.
If your Submit button is made just for internal stuff, don't use form.
A little more information: enter link description here

Form will send the data to the file specified in action and this event is triggered by <input type="submit"/> inside a form.
You can use a <button> tag inside form to achieve what you want.

You need to set the action for your form, it is empty.
Or you can use jQuery

Why is it resetting the form/page?

I am in school for software engineering and not brand new but still a student of the field with a lot to learn and was wondering if someone could tell me if I was just making a newbie mistake. I had a homework assignment in my html and JavaScript class to make a page that someone could enter there name, age and prompt a background color change through JavaScript. I was able to do the assignment but after the alert to tell you your name, age and what color the background was turned to (at this point the background is the color you put in) it resets the form/page. I do not know why it is doing this and neither does anyone else in my class so I was wondering if anyone could tell me why it is resetting and if it is something I did in the code so I can watch out for it in the future.
<!DOCTYPE html>
<html>
<head>
<script>
function getInformation() {
var strColor = prompt("What is your favorite color");
var strFirstName = document.getElementById("txtName").value;
var strYourAge = document.getElementById("txtAge").value;
document.body.style.backgroundColor= strColor;
alert(strFirstName + "Your favorite background color was applied to the backgrond of the page. \n\n and your age is" + strYourAge);
}
</script>
</head>
<body>
<form>
<table>
<tr>
<td><label>First Name</label>
</tr>
<tr>
<td><input id="txtName" type="text" name="Name" required></td>
</tr>
<tr>
<td><label>Your Age</label></td>
</tr>
<tr>
<td><input id="txtAge" type="number" name="Age" required></td>
</tr>
<tr>
<td><button onclick="getInformation()">Submit</button></td>
</tr>
</table>
</form>
</body>
</html>

This is because when you click the Submit button in your form, it submits the form. Since (from what I can tell by your code) you don't want to actually submit a form, all you need to do is remove the <form></form> tag.
Consider the following revision:
<!DOCTYPE html>
<html>
<head>
<script>
function getInformation() {
var strColor = prompt("What is your favorite color");
var strFirstName = document.getElementById("txtName").value;
var strYourAge = document.getElementById("txtAge").value;
document.body.style.backgroundColor= strColor;
alert(strFirstName + "Your favorite background color was applied to the backgrond of the page. \n\n and your age is" + strYourAge);
}
</script>
</head>
<body>
<!-- <form> was removed -->
<table>
<tr>
<td><label>First Name</label>
</tr>
<tr>
<td><input id="txtName" type="text" name="Name" required></td>
</tr>
<tr>
<td><label>Your Age</label></td>
</tr>
<tr>
<td><input id="txtAge" type="number" name="Age" required></td>
</tr>
<tr>
<td><button onclick="getInformation()">Submit</button></td>
</tr>
</table>
</body>
</html>
Note:
If you want to learn more about the form tag, feel free to read more about it here.
A form tag should have:
action - Where you want to send the form data to.
method - How you want to send that data.
Consider this example:
<form action="demo_form.asp" method="get">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="Submit">
</form>

Add type="button" to this line to achieve no refresh.
<td><button type="button" onclick="getInformation()">Submit</button></td>
Reference this question for more info:
prevent refresh of page when button inside form clicked

Hi everyone thank you for all the help! I tried both ways and ended up going with Pete R. With type button If I do need the form in the future I would still be in the same predicament of it refreshing. With the type button I can still keep the form for later modification and not have the problem of the refresh.
To Nick Z I appreciate the link to the information and defiantly will use it. I'm still pretty new to the field and am always looking for good references for information to help me.
Again thank you all for your help!

How to open specific folder in <input type='file'>

I want to upload images in my project from specific folder. when i click on choose file button it goes to default folder or last opened folder but i want to do it always open some specific folder like documents/all images/animals images/.
<table>
<tr>
<td>First Name:</td>
<td><input type="text" name="firstName" size="10"
required="required" /></td>
</tr>
<tr>
<td>Last Name:</td>
<td><input type="text" name="lastName" size="10"
required="required" /></td>
</tr>
<tr>
<td>Choose Image:</td>
<td><input type="file" name="photo" size="10"
required="required" /></td>
</tr>
<tr>
<td><input type="submit" value="Submit"></td>
<td><input type="reset" value="Clear" /></td>
</tr>
</table>
someone tell me solution for this.

Actually that's impossible because of security reason with a pure HTML / Javascript. I don't if it's possible if you use ActiveX or Java Applet but those technologies are outdated.

Now you can do that, but only if you're using "Chrome" which supports these last two attributes:
<input type="file" id="folder-opener" webkitdirectory multiple/>
This worked well for me, though keep in mind that now this input tag won't let you select single files. Just directories.
If that's ok for you, then you'll be able to list all files in the selected directory on the back-end side by passing the absolute path:
document.getElementById('folder-opener').addEventListener('change', function(event) {
// Selected folder's absolute path:
console.log(event.target.files[0].path);
});

Save user input in Array

I am a true beginner in html/js/jquery.
I am trying to save user input into an array, then later I want to write all that information from that array into an xml file.
My Problem is that my form consists of multiple Jobs which will all have the same input fields.
This is a short example of the first job:
<form>
<table class="wrapper">
<tr>
<td style="text-align: left">First Digit:
<div> <input id="fDigit" type="text" name="Job1[]" /></td>
<td style="text-align: left">System:
<div> <input id="system" type="text" name="Job1[]" /></td>
<td style="text-align: left">SAP Modul:
<div> <input id="sapModul" type="text" name="Job1[]" /></td>
</tr>
<tr>
<td style="text-align: left">Country:
<div> <input id="country" type="text" name="Job1[]" /></td>
<td style="text-align: left">Duration:
<div> <input id="duration" type="text" name="Job1[]" /></td>
<td style="text-align: left">Step Number:
<div> <input id="stepNumber" type="text" name="Job1[]" /></td>
</tr>
<tr>
<td style="text-align: left">Optional Text:
<div>
<textarea align ="left" id ="optionalText" name="Job1[]" cols="20" rows="2"> </textarea>
</div>
</td>
</tr>
</table>
</form>
I have many more of those in my Script.
What I want to do now is saving the Information of every Job into an Array, meaning Job1[]: with the user input of every field which is shown above , Job2[]: different user input but similar input field with the same name.
There might be an easier solution to do this but I just can't figure one out.
Sorry if this is a too stupid issue but i tried to find solutions for ages and could not find one which helped me out.
Thanks in advance!

For a beginner, the easiest solution might be to use a component that does form serialization for you. Your form should have a name (attribute), and an id is probably going to be useful too.
I've found form2js to be very practical, and it can manage collecting similarly named fields into an array.
I also made a small fiddle that shows one way to collect the info yourself, for example like this.
var job1 = [];
$('[name="Job1[]"]').each(function(index, inputField) {
job1.push($(inputField).val());
});
console.log(job1);

you don't need to use multiple array names because the javascript is client side
just use Job1[]

I suggest you organize your data as a JSON object, for example
[{"Country": a, jobs:[your array]},{"Country":b, jobs:[your array]}]
and to insert a value to array, you can use: your_array.push(value)
Hope this help.

You can use a two dimensional array in your inputs name with the first index being the row index and the second the column name, something like Jobs[0][Country]. Then in the end you will have all your data in one array.
Also, if you're repeating the markup you posted for every job, avoid using id attributes on your inputs as this would produce invalid markup. Id attributes must be unique in a HTML page, use classes instead.