I am not quite sure what is going wrong here. I am not seeing values logged to the console upon selecting the "submit" event on the form.
Here is my html:
<div>
<form class="submit-film">
<p class="email">Email</p>
<input class="field" id="email" placeholder="youremail#example.com">
<p class="project_link">Link to your project:</p>
<input class="field" id="link" placeholder="https://vimeo.com/myfilm">
<p class="pw">Password to access film:</p>
<input class="field" id="pw" placeholder="(password to access project)">
<p class="number">How many screeners do you want?</p>
<input class="field" id="screenerAmount" placeholder="8 screeners">
<p class="please">Please attach a questionaire if you have one preparred:</p>
<button class="select">Select file</button>
<p class="length">How many minutes is your project?</p>
<input class="field" id="minutes" placeholder="15 minutes">
<p class="questions">Do you have any additional comments or questions?</p>
<input class="field" id="comments" placeholder="(insert comments/questions here)">
<input type="submit" class="button_type" class="button_type:hover" value="submit">
</form>
</div>
</div>
<script src="wescreen.js"></script>
</body>
</html>
Here is the JavaScript:
const form = document.querySelector('.submit-film');
form.addEventListener('.submit', e=> {
e.preventDefault();
console.log(form.email.value);
console.log(form.link.value);
console.log(form.pw.value);
console.log(form.screenerAmount.value);
console.log(form.minutes.value);
console.log(form.comments.value);
});
just changed the class to the id and used getelementbyid hope this helps
<div>
<form id="submit-film">
<p class="email">Email</p>
<input class="field" id="email" placeholder="youremail#example.com">
<p class="project_link">Link to your project:</p>
<input class="field" id="link" placeholder="https://vimeo.com/myfilm">
<p class="pw">Password to access film:</p>
<input class="field" id="pw" placeholder="(password to access project)">
<p class="number">How many screeners do you want?</p>
<input class="field" id="screenerAmount" placeholder="8 screeners">
<p class="please">Please attach a questionaire if you have one preparred:</p>
<button class="select">Select file</button>
<p class="length">How many minutes is your project?</p>
<input class="field" id="minutes" placeholder="15 minutes">
<p class="questions">Do you have any additional comments or questions?</p>
<input class="field" id="comments" placeholder="(insert comments/questions here)">
<input type="submit" class="button_type" class="button_type:hover" value="submit">
</form>
</div>
</div>
<script>
const form = document.getElementById('submit-film');
console.log(form);
form.addEventListener('click', e => {
e.preventDefault();
console.log(form.email.value);
console.log(form.link.value);
console.log(form.pw.value);
console.log(form.screenerAmount.value);
console.log(form.minutes.value);
console.log(form.comments.value);
}); </script>
All your form elements are missing name attribute.
add them and try, something like this
<input class="field" name="email" id="email" placeholder="youremail#example.com">
console.log(form.email.value);
Refer Here for a sample demo
Edit 1:
Also some issue in this line
form.addEventListener('.submit', e=> {
It should be submit
form.addEventListener('submit', e=> {
Here is working fiddle
Related
Please help me, I have a html that contain a link
Sign Up
When I was click it I want to move it right into other html
<div class="containerlogin">
<div class="avatarcontainer avatar">
<img src="avatar.jpg">
</div>
<div class="Loginbox">
<div class="form">
<form class="login-form" name="login">
<p>User Name</p>
<input type="text" placeholder="Enter Your Name"/><br>
<p>Password</p>
<input type="text" placeholder="Enter Your Password"/><br>
<input type="submit" value="Login"><br>
<p class="message">Create an account? Register</p>
</form>
<form class="register-form" name="signup">
<p>User Name</p>
<input type="text" placeholder="Enter Your Name"/><br>
<p>Password</p>
<input type="text" placeholder="Enter Your Password"/><br>
<p>Email</p>
<input type="email" placeholder="Enter Your Email"/><br>
<p>Phone number</p>
<input type="tel" placeholder="Enter Yo Telephone Number"/><br>
<p>Address</p>
<input type="text" placeholder="Enter Your Address"/><br>
<button>Create Account</button>
<p class="message">Alreday Have an account? Login</p>
</form>
</div>
</div>
</div>
Javascript
<script src='https://code.jquery.com/jquery-3.3.1.js'></script>
<script>
$('.message a').click(function(){
$('form').animate({height:"toggle",opacity: "toggle"},"slow");
} )
</script>
Here is the form
https://i.imgur.com/vg27sQo.jpg
https://i.imgur.com/ogEdgSY.jpg
I use the javascript to change to login form to the sign up form but when I put a link like LoginandRegistration/Login_register.html#signup to the link on first html that can't link directly to sign up form, it still link to login form
Please help me, thanks.
The url hash is a link to an id related anchor in the page - You need to add the id to the form - such as:
<form class="register-form" name="signup" id="signup">
That said - I would do it differently - I would display only the form identified by the url hash - rather than showing both and scrolling to the indicated one.
I created dynamic form in which I can add as many authors as I want to.
<form action="uploadtodb.php" target="dummyframe" method="post" name="myform">
<p>
Authors last name: <input type="text" name="authorln[]" size="32" />
Authors first names: <input type="text" name="authorfns[]" size="32" />
</p>
<p id="add_author_button">
<button type="button" onclick="add_author()">Add new author</button>
<button type="button" onclick="remove_author()">Remove last author</button>
</p>
</form>
where function add_author() adds to myform new paragraph denoted below as para
document.myform.insertBefore(para, document.getElementById("add_author_button"));
It works perfectly, but then I wanted to add some styles to it. So I added div:
<form action="uploadtodb.php" target="dummyframe" method="post" name="myform">
<div id="authors">
<p>
Authors last name: <input type="text" name="authorln[]" size="32" />
Authors first names: <input type="text" name="authorfns[]" size="32" />
</p>
<p id="add_author_button">
<button type="button" onclick="add_author()">Add new author</button>
<button type="button" onclick="remove_author()">Remove last author</button>
</p>
</div>
</form>
After such modification buttons do not respond.
Although you can use document.<form name> for forms, you can't do that for arbitrary elements like your authors div. Why not just use getElementById()?
document.getElementById("authors").insertBefore(para, document.getElementById("add_author_button"));
this is my code.jsp file and I've written javascript in it to enable/disable textbox name=uinp when toggling checkbox name=input but it is not working!
<html>
<body>
<form action="compile.jsp" method="get">
Custom Input: <input type="checkbox" name="input" onchange="toggle('input','uinp')"><br><br>
<textarea rows="5" cols="15" name="uinp" style="display: none"></textarea><br><br>
<br><input type="submit" value="Submit">
<input type="reset" value="Cancel">
</form>
<script>
function toggle(chk,txt)
{
if(document.getElementById(chk).checked)
document.getElementById(txt).style.display='';
else
document.getElementById(txt).style.display='none';
}
</script>
</body>
</html>
Please anyone help me with this!
You need to set id for textarea otherwise getElementById() returns null, since there is no element with that id. Also you can pass this context to refer the checkbox.
<form action="compile.jsp" method="get">
Custom Input:
<input type="checkbox" name="input" onchange="toggle(this,'uinp')">
<br>
<br>
<textarea rows="5" cols="15" id="uinp" style="display: none"></textarea>
<br>
<br>
<br>
<input type="submit" value="Submit">
<input type="reset" value="Cancel">
</form>
<script>
function toggle(ele, txt) {
if (ele.checked)
document.getElementById(txt).style.display = '';
else
document.getElementById(txt).style.display = 'none';
}
</script>
I did a website and made a form ,and I have done the most of the validation but I am stuck at one. what I am trying to achieve here is when the the submit button of the form is clicked, a alert message show appear on screen saying thanks'customer name' for feed back and you chose 'radiobutton' and your comment was 'textincommentfield'.for one or another reason validation is not working. Any help would be great and thanks in advance , btw I am new to this.
Code: http://jsfiddle.net/92tSw/
HTML:
<title> Contact</title>
<body>
<div class="container">
<div id="wrap">
<div id="logo">
<img class="p" src="images/logo.png" align="left">
</div>
<img class="d" src="images/title.gif" align="middle">
<div id="menu">
<div id="menu2">
<ul>
<li><a href="homepage.html" ><span>Home</span></a></li>
<li><a href="about.html" ><span>About Us</span></a></li>
<li><a href="clubs.html" ><span>Clubs</span></a></li>
<li><a href="shop.html" ><span>Shop</span></a></li>
<li><a href="contact.html" ><span>Contact Us</span></a></li>
</ul>
</div>
</div>
<form>
<fieldset>
<legend style="font-size:20px; padding-top:20px;">Fill in the form Below to contact Us:</legend>
<p><label for="full name">Full Name:</label>
<input id="full name" type="text" size="40" name="customername" placeholder="Type first and last name" autofocus/></p>
<p><label for="Address">Address:</label>
<input type="text" name="address1" placeholder="Address Line 1" size="42%">
<input type="text" name="address2" placeholder="Address Line 2" size="42%">
<p><label for="Address"> </label>
<input type="text" name="city" placeholder="City/Town" size="20%">
<input type="text" name="postcode" placeholder="Post Code" size="20%"></p>
<p><label for="Telephone No.">Telephone Number:</label>
<input type="text" name="Telephone No." maxlenght="12"placeholder=" Enter Telephone No." size="42%"></p>
<p><label for="email">Email:</label>
<input name="email" type="email" size="25" placeholder="youremail#you.com" /></p>
<legend style="font-size:20px;" >Comments</legend>
<p><label for="quantity"> How great is the website?Choose one<em>*</em> :</label>
<input type="radio" name="myRadio" value="VG" >Very Great
<input type="radio" name="myRadio" value="G" >Great
<input type="radio" name="myRadio" value="NVG">Not Very Great
<input type="radio" name="myRadio" value="U" >Useless
<BR>
<BR>
<BR>
<BR>
<p><label for="comment">Your Message:</label>
<textarea cols="35" rows="5" name="comments" Placeholder="eg. please knock on the dooor, ring the bell etc." >
</textarea></p>
</fieldset>
<fieldset>
<input type="checkbox" name="Terms and Condition"value="Terms and Condition" required> Accept Terms and Condition<br>
<input id="bor" type="reset" value="Reset">
<input id="chor" type="submit" name="button" value="Submit" onclick="getMyForm(this.form)" >
</fieldset>
</div>
</div>
CSS:
form{ padding-top:100px; color:White;}
fieldset { background-color:#980000 ; margin: 1%;}
label { float:left; width:20%; text-align:right;}
legend{font-weight:bold;}
.foot {
padding-top:.75pt;
padding-bottom:.75pt;
padding-right:auto;
padding-left:auto;
width:100%;
}
JS:
function getMyForm(frm)
{
var myinfo = getRadioValue(frm.myRadio);
var customername = document.getElementById("customer").value;
var comment = document.getElementById("comment").value;
alert("Dear"+ customername + ",Thank you very much for your feedback.You have rated our site as" + myinfo +"your comment was Very informative website."+ comment +".");
}
function getRadioValue(radioArray){
var i;
for (i = 0; i < radioArray.length; i++){
if (radioArray[i].checked) return radioArray[i].value;}
return "";
}
It may be better to have the event on the form
<form id="form1" onsubmit="return getMyForm(this)">
To prevent the form from actually submitting, you have to return false; from the javascript method.
To submit the form programmatically in JS
frm.submit();
Or
document.getElementById("form1").submit();
Then return true; from the function under the right conditions to allow the submit to complete.
(I noticed you didn't include the action and method attributes on the form. I assumed this was just for the example.)
http://jsfiddle.net/92tSw/2/
Use JQuery if you are new to javascript.. its much more comfortable:
$(document).ready(function() {
$("#yourmockform").submit(function(e) {
var customername = $(this).find('#fullname').val();
var comment = $(this).find('#comment').val();
var myinfo = $(this).find('[name="myRadio"]:checked').attr('value');
alert("Dear"+ customername + ",Thank you very much for your feedback.You have rated our site as" + myinfo +"your comment was Very informative website."+ comment +".");
return false;
});
});
Is there a way to get a javascript calculator to calculate an answer as a user types instead of having to press a "calculate" button like in this example?
<form name="form" id="form">
<input type="Text" name="weight" size="4"> Weight (in Kilos)
<input type="Text" name="height" size="4"> Height (in Centimeters)<br>
<input type="Text" name="BodyMassIndex" id="BodyMassIndex" size="4"> BMI
<input type="button" style="font-size: 8pt" value="Calculate" onClick="calculateBMI()" name="button">
</form>
Using onblur is an improvement but you still have to click out of the text box to blur the input to get the answer. Like I say, I'd prefer the answer to update in real time. Any suggestions? Thanks!
If the user is typing, you can use the keyup event. So basically, everytime the user types a key, your event handler fires and can update the view/display.
Use onkeyup.
e.g.
<form name="form" id="form">
<input type="Text" name="weight" size="4" onkeyup="calculateBMI()"> Weight (in Kilos)
<input type="Text" name="height" size="4" onkeyup="calculateBMI()"> Height (in Centimeters)<br>
<input type="Text" name="BodyMassIndex" id="BodyMassIndex" size="4"> BMI
<input type="button" style="font-size: 8pt" value="Calculate" onClick="calculateBMI()" name="button">
</form>
jsFiddle example.
EDIT: Changed to onkeyup after finding onkeypress didn't work for me in Chrome.
HTML
<form name="form" id="form">
<input class="bmi_input" type="Text" name="weight" size="4"/> Weight (in Kilos)
<input class="bmi_input" type="Text" name="height" size="4"/> Height (in Centimeters)
<input class="bmi_input" type="Text" name="BodyMassIndex" id="BodyMassIndex" size="4"/> BMI
</form>
Javascript
function calculateBMI() {
console.log("I'm here");
}
var els = document.getElementsByClassName("bmi_input");
var sz = els.length;
for(var n = 0; n < sz; ++n) {
els[n].onkeyup = calculateBMI;
}
http://jsfiddle.net/dbrecht/94hxS/
You could handle the onChange event in each of the input text boxes, calling your calculate function:
<form name="form" id="form">
<input type="Text" name="weight" size="4" onChange="calculateBMI()"> Weight (in Kilos)
<input type="Text" name="height" size="4" onChange="calculateBMI()"> Height (in Centimeters)<br>
<input type="Text" name="BodyMassIndex" id="BodyMassIndex" size="4"> BMI
</form>
Here is a simple example of two user text inputs, which "instantly" calculate the answer based on the called JavaScript function (The functions are also included). In addition, this code provides the option to also use a button (it is currently commented out). Hope this helps!
HTML:
<body>
<div id="form-main">
<div id="form-div">
<form class="form" id="form1" method="post">
<p class="celcius"><h2 style="color:#FFF">Input:</h2>
<input name="celsius" type="text" class="feedback-input" placeholder="Temperature (Celsius)" onkeyup="Conversion()" id="celsius" />
</p>
<hr>
<h2 style="color:#FFF">Result:</h2>
<p class="fahrenheit">
<input name="fahrenheit" type="text" class="feedback-input" id="fahrenheit" onkeyup="Conversion2()" placeholder="Temperature (Fahrenheit)" />
</p>
<!--
<div class="submit">
<input type="button" value="CONVERT" id="button-blue" onClick="Conversion()"/>
<div class="ease"></div>
</div>
-->
</form>
</div>
</body>
JavaScript:
function Conversion() {
var tempCels = parseFloat(document.getElementById('celsius').value);
tempFarh =(tempCels)*(1.8)+(32);
document.getElementById('fahrenheit').value= tempFarh;
}
function Conversion2() {
var tempFarh = parseFloat(document.getElementById('fahrenheit').value);
tempCels =(tempFarh - 32)/(1.8);
document.getElementById('celsius').value= tempCels;
}