Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
Hi im having trouble figuring out why my button will not work below is my code any help is appreciated. basically once i hit button it should either print story with typed in words or if a spot is left blank story doesnt show and box thats missing characters is surrounded with red border
thanks.
HTML code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css">
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="script.js"></script>
<title>assignment2</title>
</head>
<body>
<div id= "list">
<form id="form1" method="get">
<h3> Fill in the blanks and then press the submit button. </h3>
<label> Adjective
<input type="text" name="adjective"id ="adjective"/>
</label>
<br />
<br />
<label> Adjective
<input type="text" name="adjective2"id ="adjective2"/>
</label>
<br />
<br />
<label> Plural Noun
<input type="text" name="pluralnoun"id ="pluralnoun"/>
</label>
<br />
<br />
<label> Verb (ending in "ing")
<input type="text" name="verb"id ="verb"/>
</label>
<br />
<br />
<label> Edible object
<input type="text" name="edibleobject"id ="edibleobject"/>
</label>
<br />
<br />
<label> Monster
<input type="text" name="monster"id ="monster"/>
</label>
<br />
<br />
<label> Adjective
<input type="text" name="adjective3"id ="adjective3"/>
</label>
<br />
<br />
<label> Monster (again)
<input type="text" name="monster2"id ="monster2"/>
</label>
<br />
<br />
<label> Verb (ending in "ing")
<input type="text" name="verb2"id ="verb2"/>
</label>
<br />
<br />
<button type="submit" id="btn" name="btn"/>View Story</button>
</form>
</div>
<div id="story">
<p> Rain was still lashing the windows, which were now <span class ="adjective"> </span>, but inside all looked bright and cheerful. The firelight glowed over the countless <span class ="adjective2"></span><span class ="pluralnoun"></span> where people sat <span class ="verb"></span>, talking, doing homework or, in the case of Fred and George Weasley, trying to find out what would happen if you fed a <span class ="edibleobject"></span> to a <span class ="monster"></span>. Fred had "rescued" the <span class ="adjective3"></span>, fire-dwelling <span class ="monster2"></span> from a Care of Magical Creatures class and it was now <span class ="verb2"></span> gently on a table surrounded by a knot of curious people.
</p>
</div>
</body>
</html>
Javascript code:
$(document).ready( function() {
$('#story p').hide();
$('#form1').on('submit', function(event)
{
for(var i=0 ;i<$('#form1 input').length; i++) //tyler suggested this to make it easier fo my error borders.
{
$('#form1 input').eq(i).removeclass("errorborder");
}
if (!formFilled()){
event.preventDefault();
}
else
{
$('span.adjective').html($('#form1 input#adjective').val());
$('span.adjective2').html($('#form1 input#adjective2').val());
$('span.pluralnoun').html($('#form1 input#pluralnoun').val());
$('span.verb').html($('#form1 input#verb').val());
$('span.edibleobject').html($('#form1 input#edibleobject').val());
$('span.monster').html($('#form1 input#monster').val());
$('span.adjective3').html($('#form1 input#adjective3').val());
$('span.monster2').html($('#form1 input#monster2').val());
$('span.verb2').html($('#form1 input#verb2').val());
$('#story p').show();
event.preventDefault(); //Tyler informed me this would stop the page from refreshing and deleting the inputted words.
}
});
function formFilled(){
var filled=true;
for(var i=0;i<$('#form1 input').length; i++)
{
if ($('#form1 input').eq(i).val() === "")
{
$('#form1 input').eq(i).addClass("errorborder");
filled=false;
}
}
return filled;
}
});
CSS code:
.errorborder{
border:red, 3px,solid;
}
span {
color: blue;
text-decoration: bold;
font-style: italic;
}
I've used some of the suggestions in comments above, and changed around a few things myself and cleaned up the code. I've made it work...
The primary changes were
change the form method to post
change your <button> to <input type="submit">
please see this jsFiddle to see a working example of your code.
Hope you're able to see your mistakes by comparing with your own code!
Related
I currently have a form that has many different inputs. There are two sets of radio buttons which when selected, display two different divs with input that is required. The issue is that I cannot send the email until all required inputs are provided , even the ones that aren't displayed. I have fixed the first occurrence name=(tick), but don't know how to only display the required message for (requirements) when the div has been shown by selecting the radio button (option).
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/[jquery version here]/jquery.min.js"
language="javascript" type="text/javascript"></script>
<title>Test</title>
<style type="text/css">
body {
padding: 80px;
}
#requirements {
width: 100%;
}
#results {
width: 100%;
}
</style>
<script type="text/javascript">
// DISPLAY HIDDEN TEXT
function hide() {
document.getElementById('hidden').style.display ='none';
}
function show() {
document.getElementById('hidden').style.display = 'block';
}
function hidetext() {
document.getElementById('hiddentwo').style.display = 'none';
}
function showtext() {
document.getElementById('hiddentwo').style.display = 'block';
}
function validateForm(e) {
let inp=[...document.getElementsByName("tick")];
if(!inp.some(i=>i.checked) && chk.checked) {
e.preventDefault();
alert('You must select why you are attending!');
}
}
</script>
</head>
<body>
<h1>Registration Request</h1>
<form id="form" method="post" name="form" enctype="multipart/form-data" action="#">
<p>This course is identified in my Work Plan and Learning Agreement</p>
<input type="radio" name="optionOne" value="yes" onclick="hide()" required> Yes<br>
<input type="radio" id="chk" name="optionOne" value="no" onclick="show()"> No<br>
<div id="optionOne_error" class="val_error"></div>
<p>
<div id="hidden" style="display: none">
<p>I am attending this session because (tick all that apply) </p>
<input type="checkbox" name="tick" value="It will help me develop the skills and knowledge required for my current role" > It will help me develop the skills and knowledge required for my current role<br>
<input type="checkbox" name="tick" value="It will help me develop the skills and knowledge for a possible future role/body of work" > It will help me develop the skills and knowledge for a possible future role/body of work <br>
<input type="checkbox" name="tick" value="t was identified as a need during my performance management discussions"> It was identified as a need during my performance management discussions<br>
<input type="checkbox" name="tick" value="My manager recommended that I attend"> My manager recommended that I attend<br>
<input type="checkbox" name="tick" value="I am interested in the content"> I am interested in the content<br>
<p>
<div id="tick_error" class="val_error"></div>
<p>What would you like to achieve as a result of your attendance? For example, "I would like to learn to write better emails to improve my communication skills." </p>
<input type="text" id="results" name="results">
</div>
<p>Do you require adjustments or additions to the session delivery to support your participation? For example, hearing loop or wheelchair access.</p>
<input type="radio" name="option" value="yes" onclick="showtext()" required> Yes<br>
<input type="radio" name="option" value="no" onclick="hidetext()"> No<br>
<div id="option_error" class="val_error"></div>
<div id="hiddentwo" style="display: none;">
<p>Please provide details of your requirments.</p>
<input type="text" id="requirements" name="requirements" required >
</div>
<p>Please upload any supporting documentation to support your registration request </p>
<div class="browse-button">
<input type="file" name="attachments[]" multiple="multiple"></input>
</div>
<div class="submit-button">
<button type="submit" name="submit" onclick="validateForm(event)" onclick="validateFormTxt(event)" value="submit">Submit</button>
</div>
</form>
<img src="Logo.png" alt="Persuit Technology Logo" width="110" style="margin-top: 20px">
</body>
</html>
Perhaps you could create an "inactive" option which populates on select A when select B is selected. For example:
<input style="display: none;" type="checkbox" name="tick" value="inactive">
And then (pseudo code):
when ( input A :selected ) { activate( input B "inactive" ) }
And vice versa. This should allow you to filter out inactive form fields, and allow users to submit the form despite all visible and invisible fields being required -- without them being able to select an empty option.
I've run into a very strange situation. I have a simple registration form which has an input box to validate a registration. The whole site is essentially one large stylized form. In my mockup (CodePen demo), everything works fine. If the key matches, the input background is shaded green.
HTML
<div id="workshops">
<h1>Upcoming Workshops</h1>
<p>To register for a workshop, fill in your name information and then click on the button next to each session title. Click <b>Register</b> when you're finished.</p>
<div id="form">
<form id="classSignup" class="noSubmit" onsubmit="handleFormSubmit(this)">
<input id="email" name="email" type="hidden" value="<?= Session.getActiveUser().getEmail(); ?>" />
<input id="first" name="first" type="text" onfocus="this.value=''" value="First Name" required />
<input id="last" name="last" type="text" onfocus="this.value=''" value="Last Name" required />
<select id="bldg" name="building"></select>
<input type="submit" value="Register" />
<div id="list">
<div class='row' id='row9'>
<span class='time'>8:00</span>
<span class='date'>6/20/2017</span>
<input type='checkbox' name='wkshp' value='6/20/2017'/>
<span class='title'>
<label for='wkshp'>Demo workshop</label>
</span>
<span class='desc'>This is the class description</span>
<div class='meta'>
<span class='loc'>Admin building</span> |
<span class='cat'>1a, 2b, 2c, 3d</span> |
<span class='type'>Online</span> |
<span class='seats'>Seats: 15</span>
</div>
<label>
<input type='text' class='lock' name='regCode9' value='Code' />
</label>
</div>
</div>
</form>
</div>
</div>
Example Script
$("div.lock").keyup(function() {
if( $(this).val() == "abc") {
$(this).css('background-color', 'rgba(0, 255,0,0.4)')
} else {
$(this).css('background-color', 'white')
}
})
When I move this over to my live site, I can't access the input element with jQuery. I can find it in the DOM and edit CSS in the Inspector, but regardless of what I do, I can't even get an error message to log in the console. I have plenty of other scripts running with no problems on the page.
I'm really at a loss as to why it works in one site but not another. Any ideas are appreciated.
Try delegating the keyup event
$("body").on("keyup","input.lock", function() {
if( $(this).val() == "abc") {
$(this).css('background-color', 'rgba(0, 255,0,0.4)');
} else {
$(this).css('background-color', 'white');
}
});
Please bear with me as I am a beginner when it comes to JavaScript !
I have a dymamic form that pulls information from a database. For each line in the database there is a new row of form fields and the select name incorporates the id from the database - this is all on the same form e.g
<select name="supplier<%=objRst.fields("returnpartid")%>" id="supplier<%=objRst.fields("returnpartid")%>" onchange="validatelink3(<%=objRst.fields("returnpartid")%>)">
<select name="STOCKACTION<%=objRst.fields("returnpartid")%>" id="STOCKACTION<%=objRst.fields("returnpartid")%>" onchange="validatelink3(<%=objRst.fields("returnpartid")%>)">
<select name="stockreason<%=objRst.fields("returnpartid")%>" id="stockreason<%=objRst.fields("returnpartid")%>">
<select name="creditaction<%=objRst.fields("returnpartid")%>" id="creditaction<%=objRst.fields("returnpartid")%>" onchange="validatelink3(<%=objRst.fields("returnpartid")%>)">
<select name="rejectreason<%=objRst.fields("returnpartid")%>" id="rejectreason<%=objRst.fields("returnpartid")%>">
Users are currently missing out data when they are saving the record and I want to prevent this, The save button saves ALL of the records in one go so some lines will be totally blank if they have not yet been processed.
If a user has started to fill in the row but not completed all the information for that record then I need to stop the form submission.
Take a look at Parsley. I use this to validate my login and create user page of my website. Let me know what you think of it!
This is a great javascript tool that utilizes jQuery to validate different forms. Its really nice as you can have it validate several different things such as max and or min text length. It is very easy to implement because all you need to do is add the identifiers to the HTML element.
EDIT:
To avoid a link only answer, here is the code that could be helpful.
<form id="demo-form" data-parsley-validate>
<label for="question">Do you code? *</label>
<p>
<input type="radio" name="question" value="true" required /> Yes
<input type="radio" name="question" value="false" /> No
</p>
<label for="languages">If yes, in which language(s)?</label>
<input type="text" class="form-control" name="languages" data-parsley-conditionalrequired='[" [name=\"question1\"]:checked", "yes"]' data-parsley-validate-if-empty data-parsley-success-class="" data-parsley-conditionalrequired-message="This value is required since you are a programmer!" />
<label for="question">Do you eat dog food? *</label>
<p>
<input type="radio" name="question2" value="yes" required /> Yes
<input type="radio" name="question2" value="no" /> No
</p>
<label for="why">If no, why?</label>
<input type="text" class="form-control" name="why" data-parsley-conditionalrequired='[" [name=\"question2\"]:checked", "no"]' data-parsley-validate-if-empty data-parsley-success-class="" data-parsley-conditionalrequired-message="This value is required since you do not eat dog food!" />
<input type="submit" class="btn btn-default pull-right" />
</form>
<script type="text/javascript">
window.ParsleyConfig = {
validators: {
conditionalrequired: {
fn: function (value, requirements) {
// if requirements[0] value does not meet requirements[1] expectation, field is required
if (requirements[1] == $(requirements[0]).val() && '' == value)
return false;
return true;
},
priority: 32
}
}
};
</script>
<script type="text/javascript" src="../../dist/parsley.js"></script>
EDIT 2:
This is also a simple html file that could do something close to what I think that you want:
<!DOCTYPE html>
<html>
<head>
<style>
.democlass {
color: red;
}
</style>
</head>
<body>
<h1>Hello World</h1>
<input id="test" type="checkbox" id="chk"/>asdfad
<form>
<textarea></textarea>
<button onclick="myFunction()">asd</button>
<form>
<p>If the check box is check the thing is required and if the box is not check then it is not required. So tell your form to only save the rows that have the box checked?</p>
<script>
function myFunction() {
if(document.getElementById("test").checked){
document.getElementsByTagName("textarea")[0].setAttribute("required", "true");
}
else{
document.getElementsByTagName("textarea")[0].removeAttribute("required");
}
}
</script>
</body>
</html>
Hi i'm new to JS and i'm trying to do a BMI(Body/Mass Index) calculator for my website.
What i want to do is when a user clicks to Temizle(Reset) button disabled checkbox should be usable again. I wrote a function which is called "temizle" but it didn't work. I want to know 2 things for the solution.
If there is a easy way to do what i ask, please tell me.
If there is not, how should i change my code?
<html>
<head>
<script language="JavaScript">
<!--
function temizle(){
if(document.getElementById('e').disable=true)
{
document.getElementById('e').disable=false
}
if(document.getElementById('k').disable=true)
{
document.getElementById('k').disable=false
}
}
//-->
</script>
</head>
<body>
<form name="bmiForm">
Cinsiyetiniz: Erkek<input type="checkbox" id="e" name="erkek" onclick="if (this.checked) document.getElementById('k').disabled=true; else document.getElementById('k').disabled = false;"/> Kadın<input type="checkbox" id="k" name="kadın" onclick="if (this.checked) document.getElementById('e').disabled=true; else document.getElementById('e').disabled = false;"/><br />
Kilonuz(kg): <input type="text" name="kilo" size="10" /> Örn:75<br />
Boyunuz(cm): <input type="text" name="boy" size="10" /> Örn:183<br />
<input type="button" value="Kütle/Vücut İndeksi Hesapla" onClick="bmihesaplama()" /><br />
Kütle/Vücut İndeksiniz(BMI): <input type="text" name="bmi" size="10" /><br />
Bunun Anlamı: <input type="text" name="sonuc" size="45" /><br />
<input type="reset" value="Temizle" onclick="temizle()" />
</form>
</body>
</html>
Thx for your help.
You've typed disable as the property, but it's disabled. You need to change that; it's important.
if(document.getElementById('k').disable=true)
Should also be changed; this is an assignment. You could use ==, but you can also just do:
if (document.getElementById('k').disabled)
http://jsfiddle.net/ExplosionPIlls/3AMtG/2/
<form id="form2" name="form2" action="">
<div class="form_colour" id="formcolour"><img src="../Images/red_car.jpg" alt="" width="370" height="124" />This car is
<label for="textarea"></label>
<input name="text_1" type="text" class="form_colour" id="text_1" />
</div>
<p> </p>
<p><img src="../Images/green_car.jpg" width="370" height="124" />This car is
<input name="text_2" type="text" class="form_colour" id="text_2" />
</p>
<p>
<img src="../Images/Yellow_car.jpg" width="370" height="124" />This car is
<input name="text_3" type="text" class="form_colour" id="text_3" maxlength="8" />
</p>
<p>
<input name="confirm" type="button" class="form_colour" id="confirm" value="Confirm" />
</p>
</form>
I currently have the following code for a form which has 3 text fields in them(Code for the form is above this and the Javascript code is below this text).
My aim is based on the input of the text values the user will either get a message and stay on the page or if they are correct get a message and go to another page. I did this previously for drop down lists. and all i did was just change the variables from the drop down list names to the text field names. Now when i run this, nothing happens, do i need to do something more ???
</script>
<script type="text/javascript">
function checkValues() { // this line must be within the script tags
var a = document.form2.text_1.value;
var b = document.form2.text_2.value;
var c = document.form2.text_3.value;
if (a == "red" && b == "green" && c == "yellow"){
alert ("Correct you have won press OK for your Reward!")
window.location.href = "Reward.html"; // redirect to new page
}
else {
alert ("Not right Please try again!");
window.location.href = "Money_Match.html";
}
}
</script>
</script>
you haven't called your script on button click, check working example here http://jsfiddle.net/3CgcH/7/
you need to specify onclick handler for button which will call checkValues function
<input name="confirm" type="button" class="form_colour" id="confirm" value="Confirm" onclick="checkValues();" />
more proper way would be to use addEventListener and attachEvent to register events on html elements