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--;
})
});
Related
this is the input field
<input name ="norvic_id" id="norvic_id" type="text" class="form-control" placeholder="Norvic ID">
this is the script
<script>
$('#norvic_id').keyup(function() {
var x = $('input[name=norvic_id]').val();
$("#nid").val(x);
});
</script>
nid is hidden input value in a form where i am sending the data from the norvic_id field
{!!Form::open(['method'=>'POST','route'=>['newpatients.store'], 'class'=>'form-horizontal
bordered-row','enctype'=>'multipart/form-data'])!!}
<input name ="nid" id="nid" type="hidden" value="" class="form-control">
<input name ="pid" id="pid" type="hidden" value="{{$d->id}}" class="form-control">
<button type="submit" class="btn btn-sm btn-sm btn-success btn_glyph" id="confirm">Confirm</button>
{!!Form::close() !!}
Ids must be unique in all the website.
You can set a norvic_id class to that inputs:
And then use the class selector in jQuery:
$('.norvic_id').keyup(function() {
var x = $(this).val();
$("#nid").val(x);
});
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
I'm trying to add 3 fields dynamically (2 text fields and 1 remove button). The add button is working fine. The problem is the remove function. It's only removing the remove button, but not the other 2 fields it should.
This is my html code:
<div class="col-lg-12">
<div class="field_wrapper form-group col-sm-12">
<div class="form-group col-sm-4">
<input type="text" name="id[]" value="" class="form-control"/>
</div>
<div class="form-group col-sm-4">
<input type="text" name="name[]" value="" class="form-control"/>
</div>
<div class="form-group col-sm-4">
Adicionar Valor
</div>
</div>
</div>
This is the javascript:
<script type="text/javascript">
$(document).ready(function(){
var maxField = 10; //Input fields increment limitation
var addButton = $('.add_button'); //Add button selector
var wrapper = $('.field_wrapper'); //Input field wrapper
//var fieldHTML = '<div><input type="text" name="field_name[]" value=""/>Remover</div>'; //New input field html
var fieldHTML = '<div class="field_wrapper form-group col-sm-12"><div class="form-group col-sm-4"><input type="text" name="id[]" value="" class="form-control"/></div><div class="form-group col-sm-4"><input type="text" name="name[]" value="" class="form-control"/></div><div class="form-group col-sm-4">Remover</div></div>'; //New input field html
var x = 1; //Initial field counter is 1
$(addButton).click(function(){ //Once add button is clicked
if(x < maxField){ //Check maximum number of input fields
x++; //Increment field counter
$(wrapper).append(fieldHTML); // Add field html
}
});
$(wrapper).on('click', '.remove_button', function(e){ //Once remove button is clicked
e.preventDefault();
$(this).parent('div').remove(); //Remove field html
x--; //Decrement field counter
});
});
</script>
How can I fix this?
The problem is that you're removing the $(this).parent('div'), that is giving you the form-group of the button and not the intended .field_wrapper, what you can do instead is use the .closest('.field_wrapper') which will find the element you've added.
Check this fiddle, for more information.
Just changed:
$(this).parent('div').remove();
for:
$(this).closest('.field_wrapper').remove();
Use
$(this).parent('div').parent('div').remove()
Working fiddle
I want to change the name of the variable myAuthorText and mybookText to maintain the author and his books seperate from the other authors and their books.
How I would usually do it in php is:
<?php
$x = 0;
echo "
<html>
<form action='' method='post'>
<input type='text' name='myText.'{$x}'.[]'/>
</form>
</html>
";
?>
In the above code the name of myText is appended by a variable name in this case a number to show the increment (myText0, myText1, myText2... of course there is a for loop here to increment it). I want to to this with JQuery to not have to reload the page every time I want to add a new author or book. After the .clone I want it to change its name.
this is the code that I have for the books and authors in JQuery.
<div class="container">
<form class="form-horizontal" role="form" action="next.php" method="post">
<!-- http://www.sanwebe.com/2013/03/addremove-input-fields-dynamically-with-jquery-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="input_fields_wrap">
<button class="add_field_button">Add Author</button>
<div id="commonPart" class="commonPart">
<br>
<div><input type="text" name="myAuthorText[]" placeholder="Auth name"></div>
<button class="add_sub_field_button">Add Author Books</button>
<div><input type="text" class="bookname" name="myBooksText[]" placeholder="Book name"></div>
</div>
</div>
<input name="submit" class="submit" value="Enviar" type="submit">
<!-- http://www.sanwebe.com/2013/03/addremove-input-fields-dynamically-with-jquery-->
</form>
</div>
<script src="../js/jquery-2.1.4.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/jqBootstrapValidation.js"></script>
<SCRIPT language="javascript">
//http://www.sanwebe.com/2013/03/addremove-input-fields-dynamically-with-jquery
$(document).ready(function() {
var max_fields = 10; //maximum input boxes allowed
var wrapper = $(".input_fields_wrap"); //Fields wrapper
var commonPart = $("#commonPart");
var add_button = $(".add_field_button"); //Add button ID
var add_subButton = $(".add_sub_field_button"); //Add sub 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
var htmlToAdd = commonPart.clone().attr("id","commonPart_"+x);
htmlToAdd.find(".addedDiv").remove();
$(wrapper).append(htmlToAdd); //add input box
x++; //text box increment
}
});
$(document).on("click",".add_sub_field_button",function(e){ //on add input button click
e.preventDefault();
if(x < max_fields){ //max input box allowed
x++; //text box increment
$(this).closest(".commonPart").append('<div class="addedDiv"><input type="text" class="bookname" name="myBooksText[]" placeholder="Book name"/>Remove</div>'); //add input box
}
});
$(wrapper).on("click",".remove_field", function(e){ //user click on remove text
e.preventDefault(); $(this).parent('div').remove(); x--;
})
});
//http://www.sanwebe.com/2013/03/addremove-input-fields-dynamically-with-jquery
</SCRIPT>
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.