I am trying to add some functionality to the entered tags in this image searcher using the flickr API. I have it working but it only works when I write the string within the code. For example I have "cats" in the for now. My goal is the pass the entered value from the textbox (id="textbox1") into the tags in the script above. I want to be able to search from the text box and not go into the code. Thanks for any tips/advice!
<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: "cats",
tagmode: "any",
format: "json"
}, function(data) {
console.log(data);
$.each(data.items, function(i, item) {
$(".buttonclick").remove();
$('<img/>').attr("src", item.media.m).appendTo('#images');
if (i == 1) return false;
});
});
});
$('#images').on('click', 'img', function() {
var $imgClone = $(this).clone().attr('src', $(this).attr('src').replace('_m.', '_b.'));
$('#main').html($imgClone);
});
});
$(document).ready(function() {
var counter = 2;
$("#addButton").click(function() {
if (counter > 10) {
alert("Only 10 textboxes allow");
return false;
}
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++;
});
$("#removeButton").click(function() {
if (counter == 1) {
alert("No more textbox to remove");
return false;
}
counter--;
$("#TextBoxDiv" + counter).remove();
});
$("#getButtonValue").click(function() {
var msg = '';
for (i = 1; i < counter; i++) {
msg += "\n Textbox #" + i + " : " + $('#textbox' + i).val();
}
alert(msg);
});
});
</script>
<h1>Image Search</h1>
<button type="button" id="button">Search</button>
<input type='button' value='Remove Tag' id='removeButton'>
<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>
In $.getJSON you can switch "cats" with
$("#textbox1").val(),
and it will use the value of the input (whatever the user has typed into it) as the value of "tags".
//Stuff before
tags:$("#textbox1").val(),
//Stuff after
I hope this helped!
Edit:
In case you want to learn more about jQuery's .val(), you can read the documentation here.
Related
I have two buttons: Btn1 <input type="button" class="buttons" value="Test">
and Btn2 <input type="button" class="buttons" value="Test2">. I want to be able to click on Btn1 and Btn1 waits for the second button to be pressed and if the second button (Btn2) is pressed the output is Test Test2 is this possible?
I know how to do the button clicks of course but I can't find a solution for the first button to wait for the second one
Try this:-
If you are using Input Buttons like this:-
<input type="button" id="button1" class="buttons" value="Test" />
<input type="button" id="button2" class="buttons" value="Test2" />
<textarea name="test" id="test" rows="8" cols="80" readonly></textarea>
Then use this script:-
<script src="https://code.jquery.com/jquery-1.12.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
var flag1 = false;
var result;
$(document).ready(function () {
$("input[ID$='button1']").click(function () {
flag1 = true;
alert("you clicked button 'Test', Click another button for result");
});
$("input[ID$='button2']").click(function () {
if (flag1 == true) {
//flag1 = false;
if (result)
result = result + " " + $("input[ID$='button1']").val() + " " + $("input[ID$='button2']").val();
else
result = $("input[ID$='button1']").val() + " " + $("input[ID$='button2']").val();
// alert(result);
document.getElementById("test").innerHTML = result;
}
else {
//alert("Please click button 'Test' first");
if (result)
result = result + " " + $("input[ID$='button2']").val();
else
result = $("input[ID$='button2']").val();
document.getElementById("test").innerHTML = result;
}
});
window.onload = function () {
if (flag1 == true) {
//flag1 = false;
if (result)
result = result + " " + $("input[ID$='button1']").val() + " " + $("input[ID$='button2']").val();
else
result = $("input[ID$='button1']").val() + " " + $("input[ID$='button2']").val();
//alert(result);
document.getElementById("test").innerHTML = result;
}
};
});
</script>
If you are using buttons like this:-
<button id="btntest1" class="buttons">Test</button>
<button id="btntest2" class="buttons">Test2</button>
<textarea name="test" id="test" rows="8" cols="80" readonly></textarea>
Then use this script:-
<script src="https://code.jquery.com/jquery-1.12.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("button[ID$='btntest1']").click(function () {
flag1 = true;
alert("you clicked button 'Test', Click another button for result");
});
$("button[ID$='btntest2']").click(function () {
if (flag1 == true) {
//flag1 = false;
if (result)
result = result + " " + $("button[ID$='btntest1']").html() + " " + $("button[ID$='btntest2']").html();
else
result = $("button[ID$='btntest1']").html() + " " + $("button[ID$='btntest2']").html();
//alert(result);
document.getElementById("test").innerHTML = result;
}
else {
//alert("Please click button 'Test' first");
if (result)
result = result + " " + $("button[ID$='btntest2']").html();
else
result = $("button[ID$='btntest2']").html();
document.getElementById("test").innerHTML = result;
}
});
});
window.onload = function () {
if (flag1 == true) {
//flag1 = false;
if (result)
result = result + " " + $("button[ID$='btntest1']").html() + " " + $("button[ID$='btntest2']").html();
else
result = $("button[ID$='btntest1']").html() + " " + $("button[ID$='btntest2']").html();
//alert(result);
document.getElementById("test").innerHTML = result;
}
};
</script>
Hope this will help you.
depends on your needs.
1- Show button 1 enable
2- Show button 2 disable
3- onclick button 1 :
3.1 : set flags to btn1_clicked = true; and othe var you need
3.2 : Enable button 2
4 onclick button 2 do your output
It's just a global thinking, you can adapt .
So, with the idea of my comment you can do this :
btn1 = document.getElementById('btn-1');
btn2 = document.getElementById('btn-2');
btn1.addEventListener('click', function(){
btn2.removeAttribute('disabled');
btn1.disabled = 'disabled';
});
btn2.addEventListener('click', function(){
btn1.removeAttribute('disabled');
btn2.disabled = 'disabled';
alert(btn2.value);
});
<input id="btn-1" type="button" class="buttons" value="Test">
<input id="btn-2" type="button" class="buttons" value="Test 2" disabled>
Based on my comment...
OnButton1Click -> Set a flag to true
OnButton2Click -> If Variable is true -> "Test Test2" if variable is false -> "Test2"
I created a quick example all vanilla JS.
JSBin Example
I want to add multiple html elements dynamically on button click and get values of each. Also one can delete created element on button click. HTML elements will be textbox and other text box for phone number.
I've tried to create single text box on button click. Fiddle: https://jsfiddle.net/dvkeojqn/
HTML:
<input id="btnAdd" type="button" value="Add" />
<br />
<br />
<div id="TextBoxContainer">
<!--Textboxes will be added here -->
</div>
<br />
<input id="btnGet" type="button" value="Get Values" />
JS:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("#btnAdd").bind("click", function () {
var div = $("<div />");
div.html(GetDynamicTextBox(""));
$("#TextBoxContainer").append(div);
});
$("#btnGet").bind("click", function () {
var values = "";
$("input[name=DynamicTextBox]").each(function () {
values += $(this).val() + "\n";
});
alert(values);
});
$("body").on("click", ".remove", function () {
$(this).closest("div").remove();
});
});
function GetDynamicTextBox(value) {
return '<input name = "DynamicTextBox" type="text" value = "' + value + '" /> ' +
'<input type="button" value="Remove" class="remove" />'
}
</script>
try replacing this function..
$(function () {
$("#btnAdd").bind("click", function () {
var div = $("<div />");
div.html(GetDynamicTextBox(""));
$("#TextBoxContainer").append(div);
});
$("#btnGet").bind("click", function () {
var valuesarr = new Array();
var phonearr = new Array();
$("input[name=DynamicTextBox]").each(function () {
valuesarr.push($(this).val());
});
$("input[name=phoneNum]").each(function () {
phonearr.push($(this).val());
});
alert(valuesarr); alert(phonearr);
});
$("body").on("click", ".remove", function () {
$(this).closest("div").remove();
});
});
function GetDynamicTextBox(value) {
return '<input name = "DynamicTextBox" type="text" value = "' + value + '" /> <input name = "phoneNum" type="text" /> <input type="button" value="Remove" class="remove" />';
}
and HERE is the FIDDLE.
Try to replace this JavaScript code..
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("#btnAdd").bind("click", function () {
var div = $("<div />");
div.html(GetDynamicTextBox(""));
$("#TextBoxContainer").append(div);
});
$("#btnGet").bind("click", function () {
var values = "";
$("input[name=DynamicTextBox]").each(function () {
values += $(this).val() + "\n";
});
alert(values);
});
$("body").on("click", ".remove", function () {
$(this).closest("div").remove();
});
});
function GetDynamicTextBox(value) {
return '<input name = "DynamicTextBox" type="text" value = "' + value + '" /> <input name = "DynamicTextBox" type="text" value="'+ value +'" /> <input type="button" value="Remove" class="remove" />';
}
</script>
I want to add a new div one after one upto 10 "div", and each div has three textboxes.
Everytime I want to add new div only when the 3rd textbox value of previous div is not blank !!!
Here is my code:
<div class="input_fields_wrap">
<button class="add_field_button">Add Booking</button>
</div>
<div id='TextBoxesGroup'>
<div id="TextBoxDiv1">
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
var counter = 2;
$(".add_field_button").click(function() {
if (counter > 10) {
alert("Only 10 textboxes allow");
return false;
}
var newTextBoxDiv = $(document.createElement('div'))
.attr("id", 'TextBoxDiv' + counter);
newTextBoxDiv.after().html('<div id="target"><label>Textbox #' + counter + ' : </label>' +
'<input type="text" name="textbox' + counter +
'" id="firsttextbox' + counter + '" value="" > <input type="text" name="textbox' + counter +
'" id="secondtextbox' + counter + '" value="" > Remove<input type="text" id="box' + counter + '" value="">this is 3rd textbox of each div</div>');
newTextBoxDiv.appendTo("#TextBoxesGroup");
counter++;
});
$(this).on("click", "#remove_field", function(e) { //user click on remove text
e.preventDefault();
$(this).parent('#target').remove();
counter--;
});
});
</script>
how to do this?
If you want only the value of last div of the previous group than check this
var boxid="#box" + (counter-1);
var prev_value=$(boxid).val();
if (counter > 10) {
alert("Only 10 textboxes allow");
return false;
}
else if(prev_value == ""){
alert("please fill the box");
return false;
}
LIVE DEMO
if ($("#TextBoxDiv" + counter).is(":empty")){
//Create new div
}else{
alert('div should not be empty');
}
never done this but after some googling this is what i came up with hope it helps
For a voting system people see 3 textboxes. But they can add textboxes manually in case they want to vote for more artists. But those textboxes are dynamically created via Javascript using this code:
$(document).ready(function(){
var counter = 4;
$("#addButton").click(function () {
var newTextBoxDiv = $(document.createElement('div'))
.attr("id", 'TextBoxDiv' + counter);
newTextBoxDiv.after().html('<label>Textbox #'+ counter + ' : </label>' +
'<input type="text" name="textbox[]" id="textbox' + counter + '" value="" style="width:630px; height:30px; font-size:18px; opacity:0.9;" runat=server>');
newTextBoxDiv.appendTo("#TextBoxesGroup");
counter++;
if(counter==11){
document.getElementById('addButton').style.visibility='hidden';
document.getElementById('resetButton').style.position="absolute";
document.getElementById('resetButton').style.left="60px";
return false;
}
});
$("#removeButton").click(function () {
if(counter==1){
alert("No more textbox to remove");
return false;
}
counter--;
$("#TextBoxDiv" + counter).remove();
});
$("#getButtonValue").click(function () {
var msg = '';
for(i=1; i<counter; i++){
msg += "\n Textbox #" + i + " : " + $('#textbox' + i).val();
}
alert(msg);
});
});
The form where those textboxes spawn in redirects to 'confirm.php' but in confirm.php I can't get the values from the dynamically created textboxes.
How tot fix this?
Maybe you can try to change your code into the following one as I'm wondering if there is something wrong with JQuery:
http://jsfiddle.net/jbLZH/
BTW, the after() method in newTextBoxDiv.after().html is utterly useless.
Hope this can help.
The textboxes will need the "name" property defined.
Here i want to display selected check-box text. Help me how to do this
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript" src="../js/jquery_1.9.0.js"></script>
<script type="text/javascript" language="javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script>
var counter = 1;
var cars = new Array("Paul","Catherine","Steve","Paul","Catherine","Steve","Paul","Catherine","Steve","Paul","Catherine","Steve");
$(document).ready( function() {
$("#checkall").click(function() {
if ($(this).is(':checked')){
$(":checkbox").attr("checked", true);
}
else{
$(":checkbox").attr("checked", false);
}
});
// Uncheck All
for (var i=0;i<cars.length;i++){
var newTextBoxDiv = $(document.createElement('div'))
.attr("id", 'TextBoxDiv' + counter);
newTextBoxDiv.after().html('<input type="checkbox" />'+cars[i]+'</br>');
newTextBoxDiv.appendTo("#TextBoxesGroup");
}
});
function checkState(){
var isChecked = $('#checkall').is(':checked');
if(isChecked){
// here i want to display all check-boxes data
} else{
// here i want to display Selected Check-boxes data
}
}
</script>
</head>
<body>
</br>
<div id="TextBoxesGroup">
<div id="TextBoxDiv1">
<input type="checkbox" id="checkall" value="check" />select</br>
<br />
</div>
</div>
<input type = "button" onClick = "checkState()" value = "GetName" id = "button" />
</body>
</html>
Do this to get the names
Changes add checkbox function to (otherwise you won't have any values):
newTextBoxDiv.after().html('<input type="checkbox" value="' + cars[i] + '" />'+cars[i]+'</br>');
Update your if else:
var isChecked = $('[type=checkbox]:checked');
var names = "";
isChecked.each(function(){
names += $(this).val();
});
alert(names);
Live fiddle: http://jsfiddle.net/nyu5T/
Look at jQuery's serialize()
console.log($(":checked").serialize());
I know you have an answer but this addresses several issues: fiddle showing it working:http://jsfiddle.net/WGKuX/
Markup: fix bad html for </br> and remove onclick from markup (in code later)
<br />
<div id="TextBoxesGroup">
<div id="TextBoxDiv1">
<input type="checkbox" id="checkall" value="check" />select
<br />
</div>
</div>
<input type="button" value="GetName" id="button" />
now for some code: comments on each portion
var counter = 1;
var cars = ["Paul", "Catherine", "Steve", "Paul", "Catherine", "Steve", "Paul", "Catherine", "Steve", "Paul", "Catherine", "Steve"]; //change to simpler declaration
$(document).ready(function () {
$("#checkall").click(function () {
$(".myCars").prop("checked", $(this).is(':checked'));
}); // simplify
$("#TextBoxesGroup").on("change", ".myCars", function () {
$("#checkall:checkbox").prop("checked", ($(".myCars").length == $(".myCars:checked").length));
}); // assume "select" means "select all", if all are checked, check the select otherwise uncheck
var mylist = "";
var i = 0;
for (i = 0; i < cars.length; i++) {
mylist += "<div id='TextBoxDiv" + (counter + i) + "'><input class='myCars' type='checkbox' value='" + cars[i] + "' />" + cars[i] + '<br /></div>';
}// note the class added to the checkboxes
$(mylist).appendTo("#TextBoxesGroup"); // simplify the insertion, only hit DOM once
});
$('#button').click(checkState); //event handler moved from markup
function checkState() {
var names = "";
// build list based on the seleck all check state
var checkslist = $('#checkall').prop('checked') ? $('.myCars[type=checkbox]') : $('.myCars[type=checkbox]:checked');
checkslist.each(function () {
names += $(this).val();
});
alert(names);
}