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
Related
<body>
<form method="post">
<table>
<tr>
<td>Name</td>
<td><input type="text" name="txtName" placeholder="Enter Your Name Please" /></td>
</tr>
<tr>
<td>Address</td>
<td><input type="text" name="txtAdd" placeholder="Enter Your Address Please" /></td>
</tr>
<tr>
<td colspan="2"><input type="submit" name="btnSave" value="Click to Save Me...." /></td>
</tr>
</table>
</form>
When I Click Submit Button Data are Saved in Database.
But I want When i submit data data will save and print window should be open
Try with this one
For saving data and open print window in one click you have to use AJAX and on success of AJAX you can open print window. For this change your submit button to simple button and call ajax on button click.
OR
After submitting form you can add script tag instead of header function.
<script>
window.open(URL)
</script>
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!
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);
});
Today, I came to a PHP form using some variable/constant names or something else(I really don't know) in the following manner
<tr>
<td align="left">Email Address<br>
<input name="email" type="text" class="cartform" value="%%EMAIL%%" size="25">
%%EMAILREQUIRED%%
</td>
</tr>
<tr>
<td align="left">First Name<br>
<input name="firstname" type="text" class="cartform" value="%%FIRSTNAME%%" size="25" onchange="setshipping()">
%%FIRSTNAMEREQUIRED%%
</td>
</tr>
Can anyone please explain the meaning of
value="%%EMAIL%%"
it displays the previously added email if the session is set, i.e it behaves like we are assigning the value of a variable in value attribute, but where I can find that where this variable/constant is declared/defined ?
Thanks in advance.
I am facing a problem. I have created a form where a user has to input the details about a candidate and also upload his/her image. The problem is that in the form there is a button that says "Click To Add More Candidate", so when this button is clicked the same form should reappear under a division called "moreCandidates". Now to achieve this how should I go about it? Things that are coming in my mind is as follows:
To create a function in javascript that exactly creates the form contents (ie. all the input fields,etc) and onclick of the button "Click To Add More Candidate", call the function under the mentioned division. I can do this as in the past I have done something very similar to this. However, this time I don't think it would be good idea to create the whole form again as I have written a PHP function in between to read a directory.
Or the second thought that I have is to have the form code written in a file called candidate.php and call that file with AJAX. The problem here could be that I might be calling the whole form again (whereas I just want to call the contents of the form like the candidate name, and other stuff)
I very confused at the moment, and help from you all would be greatly appreciated. Thanks in advance.
My html code:
<div id="candidateForm">
<table border="0">
<form method="post" action="formDetails.php" enctype="multipart/form-date">
<tr>
<td>Candidate Name:</td>
<td><input class="candidateForm" type="textbox" name="candidateName" placeholder="Candidate's Name"/></td>
</tr>
<tr>
<td>Enroll No:</td>
<td><input class="candidateForm" type="textbox" name="enrollNumber" placeholder="Enroll No"/></td>
</tr>
<tr>
<td>Candidate Image:</td>
<td><input class="candidateForm" type="file" name="candidateImage" placeholder="Select a Image"/></td>
</tr>
<tr>
<td>Cadidate Post:</td>
<?php
//This is the target folder that is going to be read.
$target="uploads/";
//I an using a directory function in PHP scandir() which scans tha contains of the give directory
$dir=scandir($target);
?>
<td>
<select name="candidatePost">
<option value="candidatePost" select="selected">---------Select---------</option>
<?php
foreach($dir as $folders)
{
//When we loop throung the target folder/directory we get this annoying two folder that is "." and ".." so just to rule then out i m using an IF condition
if($folders!="."&& $folders!="..")
//echo $folders;
echo "<option class='candidateForm' value=$folders>$folders</option>";
}
?>
</select>
</td>
</tr>
<tr>
<td>About The Candidate:</td>
<td><textarea name="aboutCandidate" cols="40" rows="5"></textarea></td>
</tr>
<div id="moreCandidates"> </div>
<tr>
<td></td>
<td><input type="button" value="Click To Add More Candidate"></input> </td>
</tr>
<tr>
<td></td>
<td><input type="submit" name="candidateFormSubmit" value="Press Here To Submit The Details" onclick=""/></td>
</tr>
</form>
</table>
</div>