I have 3 inputs in my form. residence[], mobile[], office[]. I also have buttons for each inputs that will append them when clicked. So far, I managed to insert 3 values for each input into my database. But how can I Update all of them ? This is my controller for update
public function postEdit(ReservedEditRequest $reserved_edit_request, $id) {
foreach (Input::get('residence','mobile','office') as $key => $val) {
$student_contacts = StudentContacts::where('student_contacts.student_id',$id)
->update([
'residence' => Input::get("residence.$key"),
'mobile' => Input::get("mobile.$key"),
'office' => Input::get("office.$key"),
]);
}
return redirect('registrar/register_student')->withErrors('mobile')->with('message', 'Student Details Successfully Modified');
}
the code above will retrieve a collection
residence----------------------mobile-----------------------office
VAL1----------------------------VAL1------------------------VAL1
VAL2----------------------------VAL2------------------------VAL2
VAL3----------------------------VAL3------------------------VAL3
and when i submit the form, it saves the 3rd VALUE for all fields making it
residence----------------------mobile-----------------------office
VAL3----------------------------VAL3------------------------VAL3
VAL3----------------------------VAL3------------------------VAL3
VAL3----------------------------VAL3------------------------VAL3
Any answer will be appreciated :) Thanks
EDITED
this is the form
<div class="col-xs-1">
<button type="button" id="add_field_button_residence" class="btn btn-sm btn-primary" pull-right>
<span class="glyphicon glyphicon-plus"></span>
</button>
</div>
<div class="col-sm-3">
<div class="input_fields_wrap_residence">
#if($action == 1)
#foreach($student_contacts as $contacts)
<input type="text" name="residence[]" id="residence[]" class="form-control" pattern="[\(]\d{2}[\)]\d{7}" placeholder="Residence e.g. (32)1234567" value="{{{$contacts -> residence}}}"/>
<span class="help-block">{!!$errors->first('residence', '<span class="help-block">:message </span>')!!}</span>
#endforeach
#else
<input type="text" name="residence[]" id="residence[]" class="form-control" pattern="[\(]\d{2}[\)]\d{7}" placeholder="Residence e.g. (32)1234567" value="{{{Input::old('residence', isset($student_contacts) ? $student_contacts_residence : null )}}}"/>
<span class="help-block">{!!$errors->first('residence', '<span class="help-block">:message </span>')!!}</span>
#endif
</div>
</div>
<div class="col-xs-1">
<button type="button" id="add_field_button_mobile" class="btn btn-sm btn-primary" pull-right>
<span class="glyphicon glyphicon-plus"></span>
</button>
</div>
<div class="col-sm-3">
<div class="input_fields_wrap_mobile">
#if($action == 1)
#foreach($student_contacts as $contacts)
<input type="text" name="mobile[]" id="mobile[]" class="form-control" pattern="(09)[0-9]{9}" placeholder="Mobile Phone" value="{{{$contacts -> mobile}}}" required/>
<span class="help-block">{!!$errors->first('mobile', '<span class="help-block">:message </span>')!!}</span>
#endforeach
#else
<input type="text" name="mobile[]" id="mobile[]" class="form-control" pattern="(09)[0-9]{9}" placeholder="Mobile Phone" value="{{{Input::old('mobile', isset($student_contacts) ? $student_contacts_mobile : null)}}}" required/>
<span class="help-block">{!!$errors->first('mobile', '<span class="help-block">:message </span>')!!}</span>
#endif
</div>
</div>
<div class="col-xs-1">
<button type="button" id="add_field_button_office" class="btn btn-sm btn-primary" pull-right>
<span class="glyphicon glyphicon-plus"></span>
</button>
</div>
<div class="col-sm-3">
<div class="input_fields_wrap_office">
#if($action == 1)
#foreach($student_contacts as $contacts)
<input type="text" name="office[]" id="office[]" class="form-control" pattern="[\(]\d{2}[\)]\d{7}" placeholder="Office e.g. (32)1234567" value="{{{$contacts->office}}}"/>
<span class="help-block">{!!$errors->first('office', '<span class="help-block">:message </span>')!!}</span>
#endforeach
#else
<input type="text" name="office[]" id="office[]" class="form-control" pattern="[\(]\d{2}[\)]\d{7}" placeholder="Office e.g. (32)1234567" value="{{{Input::old('office', isset($student_contacts) ? $student_contacts_office : null )}}}"/>
<span class="help-block">{!!$errors->first('office', '<span class="help-block">:message </span>')!!}</span>
#endif
</div>
</div>
the button will append the inputs through javascript . Here is the code
$(document).ready(function() {
var max_fields = 3; //maximum input boxes allowed
var wrapper = $(".input_fields_wrap_mobile"); //Fields wrapper
var add_button = $("#add_field_button_mobile"); //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="mobile[]" id="mobile[]" class="form-control" pattern="(09)[0-9]{9}" placeholder="Mobile Phone" value="{{{Input::old('mobile', isset($student_contacts) ? $student_contacts_mobile : null)}}}" required/>Remove</div>'); //add input box
}
});
$(wrapper).on("click",".remove_field_mobile", function(e){ //user click on remove text
e.preventDefault(); $(this).parent('div').remove(); x--;
})
});
same code is applied to others
Related
I'm using a form code copied from here that allows the user to add input fields.
<form action="" >
<div class="input-group control-group after-add-more">
<input type="text" name="q[]" class="form-control" placeholder="Enter Name Here" id="autocomplete-key">
<div class="input-group-btn">
<button class="btn btn-success add-more" type="button"><i class="glyphicon glyphicon-plus"></i> Add</button>
</div>
</div>
<button type="submit" class="btn btn-primary" style="background-color:#55BC8A;border:none">Pesquisa</button>
</form>
<!-- Copy Fields-These are the fields which we get through jquery and then add after the above input,-->
<div class="copy-fields hide">
<div class="control-group input-group" style="margin-top:10px">
<input type="text" name="q[]" class="form-control" placeholder="Enter Name Here" id="autocomplete-key">
<div class="input-group-btn">
<button class="btn btn-danger remove" type="button"><i class="glyphicon glyphicon-remove"></i> Remove</button>
</div>
</div>
</div>
My problem is that I want to add autocomplete from a fixed set of possibilities. For that I'm using this code:
<script type="text/javascript">
$(document).ready(function(){
var location_input=$('input[id="autocomplete-key"]');
location_input.autocomplete({
source: "/api/get_key_name/",
minLength: 2
});
} );
// keeps same width as box
jQuery.ui.autocomplete.prototype._resizeMenu = function () {
var ul = this.menu.element;
ul.outerWidth(this.element.outerWidth());
}
</script>
It works fine for the first input field, but it doesn't work with the added new input fields.
UPDATE: I made a snippet to better exemplify the problem:
$(document).ready(function() {
//here first get the contents of the div with name class copy-fields and add it to after "after-add-more" div class.
$(".add-more").click(function(){
var html = $(".copy-fields").html();
$(".after-add-more").after(html);
});
//here it will remove the current value of the remove button which has been pressed
$("body").on("click",".remove",function(){
$(this).parents(".control-group").remove();
});
});
var availableTutorials = [
"ActionScript",
"Bootstrap",
"C",
"C++",
];
$(document).ready(function() {
$.each($('.autocomplete'), function(i,e) {
$(e).autocomplete({
source: availableTutorials,
minLength: 2,
});
});
});
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js" type="text/javascript" ></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" type="text/javascript"></script>
<form action="" >
<div class="input-group control-group after-add-more">
<input type="text" name="q[]" class="autocomplete form-control" placeholder="Enter Name Here">
<div class="input-group-btn">
<button class="btn btn-success add-more" type="button"><i class="glyphicon glyphicon-plus"></i> Add</button>
</div>
</div>
<button type="submit" class="btn btn-primary" style="background-color:#55BC8A;border:none">Pesquisa</button>
</form>
<!-- Copy Fields-These are the fields which we get through jquery and then add after the above input,-->
<div class="copy-fields hide">
<div class="control-group input-group" style="margin-top:10px">
<input type="text" name="q[]" class="autocomplete form-control" placeholder="Enter Name Here">
<div class="input-group-btn">
<button class="btn btn-danger remove" type="button"><i class="glyphicon glyphicon-remove"></i> Remove</button>
</div>
</div>
</div>
you're using id which is unique , use class and add the autocomplete to all the inputs :
html :
<input type="text" name="q[]" class="autocomplete form-control" placeholder="Enter Name Here" id="autocomplete-key">
js :
$(document).ready(function() {
$.each($('.autocomplete'), function(i,e) {
$(e).autocomplete({
source: "/api/get_key_name/",
minLength: 2
});
});
});
I have a one text box search, and one button,when i add the text and click button, related data will be getting but when i click another search.that is taking same id,previous id not clearing. how to clear that id
<div class="col-lg-4 col-sm-4 col-xs-12">
<i class="glyphicon glyphicon-search"></i>
<div class="form-group">
<input type="text" class="form-control" id="isbncollegeid" data-ng-model="isbncollege" placeholder=" Search By college ISBN" name="isbncollegeid">
</div>
</div>
<div class="col-sm-4">
<br />
<div class="form-group">
<input type="hidden" id="bookcollgeIsbn" name="bookcollgeIsbn" />
<button type="button" class="btn btn-sky" id="IsbntcolDetails" data-ng-disabled="LibraryIsbnForm.$invalid" data-ng-click="DetailscolByISBN()">Get Details<i class="fa fa-exclamation"></i>
</button>
<button type="button" class="btn btn-sky" id="clear" data-ng-click="ClearISbnCollege()">Clear<i class="fa fa-exclamation"></i>
</button>
</div>
</div>
In your ClearISbnCollege just make isbncollege model empty
$scope.ClearISbnCollege = function() {
$scope.isbncollege = "";
}
When you will click the Clear button, input will be emptied.
You can use below line of code after getting results in javascript:
document.getElementById('elementid').value = "";
in Jquery:
$('#elementid').val("");
I want to remove the first div and everything else inside.
Here in the code snippet I can delete the first input, but I cant delete the others if I add more.
On my page I can't delete any input.
$(document).ready(function() {
var max_fields = 4; //maximum input boxes allowed
//var wrapper = $(".phone-field"); //Fields wrapper
var add_button = $("#add_field_button"); //Add button ID
var x = 1; //initlal text box count
$(add_button).click(function(){ //on add input button click
if(x < max_fields){ //max input box allowed
$(add_button).
x++; //text box increment
$('.phone-field').append('<div class="col-xs-12 col-md-7 phone-class"><label for="telefones">Telefone</label><div class="input-group"><input type="text" class="form-control" name="telefone[]" placeholder="Digite seu telefone"><span class="input-group-btn"><button class="btn btn-default" id="remove_field" type="button"><i class="fa fa-trash-o" aria-hidden="true"></i></button></span></div></div>'); //add input box
}
});
$("#remove_field").click(function(){ //user click on remove text
//e.preventDefault();
//$('#remove_field').closest('div.phone-class').remove();
$('#remove_field').parent().parent().parent().remove();
});
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://use.fontawesome.com/1cdb0cfd25.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="form-group phone-field">
<div class="col-xs-12 col-md-7">
<label for="telefones">Telefone</label>
<div class="input-group">
<input type="text" class="form-control" name="telefone[]" placeholder="Digite seu telefone">
<span class="input-group-btn">
<button class="btn btn-default" id="add_field_button" type="button"><i class="fa fa-plus" aria-hidden="true"></i></button>
</span>
</div>
</div>
<div class="col-xs-12 col-md-7 phone-class"> <!-- I want to delete this DIV here if i click on the button with id="remove_field"-->
<label for="telefones">Telefone</label>
<div class="input-group">
<input type="text" class="form-control" name="telefone[]" placeholder="Digite seu telefone">
<span class="input-group-btn"><button class="btn btn-default" id="remove_field" type="button"><i class="fa fa-trash-o" aria-hidden="true"></i></button></span>
</div>
</div>
</div>
That happens because the new elements with id remove_field didn't existed by the time your ready function ran. This way the only elements bonded to the function that removes the field is the one that already is on the DOM element.
Luckily for you that's a pretty common mistake and a fair simple one to solve also. You just need to bind an permanent parent element using jQuery's .on function:
$(document).ready(function() {
var max_fields = 4; //maximum input boxes allowed
//var wrapper = $(".phone-field"); //Fields wrapper
var add_button = $("#add_field_button"); //Add button ID
var x = 1; //initlal text box count
$(add_button).click(function(){ //on add input button click
if(x < max_fields){ //max input box allowed
$(add_button).
x++; //text box increment
$('.phone-field').append('<div class="col-xs-12 col-md-7 phone-class"><label for="telefones">Telefone</label><div class="input-group"><input type="text" class="form-control" name="telefone[]" placeholder="Digite seu telefone"><span class="input-group-btn"><button class="btn btn-default" id="remove_field" type="button"><i class="fa fa-trash-o" aria-hidden="true"></i></button></span></div></div>'); //add input box
}
});
$(".phone-field").on('click','#remove_field',function(){ //user click on remove text
//e.preventDefault();
//$('#remove_field').closest('div.phone-class').remove();
$('#remove_field').parent().parent().parent().remove();
});
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://use.fontawesome.com/1cdb0cfd25.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="form-group phone-field">
<div class="col-xs-12 col-md-7">
<label for="telefones">Telefone</label>
<div class="input-group">
<input type="text" class="form-control" name="telefone[]" placeholder="Digite seu telefone">
<span class="input-group-btn">
<button class="btn btn-default" id="add_field_button" type="button"><i class="fa fa-plus" aria-hidden="true"></i></button>
</span>
</div>
</div>
<div class="col-xs-12 col-md-7 phone-class"> <!-- I want to delete this DIV here if i click on the button with id="remove_field"-->
<label for="telefones">Telefone</label>
<div class="input-group">
<input type="text" class="form-control" name="telefone[]" placeholder="Digite seu telefone">
<span class="input-group-btn"><button class="btn btn-default" id="remove_field" type="button"><i class="fa fa-trash-o" aria-hidden="true"></i></button></span>
</div>
</div>
</div>
1) When you are inside a listener use "this" to refer to the object
2) Use closest instead of parent().parent().parent() or your function will be useless if HTML changes:
3) Make "remove_field" a class, as you have multiple elements with the same id, and as previous comment stated that is not valid HTML
$(this).closest('div.phone-class').remove();
I am trying to trigger a hidden button. Unfortunately the event does not work. Here is the code:
<div class="dyn-inp-group">
<div class="dyn-inps">
<div class="form-group form-group-options col-xs-12 dyn-inp">
<div class="col-md-6" style="padding: 0 10px 0 0;">
<input class="form-control" class="customerfirstName" name="customer[firstName][]" type="text" placeholder="First name" required="required">
</div>
<div class="entry input-group col-md-6" style="margin: 0;">
<input class="form-control" name="customer[lastName][]" type="text" placeholder="Last name" required="required">
<span class="input-group-btn hidden">
<button id="remove" class="btn btn-info btn-remove" type="button">
<span class="glyphicon glyphicon-minus"></span>
</button>
</span>
</div>
</div>
</div>
<div class="form-group form-group-options col-xs-12 dyn-btn">
<div class="input-group col-xs-12">
<button id="countInput" class="btn btn-default" type="button">
<span class="glyphicon glyphicon-plus"></span> Add more
</button>
</div>
</div>
</div>
I am counting all the inputs when you click to the "add button".
var customerCount= 1 ;
$( "#countInput" ).click(function() {
var e = document.getElementsByTagName('input');
var i ;
var s = 1 ;
for(i=0; i < e.length; i++) {
if(e[i].type== "text" && e[i].name=="customer[firstName][]" ) { s++ ; }}
customerCount=s;
});
I have also a button for remove. The remove button does not work. When I click to the remove button I want to count the input fields again.
$( "#countInput" ).click(function() { This does not work
Any ideas?
I don't see any problem. both the button clicks are working fine
$( "#countInput" ).click(function()
$( "#remove" ).click(function()
check here: https://jsfiddle.net/ucnh4z4q/1/
Since you are already using JQuery you can use .each() instead of mixing pure js with JQuery defining a lot of useless variables
var customerCount= 1 ;
$('#countInput').click(function() {
$('input').each(function(item) {
var newCustomer;
if($(this).attr('name') === 'customer[firstName][]')
customerCount+=1;
});
console.log(customerCount);
});
$('#remove').click(function() {
customerCount-=1;
console.log(customerCount);
});
Here a working jsfiddle
I am creating multiple text area, radio button field and drop down list by click on a plus button. Here I need when user will click on minus button the last all 3 type item should delete but it's not happening like that.
Here is my code:
<input name="no_of_question" id="ques" class="form-control" placeholder="no of question" type="text">
<label>Questions</label>
<input type="button" class="btn btn-success btn-sm" name="plus" id="plus" value="+" onClick="addQuestionField();">
<input type="button" class="btn btn-danger btn-sm" name="minus" id="minus" value="-" onClick="deleteQuestionField();">
<div id="container">
<div class="row">
<div class="col-md-3">
<div class="form-group">
<textarea class="form-control" name="questions0" id="questions0" placeholder="Questions" style="background:#FFFFFF;" rows="2"></textarea>
</div>
</div>
<div class="col-md-9">
<div style="margin-top:37px;">
<div style="float:left; margin-right:10px;">
<input type="radio" name="answer_type0" id="answer_type0" onClick="selectScale(this.value,'0');">
</div>
<div style="float:left; margin-top:-10px;display:none;" id="scaleid0">
<select class="form-control" id="nscale0" name="noofscale0">
<option value="">Select Answer Type</option>
<option value="1">Cuttuck</option>
<option value="1">BBSR</option>
</select>
</div>
</div>
</div>
The JavaScript code is given below.
function addQuestionField(){
var get =$("#ques").val();
if(get===null || get===''){
alert('Please add no of questions');
}else{
for(var i=1;i<get;i++){
$('#container').append('<div class="row"><div class="col-md-3"><div class="form-group"><textarea class="form-control" name="questions'+ i +'" id="questions'+ i +'" placeholder="Questions" style="background:#FFFFFF;" rows="2"></textarea></div></div> <div class="col-md-9" ><div style="margin-top:37px;"><div style="float:left; margin-right:10px;"> <input type="radio" name="answer_type'+i+'" id="answer_type0" onClick="selectScale(this.value,'+i+');"></div><div style="float:left; margin-top:-10px;display:none;" id="scaleid'+i+'"><select class="form-control" id="nscale'+i+'" name="noofscale'+i+'"><option value="">Select Answer Type</option><?php foreach($feeddatascale as $v){ ?><option value="1" >Cuttuck</option><?php } ?></select></div><div style="clear:both;"></div></div></div><div>');
}
}
}
function deleteQuestionField(){
var get =$("#ques").val();
var textareas = $('#container textarea');
if (textareas.length !== 0) {
textareas.last().remove();
$('#ques').val(textareas.length - 1);
}
}
Here when I am clicking - button only the last text area is removing. But I need to delete the respective radio button and drop down list(if exist) with text area. Here the total plunkr code is present.
Add a wrapper class for the input set all together and remove it on delete, always in templating, try to use wrapper selector to isolate blocks of html code
$('#container').append('<div class="row dyn">
https://plnkr.co/edit/kBWcs6zUmMndB3RwXMcF?p=preview
Try this and please close your div properly i think You forgot to put one div closing tag.
function deleteQuestionField(){
var get =$("#ques").val();
var textareas = $('#container').find('textarea');
if (textareas.length !== 0) {
$('#container div.row:last-child').remove();
$('#ques').val(textareas.length - 1);
}
}
you can delete the last row which you added dynamically and which contains the textarea, radio button and dropdown list.
function deleteQuestionField(){
$("#container>row").last().remove();
}
This worked for me,
HTML :
<input name="no_of_question" id="ques" class="form-control" placeholder="no of question" type="text">
<label>Questions</label>
<input type="button" class="btn btn-success btn-sm" name="plus" id="plus" value="+">
<input type="button" class="btn btn-danger btn-sm" name="minus" id="minus" value="-">
<div id="container">
</div>
JS (jQuery) :
$(document).ready(function(){
$('#plus').click(function(){
var get =$("#ques").val();
if(get===null || get===''){
alert('Please add no of questions');
}else{
for(var i=1;i<=get;i++){
$('#container').append('<div class="row"> <div class="col-md-9" ><div style="margin-top:37px;"><div style="float:left; margin-right:10px;"> <input type="radio" name="answer_type'+i+'" id="answer_type0" onClick="selectScale(this.value,'+i+');"></div><div style="float:left; margin-top:-10px;display:none;" id="scaleid'+i+'"><select class="form-control" id="nscale'+i+'" name="noofscale'+i+'"><option value="">Select Answer Type</option><?php foreach($feeddatascale as $v){ ?><option value="1" >Cuttuck</option><?php } ?></select></div><div class="col-md-3"><div class="form-group"><textarea class="form-control" name="questions'+ i +'" id="questions'+ i +'" placeholder="Questions" style="background:#FFFFFF;" rows="2"></textarea></div></div><div style="clear:both;"></div></div></div><div>');
}
}
});
$('#minus').click(function(){
var get =$("#ques").val();
var textareas = $('#container textarea');
var radiobtns = $('#container input');
if (textareas.length !== 0) {
textareas.last().remove();
radiobtns.last().remove();
$('#ques').val(textareas.length - 1);
}
});
});
See the jsfiddle