Develop Reference

How to create dynamic element in a dynamic form

this is my code for first element, inside of first dynamic form
<input type="text" class=" form-control" id="pPilihan" style="font-size: 1rem;" name="p_pilihan[]" required placeholder="Masukan Nama Pilihan, contoh: Merah / XL">
Tambah
this is my code for add input element
<div class="copy d-none">
<div class="control-group input-group" style="margin-top:10px">
<input type="text" class="form-control" id="pPilihan" style="font-size: 1rem;" name="p_pilihan[]" required placeholder="Masukan Nama Pilihan, contoh: Merah / XL">
<div class="input-group-btn">
<button class="btn btn-danger remove" type="button"><i class="glyphicon glyphicon-remove"></i> Hapus</button>
</div>
</div>
</div>
and this is my js
$(document).ready(function() {
$("body").on("click", ".add-more", function(){
var html = $(".copy").html();
$(".after-add-more").before(html);
});
$("body").on("click",".remove",function(){
$(this).parents(".control-group").remove();
});
});

The question is not clear to me but I can see a bug in your code, you simply can't have two elements having the same id. Each time 'add more' button is clicked the input element with id="pPilihan" is getting repeated, which is wrong. You can solve this by using a counter to produce a dynamic id (if you need one).

how to show form in the same page when click button on it

I have a form on the page and displayed it as none. And there is a button in the page I want when clicking on the button the form to display.
How can I do that?
<button type="button" class="btn btn-primary add-city">اضافه مدينة جديدة +</button>
and form code is this
<div id="forma">
<div class="form-head">
<p id="add-city">+اضافة المدينة</p>
<i class="fa fa-times-circle close" aria-hidden="true"></i>
</div>
<form class="">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label>الدولة<span>*</span></label>
<select class="form-control">
<option>اختر الدوله </option>
</select>
</div>
<div class="form-group">
<label>اسم المدينه(عربي)<span>*</span></label>
<input type="text" class="form-control" id="email">
</div>
</div>
<div class="col-md-6">
<div class="form-group ">
<label>المحافظة<span>*</span></label>
<select class="form-control">
<option>اختر المحافظه </option>
</select>
</div>
<div class="form-group">
<label>اسم المدينه(انجليزي)</label>
<input type="text" class="form-control" id="email">
</div>
</div>
</div>
</div>
</form>
<div class="form-footer">
<button type="button" class="btn btn-primary">ارسال</button>
<button type="button" class="btn btn-secondary">الغاء</button>
</div>
</div>
I made a div with an id called forma so that I can call it in javascript. But I don't know the right way.

You can add an onclick attribute to the button that changes the display to block.
onclick="document.getElementById('forma').style.display = 'block'"

Just use the jQuery click property and show property
$( "#idbutton" ).click(function() {
$("#idform").show();
});

If you are using Bootstrap.js, you can safely use jQuery because it's required. Assuming you should click #add-city button to display the form, simply add to your app.js or inside your <script> tags
$('#add-city').click(function() {
$('#forma').show();
});
In order to toggle the form (show/hide) on every click, you could do something like
$('#add-city').click(function() {
$('#forma').toggleClass('hidden');
});

Retrieve values from Dynamically created bootstrap forms using PHP

I am working on a project where I allow the user to create enter one/many work experience details by dynamically adding form fields on click using a Bootstrap form. But am not sure of how to retrieve the values from these forms.
$(function()
{
$(document).on('click', '.btn-add', function(e)
{
e.preventDefault();
var controlForm = $('.controls form:first'),
currentEntry = $(this).parents('.entry:first'),
newEntry = $(currentEntry.clone()).appendTo(controlForm);
newEntry.find('input').val('');
controlForm.find('.entry:not(:last) .btn-add')
.removeClass('btn-add').addClass('btn-remove')
.removeClass('btn-success').addClass('btn-danger')
.html('<span class="glyphicon glyphicon-minus"></span>');
}).on('click', '.btn-remove', function(e)
{
$(this).parents('.entry:first').remove();
e.preventDefault();
return false;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="controls">
<li>
<form role="form" autocomplete="off" method="post" action="<?php echo site_url('studentDashboardController/saveUserResumeDetails')?>">
<div class="entry input-group col-xs-5">
<input class="form-control" name="fields0[]" type="text" placeholder="Work Experience Title" />
<input class="form-control" name="fields1[]" type="text" placeholder="Work Description" />
<input class="col-md-6" name="fields21[]" type="text" placeholder="From(Year)" />
<input class="col-md-6" name="fields22[]" type="text" placeholder="From(Month)" />
<input class="col-md-6" name="fields31[]" type="text" placeholder="To(Year)" />
<input class="col-md-6" name="fields32[]" type="text" placeholder="To(Month)" />
<span class="input-group-btn">
<button class="btn btn-success btn-add" type="button">
<span class="glyphicon glyphicon-plus"></span>
</button>
</span>
</div>
</form>
</li>
<br>
<div class="form-group">
<label class="col-md-4 control-label" for="submit"></label>
<div class="col-md-4">
<!-- <a href="--><?php //echo base_url("/index.php/studentDashboardController/saveUserResumeDetails"); ?><!--" >-->
<button id="submit" name="submit" type="submit" class="btn btn-primary">Save Changes</button>
<!-- </a>-->
</div>
</div>
</div>
I'm working with the
CodeIgniter framework
PHP
MVC Architectureand
And the form above will basically be a part of my form and on submitting I call my controller studentDashboardController's saveUserResumeDetails method. From here, I'll be calling the userModel's saveUserResumeDetails method to store the user entered work experience detils into my studentprofile database table column.
The work experiences entered by the student will be stored in the following format inside the database table field.
work experience title - work description - 2015-08 - 2016-04,
another work experience title - work description - 2016-03 - 2016-09,
another work experience title - work description - 2014-10 - 2016-02,
Database studentprofile Table
Any suggestions in this regard will be highly appreciated.

In your Controller, post all data to your model:
$this->load->model('userModel');
$user = new userModel();
//print your post to debug, if necessary:
//print_r($this->input->post());
$user->saveUserResumeDetails($this->input->post());
In your model, You've got an array of each field:
public function saveUserResumeDetails($formData){
foreach ($formData["fields0"] as $value) {
echo "Filds0: $value<br />\n";
}
}

How to display other inputs in main input with original value

so I have an issue with trying to figure out how to get this to work. I want to make a dropdown selection, and I want all the selections in the dropdown to show up in the main input box along with the original input value.
Here is my form that I am using to send the values to ajax to send to my php file.
<div class="input-group" id="adv-search">
<input type="text" name="input1" class="form-control" id="filter" id="searchbox" placeholder="Something..."/ required>
<div class="input-group-btn">
<div class="btn-group" role="group">
<div class="dropdown dropdown-lg">
<button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><span class="caret"></span></button>
<div class="dropdown-menu dropdown-menu-right" role="menu">
<form class="form-horizontal" role="form">
<div class="form-group">
<h4 class="text-center">Advanced Search</h4>
<label for="filter">Option</label>
<select class="form-control" name="place" id="myList">
<option selected></option>
<option value="option1">Option1</option>
<option value="option2">Option2</option>
<option value="option3">Option3</option>
</select>
</div>
<div class="form-group">
<label for="contain">Location</label>
<input class="form-control" name="something1" type="text" id="list2">
</div>
<div class="form-group">
<label for="contain">Something2</label>
<input class="form-control" name="contain" type="text" id="list3">
</div>
<p><br/>
<button type="submit" id="insideButton" name="submit" class="btn btn-primary">Advanced Search</button>
</form>
</div>
<button type="submit" id="buttonClass" name="submit2" class="btn btn-primary"><span class="glyphicon glyphicon-search" aria-hidden="true"></span> Search</button>
</div>
</div>
</div>
</div>
</div>
Now I'm trying to get the values from the select dropdown(#myList) and the other inputs(#list2, #list3) and display them in the main input(#filter) along with the value that was entered in (#filter). My code below will display them per keypress but it repeats it since its in the function. How do I get each input to display in the #filter input.
$('#list2').on("input", function(){
var filter = $(this).val();
var myList = $('#filter').val();
$('#filter').val(filter + " " + myList);
});
Here is a picture of what I would like to accomplish. Any and all help is greatly appreciated. Thank you.

hello If I am understanding correctly according to your image and your piece of code that you want to get the all option input value into the main search box if that so you can try this Jquery code
<script>
$(document).ready(function() {
$("#insideButton").click(function(e) {
e.preventDefault();
$("#filter").val($("#list3").val()+" "+ $("#list2").val()+"
"+$("#myList").val()+" "+$("#filter").val());
});
});
</script>
I just used one button as submit option you can change it as your wish
you can also write the same code if you want form submit option then there will be a slightly change
<script>
$(document).ready(function() {
$(".form-horizontal").on('submit',function(e) {
e.preventDefault();
$("#filter").val($("#list3").val()+" "+ $("#list2").val()+"
"+$("#myList").val()+" "+$("#filter").val());
});
});
</script>
hope it helps you can also check this fiddle
fiddle demo

Not able to enter data in Textbox dynamically

I am not able to enter the data to the previous page using ng-model. I moved to the next page after filling some data in textbox, after come to same page I want my data to be entered same as I entered previously, I write the code but its not working please tell me what I am doing wrong and thanks in advance
js code:
$scope.notesPage = function() {
$rootScope.data = {
Name: $scope.prospectName,
};
$location.path('/prospectNotes');
};
$scope.addProspect = function() {
$rootScope.data.ProspectNotes = $scope.notes;
$scope.ProspectNotes = "";
};
function fillFormData() {
$scope.prospectName = $rootScope.data.Name;
}
$scope.addProspectForm = function() {
$location.path('/create');
fillFormData();
}
first html page
<div class="container" id="form-container">
<div class="form-group">
<label for="prospectName"> Prospect Name:
<img src="images/required.gif" alt="Required" class="required-star">
</label>
<input type="text" id="prospectName" name="prospectName" ng-model="prospectName" class="form-control" required>
</div>
<div class="form-group">
<button type="submit" class="col-sm-2 btn btn-primary" ng-click="notesPage()" style="margin-left:10px;"> Next </button>
</div>
</div>
second html page
<div class="container" id="form-container">
<div class="form-group">
<label for="notes"> Notes for Prospect {{data.Name}}</label>
<textarea rows="20" id="notes" name="notes" ng-model="notes" class="form-control"></textarea>
</div>
<div class="form-group">
<input type="button" id="cancel-button" value="Back" class="col-sm-2 btn btn-primary" ng-click="addProspectForm()">
<button type="submit" class="col-sm-2 btn btn-primary" ng-click="addProspect()" style="margin-left:10px;"> Add </button>
</div>
</div>

Use a factory to store your data and then retrieve the same.
check this one:
Can I keep the model value when click browser back button with angularjs?