Why is it resetting the form/page? - javascript

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!

Related

Looking to Add a variable inside an HTML link

excuse my ignorance but i would really appreciate your help.
I am new to HTML and i am just trying to add a variable inside an HTML link (ex. http://www.google.com/variable/).
The variable will be text type and i want to replace the text when i type something in a search bar.
(ex. search for "cars" and have www.google.com/cars)
Any thoughts how i can start this?
Much appreciated.
Write following javascript function:
function set(me)
{
var link = 'http://www.google.com/';
document.getElementById('result').value = link + me.value;
}
I have written following HTML lines to illustrate:
<div>
<input type="text" id="test" onkeyup="set(this);" />
<input type="text" id="result" />
</div>
You can call this function on onkeyup or onchange events as required.
Include in your Html.
<form method="get" action="http://www.google.com/search">
<div style="border:1px solid black;padding:4px;width:20em;">
<table border="0" cellpadding="0">
<tr>
<td>
<input type="text" name="q" size="25" maxlength="255" value="" />
<input type="submit" value="Search in Google" />
</td>
</tr>
<tr>
<td align="center" style="font-size:75%">
<input type="checkbox" name="sitesearch" value="rotinadigital.net"/>Only my site<br />
</td>
</tr>
</table>
</div>
</form>
If you want variables in strings then take a look at template literals. You can use them like so:
var variable = document.getElementsByTagName('input')[0].value;
var url = `https://www.google.com/${variable}/`;
// same as 'https://www.google.com/' + variable + '/'
It sounds like you're trying to achieve an effect similar to Google Instant though. Afaik that's just done through standard anchor links and using javascript to (rather radically) manipulate the contents of the page. Actually navigating to a different page would cause a rather noticeable delay.

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

What does %%SOMETEXT%% Mean in PHP form

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.

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.

How to show the form on click of a button?

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>

Categories