I am trying to do something where you can search for flights within a database based on the departure/arrival airport and departure/return flight. There are two radio buttons where you can click whether it's round-trip or one-way. What I am having trouble with is, I want to hide the return flight thing whenever the one-way radio button has been clicked but it won't budge. Everything remains on screen no matter what button is pushed. Here is my code, any help would be appreciated!
<!DOCTYPE html>
<html>
<head>
<script>
function tripCheck(){
if (document.getElementById('round').checked){
document.getElementById('toggle').style.display = 'none';
} else {
document.getElementById('toggle').style.display = 'block';
}
</script>
</head>
<body>
<form action="/post" method="POST">
<!-- Radio Buttons -->
<input type="radio" onclick="javascript:tripCheck();" name="oneround" id="round" checked>Round Trip
<input type="radio" onclick="javascript:tripCheck();" name="oneround" id="oneway">One Way<br>
<!-- Source and Destination Locations -->
<input type="text" name = "source" placeholder="Enter an origin" required/>
<input type="text" name = "dest" placeholder="Enter a Destination" required/><br>
<!-- Departure and Return Dates -->
Departure Date:
<input type="date" id="departure" name="ddate"
value="mm/dd/yyyy" min="2000-01-01" max="2050-01-01" required>
<div id="toggle">Return Date:
<input type="date" id="return" name="rdate"
value="mm/dd/yyyy" min="2000-01-01" max="2050-01-01">
</div>
<!-- Submit Button -->
<br>
<input type="submit" value="Submit">
</form>
</body>
</html>
What it looks like
What I want it to look like
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form action="/post" method="POST">
<!-- Radio Buttons -->
<input type="radio" onchange="tripCheck()" name="oneround" id="round" checked>Round Trip
<input type="radio" onchange="tripCheck()" name="oneround" id="oneway">One Way<br>
<!-- Source and Destination Locations -->
<input type="text" name="source" placeholder="Enter an origin" required/>
<input type="text" name="dest" placeholder="Enter a Destination" required/><br>
<!-- Departure and Return Dates -->
Departure Date:
<input type="date" id="departure" name="ddate" value="mm/dd/yyyy" min="2000-01-01" max="2050-01-01" required>
<div id="toggle">Return Date:
<input type="date" id="return" name="rdate" value="mm/dd/yyyy" min="2000-01-01" max="2050-01-01">
</div>
<!-- Submit Button -->
<br>
<input type="submit" value="Submit">
</form>
<script>
function tripCheck() {
if (!document.getElementById('round').checked) {
document.getElementById('toggle').style.display = 'none';
} else {
document.getElementById('toggle').style.display = 'block';
}
}
</script>
</body>
</html>
You have one error on the above code.
Your function doesn't have the closing bracket. If you want to view javascript error you can right click and go to inspect or simply press f12 and go to console menu.
Try entering this, a function Travel_Control
<script>
function Travel_Control() {
if (!document.getElementById('round').checked) {
document.getElementById('toggle').style.display = 'none';
} else {
document.getElementById('toggle').style.display = 'block';
} }
</script>
In your code one closing bracket is missing in function tripCheck(). and you need to revert the condition in if(!condition) statement. you can replace below function in your code and it will work as expected.
function tripCheck()
{
if (!document.getElementById('round').checked)
{
document.getElementById('toggle').style.display = 'none';
} else
{
document.getElementById('toggle').style.display = 'block';
}
}
Related
As my title suggests, I'm trying to create a form that would take some user input like Name, Age, Gender, Hobbies, Contact details & Photo etc. (basically I'm thinking of making a simple local html based application that would create RESUME), and after taking user input, supposedly after clicking on the submit button it should create a new print window where every entered data should be arranged in a resume like format including photo.
This is what I'm trying for my input page...(ps: it's incomplete!!! most of my script part is just Ctrl+C & Ctrl+V 🤣
<!DOCTYPE html>
<html>
<head>
<title>Resume maker</title>
</head>
<body>
<div id="BMain" class="body">
<h1>Please enter your resume data!</h1>
<form action="#">
<p>Name</p>
<input type"text" id="name" name="name">
<p>Mother's name</p>
<input type"text" id="mName" name="mName">
<p>Father's name</p>
<input type"text" id="fName" name="fName">
<p>Gender</p>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label><br>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label><br>
<div class="container" id"dobPick">
<p>Date of Birth</p>
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker3'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker3').datetimepicker({
format: 'L'
});
});
</script>
</div>
</div>
<label for="myfile">Upload your photo:</label>
<input type="file" id="myPic" name="myPic"><br><br>
<input type="submit">
</form>
After clicking on the submit button I'm expecting a print window with predefined background image like some vector art or some stamp like image or some pattern, well that's post work.
This is how my print window should be looking...
Print window
Any help on this mates..... at this stage scripts looks too messy to me. I'm excited to try this on my browser.
My question is how can I make it happen or rather I say what should I do or add into my input page to get the desired output I'm expecting? My above code was just a conceptual example.
The easiest way to do this would be to add a second div element to the page outside of your form. Once the form is validated and submitted, it can be hidden and the second div can be populated with that information. You can then use CSS media queries (there are print-specific queries) and trigger the print() method in Javascript. You would need to include the following in your html file:
<link rel = "stylesheet" type = "text/css" media = "print" href = "mystyle.css">
Then, if your markup were to look like this:
<div id="resumeform">
<input id="name" type="text" />
<input id="age" type="text" />
<input id="address" type="text" />
<input id="height" type="text" />
<input id="btnSubmit" type="button" value="Submit Info"/>
</div>
<div id="result">
<span id="r_name"></span>
<span id="r_age"></span>
<span id="r_address"></span>
<span id="r_height"></span>
</div>
Your JS could look like this:
var btn = document.getElementById("btnSubmit");
btn.addEventListener("click", btnHandler);
function btnHandler(el){
var resumeform = document.getElementById("resumeform");
var result = document.getElementById("result");
var name = document.getElementById("name");
var age = document.getElementById("age");
var address = document.getElementById("address");
var height = document.getElementById("height");
var r_name = document.getElementById("r_name");
var r_age = document.getElementById("r_age");
var r_address = document.getElementById("r_address");
var r_height = document.getElementById("r_height");
r_name.innerHTML = name.value;
r_age.innerHTML = age.value;
r_address.innerHTML = address.value;
r_height.innerHTML = height.value;
resumeform.style.display = "none";
result.style.display = "block";
window.print();
}
And your CSS could look like this:
#resumeform {
display: block;
}
#result {
display: none;
}
input {
width: 200px;
display: block;
margin: 10px;
}
#media print {
span {
/* Your CSS rules would go here */
}
}
Working Fiddle:
https://jsfiddle.net/9apfwjxz/
I have a view where add to electronic has 2 radiobuttons yes & no. And a submit button.When yes radiobutton is clicked. the quantity textbox should not be empty.but it can be empty if no radiobutton is clicked.This functionality should work when submit button is clicked with yes radiobutton is selected.any ideas?
MY VIEW:
<HTML>
<head>
radio
</head>
<body>
<form id=radio>
Add to electronic <input type="radio" name="yes"onclick="validate(_this)"id="yes"/>Yes<input type="radio" name="yes" id="no" />No<br />
<label>Quantity</label><input type="text"size="25"name="dir"id="dir" required/>
<button type=submit name=insert>insert</button>
</body>
<div>
<script src="~/Scripts/radiobuttonvalidation.js"></script>
</div>
</html>
im new to mvc and javascript help me with javascript code too.and the way i should link it with my view.
Javascript:
function validate(_this) {
if ($(_this).attr('id') == "yes") {
$('#dir').attr('required');
alert("Text Box required");
}
else {
$('#dir').removeAttr('required');
alert("Text Box not required");
}
}
$(function() {
$("#radio").submit(function() {
if ($('#yes').is(':checked') && !$.trim($('#quantity').val())) {
alert("Please input the quantity.");
return false;
}
});
});
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<form id=radio>
Add to electronic <input type="radio" name="yes" id="yes" />Yes<input type="radio" name="yes" id="no" />No<br />
<label>Quantity</label><input type="text" size="25" name="quantity" id="quantity" />
<button type=submit name=insert>insert</button>
</form>
</body>
</html>
HTML Required attribute can be really helpful in such scenarios.
Go through this Link for more information.
Also, Check Jquery Validator if you need more customization.
<HTML>
<head>
radio
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
function validate(_this)
{
if($(_this).attr('id') == "yes")
{
$('#quantity').attr('required');
alert("Text Box required");
}
else
{
$('#quantity').removeAttr('required');
alert("Text Box not required");
}
}
</script>
</head>
<body>
<form id=radio>
Add to electronic
<input type="radio" name="yes" id="yes" onchange="validate(this)"/>Yes
<input type="radio" name="yes" id="no" onchange="validate(this)"/>No<br />
<label>Quantity</label>
<input type="text"size="25" name="quantity"id="quantity" required/>
<button type=submit name=insert>insert</button>
</body>
</html>
I am trying to create a utility that will check if our site is down. The only way to do that is to login and if nothing is returned then the site is down. I've gotten it to the point where it will auto login, but not sure how to get it to check if the login was successful. Anyone got an idea?
<HTML>
<HEAD>
<TITLE>test Login</TITLE>
<script>
function loginForm() {
document.myform.action = "http://example.com";
document.myform.submit();
}
</script>
</HEAD>
<BODY onLoad="loginForm()">
<form action="http://example.com" class="uni-form" method="post" name="_58_fm">
<input name="_58_redirect" type="hidden" value="">
<input id="_58_rememberMe" name="_58_rememberMe" type="hidden" value="false">
<fieldset class="block-labels"> <div class="ctrl-holder">
<label for="_58_login">Email Address</label>
<input name="_58_login" type="text" value="emailaccount#email.com">
</div><div class="ctrl-holder"> <label for="_58_password">Password</label>
<input id="_58_password" name="_58_password" type="password" value="UberSecretPassword">
<span id="_58_passwordCapsLockSpan" style="display: none;">Caps Lock is on.</span>
</div><div class="button-holder">
<input id="submit" type="submit" value="Sign In">
</div></fieldset>
</FORM>
<script>
window.onload = function () {
document.getElementById('submit').click();
}
function checker(){
if(<-- what to put here --> =" You are signed in as "){
// Not sure what to put here
}
}
</script>
</BODY>
</HTML>
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>
How can I display the value of a radio button in a form text box? I'd like it to change when the radio button is clicked.
Here is my radio buttons:
<input type="radio" name="testPassed" id="TestPassed" value="TestPassed">
<input type="radio" name="testFailed" id="TestFailed" value="TestFailed">
The text box:
<textarea name="description" cols="50" rows="5" id="description">Test Status: radioButtonValueHere </textarea>
Many thanks
Well, you can implement an OnClick function with your radio button like this: <input type="radio" name="sports" value="Football" onClick="doSomething();"> or you can have a function to iterate through all the radio buttons on your form and whichever is checked, will fill the textbox with your value:
<form name="myform">
<input type="text" id="txt" />
...
<script type="text/javascript">
for (i=0; i<document.myform.sports.length; i++)
if (document.myform.sports[i].checked==true)
{
t =t +document.myform.sports[i].value
}
}
document.getElementById("txt").value=t
You can write a function that will pass the result value to the text area:
<head>
<script type="text/javascript">
<!--
function writeResult(text){
document.myform.testResultDescription.value = text;
}
//-->
</script>
</head>
<body>
<form name="myform">
<input type="radio" name="testResults" id="TestPassed" value="TestPassed" onclick="writeResult('Test Passed');" />
Test Passed<br />
<input type="radio" name="testResults" id="TestFailed" value="TestFailed" onclick="writeResult('Test Failed');" />
Test Failed<br />
<textarea name="testResultDescription" cols="50" rows="5" id="testResultDescription"></textarea>
</form>
</body>
With jQuery this is really simple
HTML
<div id="radiobuttons">
<--! put here radios buttons -->
</div>
$("#radiobuttons input:radio").click(function() {
$("textbox_id").val($(this).val());
});