We Keep Coding

How to pass div element value to input type textbox and save value in database

I have created one IMS System in that i have to do conversion of net_amount from number format to word format.I am getting proper output but it is in div element now i have to pass into input type text and after that i have to enter this value in database also.If anybody has any idea how to do it please help.
Below i have given my code (in this i am able to convert from div element to input type text box when i click on div value but value of input type is not entering in database)
<div class="col-md-12">
<p class="words"><b>Total Net Amount(In Words):-</b></p>
<div id="container" class="conversion"></div><input type="hidden" name="net_amount_words" id="net_amount_words_Hidden"/>
</div>
<script type="text/javascript">
$("#container").click(function(){
//check if there are any existing input elements
if ($(this).children('input').length == 0){
$("#saveFirstName").css("display", "inline");
//variable that contains input HTML to replace
var inputbox = "<input type='text' class='inputbox' name='net_amount_words' value=\""+$(this).text()+"\">";
//insert the HTML intp the div
$(this).html(inputbox);
//automatically give focus to the input box
//$("this .inputbox").focus();
//maintain the input when it changes back to a div
$("this .inputbox").blur(function(){
var value = $(this).val();
$("#net_amount_words_Hidden").val(value);
});
}
});
</script>
Below is my query to insert data into database
if(isset($_POST['submit'])){
$net_amount_words = $_POST['net_amount_words'];
$sql = "INSERT INTO `orders` SET `net_amount_words`='$net_amount_words' ";
$_dbConn->insert($sql) or die(mysql_error());
}

Clear text area on radio button click and get text instead of value jquery

Here i am able to clear data but when i push value from other radio button its load again previous data which i don't want.
I want textarea data should be clear permanently on radio button click and should not load with any other.
Here is my code
<div class="portlet-body">
#foreach($students as $student)
<div>
<input type="radio" value="{{$student->id}}" name="student_lists[]" onclick="getdata( {{ $student->id }} )"/>
{{$lists->name}}
<span></span>
</div>
<div id="students-data"></div>
#endforeach
</div>
script
<script>
function getdata(id)
{
$('#textbx').val(null);
$.ajax({
url: '/students/'+id,
type: "POST",
success: function (data) {
$('#students-data').html(data);
}
});
}
Controller method to get HTML
public function loadData($id)
{
$students = DB::table('students')->select('name' , 'id')->where('user_id' , $id)->get();
$data = '';
$data .= '<div class="form-group">
<label class="control-label col-md-1">
</label>
<div class="col-md-8">
<label class="">';
foreach ($students as $student) {
$data .= "<input type='checkbox' class='chkbx' name='custom' onclick='push()' value='{$student->name}'/> {$student->name}
<span></span>";
}
$data .='</label>
</div>
</div>';
return $data;
}
Script to push data in text area
<script>
function push()
{
$checks = $(".chkbx:checkbox");
$checks.on('change', function() {
var data = $checks.filter(":checked").map(function(i,v){
return this.value;
}).get().join("\n");
$('#textbx').val(data);
});
}
</script>
Textarea where i push values
<textarea name="fields" id="textbx" class="form-control" rows="8" ></textarea>
Please help how can i hard reset textarea value.

Remove the push function, keep the change event and delegate it so you can trigger the code on the dynamically added elements, select the checkboxes relative to your clicked checkobx
$(function(){
$('body').on('change',".chkbx:checkbox", function() {
var data = $(this).parent().find(':checkbox:checked').map(function(i,v){
return $(v).val();
}).get().join("\n");
$('#textbx').val(data);
});
});
if you have student->id as a value and want student->name to be apppended to the textarea then you need to alter your html as follows
add a custom attribute called data-name with the student name
$data .= "<input type='checkbox' class='chkbx' name='custom' data-name=' {$student->name}' value='{$student->name}'/> {$student->name}
<span></span>";
and the js map to return:
return $(v).attr('data-id');

At beginning before looping statement initialize your student-data variables to 0 or null.
All the variables you want to display should be initialized to 0 or NULL, so that every time function is called first the values will be set to null then for loop stores its values.

How to toggle form visibility dynamically?

I have page where user can dynamically create new forms. For every new form button is created. Form is hidden by default. I need to toggle form visibility on that button click. Right now i am using javascript code below and its working
$(document).ready(function(){
$("#button1").click(function(){
$("#1").css({"display":"block"});
$("#2").css({"display":"none"});
$("#3").css({"display":"none"});
});
$("#button2").click(function(){
$("#2").css({"display":"block"});
$("#1").css({"display":"none"});
$("#3").css({"display":"none"});
});
...
Now when user create form i manually modify javascript but problem is that i have too many forms right now and ill have even more.
I need solution to bind button for form and toggle its visibility. Any advice is appreciate.
EDIT
Code i am actually using:
while ($row = $result9->fetch_assoc())
{
echo "<input class='btn btn-default' type='button' id='".$row['o_ime']."' name='button' value='".$row['o_ime']."'>";
}
echo "<form class='form-inline' role='form' name='$i' id='$i' style='display:none' action='naruci.php' method='POST' onsubmit='return validateForm()'>";
form elements
echo "</form>";

First of all, you cannot have the same ID in your DOM.
So instead of IDs use classes. And use jquery's class selector.
So to capture the event, just use the class selector.
And also use hide and show jquery APIs to show/hide elements.
$(".new-btn").click(function(){
$("form").hide(); // close all forms
$("this").closest("form").show(); // show parent form
});
And the next thing I notice, for dynamic elements it cannot be captured by normal click event. Use jquery on API.
$(".new-btn").on('click', function(){
$("form").hide(); // close all forms
$("this").closest("form_").show(); // show parent form
// This is the reason it is not working because I forgot the underscore
});
Update:
It should look like this:
while ($row = $result9->fetch_assoc())
{
echo "<input class='btn btn-default' type='button' id='".$row['o_ime']."' name='button' value='".$row['o_ime']."'>";
// We changed the form ID in this section
echo "<form class='form-inline' role='form' name='$i' id='form_".$row['o_ime']."' style='display:none' action='naruci.php' method='POST' onsubmit='return validateForm()'>";
form elements
echo "</form>";
}
In my query I will create an event to capture my button clicks:
$('.btn').on('click', function(){ // Listen all click events of buttons with class `btn`
var id = $(this).attr('id'); // Get ID of focus button
var formName = 'form' + id; // Append form string in the id to match form's ID
$('form').hide(); // Hide all forms
$('#' + formName).show(); // Show exact form
});

you'll find the best way of what you want to do by following the example here in this link
http://www.w3schools.com/jquery/eff_toggle.asp
$("button").click(function(){
$("p").toggle();
});

You can add unique class for all of your forms. Refer this code
<form class="test" id="1"></form>
<form class="test" id="2"></form>
<form class="test" id="3"></form>
$(document).on("click",".test",function(event){
$(".test").css({"display":"none"});
$(this).css({"display":"block"});
});

Just make your own class for display block.
.db{
display:block;
}
Then on your jquery just toggle class.
$("button").click(function(){
$("#1").toggleClass('db');
})

\\对于动态生成的元素需要使用`on`来监听事件的触发
Try the following
$(function(){
//动态构造form元素
//Dynamic construction of form elements
$('#cnf').on('click',function(){
$('#container').append('<div>' +
'<button>toggle</button>' +
'<form><input value="value"></form>' +
'</div>')
});
//通过冒泡监听按钮事件
//The bubble monitor button event
$('#container').on('click','button',function(){
$(this).next().toggle();
})
})
祝顺利！

why that my button only give me the value of my first column inside a table

why that my button only give me the value of my first column inside a table when i clicked the other button it give me the same output as the first column.
here is the code in showing the item inside the table
try {
while($row=$query->fetch(PDO::FETCH_NUM))
{
echo
'<tr>
<td ><div id="studID">'.$row[0].'</div></td>
<td>'.$row[1].'</td>
<td>'.$row[2].'</td>
<td>'.$row[3].'</td>
<td>
<button class="button active"
name="button"value="'.$row[0].'">view</button>
</td>
</tr>';
}
echo '</table>';
} catch(PDOException $e ){
echo "Error: ".$e;
}
and here is the coded when i clicked the button
<script type="text/javascript">
$(".button").click(function(){
var id =$('.button').val();
alert (id);
});
</script>>
thanks in advance.

Use this object like below:
<script type="text/javascript">
$(".button").click(function(){
var id =$(this).val();
alert (id);
});
</script>>

Click event always get first matching element from dom. If you want to get all buttons get then by for() loop , each loop, map function, or you can follow underscore library.

Don't give your button the value, instead in your click function do
$("td").each(function() {
var id = $('td').val();
alert(id);
});
This way it will iterate over each of your td elements and produce an alert with the value of it. Or you can do this:
var valueArray
$("td").each(function() {
var id = $('td').val();
valueArray.push(id);
});
alert(valueArray);
Which should hopefully do an alert with all the values in it.
and for your button do:
<button class="button active" name="button">view</button>
But bear in mind that this will do it for all td elements on your page so if you have more than one table this will do an alert for every td in every table you have. To avoid this give the table an id and replace $("td") with $("#tableID td").

You need to iterate through all the classes available using jQuery.each() function. While here you are only fetching the first element value.
You can try something like below:
<script type="text/javascript">
$(".button").click(function(){
$( ".button" ).each(function( index ) {
alert( $( this ).val() );
});
});
</script>

How to select a dynamically generated form element in jquery / javascript using its ID?

I am trying to create a row of 3 form fields dynamically when the user clicks on the ADD button / plus symbol .
Javascript code used to create the form elements is below :
<script type="text/javascript">
var field_counter = 1;
var field_limit = 5;
species = document.getElementById('species');
breed = document.getElementById('breed');
function addInput(divName){
if (field_counter == field_limit) {
alert("You have reached the limit of adding " + field_counter + " inputs");
}
else {
var dynamic_species = 'species'+field_counter; //dynamic id for species
var dynamic_breed = 'breed'+field_counter; //dynamic id for breed
var dynamic_quantity = 'quantity'+field_counter; //dynammic id for quantity
var dynamicForm = '<div class="form-group"><div class="col-md-4"><label for="'+dynamic_species+'">Animal Type</label><select class="form-control input-sm '+dynamic_species+'" id="'+dynamic_species+'"><option></option></select></div>';
dynamicForm+='<div class="form-group"><div class="col-md-4"><label for="'+dynamic_breed+'">Breed</label><select class="form-control input-sm '+dynamic_breed+'" id="'+dynamic_breed+'"><option></option></select></div>';
dynamicForm+='<div class="form-group"><div class="col-md-2"><label for="'+dynamic_quantity+'">Quantity</label><input type="number" name="quantity_export" id="'+dynamic_quantity+'" class="form-control input-sm '+dynamic_quantity+'" /></div>';
var newdiv = document.createElement('div');
newdiv.innerHTML = dynamicForm;
document.getElementById(divName).appendChild(newdiv);
document.getElementById(dynamic_species).innerHTML = species.innerHTML;
document.getElementById(dynamic_breed).innerHTML = breed.innerHTML;
field_counter++;
}
}
</script>
<div class="col-md-2" >
<label for=""> </label>
<i onclick="addInput('dynamicInput');" style="cursor: pointer; border: none;" class="fa fa-plus form-control input-sm">Add</i>
</div>
Using the above code am creating the form fields "Animal Type , Breed and Quantity ", all together in a row as shown in the image . Maximum number of rows that can be added is limited to the value of the variable "field_limit".
The value of the drop downs are initially populated from the parent drop down using the code :
species = document.getElementById('species');
breed = document.getElementById('breed');
document.getElementById(dynamic_species).innerHTML = species.innerHTML;
document.getElementById(dynamic_breed).innerHTML = breed.innerHTML;
Question : How can I select the dynamically generated ID of the new form fields .
Here is the script am using to select the first row of form fields which is in the HTML when the page loads for the first time :
$("#species").change(function(){
$('#breed').empty();
//alert($(this).val());
var param = {'id':$(this).val()};
$.ajax({
type : 'POST',
url : '<?php echo base_url();?>select_breed',
dataType : 'json',
data: param,
success : function(data)
{
var select = $('#breed');
select.empty().append(data);
},
error : function(XMLHttpRequest, textStatus, errorThrown)
{
alert(XMLHttpRequest.responseText);
}
});
});
The second row of form fields are created dynamically with the following ID's
First Field : Animal Type : ID="species1"
Second Field : Breed : ID="breed1"
Third Field : Quantity : ID="quantity1"
I am not able to select the dynamically generated form fields using the jquery selector :- eg: $("#species1").change(function(){}); , it is not working .
What I am trying to do ?
I need to get the value of these fields using its ID attribute. Any help would be highly appreciated . Thank you .

Use event delegation for dynamic generated content like so :
// change `document` to top level parent that existed on page or
// parent container
$(document).on("change", "#species1", function(){...});

Thats because they do not exists yet when binding to it's change event.
You could add the event listener in the add_input function, or use a more abstract event handler:
$("form").on("change", ".species", function () {
var id = $(this).attr("data-id");
...
});
This will require you to drop the ID's and use class attributes instead. Which is the way to go by my opinion.
You can attach the ID's using $(speciesElement).attr("data-id", id).