i'm working on laravel 5.7
and i need a script to add new form when clicked plus button
i found this script but its only add input fields i need to add the whole form
$(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 id="post"><input type="text" name="options[]" class="form-control"><input type="text" name="options[]" class="form-control"></div><br>'); //add input box
}
});
Don't inject dom elements via javascript, it's not good practice. As already mentioned above have a look at handlebars, where you can store your form template in an own file. Also vue.js would be a good choice, if you have more to do than just creating a form.
You will want to look at a few JS methods for this...
createElement() - this creates an html DOM element. For example...
let myDiv = document.createElement('div');
Once you have created the element, it will sit out there in the aether until you actually put it on the page. This is where a method like appendChild() comes in to play...
document.querySelector('someElement').appendChild(myDiv);
// This will append the myDiv element you created to your someElement
You can also create text with createTextNode('your text') and append it the same way.
There is also a setAttribute() method that takes two parameters...the first is the attribute to set and the second is the value to set it.
Related
Often I'm creating some kind of form on a website, and I have a <label> and a <input> which should be linked together.
The standard way to do this is by setting the 'for' attribute on the <label> to match the 'id attribute on the <input>
<label for="city-input">City</label>
<input id="city-input" type="text" />
This of course relies on having a unique ID for every <input> element on the page.
I frequently find myself in the situation where I have to create the form dynamically and the exact contents of the rest of the page are unknown or out of my control. So I can't just assign an id like 'city-input' in case it clashes with something else on the page. I end up creating random strings to use as ids:
var label = document.createElement('label');
label.innerHTML = 'City';
var input = document.createElement('input');
input.type = 'text';
// create a random string as the id
var id = Math.random().toString(36).substring(2);
input.id = id;
label.htmlFor = id;
This method works, but I hate it. I've got my HTMLInputElement instance and my HTMLLabelElement instance. I want to link them together. But I have to pointlessly create a random string to use as an intermediary. Then when someone clicks the <label> the browser has to pointlessly look up the string id to find the <input> element. It's so inelegant.
Is there any way to directly associate the HTMLLabelElement with the HTMLInputElement? Or some other better method?
(I know you can avoid the id by putting the <input> inside the <label> but this often isn't possible because of the way the page will be styled or various other reasons).
You can avoid the random number by just using an incrementing counter as the unique id of the form elements.
I have created a codepen here that shows the addition of a random number of form elements every time the refresh button is clicked. Each element has it's own label and input, both linked by the generation of a unique incrementing id. All of which can be referenced individually. Clicking on the label will automatically highlight the linked form input.
Just for clarity I have used the following format for the linking ids:
var id="_" + counter +"_"+i;
var labelId = "labelForCity_" + counter +"_"+i;
var inputId = "city_" + counter +"_"+i;
Then the label is linked to the input by
label.htmlFor = inputId;
Each time the refresh button is clicked (simulating a dynamic number of additional fields being added to your form) the counter variable is incremented which is used in the id. The id is shown in brackets beside the input field.
If your label and input are residing side by side always(they should be), then you can write a method to provide focus to next input when you click on the label.
Example code, you can modify it according to your need:
HTML -
<label>something</label>
<input />
Javascript -
var a = document.getElementsByTagName('label')[0];
a.addEventListener('click', function(e){
e.target.nextElementSibling.focus();
});
I am terrible with javascript and do not understand much of it. I need to add text boxes (3-4 of them for different type of inputs) and a few select boxes to a form that I am working on currently so I turn to google for help. This is what I found,
HTML
<div class="input_fields_wrap">
<button class="add_field_button">Add More Fields</button>
<div><input type="text" name="mytext[0]"></div>
</div>
Javascript
$(document).ready(function() {
var max_fields = 5; //maximum input boxes allowed
var wrapper = $(".input_fields_wrap"); //Fields wrapper
var add_button = $(".add_field_button"); //Add button ID
var x = 0; //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++;
$(wrapper).append('<div><input type="text" name="mytext['+ x +']"/>Remove</div>');
}
});
$(wrapper).on("click",".remove_field", function(e){
e.preventDefault(); $(this).parent('div').remove(); x--;
})
});
and working example on JSFiddle
I need a few more dynamic fields which may require a text box or a select box with different properties and name.
I have a field attribute, devices, operating system on my form and want to have dynamically included textboxes for all of them.
EDIT:- Someone just answered and it hit me that maybe I did not explain clearly so let me build a scenario where I have three text box, name = attribute, name = device, name = operating system in a form and I wish to add 2 boxes for attribute, 3 boxes for device and 5 boxes for operating system. How do I manipulate the script above to get 2 boxes for attribute, 3 for device and 5 for operating system
How do I go about it.
Do you want checkbox to be generated or textbox? And on what basis you need to generate those? like a button click or something?
I'm wanting to change the source code of an auto-completer that I found on the D3 site.
Click here for link
I basically want to turn the <div id="test" style="width:100%; height:100%;"></div> code into a html form input box so when you click on the autocompleted item it will process a "submit" type request.
Thanks
If I understood the question and what you want to do, you can replace the div with input using JavaScript by doing something like this :
var toReplace = document.getElementById('test'); //element to be replaced
var parent = toReplace.parentNode;
var input = document.createElement('input'); // new element
input.id = input.name = "test";
input.type = 'text';
// can declare more attributes for input here
parent.replaceChild(input, toReplace); // Replacing here..
jsFiddle
When I create input field with jquery datepicker do not work.
I try
$(function() {
$('.datepick').each(function(){
$(this).datepicker();
});
});
Jquery generated input:
<input name="date[]" class="pure-input-1-2 datepick" type="text" value="">
Jquery code generate input field
$(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>'+
'Iskustvo od: <input name="date[]" class="pure-input-1-2 datepick" type="text" value="">'+
'Remove</div>'); //add input box
}
});
$(wrapper).on("click",".remove_field", function(e){ //user click on remove text
e.preventDefault(); $(this).parent('div').remove(); x--;
})
});
Your code will attach a datepicker to any .datepick elements that are already in the document as of jQuery's ready "event," but it won't do anything to any elements added later.
If you add another element later, you'll need to explicitly attach the datepicker to it, presumably in the code where you added the element.
For instance, after adding the element, this code will attach a date picker to any .datepick that doesn't already have one:
$(".datepick").not(".hasDatepicker").datepicker();
The reason for the .not(".hasDatepicker") is that the datepicker adds that class to elements when it's been initialized on them, so by using .not, we filter out ones that are already set up rather than setting them up again.
Re your edit showing the code where you add the input, just add the call:
wrapper.append('<div>'+
'Iskustvo od: <input name="date[]" class="pure-input-1-2 datepick" type="text" value="">'+
'Remove</div>'); //add input box
wrapper.find(".datepick").datepicker(); // <=====
Also note that I removed the $() from around wrapper; wrapper is already a jQuery object, no need to call $() again, much less repeatedly in a loop.
Or, again, just put the one-liner I gave earlier at the end of that code.
Side note: There's no reason for the each call in your code, just $(".datepick").datepicker(); will loop through them for you.
I am trying to get value from dynamic created input field But its not fetching. its fetching only static field row.
Bellow is my code
<input type="text" id="job_title_id" name ="job_title_id[]" value="<?php echo set_value('job_title_id'); ?>">
script for creating dynamic input box
$(document).ready(function() {
var max_fields = 3; //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="detailroweno"><span class="code"><input type="text" name="job_title_id[]"/></span></div>'); //add input box
}
});
})
Once i submit the code i am trying to get value on controller in codeigniter by dynamic created field data is not displaying
I tried to display using bellow php code in controller once i click to submit form
print_r($_REQUEST);
$results=$this->input->post('job_title_id');
print_r($results);
even i follow this link
http://www.infotuts.com/dynamically-add-input-fields-submit-to-database/
Please help me out of this.. Thanks in advance.
I was able to fix the issue by putting input tag into form. Your input tag isn't in form tag.