In my website load a js file from commercial service, so I don't have possibility to customize this file, the output of this is a form with various input field, every field have the same class name "wf-input", now I want add to a specific field a jquery date picker but don't have a class for select only a one field.
This is a field I want add a datepicker
<input type="text" name="x4" class="wf-input">
Now my request is how add a class name to only this field?
The only difference between field is (name="x4).
The code for initializing datepicker is this:
$(function() {
$( ".x4picker" ).datepicker();
});
How make this work with javascript??
The following should do it.
$( "input[name='x4']" ).datepicker();
and if you still want to add class
$( "input[name='x4']" ).addClass('x4picker').datepicker();
Related
I am creating custom input field in html.Now i am facing problem how to submit data by using these custom fields. Custom field may be a radio option, may be it a select option, text field etc etc using can write name of that field by his own choice i want to know how to submit data of that fields in php and jquery.
<div id="custom fields">
//custom fields data
</div>
Is there any way to submit whole div fields with value ..If i write name in input text field and submit then my complete input filed and its value will save in database? when i retrieve these fields it will show input with value?
If you want to fetch multiple values than take a form else go for jQuery selector.
For multiple values (includes every types of DOM elements)
HTML :- <form id="formID"> ...... </form>
Access the form elements by using jQuery serialize function
NOTE :- serializeArray creates an array (not a "json array" -- there is no such thing); you can test this yourself with console.log($("#formID").serializeArray()). On the other hand, serialize creates a query string that's meant to be part of an HTTP request. Both representations are equivalent in the sense that using appropriate code you can convert one to the other without any ambiguity.
Example :- $("#formID").serialize(); OR $("#formID").serializeArray();
For single value
HTML :- <input id="name">
Javascript :- document.getElementById("name");
jQuery :- $("#name").val();
<div id="customfields">
//custom fields data
</div>
<script type="text/javascript">
setInterval(function () {
document.getElementById("customfields").value = document.getElementById("customfields").innerHTML;
}, 5);
</script>
You cannot submit fields in between div tag. Please use form tag to submit fields.
<form></form>
Are you find this?
$( "form" ).serialize()
I am creating a dynamic HTML page in main.js using jquery mobile.
I want to use the date picker for one of my dynamically created HTML input element. When i click the text box against the Target Release field, I want a date picker to be displayed.
My dynamic page (main.js):
var newPage=$("<label for='date'>Target Release</label><input type='text' name='date' id='rel' value='' /> rest of my HTML elements goes here");
newPage.appendTo($.mobile.pageContainer);
$.mobile.navigate("#newPage1");
I have added the below code snippet in main.js
$(function () {
$( "#rel" ).datepicker(
{dateFormat: 'MM yy'}
);
});
I have even tried writing the code as below.
`var newPage=$("<label for='date'>Target Release</label><input type='text' name='date' id='rel' value='' />"+
$( "#rel" ).datepicker(
{dateFormat: 'MM yy'}
);
+"rest of my HTML elements goes here");
newPage.appendTo($.mobile.pageContainer);
$.mobile.navigate("#newPage1");`
But I am not getting the calendar widget.
I have tried the same code logic in index.html. It is working fine. Please let me know the reason why it is not working in main.js.
Datepicker widget cant be used while creating pages dynamically?
Thanks in Advance!!
You are not getting the widget because you apply the datepicker before the content appear. When adding new content you have to apply the datepicker again.
Check out this answer for better explanation.
Event binding on dynamically created elements?
I'm working on a dynamic form where you can add or delete fields, Here you can find the fiddle
The first button you find is Add Metric. From this the code generates:
Input Field Metric
Button Add Tag
Inside this field a user can add a tag with the button Add Tag, generated when you click add Metric. When you click Add Tag button, two fields are generated:
Input Field Id
Input Field Value
The Html code that I need to generate in order to serialize the entire form (this is not however the question point) will result like this:
<input type="text" name="metrics[0][name]" value="Text 0"> // Metric
<input type="text" id="TagId0" name=" "> //Tag Id
<input type="text" id="TagValue" name="metrics[0][tags][][0]">
Problem:
I need that (when I fill the field with id="TagId0") the value I select will go immediately to the field name with id="TagValue". This field must result like this:
Consider I write on TagId0 the word "hello", field will become:
<input type="text" id="TagValue" name="metrics[0][tags][hello][0]">
How, if it's possible, it can be done?
Thanks
You can use the change method to detect a change in the fields value. Then use the attr method to change the name. Hope I understood correctly. Here is the modified JSFIDDLE.
$(document).on('change', '#InputsWrapper .inputID', function(){
thisVal = $(this).val();
thisName = $(this).siblings('.inputVal').attr('name');
newName = thisName.replace('[tags][', '[tags][' + thisVal);
$(this).siblings('.inputVal').attr('name', newName);
});
Don't forget to press enter after change the field value :)
Edit: I also added two classes to the fields you are appending. .inputID and .inputVal. I hope this helps!
you can write id of field something like TagId-0 and some common class like tagfield,so that u can split the value to get the index an then access it using the class
$(".tagfield").keypress(function() {
var id=parseInt($(this).attr("id").split("-"));
$(this).siblings().attr("name","metrics["+id+"][tags]["+$(this).val()+"][0]");
});
I am using the following plugin for a datepicker:
http://xdsoft.net/jqplugins/datetimepicker/
This is a very nice plugin however I am finding it difficult to set a default date when loading the box.
See this fiddle.
$('.datepicker').datepicker();
Box 1 contains 25/12/2013. I want the datepicker to default to this date when the user selects this box. Box 2 contains nothing therefore the box should default to today.
NB This is currently using standard jquery-ui-datepicker.
I have tried setting various options with no success. I have also tried to read where the value is being set but again cannot see where the input is referenced.
Any help would be appreciated.
$('.datepicker').datepicker()
.filter('[value!=""]')
.datepicker('setDate', '12/25/13');
FIDDLE
As a sidenote you can set a defaultDate to any datepicker that is submitted if the user doesn't select a date, but that date is not shown as the value of the input
$('.datepicker').datepicker()
.filter('[value!=""]')
.datepicker( "option", "defaultDate", '12/25/13' );
In your original question you say you're using third party datepicker plugin, but in your fiddle you're using JQueryUI DatePicker. So here's an example for JQueryUI datepicker.
I'm sure it can be easily updated for the third party plugin.
Try this:
HTML:
Box 1
<input type="text" class="datepicker" value="25/12/2013" />
Box 2
<input type="text" class="datepicker" value=""/>
Javascript:
$('.datepicker').each(function(index){
var dateStr = $(this).attr("value");
var date=new Date();
if(dateStr.length>0)
date=$.datepicker.parseDate("dd/mm/yy", dateStr);
$(this).datepicker({defaultDate:date});
});
JSFiddle: http://jsfiddle.net/HVk7W/3/
hi I am using jquery ui datepicker
in starting i set datepicker with following way
$(".td-datepicker).datepicker();
class .td-datepicker apply on four input text box and their id are following
#startdate
#enddate
#edit_startdate,
#edit_enddate
now i want to set alt field in all four input field
how can i add by class because if i add by id then repetition of code occur
like below
$('#startdate').datepicker("option","altField","#alt_startdate");
$('#startdate').datepicker("option","altFormat","mm/dd/yy");
$('#enddate').datepicker("option","altField","#alt_enddate");
$('#enddate').datepicker("option","altFormat","mm/dd/yy");
$('#edit_startdate').datepicker("option","altField","#alt_edit_startdate");
$('#edit_startdate').datepicker("option","altFormat","mm/dd/yy");
$('#edit_enddate').datepicker("option","altField","#alt_edit_enddate");
$('#edit_enddate').datepicker("option","altFormat","mm/dd/yy");
and can i add multiple option in datepicker after initialization
like for
$('#edit_enddate').datepicker("option","altField","#alt_edit_enddate");
$('#edit_enddate').datepicker("option","altFormat","mm/dd/yy");
can i write code for above two line in one line . is this any way ?
To change the altFormat on all of them, assuming they've the same format:
$(".td-datepicker").datepicker("option", "altFormat", "mm/dd/yy");
For the multiple options at once (example):
$(".td-datepicker").datepicker("option", {
disabled: true,
dateFormat: "dd/mm/yy"
});
To solve your issue, based on the ids you're using:
$(".td-datepicker").each(function (idx, el) {
$(this).datepicker("option", "altField", "#alt_" + $(this).attr("id"));
});
If you change your mind, yes, you can use classes instead.
It's all on the API documentation: http://api.jqueryui.com/datepicker/