Add Radio buttons to Html form using Javascript or Jquery - javascript

In my HTML code I have
<form id="approve">
<input name="myDate" id="monthYearPicker" />
<button type="button"onclick="monthlytimesheets()">Submit</button>
</form>
In my Javascript file I have the following:-
function monthlytimesheets() {
$.post('http://localhost:8000/timer/monthly_timesheet/',
function(returnedData) {
for(i=0;i<returnedData.length;i++) {
for(j=i+1;j<returnedData.length;j++) {
if(returnedData[i]['id']==returnedData[j]['id']) {
returnedData.splice(j,1)
}
}
}
});
Now i want my returnedData[i]['full_name'] rendered on html page as radio buttons. How can i do that. How do you dynamically create radio buttons from JS? Also can i assign values to these radio buttons?

you can create radio buttons easily using jquery as you want. I wrote a code to show how to create radio button dynamically. automatically and when a button clicked.change the inside conditions as your needs. try below code.
<html>
<head></head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<body>
<!-- Example one , add radio button using jquery automatically-->
<h1>Example one , add radio button using jquery automatically</h1>
<form id="approve">
<input name="myDate" id="monthYearPicker" />
<div class="lastone"></div>
</form>
<br><br><hr>
<!-- Example two, add radio button using jquery when button click-->
<h1>Example two, add radio button using jquery when button click-</h1>
<form id="approveone">
<input name="myDate" id="monthYearPicker" />
<div class="lasttwo"></div>
<input type="button" id="addradio" value="submit">
</form>
</body>
<script type="text/javascript">
$(document).ready(function(){
for(var i=0;i<5;i++)
{
var labelname = "radio button"+i;
var value = i;
var create = $('<input type="radio" value="'+value+'"><label>'+labelname+'</label><br>');
$(".lastone").append(create);
}
});
$(document).ready(function(){
$("#addradio").click(function(){
for(var i=0;i<9;i++)
{
var labelname = "radio button"+i;
var value = i;
var create = $('<input type="radio" value="'+value+'"><label>'+labelname+'</label><br>');
$(".lasttwo").append(create);
}
});
});
</script>
</html>

You can create elements dynamically like this
var content = document.createElement('div');
var newElement = document.createElement('input');
newElement.setAttribute('type', 'radio');
newElement.value = "Your value"; ///Here you can assigned value to the radio button
content.appendChild(newElement);

Create a function that returns a radio element. Similar question was already asked.
It can be found here: How do you dynamically create a radio button in Javascript that works in all browsers?
function createRadioElement(name, checked) {
var radioHtml = '<input type="radio" name="' + name + '"';
if ( checked ) {
radioHtml += ' checked="checked"';
}
radioHtml += '/>';
var radioFragment = document.createElement('div');
radioFragment.innerHTML = radioHtml;
return radioFragment.firstChild;
}
Note that this is the snipped from the answer of the posted link, published by Prestaul.
Would have postet it as comment, but need 50rep to comment...

function monthlytimesheets()
{
var name = $('#monthYearPicker').val();
$('#approve').append('<input type="radio" />'+name);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form id="approve">
<input name="myDate" id="monthYearPicker" />
<button type="button"onclick="monthlytimesheets()">Submit</button>
</form>

Related

How to setAttribute for element from radiobutton without submit

I have many buttons. If I click by one of them calls this function:
function addOptions(id)
{
var button = document.getElementById(id); //clicked button
radioDiv = document.querySelector("div.radioDiv");
radioDiv.style.visibility = "visible";
var raz = document.getElementsByName('status'); //get radioButtons
$(".radioDiv").ready(function() {
$('input[type=radio][name=status]').change(function(){
/*Here I'm trying to set attribute to only one button but
here the problem: when I click a few buttons (example: 1st then 2nd, then 3rd)
and on 3rd button I choice the "radioButton" this code is set Attribute for
all of them (3) */
button.setAttribute("status", this.value);
});
});
}
Here index.html. RadioDiv is hidden by default
<div class="layer1">
<div class="radioDiv">
<input type="radio" value="sale" name="status">111
<input type="radio" value="inverted" name="status">222
</div>
</div>
<div class="layer2"></div>
So, I need to set Attribute for button from value of RadioButton.
Use a global variable at the beginning of your js file.
var lastButton;
function addOptions(id) {
$(".radioDiv input[type=radio][name=status]").prop("checked", false);
lastButton = document.getElementById(id); //last clicked button
var status = lastButton.getAttribute("status");
$(".radioDiv input[type=radio][name=status][value='" + status +"']").prop("checked", true);
$(".radioDiv").prop("visible", true);
$('input[type=radio][name=status]').click(function(){
lastButton.setAttribute("status", this.value);
});
}
Where you have the following markup:
<div id="status" class="radioDiv">
<input type="radio" value="sale" name="status">111
<input type="radio" value="inverted" name="status">222
</div>
You can grab both radio buttons as a node list with:
var statusRadioButtons = document.getElementById('status').getElementsByTagName('input');
Then each button is an item in the node list:
statusRadioButtons[0]
statusRadioButtons[1]

Pass a value from button to input value

I am trying to pass a value from a button to an input value with Javascript.
What i have right now is this
this inside a javascript file
var test2 = 5;
appendeddatahtml = '<div class="test1"><button id="btn" type="button" value="' + test2 + '">This is it!</button></div>';
$("#test1").append(appendeddatahtml);
And this is the form above the script
<input type="text" name="latlon" id="latlon" style="display: none; " value="" />
First i tried to make an alert with this code
$(document).ready(function() {
$("#btn").click(function() {
alert("The button was clicked.");
});
});
But it didn't alerted anything.
Is there any way to pass the value from the button to the input value?
Since you are adding it dynamically you need event delegation here. So just add click as below:
$(document).on('click',"#btn",function(){
alert("The button was clicked.");
});
DEMO Here
It seems you have created the button dynamically via code during runtime and for such elements you need to use live or on events
http://api.jquery.com/on/
this one will help
example:
$(document).ready(function() {
$(document).on('click', "#btn", function() {
alert('here');
});
});
working here just remove $(document).ready()
var test2 = 5 ;
appendeddatahtml = '<div class="test1"><button id="btn" type="button" value="'+test2+'">This is it!</button></div>';
$("#test1").append(appendeddatahtml);
$("#btn").click(function(){
alert("The button was clicked.");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="latlon" id="latlon" style="display: none; " value="" />
<div id="test1"></div>
You have not created the element first.
You forgot $();
var test2 = 5 ;
appendeddatahtml = $('<div class="test1"><button id="btn" type="button" value="'+test2+'">This is it!</button></div>');
$("#test1").append(appendeddatahtml);
link to a working example of what you wanted is here
html code
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="latlon" id="latlon" style="display: block; " value="" />
<div id="test1">
</div>
javascript code
$(document).ready(function() {
var test2 = 5 ;
var appendeddatahtml = '<div class="test1"><button id="btn" type="button" value="'+test2+'">This is it!</button></div>';
$("#test1").append(appendeddatahtml);
$("#btn").click(function(){
alert("The button was clicked. "+this.value);
document.getElementById('latlon').value = this.value;
});
});

How to get value from HTML textbox in Javascript

I simply want to have a textbox on my webpage, using the HTML form, and input tags, and be able to have the inputted value be used by the Javascript on the page. My HTML looks like this:
<div id="firstq">
<form id="firstbox">
Choice: <input id="firstinput" type="text" name="choice">
</form>
</div>
and the Javascript I'm trying to use looks like this:
var topMenuChoice = document.getElementById("firstinput");
document.write(topMenuChoice);
}
However, all I see on the webpage, underneath the textbox, is "[object HTMLInputElement]". What do I do to get this to work right?
Thanks
here's an example with change event listener for firing a function when there's a change in form
var div = document.querySelector('div');
var topMenuChoice = document.getElementById("firstinput");
topMenuChoice.addEventListener('change',function(e){
div.innerHTML = e.target.value/***e.target.value is your input***/
var divInner = div.innerHTML;
setTimeout(function(){
document.write(divInner);
},2000)
})
<form id="firstbox">Choice:
<input id="firstinput" type="text" name="choice" value=66>
</form>
<div>look here!!</div>
Check this !
document.write(document.forms['firstbox'].firstinput.value);
OR
var topMenuChoice = document.getElementById("firstinput");
document.write(topMenuChoice.value);
}
See http://www.w3schools.com/jsref/prop_text_value.asp
var htmlInputElementObjet = document.getElementById("firstinput");
document.write(htmlInputElementObjet.value);
<div id="firstq">
<form id="firstbox">
Choice: <input id="firstinput" type="text" name="choice" value="initial value">
</form>
</div>
If you want to get the text typed in your input you need to use the value property of the element. You can also use another HTML tag to show the results (avoid using document.write):
HTML
<div id="firstq">
<form id="firstbox">
Choice: <input id="firstinput" type="text" name="choice">
</form>
<div id="result"></div>
</div>
JS
var topMenuChoice = document.getElementById("firstinput");
document.getElementById("result").innerHTML = topMenuChoice.value;
You have to consider the usage of an event (click, keypress) to control the exactly moment to retrieve the input value.
JS
document.getElementById('firstinput').addEventListener('keypress', function(e) {
if(e.which == 13) { //detect enter key pressed
e.preventDefault();
document.getElementById('result').innerHTML = this.value;
}
});
use the value property
var topMenuChoice = document.getElementById("firstinput");
document.write(topMenuChoice).value;
}

Referencing and changing attributes of HTML button inside container

Below is the HTML code I am playing with. All it does is create an element with two buttons: "Element1" (TitleButton) and "Add". By clicking on "Add" the element is cloned and assigned id="element 2". What I am not able to do is assign value "Element2" for the TitleButton of the cloned element. How can I do it, preferably inside addNode() function? If it is not possible then what are other ways? Thanks
<HTML>
<HEAD>
<TITLE>Dynamically add Textbox, Radio, Button in html Form using JavaScript</TITLE>
<SCRIPT language="javascript">
function addNode(element) {
var adding_element = element.parentNode;
var added_element=adding_element.cloneNode(true);
added_element.setAttribute("id","element 2");
var cont = adding_element.parentNode;
cont.appendChild(added_element);
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<div name="container" id="container">
<div name="element 1" id="element 1">
<input type="button" value= "element1"; name="TitleButton" />
<input type="button" value="Add" name="add[]" onclick="addNode(this)" />
</div>
</div>
</FORM>
</BODY>
</HTML>
You can use firstElementChild property.
var id = 2;
function addNode(element) {
var adding_element = element.parentNode;
var added_element = adding_element.cloneNode(true);
added_element.setAttribute("id", "element" + id);
added_element.firstElementChild.setAttribute('value', 'element ' + id);
var cont = adding_element.parentNode;
cont.appendChild(added_element);
id++;
}
http://jsfiddle.net/SUkYg/1/

Adding new text box using javascript

I have a webpage. There is a button called add. When this add button is clicked then 1 text box must be added. This should happen at client side only.
I want to allow the user to add at most 10 text boxes.
How can I achieve it using javascript?
example:
only 1 text box is displayed
user click add >
2 text boxes displayed
user clicks add >
I also wants to provide a button called "remove" by which the user can remove the extra text box
Can anyone provide me a javascript code for this??
Untested, but this should work (assuming an element with the right id exists);
var add_input = function () {
var count = 0;
return function add_input() {
count++;
if (count >= 10) {
return false;
}
var input = document.createElement('input');
input.name = 'generated_input';
document.getElementbyId('inputs_contained').appendChild(input);
}
}();
add_input();
add_input();
add_input();
A solution using the jQuery framework:
<form>
<ul class="addedfields">
<li><input type="text" name="field[]" class="textbox" />
<input type="button" class="removebutton" value="remove"/></li>
</ul>
<input type="button" class="addbutton" value="add"/>
</form>
The jQuery script code:
$(function(){
$(".addbutton").click(){
if(".addedfields").length < 10){
$(".addedfields").append(
'<li><input type="text" name="field[]" class="textbox" />' +
'<input type="button" class="removebutton" value="remove"/></li>'
);
}
}
// live event will automatically be attached to every new remove button
$(".removebutton").live("click",function(){
$(this).parent().remove();
});
});
Note: I did not test the code.
Edit: changed faulty quotation marks
I hope you are using jQuery.
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript"><!--
$(document).ready(function(){
var counter = 2;
$("#add").click(function () {
if(counter==11){
alert("Too many boxes");
return false;
}
$("#textBoxes").html($("#textBoxes").html() + "<div id='d"+counter+"' ><label for='t2'> Textbox "+counter+"</label><input type='textbox' id='t"+counter+"' > </div>\n");
++counter;
});
$("#remove").click(function () {
if(counter==1){
alert("Can u see any boxes");
return false;
}
--counter;
$("#d"+counter).remove();
});
});
// --></script>
</head><body>
<div id='textBoxes'>
<div id='d1' ><label for="t1"> Textbox 1</label><input type='textbox' id='t1' ></div>
</div>
<input type='button' value='add' id='add'>
<input type='button' value='remove' id='remove'>

Categories

Resources