Can I dynamically change input to dropdown menu that queries from mysql - javascript

This is my code, it appends the input form after the user clicks the "Add more" button.
How can I change the input field to a dropdown menu that queries the data from mysql?
Thank you ^^
My HTML code
<form name="add_name" id="add_name">
<div class="table-responsive">
<table class="table table-bordered" id="dynamic_field">
<tr>
<td><input type="text" name="name[]" class="form-control name_list" /></td>
<td><button type="button" name="add" id="add" class="btn btn-success">Add More</button></td>
</tr>
</table>
<input type="button" name="submit" id="submit" class="btn btn-info" value="Submit" />
</div>
</form>
My javascript
<script>
$(document).ready(function(){
var i=1;
$('#add').click(function(){
i++;
$('#dynamic_field').append('<tr id="row'+i+'"><td><input type="text" name="name[]" class="form-control name_list" /></td><td><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove">X</button></td></tr>');
});
$(document).on('click', '.btn_remove', function(){
var button_id = $(this).attr("id");
$('#row'+button_id+'').remove();
});
$('#submit').click(function(){
$.ajax({
url:"name.php",
method:"POST",
data:$('#add_name').serialize(),
success:function(data)
{
alert(data);
$('#add_name')[0].reset();
}
});
});
});
</script>

Related

How to calculate average of values that are being inputted through dynamically added input fields into another textbox?

I want to calculate the average of inputs that have been inputted through dynamically added number text fields into another text field called, average. Please guide how can I calculate the average of dynamic fields using javascript.
<html>
<body>
<form>
<table id="dynamic_field">
<td>
<div>
<input type="hidden" class="form-control" name="uuid[]"/>
</div>
</td>
<td><input type="text" class="form-control" id="average" name="average"/></td>
<td>
<div>
<label>Enter number</label>
<input type="text" class="form-control" name="number[]" />
</div>
</td>
<td><button type="button" name="add" id="add" class="btn btn-success">Add More</button></td>
<input type="submit" name="submit" id="submit" value="Submit">
</table>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
<script type="text/javascript">
$(document).ready(function(){
var max_input = 7;
var i = 1;
$("#add").click(function(){if (i < max_input) {
i++;
$('#dynamic_field').append('<tr id="row'+i+'"><td><div><input type="hidden" class="form-control" name="uuid[]"/></div></td><td> </td><td><div><label>Enter number</label><input type="text" class="form-control" name="number[]" /></div></td><td> </td><td valign="bottom"><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove">X</button></td></tr><tr><td> </td><td> </td></tr>');
}});
$(document).on('click', '.btn_remove', function(){
var button_id = $(this).attr("id");
$('#row'+button_id+'').remove();
});
$("#submit").on('click',function(){
var formdata = $("#main-form").serialize();
$.ajax({
url :"action.php",
type :"POST",
data :formdata,
cache :false,
success:function(result){
alert(result);
$("#main-form")[0].reset();
}
});
});
});
</script>
You can use each loop to iterate through all your number input and on each iteration store value of input inside some variable and then divide this total with count and finally add result inside your average input-box.
Demo Code :
$(document).ready(function() {
var max_input = 7;
var i = 1;
$("#add").click(function() {
if (i < max_input) {
i++;
$('#dynamic_field').append('<tr id="row' + i + '"><td><div><input type="hidden" class="form-control" name="uuid[]"/></div></td><td> </td><td><div><label>Enter number</label><input type="text" class="form-control" name="number[]" /></div></td><td> </td><td valign="bottom"><button type="button" name="remove" id="' + i + '" class="btn btn-danger btn_remove">X</button></td></tr><tr><td> </td><td> </td></tr>');
}
});
$(document).on('click', '.btn_remove', function() {
var button_id = $(this).attr("id");
$('#row' + button_id + '').remove();
});
$(document).on("input", "input[name*=number]", function() {
var total = 0;
//get length of input field
var count = parseInt($("input[name*=number]").length);
//loop through each inputs
$("input[name*=number]").each(function() {
//add
total += $(this).val() != "" ? parseInt($(this).val()) : 0
})
//put value inside input box
$("#average").val(total / count);
})
});
<html>
<body>
<form>
<table id="dynamic_field">
<tr>
<td>
<div>
<input type="hidden" class="form-control" name="uuid[]" />
</div>
</td>
<td><input type="text" class="form-control" id="average" name="average" /></td>
<td>
<div>
<label>Enter number</label>
<input type="text" class="form-control" name="number[]" />
</div>
</td>
<td><button type="button" name="add" id="add" class="btn btn-success">Add More</button></td>
</tr>
</table>
<input type="submit" name="submit" id="submit" value="Submit">
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

How to pass the uuid value to all the input fields of a form that are added dynamically using JavaScript?

My form has a uuid text field. The uuid is auto-generated. I want to pass this uuid to all the dynamically added fields. Form below has two fields one is for the uuid and the other one is for the SKU number. Please kindly guide me.
<html>
<body>
<form>
<table id="dynamic_field">
<td>
<div>
<input type="hidden" class="form-control" name="uuid[]"/>
</div>
</td>
<td> </td>
<td>
<div>
<label>Enter SKU</label>
<input type="text" class="form-control" name="SKU[]" />
</div>
</td>
<td><button type="button" name="add" id="add" class="btn btn-success">Add More</button></td>
<input type="submit" name="submit" id="submit" value="Submit">
</table>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
<script type="text/javascript">
$(document).ready(function(){
var max_input = 7;
var i = 1;
$("#add").click(function(){if (i < max_input) {
i++;
$('#dynamic_field').append('<tr id="row'+i+'"><td><div><input type="hidden" class="form-control" name="uuid[]"/></div></td><td> </td><td><div><label>Enter SKU</label><input type="text" class="form-control" name="SKU[]" /></div></td><td> </td><td valign="bottom"><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove">X</button></td></tr><tr><td> </td><td> </td></tr>');
}});
$(document).on('click', '.btn_remove', function(){
var button_id = $(this).attr("id");
$('#row'+button_id+'').remove();
});
$("#submit").on('click',function(){
var formdata = $("#main-form").serialize();
$.ajax({
url :"action.php",
type :"POST",
data :formdata,
cache :false,
success:function(result){
alert(result);
$("#main-form")[0].reset();
}
});
});
});
</script>

Am creating a dynamic input field survey App

I am creating a survey app that dynamically adds a dropdown box , and two text boxes.Once an option is selected from the dropdown it populates the selected option . Unforunately the first option works but for the others it simply populates the data I selected in the first.The overall goal is to input it inside a database using php.This is my php script
<?php
$connect = mysqli_connect("localhost", "root", "", "test");
$number = count($_POST["name"]);
$crops = count($_POST["selectedCrop"]);
// echo $number;
// echo $crop;
if ($number > 0) {
for ($i=0; $i<$number; $i++) {
if (trim($_POST["name"][$i] != '')) {
$sql = "INSERT INTO tbl_name(name,crop) VALUES('".mysqli_real_escape_string($connect, $_POST["selectedCrop"][$i])."' ,'".mysqli_real_escape_string($connect, $_POST["name"][$i])."')";
mysqli_query($connect, $sql);
}
}
echo "Data Inserted";
} else {
echo "Please Enter Name";
}
The result are as follows The Image with the duplicated resukts
Here is my HTML Code and the Javascript I am using to achieve
<body>
<div class="container">
<div class="page-header">
<h1 class="text-center">SURVEY</h1>
</div>
<div class="container">
<div class="col-md-2">
</div>
<div class="col-md-8">
<div class="panel panel-default">
<div class="panel-heading">
<strong>E. FARMING AND AGRIBUSINESS </br>Farming</strong>
</div>
<div class="panel-body">
Which of the value chains did your household produce in September 2016 through rain fed production mechanisms? Or you produce now through rain fed production mechanisms?<i>Select all options applicable – 1, 2 up to last</i>
<br />
<form name="add_name" id="add_name">
<!-- This is the Table That I am adding the widgets dynamically -->
<table class="table table-striped table-bordered" id="dynamic_field">
<thead>
<tr>
<th>Name of Crop Options</th>
<th>Crop Selected</th>
<th>Produced/produce this value chain in 2015/2016?</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="dropdown" name= "crops[]">
<button id="crop" onchange="copyValue()" class="btn dropdown-toggle" type="button" data-toggle="dropdown" >
Name of Crop<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>Maize</li>
<li>Beans</li>
<li>Tomatoes</li>
<li>Potatoes</li>
</ul>
</div>
</td>
<td>
<input type="text" name="selectedCrop[]" id="selectedCrop" placeholder="Enter your Name" class="form-control name_list" />
</td>
<td>
<input type="text" name="name[]" placeholder="Enter your Name" class="form-control name_list" />
</td>
<td>
<button type="button" name="add" id="add" class="btn btn-success">Add More</button>
</td>
<!-- <td><button type="button" name="remove" id="'0'" class="btn btn-danger btn_remove">X</button></td></tr> -->
</tr>
</tbody>
</table>
<input type="button" name="submit" id="submit" class="btn btn-info" value="Submit" />
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
var i=1;
$('#add').click(function(){
i++;
$('#dynamic_field').append('<tr id="row'+i+'"><td><div class="dropdown" name= "crops[]"><button class="btn dropdown-toggle" type="button" data-toggle="dropdown" >Name of Crop<span class="caret"></span></button><ul class="dropdown-menu"><li>Maize</li> <li>Beans</li><li>Tomatoes</li><li>Potatoes</li></ul></div></td><td><input type="text" name="selectedCrop[]" id="selectedCrop" placeholder="Enter your Name" class="form-control name_list" /></td><td><input type="text" name="name[]" placeholder="Enter your Name" class="form-control name_list" /></td><td><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove">X</button></td></tr>');
});
$(document).on('click', '.btn_remove', function(){
var button_id = $(this).attr("id");
$('#row'+button_id+'').remove();
});
$('#submit').click(function(){
$.ajax({
url:"farming_and_agribusiness_1_copy.php",
method:"POST",
data:$('#add_name').serialize(),
success:function(data)
{
alert(data);
$('#add_name')[0].reset();
}
});
});
});
$(function(){
$(".dropdown-menu li a").click(function(){
$("#crop:first-child").text($(this).text());
$("#crop:first-child").val($(this).text());
$("#selectedCrop:first-child").text($(this).text());
$("#selectedCrop:first-child").val($(this).text());
});
});
</script>
<!-- Survey - END -->
</div>
</body>

Button Click not working After Ajax call in bootstrap modal

Button is working before ajax call in bootstrap Modal.
But After Ajax call click event is not working.
function book_appointment_timeslot(job_id,planner_date,time_slot,contract_id){
$.ajax({
type: "POST",
url: "/add_appointment_planner",
data: { contract_id: contract_id,job_id : job_id, planner_date: planner_date, time_slot: time_slot, _token: CSRF_TOKEN },
success: function(data){
if(data['status']=='success')
{
show_notification(data['status'],data['message']);
$("#apt_status_table").load(location.href + " #apt_status_table");
$(".tbl_planner_list_whole").load(location.href + " .tbl_planner_list_whole");
}
}
});
}
I Have tried below solutions ,
Solution-1 :-
$(document).on('click', '.appointment_edit_button', function(){
alert("success");
});
Solution-2 :-
$(document).delegate('click', '.appointment_edit_button', function(){
alert("success");
});
I tried with unbind() also. It also not working.
When I put script directly in Console. Then it's working. So may be it's due to bootstrap modal.
So, I want to enable button click event after ajax call in bootstrap modal.
EDIT :-
HTML Code :-
<tbody>
<tr>
<td>
<div class="agenda-date">
<div class="dayofmonth color_font_date">2017-06-01</div>
<div class="dayofweek">
thursday </div>
</div>
</td>
<td>
<div class="row margin_two_planner">
<button type="button" class="btn btn-sm btn-primary" onclick="book_appointment_timeslot(19,"2017-06-01",
1,43)">am </button>
<a data-toggle="modal" href="#add_apt_status" class=""><input type="number" value="8" name="" class="number_planner"></a>
<input type="number" value="9" name="" class="max_limit" disabled="">
<input type="hidden" value="am" name="" class="timeslot_max_limit" disabled="">
</div>
<div class="row margin_two_planner">
<button type="button" class="btn btn-sm btn-primary" onclick="book_appointment_timeslot(19,"2017-06-01",
2,43)">pm </button>
<a data-toggle="modal" href="#add_apt_status" class=""><input type="number" value="6" name="" class="number_planner"></a>
<input type="number" value="5" name="" class="max_limit" disabled="">
<input type="hidden" value="pm" name="" class="timeslot_max_limit" disabled="">
</div>
</td>
<td style="width: 20%;">
<textarea id="" class="form-control initial_cap appointment_note" required="required" rows="3" name="appointment_note" cols="50" aria-required="true" disabled=""> asdsad </textarea>
</td>
<td style="width: 20%;">
<textarea id="" class="form-control initial_cap holiday_note" required="required" rows="3" name="holiday_note" cols="50" aria-required="true" disabled=""> asasdsaddsad </textarea>
</td>
<td>
<div class="text-right">
<input type="hidden" class="planner_date" name="" value="2017-06-01">
<input type="hidden" class="contract_id" name="" value="43">
<button type="button" id="" class="btn btn-primary appointment_edit_button">edit </button>
<button type="button" id="" onclick="planner_note_edit(10,event)" class="btn btn-md btn-primary appointment_update_button" style="display:none"> update </button>
<button type="button" id="" class="btn btn-md btn-cancel appointment_cancel_button" style="display:none">cancel </button>
</div>
</td>
</tr>
</tbody>
Through this appointment_edit_button class I'm doing this process.
$(".appointment_edit_button").on("click",function(event) {
$(this).closest('tr').find(".appointment_note").prop("disabled", false);
$(this).closest('tr').find(".holiday_note").prop("disabled", false);
$(this).closest('tr').find(".max_limit").prop("disabled", false);
$(this).next('button').show();
$(this).next('button').next('button').show();
$(this).hide();
});
I looks like.
I am guessing your dom is manipulated by that ajax success callback so the click event registration is removed. Try to bind the click event again in the ajax callback.
function book_appointment_timeslot(job_id,planner_date,time_slot,contract_id){
$.ajax({
type: "POST",
url: "/add_appointment_planner",
data: { contract_id: contract_id,job_id : job_id, planner_date: planner_date, time_slot: time_slot, _token: CSRF_TOKEN },
success: function(data){
if(data['status']=='success')
{
show_notification(data['status'],data['message']);
$("#apt_status_table").load(location.href + " #apt_status_table");
$(".tbl_planner_list_whole").load(location.href + " .tbl_planner_list_whole");
$('.appointment_edit_button').click(function(){alert("success");});
}
}
});
}
After ajax response, your binding to div for specific call (click in your case) is removed as DOM area is loaded. Try to initialize your bindings again in ajax response success.

Reset the dynamic form as before

I have a html coding like this:
<form>
<table class="tabelWhiteJenisPembayaran">
<tbody>
<tr>
<td><input type="text" class="whiteJenisPembayaran" name="whiteJenisPembayaran[]" placeholder="Jenis Pembayaran" autocomplete="off" style="margin-bottom: 5px;"/></td>
</tr>
</tbody>
</table>
<button class="btn btn-primary" type="submit">Simpan</button>
<button class="btn" type="reset">Batal</button>
</form>
and I have a JavaScript coding as below:
$("table.tabelWhiteJenisPembayaran tbody tr:last").live('click', function(){
var tr = '<tr><td><input type="text" class="whiteJenisPembayaran" name="whiteJenisPembayaran[]" autocomplete="off" style="margin-bottom: 5px;" placeholder="Jenis Pembayaran"/></td></tr>';
$("table.tabelWhiteJenisPembayaran tbody").append(tr);
});
If the form is clicked will display a new form, for example I click 3 times in the last form, the total form there are 4 form. I'm wondering is how when I click on the "reset" the number of forms that had been there 4 form into 1 form as before. How to reset to 1 form again. Please help.
Try This way
$("table.tabelWhiteJenisPembayaran tbody tr:last").live('click', function(){
var tr = '<tr><td><input type="text" class="whiteJenisPembayaran" name="whiteJenisPembayaran[]" autocomplete="off" style="margin-bottom: 5px;" placeholder="Jenis Pembayaran"/></td></tr>';
$("table.tabelWhiteJenisPembayaran tbody").append(tr);
});
$("[type=reset]").click(function(){
$('table.tabelWhiteJenisPembayaran tr:not(:first)').remove();
});
​
Working Demo
I'm not sure if this is what you want. I guess you want to reset all the forms.
$('form').each(function(){
this.reset()
});
you could clone the initial form element and its children and replace the form with the clone when the reset button is clicked.
here is a fiddle http://jsfiddle.net/qZ6nK/
<script type="text/javascript">
var formClone = null;
$(document).ready(function() {
formClone = $('table.tabelWhiteJenisPembayaran').parents('form').clone();
$("table.tabelWhiteJenisPembayaran tbody tr:last").live('click', function(){
var tr = '<tr><td><input type="text" class="whiteJenisPembayaran" name="whiteJenisPembayaran[]" autocomplete="off" style="margin-bottom: 5px;" placeholder="Jenis Pembayaran"/></td></tr>';
$("table.tabelWhiteJenisPembayaran tbody").append(tr);
});
});
function onReset(e) {
var parent = $('table.tabelWhiteJenisPembayaran').parents('form').parent();
$('table.tabelWhiteJenisPembayaran').parents('form').remove();
parent.append(formClone);
formClone = $('table.tabelWhiteJenisPembayaran').parents('form').clone();
}
</script>
<form>
<table class="tabelWhiteJenisPembayaran">
<tbody>
<tr>
<td><input type="text" class="whiteJenisPembayaran" name="whiteJenisPembayaran[]" placeholder="Jenis Pembayaran" autocomplete="off" style="margin-bottom: 5px;"/></td>
</tr>
</tbody>
</table>
<button class="btn btn-primary" type="submit">Simpan</button>
<button class="btn" type="reset" onclick="onReset(event)">Batal</button>
</form>

Categories