Develop Reference

How to save loop data in the database in php and javascript?

I'm developing a form, which has got some fields and whose data gets saved in the sql server database.
I'm able to save the data to the database for the rest of the form, however I'm stuck at a button which upon clicking shows more fileds. It's a loop which runs five times, so the user will have an option of adding details of their mentors for five times. I'm not sure how to save the data of the loop in the database.
Here's the code:
<div class="container" >
<form class="cmxform" action ='functions/processform.php' id="Form1" method="post" enctype="multipart/form-data">
<div id="FormResult1" class="hide" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
<div id="resultFormContent1"></div>
</div>
<h1>Contact Information</h1>
<div class="form-row">
<div class="container">
<div class="form-group col-md-6">
<label for="fName">First Name </label>
<input type="text" class="form-control" id="fName" name="fName" required>
</div>
<div class="form-group col-md-6">
<label for="lName">Last Name </label>
<input type="text" class="form-control" id="lName" name="lName" required>
</div>
<div class="form-group col-md-6">
<label for="uEmail">University Email </label>
<input type="email" class="form-control" id="uEmail" name="uEmail" required>
</div>
</div>
</div>
<div id=new_site></div>
<button type="button" class="btn btn-default" onClick="addSite()">Add Mentor</button>
<button type="button" class="btn btn-default" onClick="removeSite()">Remove Mentor</button>
<input type="hidden" value="1" id="total_sites">
<div class="form-group col-md-12">
<button class="btn btn-info btn-primary" id="registerSubmit" type="submit">Submit</button>
</div>
<script>
function addSite() {
var new_total_sites = parseInt($('#total_sites').val()) + 1;
if ($('#total_sites').val() >= 4) {
$('button:contains("Add Mentor")').prop('disabled', true);
}
var new_label= "<label id='new_label9_" + new_total_sites
+ "'><h1>Mentor#"+ new_total_sites +"</h1></label><br>";
var new_site_label = "<label id='new_label1_" + new_total_sites
+ "'>Length of Time in Research: </label>";
var new_site_input = "<input id='new_site_"
+ new_total_sites
+ "' type='text' class='form-control col-md-12' list='sites' name='site[]'></br>";
var new_slot_label = "<label id='new_label2_" + new_total_sites
+ "'>Research Institution</label>";
var new_slot_input = "<input class='form-control col-md-12' id='new_slot_"
+ new_total_sites + "' name='slots[]'></br>";
var new_research_label = "<label id='new_label3_" + new_total_sites
+ "'>Research Mentor</label>";
var new_research_input = "<input class='form-control' id='new_research_"
+ new_total_sites + "' name='slots[]'></br>";
var new_form_group_label= "<label id='new_label4_" + new_total_sites
+ "'>Type of Research</label><br>";
var new_basic_label = "<input type='checkbox' id='checkbox1" + new_total_sites +"' value='basic'><label for='basic' id='basic"+ new_total_sites +"'>Basic</label></br>";
var new_clinical_label = "<input type='checkbox' id='checkbox2" + new_total_sites +"' value='clinical'><label for='clinical' id='clinical"+ new_total_sites +"'>Clinical</label></br></div>";
var new_form_label= "<label id='new_label5_" + new_total_sites
+ "'><h1>Mentor's Contact Information</h1></label>";
var new_mentor_label = "<label id='new_label6_" + new_total_sites
+ "'>Mentor's Phone</label>";
var new_mentor_input = "<input class='form-control' id='new_mentor_"
+ new_total_sites + "' name='slots[]'></br>";
var new_mentoremail_label ="<label id='new_label7_" + new_total_sites
+ "'>Mentor's Email</label>";
var new_mentoremail_input = "<input class='form-control' id='new_mentoremail_"
+ new_total_sites + "' name='slots[]'></br>";
var new_describeresearch_label = "<label id='new_label8_" + new_total_sites
+ "'>Describe your research</label></div>";
var new_describeresearch_input = "<input class='form-control' id='new_describeresearch_"
+ new_total_sites + "' name='slots[]'></br>";
$('#new_site').append(new_label);
$('#new_site').append(new_site_label);
$('#new_site').append(new_site_input);
$('#new_site').append(new_slot_label);
$('#new_site').append(new_slot_input);
$('#new_site').append(new_research_label);
$('#new_site').append(new_research_input);
$('#new_site').append(new_form_group_label);
$('#new_site').append(new_basic_label);
$('#new_site').append(new_clinical_label);
$('#new_site').append(new_form_label);
$('#new_site').append(new_mentor_label);
$('#new_site').append(new_mentor_input);
$('#new_site').append(new_mentoremail_label);
$('#new_site').append(new_mentoremail_input);
$('#new_site').append(new_describeresearch_label);
$('#new_site').append(new_describeresearch_input);
$('#total_sites').val(new_total_sites)
}
function removeSite() {
var last_total_site = $('#total_sites').val();
if (last_total_site > 1) {
$('#new_label9_' + last_total_site).remove('');
$('#new_label1_' + last_total_site).remove('');
$('#new_site_' + last_total_site).remove('');
$('#new_label2_' + last_total_site).remove('');
$('#new_slot_' + last_total_site).remove('');
$('#new_label3_' + last_total_site).remove('');
$('#new_research_' + last_total_site).remove('');
$('#new_label4_' + last_total_site).remove('');
$('#basic' + last_total_site).remove('');
$('#clinical' + last_total_site).remove('');
$('#checkbox1' + last_total_site).remove('');
$('#checkbox2' + last_total_site).remove('');
$('#new_label5_' + last_total_site).remove('');
$('#new_label6_' + last_total_site).remove('');
$('#new_mentor_' + last_total_site).remove('');
$('#new_label7_' + last_total_site).remove('');
$('#new_mentoremail_' + last_total_site).remove('');
$('#new_label8_' + last_total_site).remove('');
$('#new_describeresearch_' + last_total_site).remove('');
$('#total_sites').val(last_total_site - 1);
}
}
</script>
</body>
</html>
processform.php
<?php
ob_start();
require_once 'db-connect.php';
require_once 'email.php';
if(isset($_POST['pEmail'])){
$fName = filter_input(INPUT_POST, "fName") ? filter_input(INPUT_POST, 'fName') : null;
$lName = filter_input(INPUT_POST, "lName")? filter_input(INPUT_POST, 'lName') : null;
$uEmail = filter_input(INPUT_POST, "uEmail")? filter_input(INPUT_POST, 'uEmail') : null;
$conn = DB::databaseConnection();
$conn->beginTransaction();
$sql = "INSERT INTO dbo.form ( FirstName,LastName,universityemail)VALUES
( :fName,:lName,universityemail)
$stmt = $conn->prepare($sql);
$stmt->bindParam(':fName', $fName);
$stmt->bindParam(':lName', $lName);
$stmt->bindParam(':universityemail', $uEmail);
if ($stmt->execute()) {
$conn->commit();
if (Form::mailer($fName, $lName,$uEmail))) {
echo
'<script >
alert("Thank you for registration.");
window.location = "www.google.com/";
</script>';
return true;
} else {
$conn->rollback();
echo '
<script>
alert("Error, please try submitting again. Error code 1");
window.history.back();
</script>';
return false;
}
}
}
The rest of the fields gets saved in the database, I'm just not sure how to save the loop data in the same way.

without click append 3 rows, then click 1 row per click

I want to open 3 row defult after addrow and remove row and apply remove defult 3 row using javascript
please share valuable idea sir
I have need example:-
$(document).ready(function (){
$("body").on('click', '.btn-add-more', function (e) {
e.preventDefault();
var $sr = ($(".jdr1").length + 1);
var rowid = Math.random();
var $html = '<tr class="jdr1" id="' + rowid + '">' +
'<td><span class="btn btn-sm btn-default">' + $sr + '</span><input type="hidden" name="count[]" value="'+Math.floor((Math.random() * 10000) + 1)+'"></td>' +
'<td><input type="text" required="" class="form-control input-sm title" placeholder="Medicine" name="medicine[]"></td>' +
'<td><input type="text" name="medicine_qty[]" placeholder="Potency" class="form-control input-sm"></td>' +
'<td><input type="text" name="medicine_time[]" placeholder="Description" class="form-control input-sm"></td>' +
'<td><input type="text" name="remark[]" placeholder="Add/Note" class="form-control input-sm"></td>' + '<td><button class="btn btn-sm btn-warning btn-remove-detail-row"><i class="glyphicon glyphicon-remove">Remove</i></button> </td>'+
'</tr>';
$("#table-details").append($html);
});

You can wrap the function in a for loop and edit the for loop limit according to your needs.
$("body").on('click', '.btn-add-more', function (e) {
e.preventDefault();
var rows = $(".jdr1").length;
var limit = 1;
// In the first click append 3 rows, then 1 row per click
if (rows < 3) limit = 3;
for (let i=0; i<limit; i++) {
var $sr = ($(".jdr1").length + 1);
var rowid = Math.random();
var $html = '<tr class="jdr1" id="' + rowid + '">' +
'<td><span class="btn btn-sm btn-default">' + $sr + '</span><input type="hidden" name="count[]" value="'+Math.floor((Math.random() * 10000) + 1)+'"></td>' +
'<td><input type="text" required="" class="form-control input-sm title" placeholder="Medicine" name="medicine[]"></td>' +
'<td><input type="text" name="medicine_qty[]" placeholder="Potency" class="form-control input-sm"></td>' +
'<td><input type="text" name="medicine_time[]" placeholder="Description" class="form-control input-sm"></td>' +
'<td><input type="text" name="remark[]" placeholder="Add/Note" class="form-control input-sm"></td>' + '<td><button class="btn btn-sm btn-warning btn-remove-detail-row"><i class="glyphicon glyphicon-remove">Remove</i></button> </td>'+
'</tr>';
$("#table-details").append($html);
}
})
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<table id="table-details"></table>
<button class="btn-add-more">Add Rows</button>
</html>

I'm relatively new to Javascript. I'm creating a CRUD based application and I need help in the Edit function

I am trying to create a pure Javascript CRUD application. The data is displayed in an HTML Table.
I have created the Create, Read and delete function. In the Edit function, I want the data to be displayed on a text box when the edit link is clicked and should also have a save button.
How should I proceed ?
var name = document.getElementById('Name').value;
var age = document.getElementById('Age').value;
var email = document.getElementById('Email').value;
var password = document.getElementById('Password').value;
var confirmpassword = document.getElementById('ConfirmPassword').value;
var dob = document.getElementById('DOB').value;
//add
var users = [];
function data(name, age, email, dob) {
var user = {
"name": name,
"age": age,
"email": email,
"dob": dob
}
users.push(user);
read(users);
console.log(users);
}
//Read
function read(users) {
var html = "<table border='1|1'>";
html += "<tr>";
html += "<th>" + "Name" + "</th>"
html += "<th>" + "Age" + "</th>"
html += "<th>" + "Email" + "</th>";
html += "<th>" + "DOB" + "</th>";
html += "<th>" + "Edit" + "</th>";
html += "<th>" + "Delete" + "</th>";
html += "</tr>"
var userhtml = document.getElementById('user');
userhtml.innerHTML = '';
for (var i = 0; i < users.length; i++) {
html += "<tr>";
html += "<td>" + users[i].name + "</td>";
html += "<td>" + users[i].age + "</td>";
html += "<td>" + users[i].email + "</td>";
html += "<td>" + users[i].dob + "</td>";
html += "<td>" + "<a href='#' onclick='editUsers()'>Edit</a>" + "</td>";
html += "<td>" + "<a href='#' onclick='deleteUsers()'>Delete</a>" + "</td>";
html += "</tr>";
}
html += "</table>";
document.getElementById("user").innerHTML = html;
}
function deleteUsers(i) {
debugger;
users.splice(i, 1)
read();
console.log(users);
}
<form action="#" onsubmit="data(name, age, email, dob)">
<div class="form-group">
<label class="form-text">Name :</label>
<input type="text" id="Name" placeholder="Enter Name" class="form-control" />
<span id="ErrorName" class="text-danger"></span>
</div>
<div class="form-group">
<label class="form-text">Age :</label>
<input type="text" id="Age" placeholder="Enter Age" class="form-control" />
<span id="ErrorAge" class="text-danger"></span>
</div>
<div class="form-group">
<label class="form-text">Email :</label>
<input type="text" id="Email" placeholder="Enter Email" class="form-control" />
<span id="ErrorEmail" class="text-danger" />
</div>
<div class="form-group">
<label class="form-text">Password :</label>
<input type="password" id="Password" placeholder="Enter Password" class="form-control" />
<span id="ErrorPassword" class="text-danger"></span>
</div>
<div class="form-group">
<label class="form-text">Confirm Password :</label>
<input type="password" id="ConfirmPassword" placeholder="Confirm Password" />
<span id="ErrorConfirmPassword" class="text-danger"></span>
</div>
<div class="form-group">
<label class="form-text">Date of Birth :</label>
<input type="date" id="DOB" class="form-control" />
<span id="ErrorDOB" class="text-danger"></span>
</div>
<div class="form-group col-xl-4 text-center">
<input type="submit" id="Submit" class="btn btn-success" />
</div>
</form>
<div class="user" id="user">
</div>

function editUsers(index) {
var x = document.getElementById('edit');
x.style.display = "block";
debugger;
var userhtml1 = document.getElementById('edit');
userhtml1.innerHTML = '';
for (var i = 0; i < users.length; i++) {
if (i == index) {
userhtml1.innerHTML += ' <div class="form-group"> Name :<input class="form-control" id="EditName" type="text" value ="' + users[i].name + '"><br />' +
'Age :<input class="form-control" id="EditAge" type="text" value="' + users[i].age + '"> <br /> ' +
'Email :<input class="form-control" id="EditEmail" type="text" value="' + users[i].email + '"> <br /> ' +
'DOB :<input class="form-control" id="EditDOB" type="text" value="' + users[i].dob + '"> <br /> ' +
'<button class="edit" onclick="updateUser(' + i + ')">Update</button>';
}
else {
userhtml1.innerHTML += '';
}
}
}
//CRUD - UPDATE
function updateUser(index) {
debugger;
var updatename = document.getElementById('EditName').value;
var updateage = document.getElementById('EditAge').value;
var updateemail = document.getElementById('EditEmail').value;
var updatedob = document.getElementById('EditDOB').value;
if (updatename == '' || updateemail == '' || updateage == '' || updatedob == '') {
alert("Please Fill the Fields!");
}
else {
users[index].name = updatename;
users[index].email = updateemail;
users[index].age = updateage;
users[index].dob = updatedob;
read(users);
var x = document.getElementById('edit');
x.style.display = "none";
}
}

Bootstrap Modal query

I have used orders.append in my GET AJAX method to display the user details stored in API. In here I have used 2 buttons save and cancel respectively with class "saveEdit edit" to edit the details. When the edit button is hit a modal pop-up to display the form to edit. On hitting save the details ain't getting saved jus the page refreshes. Save goes with the cancel button. Can you help me out?
My Bootstrap modal:
<div class="modal fade" id="myModallp" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Edit</h4>
</div>
<div class="modal-body">
<!-- Form for editing details.-->
<form id="uploadimageformm">
<input type="text" placeholder="first name" id="first" maxlength="15" name="user[firstname]" /><br />
<input type="text" placeholder="last name" id="last" maxlength="15" name="user[lastname]" /><br />
<input type="text" maxlength="10" placeholder="contact no." id="contact" name="user[contact_number]" onkeypress="return isNumberKey(event)" /><br />
<input type="address" placeholder="address1" id="addr1" name="user[address1]"/><br />
<input type="address" placeholder="address2" id="addr2" name="user[address2]"/><br />
<input type="address" placeholder="street" id="strt" name="user[street]"/><br />
<input type="address" placeholder="street1" id="strt1" name="user[street1]"/><br />
<input type="address" placeholder="city" id="city" name="user[city]"/><br />
<input type="address" placeholder="state" id="statee" name="user[state]"/><br />
<input type="address" placeholder="country" id="cntry" name="user[country]" /><br />
<input type="email" placeholder="email" id="email" name="user[email]" /><br />
<input type="password" placeholder="password" id="paswrd" pattern="^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?!.*\s).*$" name="user[password]" /><br />
<select name="user[gender]" id="gndr">
<option>Gender</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select><br />
<input type="file" name="user_photo" id="user_photo" /><br>
<button class="saveEdit edit" data-id=' + order.id + ' type="submit" onclick="">Save</button>
<button class="cancelEdit edit">Cncl</button>
</form>
<div id="ack"></div>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
My GET method of Ajax:
$.ajax({
type:'GET',
url:'http://13.229.164.32/users.json',
success:function(orders){
orders = orders.sort(function(a, b){
return a.id-b.id
})
$.each(orders,function(id,order){
$orders.append('<tr><td>'+ order.id +
'</td><td>' + '<span class="noedit firstname">' + order.firstname + '</span><input value=' + order.firstname + ' name="firstname" class="edit firstname_'+order.id+'"/>' +
'</td><td>' + '<span class="noedit lastname">' + order.lastname+ '</span><input value=' + order.lastname + ' name="lastname" class="edit lastname_'+order.id+'"/>' +
'</td><td>' + '<span class="noedit contact_number">' + order.contact_number + '</span><input value=' + order.contact_number + ' name="contact_number" class="edit contact_number_'+order.id+'"/>' +
'</td><td>' + '<span class="noedit address1">' + order.address1 + '</span><input value=' + order.address1 + ' name="address1" class="edit address1_'+order.id+'"/>' +
'</td><td>' + '<span class="noedit address2">' + order.address2 + '</span><input value=' + order.address2 + ' name="address2" class="edit address2_'+order.id+'"/>' +
'</td><td>' + '<span class="noedit street">' + order.street + '</span><input value=' + order.street + ' name="street" class="edit street_'+order.id+'"/>' +
'</td><td>' + '<span class="noedit street1">' + order.street1 + '</span><input value=' + order.street1 + ' name="street1" class="edit street1_'+order.id+'"/>' +
'</td><td>' + '<span class="noedit city">' + order.city + '</span><input value=' + order.city + ' name="city" class="edit city_'+order.id+'"/>' +
'</td><td>' + '<span class="noedit state">' + order.state + '</span><input value=' + order.state + ' name="state" class="edit state_'+order.id+'"/>' +
'</td><td>' + '<span class="noedit country">' + order.country + '</span><input value=' + order.country + ' name="country" class="edit country_'+order.id+'"/>' +
'</td><td>' + '<span class="noedit email">' + order.email + '</span><input type="email" value=' + order.email + ' name="email" class="edit email_'+order.id+'"/>' +
'</td><td>' + '<span class="noedit password">' + order.password + '</span><input type="password" value=' + order.password + ' name="password" class="edit password_'+order.id+'"/>' +
'</td><td>' + '<span class="noedit gender">' + order.gender + '</span><input value=' + order.gender + ' name="gender" class="edit gender_'+order.id+'"/>' +
'</td><td>' + order.created_at +
'</td><td>' + order.updated_at +
'</td>' +
'<td><button class="remove" data-id=' + order.id + '>X</button></td>' +
'<td><button class="editOrder noedit" data-toggle="modal" data-target="#myModallp">Edit</button></td>' +
'<td><button class="saveEdit edit" data-id=' + order.id + '>Save</button></td>' +
'<td><button class="cancelEdit edit">Cncl</button>' +
'</td><td>' + '<input type="file"/ name="user_photo" id="user_photo_'+order.id+'" class="edit user_photo">' +
'<img src="http://13.229.164.32/users/user_photo?id='+order.id+'" class="noedit user_photo_' +
order.id + '" height="80" width="80" >' +
'</td></tr>');
});
},
error:function(){
alert('error in testing');
}
});
My edit jquery method:
$orders.delegate('.editOrder','click',function(){
var $tr = $(this).closest('tr');
$tr.addClass('edit');
})
My cancel jquery method:
$orders.delegate('.cancelEdit','click',function(){
var $tr = $(this).closest('tr').removeClass('edit');
})
And lastly my saveEdit method:
$orders.delegate('.saveEdit', 'click', function(){
var $tr = $(this).closest('tr');
var self = this;
var user_id = $(this).attr('data-id');
var formData = new FormData();
var totalFiles = document.getElementById("user_photo_"+user_id).files.length;
for (var i = 0; i < totalFiles; i++)
{
var file = document.getElementById("user_photo_"+user_id).files[i];
formData.append("user_photo", file);
}
alert(user_id);
console.log(formData);
formData.append("user[firstname]", $(".firstname_"+user_id).val());
formData.append("user[lastname]", $(".lastname_"+user_id).val());
formData.append("user[gender]", $(".gender_"+user_id).val());
formData.append("user[address1]", $(".address1_"+user_id).val());
formData.append("user[address2]", $(".address2_"+user_id).val());
formData.append("user[street]", $(".street_"+user_id).val());
formData.append("user[street1]", $(".street1_"+user_id).val());
formData.append("user[contact_number]", $(".contact_number_"+user_id).val());
formData.append("user[email]", $(".email_"+user_id).val());
formData.append("user[password]", $(".password_"+user_id).val());
formData.append("user[city]", $(".city_"+user_id).val());
formData.append("user[state]", $(".state_"+user_id).val());
formData.append("user[country]", $(".country_"+user_id).val());
console.log(formData);
$.ajax({
// headers: {
// 'Content-Type': 'application/x-www-form-urlencoded'
// },
type: 'POST',
url: 'http://13.229.164.32/users/user_update.json?id=' + $(this).attr('data-id') ,
data: formData,
dataType: 'json',
contentType: false,
processData: false,
success: function(nData){
$tr.find('span.firstname').html(formData.firstname);
$tr.find('span.lastname').html(formData.lastname);
$tr.find('span.gender').html(formData.gender);
$tr.find('span.address1').html(formData.address1);
$tr.find('span.address2').html(formData.address2);
$tr.find('span.street').html(formData.street);
$tr.find('span.street1').html(formData.street1);
$tr.find('span.contact_number').html(formData.contact_number);
$tr.find('span.email').html(formData.email);
$tr.find('span.password').html(formData.password);
$tr.find('span.city').html(formData.city);
$tr.find('span.state').html(formData.state);
$tr.find('span.country').html(formData.country);
$tr.find('span.user_photo').html(formData.user_photo);
// addUser1(newUser);
// console.log(newUser);
$tr.removeClass('edit');
},
error:function(){
alert('error saving user');
}
});
});

.val() JQuery. Passing text fields to jQuery

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>