We Keep Coding

CodeIgniter - Store Value from Input Fields Dynamically Added in Form to MySQL Table

I have a case I'd like to be solved. I've been learning CI Framework for almost a month now. and what I want to do is I want to store value from input fields in a form that I add dynamically into MySQL table but I have no idea how to do that.
I already have the script in HTML + JavaScript for the view.
HTML script
<div class="input_fields_wrap">
<button class="add_field_button">Add More Fields</button>
<div>
<input type="text" name="mytext[]" placeholder="Account Title">
<input type="text" name="mytext2[]" placeholder="Description">
<input type="text" name="mytext3[]" placeholder="Credit">
<input type="text" name="mytext4[]" placeholder="Debit">
</div>
</div>
JavaScript script
<script type="text/javascript">
$(document).ready(function() {
var max_fields = 10; //maximum input boxes allowed
var wrapper = $(".input_fields_wrap"); //Fields wrapper
var add_button = $(".add_field_button"); //Add button ID
var x = 1; //initlal text box count
$(add_button).click(function(e){ //on add input button click
e.preventDefault();
if(x < max_fields){ //max input box allowed
x++; //text box increment
$(wrapper).append('<div><input type="text" name="mytext[]" placeholder="Account Title"><input type="text" name="mytext2[]" placeholder="Description"><input type="text" name="mytext3[]" placeholder="Credit"><input type="text" name="mytext4[]" placeholder="Debit">Remove</div>'); //add input box
}
});
$(wrapper).on("click",".remove_field", function(e){ //user click on remove text
e.preventDefault(); $(this).parent('div').remove(); x--;
})
});
</script>
is there anyone can help me to pass the value into database from controller? sorry I'm new to CI Framework so please forgive me by asking this kind of question.

use
<form method="POST" id="myform">
<div class="input_fields_wrap">
<button class="add_field_button">Add More Fields</button>
<div>
<input type="text" name="field[]" placeholder="Account Title">
<input type="text" name="field[]" placeholder="Description">
<input type="text" name="field[]" placeholder="Credit">
<input type="text" name="field[]" placeholder="Debit">
</div>
</div>
</form>
This will create a form and get data as serializeArray() with jquery then pass that data to the controller with ajax or form submit
In your controller,
$input_data=$this->input->post();
//now input data has an array "field" You can use that data,
you will see result array like Array ( [field] => Array ( [0] => fsdf [1] => dsfdsf [2] => dsf [3] => dsfds ) )
//$this->db->insert("target_table",$input_data);//this will insert a record into target_table in database

Dynamic upload image preview

I'm using a script to create the image upload preview image (http://www.jqueryscript.net/demo/Image-Upload-Preview-Plugin-With-jQuery-Bootstrap-img-upload/).
Is working really fine, but I'm having some problems, in my form i need to create add inputs functionality, in my case, the user can add more fields dynamically, if i insert more than one input file field in my html, i have no issue, the problem starts only if i click the add button to create new input fields. Some events gets triggered and starts showing buttons that only show after i insert a image. Above i leave my add inputs fields dynamically code.
example:
https://jsbin.com/bozeyuface/edit
Js:
//inputs
var max_fields = 10; //maximum input boxes allowed
var wrapper = $(".input_fields_wrap"); //Fields wrapper
var add_button = $(".add_field_button"); //Add button ID
var x = 1; //initlal text box count
$(add_button).click(function(e) { //on add input button click
e.preventDefault();
if (x < max_fields) { //max input box allowed
x++; //text box increment
$(wrapper).append('<div class="col-md-4"><div class="form-group"><input class="form-control" type="text" placeholder="Brand" name="brand[]"></div><div class="form-group"><input class="form-control" type="text" placeholder="title" name="title[]"></div><div class="form-group"><input class="form-control" type="text" placeholder="url" name="url[]"></div><div class="form-group"><div class="imageupload panel panel-default"><div class="file-tab panel-body"><label class="btn btn-default btn-file"><span>Browse</span><input type="file" name="file"></label><button type="button" class="btn btn-default">Remove</button></div><div class="url-tab panel-body"><div class="input-group"><input type="text" class="form-control hasclear" placeholder="Image URL"><div class="input-group-btn"><button type="button" class="btn btn-default">Submit</button></div></div><button type="button" class="btn btn-default">Remove</button><input type="hidden" name="image-url[]"></div></div></div><i class="fa fa-trash"></i> Remove</div>');
}
});
$(wrapper).on("click", ".remove_field", function(e) { //user click on remove text
e.preventDefault();
$(this).parent('div').remove();
x--;
})

Just add the below code and add a unique class to the div by using the counter. If it works for you then accept the answer
var x = 1; //initlal text box count
$(add_button).click(function(e){ //on add input button click
e.preventDefault();
if(x < max_fields){ //max input box allowed
x++; //text box increment
$(wrapper).append('<div class="col-md-4 div-'+x+'"><div class="form-group"><input class="form-control" type="text" placeholder="Brand" name="brand[]"></div><div class="form-group"><input class="form-control" type="text" placeholder="title" name="title[]"></div><div class="form-group"><input class="form-control" type="text" placeholder="url" name="url[]"></div><div class="form-group"><div class="imageupload panel panel-default"><div class="file-tab panel-body"><label class="btn btn-default btn-file"><span>Browse</span><input type="file" name="file"></label><button type="button" class="btn btn-default">Remove</button></div><div class="url-tab panel-body"><div class="input-group"><input type="text" class="form-control hasclear" placeholder="Image URL"><div class="input-group-btn"><button type="button" class="btn btn-default">Submit</button></div></div><button type="button" class="btn btn-default">Remove</button><input type="hidden" name="image-url[]"></div></div></div><i class="fa fa-trash"></i> Remove</div>').find('.div-'+x+' .imageupload').imageupload();
}
});
$(wrapper).on("click",".remove_field", function(e){ //user click on remove text
e.preventDefault(); $(this).parent('div').remove(); x--;
})
});

I want to break textbox value

I am using javascript to adding two textbox values and store that value in same textbox. For that process am using onmouseenter event. When i enter mouse in that textbox that textbox values increasing each time but i need to avoid it. Here i posted my code can you please solve it,
function removeFormField() {
var count_id = document.getElementById("balance").value;
document.getElementById('balance').value = parseInt(count_id)+10;
}
HTML Code:
<div class="form-group">
<label for="firstname" class="col-sm-4 control-label">Balance amount</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="balance" name="balance" placeholder="Balance amount" onmouseenter="removeFormField();">
</div>
</div>

Use a flag to keep track of change
var allowChange = true;
function removeFormField() {
if(allowChange){
var count_id = document.getElementById("balance").value;
document.getElementById('balance').value = parseInt(count_id)+10;
allowChange = false;
}
}

<input type="text" class="form-control" id="balance" name="balance" placeholder="Balance amount" onkeypress="removeFormField()">
Only one change made on the input event. Changed to keypress and it is only called when you enter and input to field. and not when you click your mouse on to the field.

Adding numbers on click with jQuery

Well, I'm trying to make a type of invoice.
Here's my problem : The invoice has various input boxes where the amount is typed by the user and there's "Total Charge"(input box) at the end of the list of those boxes. So what I want is that if some values(numeric) are filled in the the input boxes and a user click on the "Total Charge"(input box) the values are summed. How can I do it? I have used jQuery before. So, if possible can anyone explain how can I do it in jQuery?
Script so far
$('.charge').blur(function () {
var totalocharges = 0;
$('.charge').each(function() {
totalocharges += Number($(this).val());
});
$('#total_charges').val(totalocharges);
});
my view(just a part of it):
<div class="form-group col-md-offset-1 col-md-5">
<input type="number" class="charge form-control" id="amount1" name="amount1" value="<?php echo set_value('amount1'); ?>" placeholder="amount" required>
</div>
<div class="form-group col-md-offset-1 col-md-5">
<input type="number" class="charge form-control" id="amount2" name="amount2" value="<?php echo set_value('amount2'); ?>" placeholder="amount" required>
</div>
<div class="form-group col-md-offset-1 col-md-5">
<input type="text" class="form-control" id="total_charges" name="total_charges" value="<?php echo set_value('total_charges'); ?>" placeholder="net amount">
</div>

You could do something like this with jQuery.
In this example, your input boxes would have 'charge' class. And your total charge input the ID total-charges)
$('.charge').blur(function () {
var total_charges = 0;
$('.charge').each(function() {
total_charges += Number($(this).val());
});
$('#total-charges').val(total_charges);
});​​​​​​​​
Here you have a working code sample:
https://jsfiddle.net/0e8emcbu/
If you want to activate it with a button, then it would be like this:
https://jsfiddle.net/8cmL29xt/

Attach an event listener to the "Total charge" input box. For example, you can use "focus" event.
$("#total_charge").on('focus', function(){
//here you have to make calculations
//get values on all required input boxes
var value1 = $("#input_box1").val();
//another value
//sum (multiply, divide etc) values
val result = value1 + value2 + ...l
//change total_charge value
$("#total_charge").val(result);
});

jquery dynamic creation of html elements

I am trying to generate an html text box on clicking add more new notes but when I click add more notes button instead of creating the html element the button submits the form. Below is the html code
<form action="addnote.php" method="post">
<div class="input_fields_wrap1">
<div class="form-group">
<label class="col-md-3" for="example-text-input">Note</label>
<div class="col-md-2">
<input type="text" id="coa" name="notes[]" class="form-control" >
</div>
<button class="add_field_button1">Add More Notes</button>
</div>
</div>
<input type="submit" value="submit">
</form>
JQuery code
<script>
$(document).ready(function() {
var max_fields = 100; //maximum input boxes allowed
var wrapper = $(".input_fields_wrap1"); //Fields wrapper
var add_button = $(".add_field_button1"); //Add button ID
var x = 1; //initlal text box count
$(add_button).click(function(e){ //on add input button click
e.preventDefault();
if(x < max_fields){ //max input box allowed
x++; //text box increment
$(wrapper).append('<div class="form-group"><label class="col-md-3 control-label" for="example-text-input">Note</label><div class="col-md-3"><input type="text" id="coa" name="notes[]" class="form-control" ></div>Remove</div>'); //add input box
}
});
$(wrapper).on("click",".remove_field", function(e){ //user click on remove text
e.preventDefault(); $(this).parent('div').remove(); x--;
})
});
</script>

Put type=button as by default it work as submit button
<button class="add_field_button1" type="button">Add More Notes</button>
JSFiddle Demo

Change this:
<button class="add_field_button1">Add More Notes</button>
to this:
<button class="add_field_button1" type="button">Add More Notes</button>
Becouse your button is a type="submit" at the moment.
That's why it's posting the form.