I have two radio buttons "yes" and "no", on clicking "yes" two text fields should be shown and on clicking "no" another input text field should be generated. Previous input fields should be hidden, how to achieve this in HTML?
<input type="Radio" name="radio2text" value="Radiobutton1" onclick="javascript:radioWithText('yes')" checked="checked" />Yes
<input type="Radio" name="radio2text" value="Radiobutton2" onclick="javascript:radioWithText('no')" />No
<div id="Incident ID" style="display:visible;">
<br>Incident ID :<input type="Text" name="Incident ID"/></br>
</div>
<div id="Description" style="display:visible;">
<br>Description :<input type="Text" name="Description"/></br>
</div>
<div id=" Ref" style="display:visible;">
<br>Ref :<input type="Text" name="Ref"/></br>
</div>
<script type="text/javascript" language="JavaScript">
function radioWithText(d) {
if(d =='yes'){
document.getElementById('Incident ID').style.display = "visible";
document.getElementById('Description').style.display = "visible";
} else (d == 'no') {
document.getElementById('Ref').style.display = "visible";
}
}
</script>
What I need to change here to get the desired output? I'm getting all the input fields for both the radio buttons.
You had a large amount of typos and were not really setting up your code correctly. See the inline comments below for details:
<!DOCTYPE html>
<html>
<head>
<title>Your page title here</title>
<style>
/* This CSS class is applied, by default to all the labels and
textboxes. The JavaScript just adds or removes it as needed. */
.hidden { display:none; }
/* Give each element that uses this class a one line top and bottom margin to
separate it from other elements. */
.row { margin: 1em 0; }
</style>
</head>
<body>
<!-- Radio Buttons should have a value that describes the meaning of the button.
Here, yes and no will do it. Also, don't use inline HTML event attributes, such
as "onclick", ever. It's extremely outdated, can lead to bugs and duplicated
code and doesn't follow modern best-practices. Instead do your event handling
in JavaScript. -->
<input type="Radio" name="radio2text" value="yes" checked="checked">Yes
<input type="Radio" name="radio2text" value="no">No
<!-- All of the following is hidden by default. -->
<!-- Don't include spaces in element ID's -->
<div id="IncidentID" class="hidden row">
<!-- Don't use break tags for arbitrary line feeds. They are for breaking content
at a logical flow. Use CSS for layout. Also, don't use "/" at the end of
an opening tag as this syntax isn't needed and can cuase you to use it in
places where you shouldn't. You had </br> for example, which is incorrect. -->
Incident ID :<input type="Text" name="Incident ID">
</div>
<div id="Description" class="hidden row">
Description :<input type="Text" name="Description">
</div>
<div id="Ref" class="hidden row">
Ref :<input type="Text" name="Ref row">
</div>
<!-- no need for 'type="text/javascript"' and 'language=javascript' -->
<script>
// Get all the radio buttons and put them into an array
var radioButtons = Array.from(document.querySelectorAll("input[type='radio']"));
// Loop through the array of radio buttons
radioButtons.forEach(function(btn){
// Set up a click event handling function for each button
btn.addEventListener("click", radioWithText);
});
// No need to pass any data to this function because the button that triggers it
// ("this" in the code below) can just look at its own HTML value to know what the
// meaning of the button is.
function radioWithText() {
// Get references to the elements the function needs to work with.
var incident = document.getElementById('IncidentID');
var description = document.getElementById('Description');
var ref = document.getElementById('Ref');
if(this.value ==='yes'){
// Instead of gettting/setting inline styles with the style property, just add
// or remove pre-made CSS classes. Since all the textboxes and labels start out
// with the CSS "hidden" class applied to them, it's just a matter of adding that
// class or removing it as necessary.
incident.classList.remove("hidden");
description.classList.remove("hidden");
ref.classList.add("hidden");
} else {
incident.classList.add("hidden");
description.classList.add("hidden");
ref.classList.remove("hidden");
}
}
</script>
</body>
</html>
Related
First, Happy New Year everyone!
I tried make a Form in which the Check Boxes(text)at the start(calling a function, verif()) where they must be in different color than as soon the user input a name the Colors must change in white, also I use the method, setCustomValidity to advice the user to fill the box in a case he(she) forgot but even I don't get the error massage where I must fill the box.
Unfortunately my plan looks has error but I don't know where is that.
<section id="secty">
<h1 id="demo">Managing Form</h1>
<form id="usuer_register" name="usuer_register" method="post">
<table>
<tr><td>Name:</td>
<td><input type="text" id="nam" name="nam"></td></tr>
<tr><td>Last name:</td>
<td><input type="text" id="name1" name="name1"></td></tr>
<tr><td>Age:</td>
<td><input type="text" id="age" name="age"></td></tr>
<tr><td><input type="submit" id="regist" name="regist"></td></tr>
</table>
</form>
</section>
<script>
function start(){
var x=document.getElementById("nam");
var y=document.getElementById("name1");
x.addEventListener("input", verif, false);
y.addEventListener("input", verif, false);
verif();
}
function verif(){
if(x.value=="" && y.value==""){
x.setCustomValidity("Enter Name or Lastname");
x.style.background="#803ADD";
y.style.background="#803ADD";
}
else{
x.setCustomValidity(""); // this restart as default;
x.style.background="#FFFFFF";
y.style.background="#FFFFFF";
}
}
window.addEventListener("load", start, false);
</script>
There's a bunch here to re-work. Check the HTML, CSS, and JavaScript comments in the code below for details, but the main point is that HTML, CSS, and JavaScript already provide most of the functionality you are looking for. If you simply add required to the input elements that cannot be blank, you'll get automatic validity checking and styling.
Check our how HTML5 Form Validity works.
<!DOCTYPE html>
<html>
<head>
<title>Form Validation</title>
<style>
/* CSS provides valid and invalid pseudo-classes which will automatically
kick in based on the validity of form elements */
.validate:valid { background-color:#fff; }
.validate:invalid { background-color:#803ADD; }
label { display:inline-block; width: 5em; }
form > div { margin-bottom: .2em; }
</style>
</head>
<body>
<section>
<h1>Managing Form</h1>
<!-- Don't forget to fill in the action attribute of the form! -->
<form id="usuer_register" name="usuer_register" method="post" action="">
<!-- Do not use tables for layout! They are only for displaying tabular data. -->
<div>
<!-- Use label elements with form fields for better accessibility.
Now, clicking on the label text focuses the field. Also, type="text"
is not required on textboxes as "text" is the default type.
Lastly, just add the "required" attribute for automatic validity checking. -->
<label for="fName">Name: </label><input id="fName" name="fName" class="validate" required>
</div>
<div>
<label for="lName">Last Name: </label><input id="lName" name="lName" class="validate" required>
</div>
<div>
<label for="age">Age: </label><input id="age" name="age">
</div>
<div>
<!-- Submit Buttons shouldn't have a name because they
don't have any data that you would want submitted
along with the form. -->
<input type="submit">
</div>
</form>
</section>
<!-- As long as your script element is the last element
in the body, there is no need for a "start" function
or a "load" event hander. The following code will just
run when it is reached and at this point in the document
all the HTML has been parsed. -->
<script>
// Use meaningfull variable names
let fName = document.getElementById("fName");
let lName = document.getElementById("lName")
// The inputs will be invalid initially, so flag them
// that way from the start
fName.setCustomValidity("Enter First Name");
lName.setCustomValidity("Enter Last Name");
fName.addEventListener("input", verif);
lName.addEventListener("input", verif);
function verif(){
// The field has recieved input, so the required validation
// requirement has been met.
this.setCustomValidity("");
}
</script>
</body>
</html>
Happy New Year!
I have this HTML code
<h3></h3><br></div>
<div style="border-left: solid #0a0a0a 1px; float:left; height: 80%; margin-top:7%; width: 10px;" ></div>
<div style="width: 49%; float: right;">
<h3></h3><br>
<input name="jurors" id="jurors" type="text" style="width: 80%;">
<br>
<input type="button" value="Add" class="addButton">
<br>
<br>
<br>
<br>
<select style="width:80%;height:250px; bottom: 0;" rows="10" multiple="multiple"></select>
And what I wana do with this is to get the value from the Input field by clicking the "add" button and add it to the select box. Also if posible to remove a value from the selct box by clicking on it. I need the select box values as a list to be inserted later into my DB.
I beleve this could be done with jQuery (adding and removing the values) but my knowledge of the language is too basic to do it.
Thank you for your help in advance.
I've come up with a Javascript/JQuery solution. Let's go through it so you know what's going on and if you need to change it you can. I've left your HTML pretty much the same (I've taken away some styling for the sake of development), anyway here it is:
<h3>Adding and removing options</h3>
<input name="jurors" id="jurors" type="text" style="width: 80%;">
<br>
<input type="button" value="Add" class="addButton" onclick="add();" /> <!-- The 'onclick="add();" will call a the Javascript function add() -->
<br />
<select id="mySelect" style="width:80%;height:150px; bottom: 0;" rows="10" multiple="multiple"></select>
Here's the Javascript/JQuery:
function add(){ // Our function called by your button
var x = $("#jurors").val(); // This is a JQuery function that'll get the value of a element with the ID 'jurors' - our textbox
$("#jurors").val(""); // Clear the textbox value
if(x==""){} // If there's nothing in the textbox
else{
$("#mySelect").append("<option value='"+x+"'>"+x+"</option>" ); // Get our select and add a option with the value of our textbox value with the text of the textbox input
}
}
$("#mySelect").change(function(e){ // This is called whenever the user selects a option
var x = e.target.value; // Get the value of the selected option
$("#mySelect option[value='"+x+"']").remove(); // Remove the selected option
});
Here's the link to the JSFiddle: http://jsfiddle.net/gS2jS/2/
When you use this code in your website, there are a few things you'll have to remember; import JQuery, put the code in the body and the code must be placed after the inputs etc required, here's the HTML with the required code:
<html>
<head>
</head>
<body>
<h3>Adding and removing options</h3>
<input name="jurors" id="jurors" type="text" style="width: 80%;">
<br>
<input type="button" value="Add" class="addButton" onclick="add();" /> <!-- The 'onclick="add();" will call a the Javascript function add() -->
<br />
<select id="mySelect" style="width:80%;height:150px; bottom: 0;" rows="10" multiple="multiple"></select>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <!-- Import JQuery -->
<script>
function add(){ // Our function called by your button
var x = $("#jurors").val(); // This is a JQuery function that'll get the value of a element with the ID 'jurors' - our textbox
$("#jurors").val(""); // Clear the textbox value
if(x==""){} // If there's nothing in the textbox
else{
$("#mySelect").append("<option value='"+x+"'>"+x+"</option>" ); // Get our select and add a option with the value of our textbox value with the text of the textbox input
}
}
$("#mySelect").change(function(e){ // This is called whenever the user selects a option
var x = e.target.value; // Get the value of the selected option
$("#mySelect option[value='"+x+"']").remove(); // Remove the selected option
});
</script>
</body>
</html>
That answer was longer than I hoped, sorry about that. Anyways, if you need any help, don't hesitate to leave a comment.
I have 2 radio buttons no one of them checked by default and I want if any one of them checked a Div appear according to what radio button was checked.
( Divs have different content )
and if the selection changed the one which appeared now disappear and the other appear.
and when one of them appear there are another 2 radio to do the same thing for another one div ( one to show and one to hide )
Here what I tried to do
JavaScript
function haitham()
{
if(document.getElementById('s').checked == true)
{
document.getElementById('StudentData').style.display = "block";
document.getElementById('GraduateData').style.display = "none";
}
else if(document.getElementById('g').checked == true)
{
document.getElementById('GraduateData').style.display = "block";
document.getElementById('StudentData').style.display = "none";
}
}
function info()
{
if(document.getElementById('y').checked == true)
{
document.getElementById('MoreInfo').style.display = "block";
}
else if(document.getElementById('n').checked == true)
{
document.getElementById('MoreInfo').style.display = "none";
}
}
HTML
<input class="margin2" id="s" type="radio" name="kind" value="student" onchange="haitham()"
required="required" />Student
<input class="margin2" id="g" type="radio" name="kind" value="graduate" onchange="haitham()"
required="required" />Graduate
<div id="StudentData">
content 1
<input class="margin2" id="y" type="radio" name="info" value="yes" onchange="info()"
required="required" />Student
<input class="margin2" id="n" type="radio" name="info" value="no" onchange="info()"
required="required" />Graduate
</div>
<div id="GraduateData">
content 2
</div>
<div id="MoreInfo">
content 3
</div>
the first work good but the other 2 radio did not work although it should be the same
Thank you ...
Your problem wasn't a javascript or html one, it was actually a CSS issue. Your code was fine, aside from the fact that the values for display are "none" and "block" not "" and "hidden". I modified your code and updated the fiddle.
Here's the link:
http://jsfiddle.net/8JpSQ/4/
Just add a clicked event to the radio buttons, and through a Javascript function change the attribute of the respective DIV to hidden when required. To show it instead, remove the attribute 'hidden'. Also, we'd probably be able to help more if you can post some code showing what you tried/what went wrong. But what I suggested should be the general approach to make what you want happen.
I have no idea what your HTML is, so here's what I have:
$('input[type="checkbox"]').click(function() {
$('.divWrapper > div').eq($(this).index()).fadeOut().siblings().fadeIn();
});
I'm assuming this is your structure:
<form>
<checkbox>
<checkbox>
...
</form>
<div class="divWrapper">
<div>
<div>
...
</div>
Code below contains certain tags in all four.
Image-1
here is the code :
<div style='background-color:YellowGreen;height:20px;width:100%;margin-top:15px;font-weight: bold;'>
Delegate(s) details: </div>
<div style="border:1px solid black;"><br/>
<div id="delegates">
<div id="0">
Name of the Delegate:
<input name='contact_person[]' type='text' size="50" maxlength="50" />
Designation:
<select name='delegate_type_name[]' class='delegate_type'>
<option value='select'>Select</option>
<option value='Main'>Main</option>
</select>
</div><br/>
</div>
<div>
<input type="button" name="more" value="Add More Delegates" id="add_more" />
<br />
<br />
</div>
</div>
In the above code on line 5 where <div id="0"> changes to value 1 in script that I mentioned in "add_more"
And the javascript for "add_more" is given below
jQuery('#add_more').click(function(){
var id = jQuery('#delegates > div:last').attr('id');
var temp = "<div id='"+(parseInt(id)+parseInt('1'))+"'> Name of the Delegate: <input type='text' size='50' maxlength='50' name='contact_person[]' /> Designation:";
temp += "<select name='delegate_type_name[]' class='delegate_type additional_delegate'><option value='select'>Select</option><option value='Additional'>Additional</option><option value='Spouse'>Spouse</option></select> <input type='button' name='rem' value='Remove' id='remove' /></div><br/>";
jQuery('#delegates').append(temp);
});
In the javascript code above I have added a remove button in the temp+ variable
<input type='button' name='rem' value='Remove' id='remove' />
Image-2 shows the remove button every time I click on "Add more Delegates" button.
In the image-2 I click on Add More Delegates button it shows the "remove" button on the right of drop down select list.
I want a jQuery function for remove button, so that when I click on remove it should remove <div id="1"> and also reset content before removing the div tag. Below image-3 is the output that I want when I click on remove button.
code that I tried was this from some reference is this
jQuery('#remove').click(function(){
var id = jQuery('#delegates > div:last').attr('id').remove();
});
but no luck.
Thanks.
You can't give an element id that is only a number, it must be #mydiv1, #mydiv2 or something similar, i.e. beginning with a letter not a number.
For starters your markup is a total mess. There is no way you should be using for layout purposes. Read up on tableless layouts and css.
The first thing you need to change is the id's of your div. An id cannot start with a numeric. I suggest naming the first div delegate0. Secondly, you are adding a remove button on every new row with the same id - all id's on a page should be unique so i suggest you change this to class="remove".
As for your question, it really boils down to needing to add a jQuery handler to the remove buttons using the .livedocs method.
This is as simple as:
jQuery('.remove').live('click',function(){
$(this).closest('div').remove();
});
Also, you need to keep a running counter of the id of the items added, and increment this every time a new row is added.
var nextDelegate = 1;
jQuery('#add_more').click(function(){
... your code here
nextDelegate++;
});
Also, I removed the superfluous <br/> after each div.
Live example: http://jsfiddle.net/cb4xQ/
I'm a web development student and I need some help. I have the code below; How do I make it work only when the form is submitted and not the text field is clicked. I also would like it to get and insert the textField's value in the .thanks Div. Please help me learn.
<script type="text/javascript">
$(document).ready(function(){
$(".quote").click(function(){
$(this).fadeOut(5000);
$(".thanks").fadeIn(6000);
var name = $("#name").val();
$("input").val(text);
});
});
</script>
<style type="text/css">
<!--
.thanks {
display: none;
}
-->
</style>
</head>
<body>
<form action="" method="get" id="quote" class="quote">
<p>
<label>
<input type="text" name="name" id="name" />
</label>
</p>
<p>
<label>
<input type="submit" name="button" id="button" value="Submit" />
</label>
</p>
</form>
<div class="thanks"> $("#name").val(); Thanks for contacting us, we'll get back to you as soon as posible</div><!-- End thanks -->
This is a bit rough and ready but should get you going
$(document).ready(function(){
$("#submitbutton").click(function(){
//fade out the form - provide callback function so fadein occurs once fadeout has finished
$("#theForm").fadeOut(500, function () {
//set the text of the thanks div
$("#thanks").text("Thanks for contacting us " + $("#name").val());
//fade in the new div
$("#thanks").fadeIn(600);
});
});
});
and I changed the html a bit:
<div id="theForm">
<form action="" method="get" id="quote" class="quote">
<p>
<label>
<input type="text" name="name" id="name" />
</label>
</p>
<p>
<label>
<input type="button" name="submitbutton" id="submitbutton" value="Submit" />
</label>
</p>
</form>
</div>
<div id="thanks">Thanks for contacting us, we'll get back to you as soon as posible</div><!-- End thanks -->
There are several things at issue here:
By using $('.quote').click(), you're setting a handler on any click event on any element contained within the <form>. If you want to catch only submit events, you should either set a click handler on the submit button:
// BTW, don't use an id like "button" - it'll cause confusion sooner or later
$('#button').click(function() {
// do stuff
return false; // this will keep the form from actually submitting to the server,
// which would cause a page reload and kill the rest of your JS
});
or, preferably, a submit handler on the form:
// reference by id - it's faster and won't accidentally find multiple elements
$('#quote').submit(function() {
// do stuff
return false; // as above
});
Submit handlers are better because they catch other ways of submitting a form, e.g. hitting Enter in a text input.
Also, in your hidden <div>, you're putting in Javascript in plain text, not in a <script> tag, so that's just going to be visible on the screen. You probably want a placeholder element you can reference:
<div class="thanks">Thanks for contacting us <span id="nameholder"></span>, we'll get back to you as soon as possible</div>
Then you can stick the name into the placeholder:
var name = $("#name").val();
$('#nameholder').html(name);
I don't know what you're trying to do with the line $("input").val(text); - text isn't defined here, so this doesn't really make any sense.