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.
Related
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.
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 running into an issue where the value grabbed by jQuery, and what's actually in the input text field, are different.
A form with a variety of inputs are populated when the page loads with information from our database. Thus, the input text fields all have a value.
When the form is submitted, I have a function that runs first to check for text inputs. This is a portion of that function:
$("form#accountSettingsForm input").each(function(){
var input = $(this);
var value = input.attr("value");
}
Lets say the input value is 12 when the page had initially loaded. If I delete the 12 in the textbox and leave the field blank, and submit the form, the above code retrieved "value" is still 12, not empty.
How can I detect what's actually the textbox's value? Thanks in advance.
This is a situation where there's a difference between the value attribute and the value property. The attribute comes from the HTML, the property is from the dynamic state of the DOM. To get the current value of an input after the user has modified it, use the jQuery .val() method.
$("#accountSettingsForm").submit(function() {
$(this).find("input").each(function() {
var input = $(this);
var value = input.val();
console.log(this.name + " = " + value);
});
return false;
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form id="accountSettingsForm">
Input 1:
<input name="field1" type="text">
<br>Input 2:
<input name="field2" type="text">
<br>
<input name="submit" type="submit">
</form>
The following appears to work well. If you want to regularly remember/store the value, register for the on('input') event. With this, you get an event every time the user types in the textbox:
$("#accountSettingsForm :input").on('input', function() {
console.log($(this).val());
});
As far as I can tell, the $(this).val() method of access works fine.
Here's a JSFiddle: https://jsfiddle.net/uz8k7rjp/
And the original post where I got this method: JQuery: detect change in input field
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.
I have a form that dynamically adds rows with 4 fields each. Like this:
[Name] [Description] [Debit] [Credit]
The expected behavior that I'm trying to accomplish is that a user can input a value only to the Debit field or only to the Credit field, but not to both. So when the user inputs a value in Debit, the Credit field should be disabled and assigned a value of 0 or empty. And vice versa, when the user inputs a value in Credit, the Debit field should be disabled and assigned a value of 0 or empty. And this should work on every row the user adds. How can I accomplish this?
So far I've been testing some alternatives but cannot make it work. Here's my current code for this part. It only disables the fields but does not empty or zero the next or previous one:
<script type="text/javascript">
var $n = jQuery.noConflict();
$n('input[name^=debits]').live("focus", function(){
$n('input[name^=credits]').attr("readonly", "readonly");
$n('input[name^=debits]').removeAttr("readonly");
});
$n('input[name^=credits]').live("focus", function(){
$n('input[name^=debits]').attr("readonly", "readonly");
$n('input[name^=credits]').removeAttr("readonly");
});
</script>
Thank you for any clues.
var $n = jQuery.noConflict();
$n('input[name^=debits]').live("focus", function(){
$n(this).next('input[name^=credits]').val('').attr("readonly", "readonly");
$n(this).removeAttr("readonly");
});
$n('input[name^=credits]').live("focus", function(){
$n(this).prev('input[name^=debits]').val('').attr("readonly", "readonly");
$n(this).removeAttr("readonly");
});
If you want to "empty" a field, you should call .val('') on it
Without having much idea about the markup I have this solution for you. You might have to change the selector based on your markup.
var $n = jQuery.noConflict();
$n('input[name^=debits]').live("focus", function(){
$n(this)
.prop("disabled", false);
.parent().find('input[name^=credits]')//Assuming it has parent container
.prop("disabled", true)
.val(0)
});
$n('input[name^=credits]').live("focus", function(){
$n(this)
.prop("disabled", false);
.parent().find('input[name^=debits]')//Assuming it has parent container
.prop("disabled", true)
.val(0);
});
Note: If you want to work with input elements on the same row you should use this as reference or context to find the elements within the same row. What you were doing is finding all the elements on the page with required selector. Also to disable input box you should use prop() method setting it disabled property to true and vice versa to enable it.
If you are using jQuery ver 1.7+ then it is preferable to use on than live
Personally I would add a focus handler to each input that then blanks all other input values and disables them - something like this:
$('table td input').focus(function(){
// Blank all inputs first
$(this).closest('tr').find('input').attr('disabled', 'disabled').val(0);
// enable the focused field
$(this).removeAttr('disabled');
});