.val() JQuery. Passing text fields to jQuery - javascript

Basically my code is perfectly fine it is I just cant seem to be able to get the extra added tags when I create them to have any functionality with the api search. I want to pass them into the tags field aswell as $("#textbox1").val(). Any tips/help is appreciated. Thanks
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<html>
<head>
<script type="text/javascript" src="jquery-1.11.2.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
$("#button").click(function(){
$("#images").empty();
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?",
{
tags:$("#textbox1").val(),
tagmode: "any",
format: "json"
}, function(data){
console.log(data);
$.each(data.items, function(i,item){
$('<img/>').attr("src", item.media.m).appendTo('#images');
if(i==2) return false;
});
});
});
$('#images').on('click', 'img', function(){
});
});
$(document).ready(function(){
var counter = 2;
$("#addButton").click(function () {
var newTextBoxDiv = $(document.createElement('div')).attr("id", 'TextBoxDiv' + counter);
newTextBoxDiv.after().html('<label></label>' +
'<input type="text" name="textbox' + counter +
'" id="textbox' + counter + '" value="" >');
newTextBoxDiv.appendTo("#TextBoxesGroup");
counter++;
});
$("#getButtonValue").click(function () {
var msg = '';
for(i=1; i<counter; i++){
msg += "\n Textbox #" + i + " : " + $('#textbox' + i).val();
}
alert(msg);
});
});
</script>
<button type="button" id="button">Find image</button>
<div id='TextBoxesGroup'>
<div id="TextBoxDiv1">
<input type='textbox' id='textbox1' >
<input type='button' value='Add tag' id='addButton'/>
</div>
</div>
<div id="images" /> </div>
</body>
</html>

please format your code
Please have only one ready
use a class
$(document).ready(function() {
$("#button").click(function() {
$("#images").empty();
var tags = [];
$(".textbox").each(function() {
tags.push(this.value);
});
console.log(tags)
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?", {
tags: tags.join(" "),
tagmode: "any",
format: "json"
}, function(data) {
console.log(data);
$.each(data.items, function(i, item) {
$('<img/>').attr("src", item.media.m).appendTo('#images');
if (i == 2) return false;
});
});
});
$('#images').on('click', 'img', function() {
});
var counter = 2;
$("#addButton").click(function() {
var newTextBoxDiv = $(document.createElement('div')).attr("id", 'TextBoxDiv' + counter);
newTextBoxDiv.after().html('<label></label>' +
'<input type="text" class="textbox" name="textbox' + counter +
'" id="textbox' + counter + '" value="" >');
newTextBoxDiv.appendTo("#TextBoxesGroup");
counter++;
});
$("#getButtonValue").click(function() {
var msg = '';
for (i = 1; i < counter; i++) {
msg += "\n Textbox #" + i + " : " + $('#textbox' + i).val();
}
alert(msg);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button type="button" id="button">Find image</button>
<div id='TextBoxesGroup'>
<div id="TextBoxDiv1">
<input type='textbox' class="textbox" id='textbox1'>
<input type='button' value='Add tag' id='addButton' />
</div>
</div>
<div id="images" /></div>

Related

Slider for Bootstrap add&remove jQuery

I'm using https://seiyria.com/bootstrap-slider/ in order to have slider, but I'm not able to understand where is my fault in this code:
<button type="button" onclick="ap()">ap!</button>
<button type="button" onclick="remove()">remove!</button>
<div id="id1"></div>
<script>
function ap() {
console.log("Append");
$("#id1").append(t);
}
function remove() {
console.log("Remove");
$("#x1").remove();
}
t = '<div id="x1"><span id="ex18-label-1" class="hidden">Example slider label</span> ' +
'<input id="ex19" type="text" ' +
'data-provide="slider" ' +
'data-slider-ticks="[1, 2, 3]" ' +
'data-slider-ticks-labels="["short", "medium", "long"]" ' +
'data-slider-min="1" ' +
'data-slider-max="3" ' +
'data-slider-step="1" ' +
'data-slider-value="3" ' +
'data-slider-tooltip="hide" /></div>'
</script>
I wish to press a button in order to show a slider and to remove with the other button.
<html>
<body>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/10.3.1/css/bootstrap-slider.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/10.3.1/bootstrap-slider.min.js"></script>
<button type="button" onclick="ap()">ap!</button>
<button type="button" onclick="remove()">remove!</button>
<div id="id1">
</div>
<div id="x1"><span id="ex18-label-1" class="hidden">Example slider label</span> <input id="ex19" type="text" data-provide="slider" data-slider-ticks="[1, 2, 3]" data-slider-ticks-labels="["short", "medium", "long"]" data-slider-min="1" data-slider-max="3" data-slider-step="1" data-slider-value="3" data-slider-tooltip="hide" /></div>
</body>
</html>
<script>
$("#x1").hide();
function ap()
{
console.log("Append");
$("#x1").show();
}
function remove()
{
console.log("Remove");
$("#x1").hide();
}
</script>
Just hide and show the slider using javascript.
This should work,you forgot the t parameter in ap
function ap(t) {
console.log("Append");
$("#id1").append(t);
}
function remove() {
console.log("Remove");
$("#x1").remove();
}
t = '<div id="x1">' +
'<span id="ex18-label-1" class="hidden">Example slider label</span> ' +
'<input id="ex19" type="text" ' +
'data-provide="slider" ' +
'data-slider-ticks="[1, 2, 3]" ' +
'data-slider-ticks-labels="["short", "medium", "long"]" ' +
'data-slider-min="1" ' +
'data-slider-max="3" ' +
'data-slider-step="1" ' +
'data-slider-value="3" ' +
'data-slider-tooltip="hide" /></div>';
$("#show").click(function() {
ap(t);
});
$("#hide").click(function() {
remove();
});
function get_data(name) {
name.value = 'test';
}
<button id="show">show</button>
<button id="hide">hide</button>
<div id="id1"></div>

How to add input fields on button click

function add() {
var new_chq_no = parseInt($('#total_chq').val()) + 1;
var new_input = "<input type='text' id='new_" + new_chq_no + "'>";
$('#new_chq').html(new_input);
}
function remove() {
var last_chq_no = $('#total_chq').val();
if (last_chq_no > 1) {
$('#new_' + last_chq_no).append('');
$('#total_chq').val(last_chq_no - 1);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text">
<button onclick="add()">Add</button>
<button onclick="remove()">remove</button>
<div id="new_chq"></div>
<input type="hidden" value="1" id="total_chq">
its adding input fields one time and on second click its not adding anything and remove button is not working
Working fiddle.
You have to use .append() instead of .html() when appending elements :
$('#new_chq').append(new_input);
It will be better to attach the event in your JS code like :
$('.add').on('click', add);
$('.remove').on('click', remove);
NOTE 1: Don't forget to increment the counter #total_chq :
$('#total_chq').val(new_chq_no);
NOTE 2: You've to use .remove() if you want to remove the element.
$('.add').on('click', add);
$('.remove').on('click', remove);
function add() {
var new_chq_no = parseInt($('#total_chq').val()) + 1;
var new_input = "<input type='text' id='new_" + new_chq_no + "'>";
$('#new_chq').append(new_input);
$('#total_chq').val(new_chq_no);
}
function remove() {
var last_chq_no = $('#total_chq').val();
if (last_chq_no > 1) {
$('#new_' + last_chq_no).remove();
$('#total_chq').val(last_chq_no - 1);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text">
<button class="add">Add</button>
<button class="remove">remove</button>
<div id="new_chq"></div>
<input type="hidden" value="1" id="total_chq">
Check the snippet, hope this is what you are looking for :D
function add(){
var new_chq_no = parseInt($('#total_chq').val())+1;
var new_input="<input type='text' id='new_"+new_chq_no+"'>";
$('#new_chq').append(new_input);
$('#total_chq').val(new_chq_no)
}
function remove(){
var last_chq_no = $('#total_chq').val();
if(last_chq_no>1){
$('#new_'+last_chq_no).remove();
$('#total_chq').val(last_chq_no-1);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text">
<button onclick="add()">Add</button>
<button onclick="remove()">remove</button>
<div id="new_chq"></div>
<input type="hidden" value="1" id="total_chq">
$('.add').on('click', add);
$('.remove').on('click', remove);
function add() {
var new_chq_no = parseInt($('#total_chq').val()) + 1;
var new_input = "<input type='text' id='new_" + new_chq_no + "'>";
$('#new_chq').append(new_input);
$('#total_chq').val(new_chq_no);
}
function remove() {
var last_chq_no = $('#total_chq').val();
if (last_chq_no > 1) {
$('#new_' + last_chq_no).remove();
$('#total_chq').val(last_chq_no - 1);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text">
<button class="add">Add</button>
<button class="remove">remove</button>
<div id="new_chq"></div>
<input type="hidden" value="1" id="total_chq">

generate dynamically a select type with options specified on add button click

i have seen a j query function that generates dynamically on button click an input type = text but how to generate dynamically select with options and get the value everytime.
the j query function:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(function () {
$("#btnAdd").bind("click", function () {
var div = $("#TextBoxContainer");
div.append('<div>' + GetDynamicTextBox("") + '</div>');
});
$('form').on('submit', function (e) {
var values = "";
$("input[name=DynamicTextBox]").each(function () {
values += $(this).val() + "\n";
});
$("#<%= hdnfldVariable.ClientID %>").val(values);
});
$("body").on("click", ".remove", function () {
$(this).closest("div").remove();
});
});
function GetDynamicTextBox(value) {
return '<select name="Sexe" id="Sexe" class="field-select"></select>';
return '<input name = "DynamicTextBox" type="text" value = "' + value + '" /> ' +
'<input type="button" value="Remove" class="remove" />';
}
the html:
<input id="btnAdd" type="button" value="Add" />
<br />
<br />
<div id="TextBoxContainer">
<!--Textboxes will be added here -->
</div>
<br />
<button id="btnGet" runat="server" onserverclick="Submit_Click">Submit</button>
<asp:HiddenField ID="hdnfldVariable" runat="server" />
Try the below snippet. To grab the values of select on submit you can use:
$('#mySelect').val();
$("#getSelect").click(function(e) {
e.preventDefault();
var select = '<select name = "test" id="mySelect">Select</select>';
if ($('#selectholder').empty()) {
$('#selectholder').append(select);
}
for (i = 0; i < 10; i++) {
$('#mySelect').append('<option value="' + i + '">' + 'Option ' + i + '</option>');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="getSelect">Display select</div>
<div id="selectholder"></div>

add/remove datepicker dynamically

am just a beginner of php.
When i click a button i need to add more date-picker dynamically.I put the code but when i click the button am getting new textbox not date-picker.plz check my code and tell me where is the mistake and what i have to do.Here is my code,
<html>
<head>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<link rel="stylesheet" href="css/datepicker.css">
<style type="text/css">
div{
padding:8px;
}
</style>
</head>
<body>
<script src="js/bootstrap-datepicker.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var counter = 2;
$("#addButton").click(function () {
if(counter>10){
alert("Only 10 textboxes allow");
return false;
}
var newdatepicker = $(document.createElement('div'))
.attr("id", 'datepicker' + counter);
newdatepicker.after().html('<label> #'+ counter + ' : </label>' +
'<input class= name="date' + counter +
'" id="dateid' + counter + '" value="" >');
newdatepicker.appendTo("#date");
counter++;
});
$("#removeButton").click(function () {
if(counter==1){
alert("No more textbox to remove");
return false;
}
counter--;
$("#datepicker" + counter).remove();
});
$("#getButtonValue").click(function () {
var msg = '';
for(i=1; i<counter; i++){
msg += "\n date #" + i + " : " + $('#date' + i).val();
}
alert(msg);
});
});
</script>
<script type="text/javascript">
// When the document is ready
$(document).ready(function () {
$('.input-daterange').datepicker({
todayBtn: "linked"
});
});
</script>
<div id='date'>
<div class="hero-unit">
<div class="input-daterange" id="datepicker1" >
<span class="add-on" style="vertical-align: top;height:20px">Select Leave Date:</span>
<input type="text" class="input-small" name="date" id="dateid"/>
</div>
</div>
</div>
<input type='button' value='Add Button' id='addButton'>
<input type='button' value='Remove Button' id='removeButton'>
<input type='button' value='Get TextBox Value' id='getButtonValue'>
</body>
</html>
When the page loads, you initialize the date picker plugin on the elements found at that time:
$(document).ready(function () {
$('.input-daterange').datepicker({
todayBtn: "linked"
});
});
But then you never initialize it on new elements added later. So when you add a new element:
newdatepicker.appendTo("#date");
It's just the uninitialized element that was created. The plugin was never told about it. You need to run the plugin on it.
Since the code creates the id value, you can simply use that to target the element right after it's been added. Maybe something like this:
newdatepicker.appendTo("#date");
$('#dateid' + counter).datepicker({
todayBtn: "linked"
});

jquery children attach remove edit input

to get more than what you expect may be nice on your birthday - but this in script drives you crazy... :(
i've got the following code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="../scripts/jquery-ui.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="id1" class="fragenMainDiv" style="width: 80%; margin: 0px;">
<input type="button" id="id1_edit" class="editIcon" value="change">
<span id="id1_Label" class="fragenLabel">
<p>
<span style="margin-left:5px;">
<b>something</b>
</span>
</p>
</span>
</div>
</div>
</form>
</body>
<script type="text/javascript">
$(document).ready(function () {
showMain();
});
function showMain() {
$('.editIcon').css("cursor", "pointer").click(function () {
edit($(this).attr("id"));
});
$('.editfinish').css("cursor", "pointer").click(function () {
editFinish($(this).attr("id"));
});
}
function edit(idTemp) {
//alert(fragenidTemp);
var IdArray = idTemp.split("_");
var Id = IdArray[0]
var inputValue = $('div[id|="' + Id + '"]').children("span").children("p").children("span").children("b").text();
$('div[id|="' + Id + '"]').children("span").children("p").children("span").children("b").remove();
$('div[id|="' + Id + '"]').children("span").children("p").children("span:first").append("<input id=input" + Id + " type=text size=70 style=margin-left:4px;></input><input type=button id=" + Id + " class=editfinish value=change />");
$('input[id|="input' + Id + '"]').val(inputValue);
$('.editIcon').hide();
showMain();
}
function editFinish(Id) {
var inhaltFrage = $('input[id|="input' + Id + '"]').val();
$('.editIcon').show();
$('div[id|="' + Id + '"]').children("span").children("p").children("span:first").children("input").remove();
$('div[id|="' + Id + '"]').children("span").children("p").children("span:first").children("img").remove();
$('div[id|="' + Id + '"]').children("span").children("p").children("span:first").append("<b>" + inhaltFrage + "</b>");
showMain();
}
</script>
</html>
what I want is an input field that reacts like a normal input field - but after the first (correct) change of value the form shows three times the input field...
Does someone have an idea? As it is a condensed script of a larger script so I need the structure of functions. Thanks for your help :)
Argghhh I finally found it. Dude you cannot use show main after every edit and editFinish. Becuse you are stacking several same event to one click ! The code shoul look like this :
function edit(idTemp) {
//alert(fragenidTemp);
var IdArray = idTemp.split("_");
var Id = IdArray[0]
var inputValue = $('div[id|="' + Id + '"]').children("span").children("p").children("span").children("b").text();
$('div[id|="' + Id + '"]').children("span").children("p").children("span").children("b").remove();
$('div[id|="' + Id + '"]').children("span").children("p").children("span:first").append("<input id=input" + Id + " type=text size=70 style=margin-left:4px;></input><input type=button id=" + Id + " class=editfinish value=change />");
$('input[id|="input' + Id + '"]').val(inputValue);
$('.editIcon').hide();
$('.editfinish').css("cursor", "pointer").click(function () {
editFinish($(this).attr("id"));
});
}
function editFinish(Id) {
var inhaltFrage = $('input[id|="input' + Id + '"]').val();
$('.editIcon').show();
$('div[id|="' + Id + '"]').children("span").children("p").children("span:first").children("input").remove();
$('div[id|="' + Id + '"]').children("span").children("p").children("span:first").children("img").remove();
$('div[id|="' + Id + '"]').children("span").children("p").children("span:first").append("<b>" + inhaltFrage + "</b>"); }
Hope that you see the error now, if not i can explain in detail.
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Test</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<input type="button" id="btn_change" value="Change" />
<span id="id1_Label" class="fragenLabel">
</span>
<span id="id1_Input">
<input type="text" id="content1_edit" value="default-value" />
</span>
</div>
</form>
</body>
</html>
JAVASCRIPT
$(document).ready(function(){
// Mostly this should be coming from database on page-load;
updateVal();
$("#btn_change").click(function(){
if( $(this).val() == "Change" )
{
editVal();
}
else
{
updateVal();
}
})
});
function editVal()
{
$("#id1_Label").hide();
$("#id1_Input").show();
$("#btn_change").val("Update");
}
function updateVal()
{
$("#id1_Label").html( $("#content1_edit").val()).show();
$("#id1_Input").hide();
$("#btn_change").val("Change");
}
Fiddle for demo: http://jsfiddle.net/dharmavir/5yMZk/

Categories

Resources