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;
});
});
Related
I'm trying to show save button only if input gets value,
The issue is if i use append for each input i get 1 button printed, what I'm looking for is regardless of input length get the button only once.
The important is input not be empty that's all.
Code
<input class="text_dec form-control" type="text" onkeypress="myFunction()" name="text_dec[]" id="'+ textFieldsCount.toString() +'">
function myFunction() {
$('#moreless').append("button here");
}
any idea?
Instead of keypress, use keyup, this will call the listener just when the key is released, so you will have the correct length of the input value. With that, you can check if the button must be displayed or not.
Also, I would have another check to make sure that input have some value on it to save when clicked.
Like below, take a look:
$(function(){
$('.myInput').on('keyup', function(){
var btnElem = $('.myButton');
var charLength = this.value.length;
if (charLength > 0){
btnElem.show();
}else {
btnElem.hide();
}
});
$(".myButton").on("click", function(){
if ($('.myInput').val().trim().length < 1){
alert("Input is empty")
return;
}
//Do your code
});
});
.myButton {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<input class="myInput" type="text" value="">
<input class="myButton" type="button" value="Save Button" />
</body>
EDIT
Now, if you really need to make as you were doing before (I don't consider it a best practice and also recommend you to rethink if you really wanna go through this) here goes a code that will help you. Click to show.
Here I added the functions and created the button element (if necessary) then append it to DOM just when the input have some value length.
function myFunction(input){
var btnElem = $(".mySaveButton")[0];
if (!btnElem){
btnElem = document.createElement("button");
btnElem.textContent = "Save Button";
btnElem.onclick = btnClicked;
btnElem.className = "mySaveButton";
}
var charLength = input.value.length;
if (charLength > 0){
document.body.append(btnElem);
}else {
btnElem.remove();
}
};
function btnClicked(){
if ($('.myInput').val().trim().length < 1){
alert("Input is empty")
return;
}
//Do your code
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<input class="myInput" type="text" value="" onkeyup="myFunction(this)">
</body>
So I think you just want a button to show to the user once they type something in the text box. If that's the case, then you don't really want to append a button every time they press a key in the box.
Instead I'd make a button and set its css to display none and then when they keydown in the text box change the button's css to display block.
Something like this: http://jsfiddle.net/wug1bmse/10/
<body>
<input type="text">
<input class="myButton" type="button" value="button text" />
</body>
.myButton {
display: none;
}
$(function(){
$('input').on('keypress',function(){
var htmlElement= $('.myButton');
htmlElement.css('display', 'block');
});
});
Hiding the element with a class might be easier:
.btn-hidden {
display: none;
}
<input id="save-button" class="btn-hidden" type="button" value="save" />
function showSave() {
$('#save-button').removeClass('btn-hidden');
}
function hideSave() {
$('#save-button').addClass('btn-hidden');
}
I am trying to create a form which when clicked makes an XMLHttpRequest and writes information on the page.
Here's the HTML code.
<form>
<input id="myStock" type="text"/>
<input id="iSubmit" type="submit" value="Show Me Data"/>
<input type="reset" value="Reset Me" />
</form>
<div id="demo"></div>
Here's the JS code:
var isubmit = document.getElementsByTagName("form")
[0].querySelector('input[type="submit"]');
isubmit.addEventListener("click", myFunction);
function myFunction() {
//some code here
}
var mystock = document.getElementsByTagName("form")
[0].querySelector('input[type="text"]').value.trim();
var urlext = mystock;
urlext +=
"&reportType=is&period=12&dataType=A&order=asc&columnYear=5&number=3";
var url = "https://financials.morningstar.com/ajax/ReportProcess4CSV.html?
t=";
alert(url + urlext);
xhttp.open("GET", url + urlext, true);
xhttp.send();
}
The problem is, when I am deleting the <form> tag on the HTML page and deleting the getElementsByTagName("form")[0] on the JS code, it's working fine.
However, with the form element intact, it's not returning any information.
Please help.
You can take a look at this JSfiddle I made. I dont know if it helps you out though.
$.POST( url+urltext, function( data ) {
$('#demo').html(data);
});
Your problem it's the input submit like #CBroe pointed out. You can prevent using the e.preventDefault();.
Or you can use do this:
$('#iSubmit1').on('click', function(){
var value = $("#myStock").val();
$( "#demo" ).append( '<p>'+value+'</p>' );
});
$('#reset1').on('click', function(){
$( "p" ).remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input id="myStock" type="text"/>
<button id = "iSubmit1" type="button">Show Me Data!</button>
<button id = "reset1" type="button">Reset Me!</button>
</form>
<div id="demo"></div>
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>
I'm trying to take input through a form, to produce another input field.
$(document).ready(function(){
$('.button').click(function(){
var value = $('#value').val();
$(document).on('click', '.button', function(){
$('#form1').append('<input type="text" id="value" value="' + value + '"><button class="button">Enter</button>');
});
return false;
});
});
This produces no error in Chrome console, though it errors in JSFiddle:
https://jsfiddle.net/yfjda40e/
What are the errors I am not catching?
Use Event delegation and e.preventDefault() to prevent default behavior of button
$(document).on('click', '.button', function(e) {
e.preventDefault();
var value = $('#value').val();
$('#form1').append('<input type="text" id="value" value="' + value + '"><button class="button">Enter</button>');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="content">
<h1>Add field</h1>
<form id='form1' action="" method='POST'>
<input type="text" id="value" value="new value">
<button class="button">Enter</button>
</form>
</div>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="js/app.js"></script>
Fiddle Demo
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'>