I need to generate an entire html form dynamically based on the Ajax response from server. In response there will be information like input type , input labels, validations if any etc.
The form at most will always have ten fields.
Is there any jQuery/ javascript tool/plugin to generate the form?
Thanks.
Formation
From their example:
value = {"key":"value"} "key" will be the value attribute and "value" will be the shown value of the element. If the array is constructed like {"value",value","value"} (without keys) then the value attribute of the input will be an auto-incremented number starting from 0.
options = {} See options table below.
$.fn.formation(options); [Create a form]
$.formation.addInput(options); [Append an input]
$.formation.addSelect(values,options); [Append a select]
$.formation.addTextarea(options); [Append a textarea]
$.formation.addCheckboxes(values,options); [Append an unordered list of checkboxes]
$.formation.addRadios(values,options); [Append an unordered list of radio buttons]
$.formation.addCaptcha(options); [Adds a captcha question to your form]
$.formation.addButton(options); [Append a button]
$.formation.setErrorMessages(options); [Set custom error messages for validation]
However, this is all stuff you can easily do with Jquery, and it is a good learning experience so I recommend trying it yourself.
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've been googling and googling but completely stuck on this.
I have a GET request that retrieves some JSON containing a list of users. However the list of users changes.
I want to generate a simple HTML form that contains the names of the users, and then an input field so that they can be given a rating. I then need to gather the ratings and send a POST request in JSON.
What would be the best way to approach this? I was thinking of looping through the users and just displaying them with a text input type but then I have no idea how I can use the form data to send the POST request!
Any help would be greatly appreciated
Populate UI base on JSON
HTML:
<form id="user_list">
<div>
</div>
<input type="submit"/>
</form>
JS:
var obj = {
users:[{name:"user 1"},{name:"user 2"}]
}
var user_list = $("#user_list>div");
obj.users.forEach(function(user,index){
user_list.append("<div>"+
"<h1>" + user.name + "</h1>"+
"<input type='text' id='user_"+ index +"'/>"+
"</div>");
});
Send selected values to server.
Option 1
If you make this page full post back when click on submit, you have to change text boxes as following
"<input type='text' name='[user_"+ index +"]'/>"+
In server request object, you will be give as array of key/values.
Option 2
If you are planing to make AJAX request, again you can loop though the text boxes and build the JSON format which you want in back-end and pass though the AJAX.
$("input[type='text']").each(function(input){
$(input).val();
});
How can i get element id: <input type="number" name="1" id="cant1" style="width:60px;" required/> in node.js?
Actually i've got this: var cant = req.param("cant1"); but i get the name's input and i need the id.
Thanks for help me.
The ID is only used client side. The name is used to generate the form data that is sent to the server.
If you need the ID then you'll need to encode it in the form data somehow. Possible approaches include:
Just using that value as the name instead of 1
Using JavaScript to copy the ID value on top of the name or the value when the form is submitted
Generate a set of hidden inputs that map the name and id values (e.g. <input name="the_id_for_1" value="cant1">)
Generate some complex data structure in JSON and post it with Ajax instead of using a regular form submission
So let us say i have a form with id #form which has two input fields, namely title & price.
I click on the Edit button somewhere in the application which has data attributes (e.g data-title="Apple" data-price="10")that are to be assigned to the #form upon clicking the button.
the obvious solution that works is
$("#name").val($(this).data('name'));
$("#price").val($(this).data('price'));
This obviously looks bad when you have too many fields. So I am trying to get something like this to work $('#form').data($(this).data());, more or less in a single like
Have tried this many ways with no success
Any help is appreciated
You could create a jquery plugin that you can call from the element that contains the data points and have it apply the data based on the key to elements within the form of that same name. Example below
$.fn.applyData = function(form) {
$form = $(form);
$.each($(this).data(), function(i, key) {
$form.find('#' + i).val(key);
});
};
JSFiddle: http://jsfiddle.net/LCM8S/43/
I want to copy the content of a sharepoint form field to a variable using Javascript.
Eg. I have a field named "Language" in my sharepoint edit form. Now I just want to get the value of that field to a varaible x.
Please help.
BR
It depends on the type (e.g. user, lookup, multilookup, text, note, etc.) of field. I am using jQuery in my custom list forms and the name of the field for any given content type will be added to the id of the corresponding html control with the text 'Field' appended to it. However, like any typical asp.net control, the id of the html form control rendered to the client will reflect its control hierarchy so you have to account for that when searching for a field. anyhow, the following works for me if i need to reference fields in my custom forms. ** notice the +Field which implies that the name of the field is concatenated with 'Field'
var $titleField = $('input[id*=TitleField]');
var $lookupField = $('select[id*=Name_Of_Field+Field]')
var $multiLookUpCandidate = $('select[id*=Name_Of_Field+Field][id*=SelectCandidate]')
var $multiLookUpResult = $('select[id*=Name_Of_Field+Field][id*=SelectResult]')
var $note = $('textarea[id*=Name_Of_Field+Field]');
You can pick up on the trend by viewing source and seaching for your contenttype/sitecolumn field name. You will find it in an html form control id. use that information to learn how to reference other field types.
Without posting your code its very difficult to understand what you want to do.... to get a value from a form you can do the following :
HTML
<form id="myform">
<input id="myinput" type="text" value="something" />
</form>
JavaScript:
var myinputval = document.getElementById("myinput").value;
myinputval would be "something" in this example
Demo : http://jsfiddle.net/Qk6FZ/
This might help:
http://depressedpress.com/2012/09/24/obtaining-a-javascript-reference-to-a-sharepoint-field/
Using that function you'd get the reference using something like:
var LanguageFld = getFieldRef("Language");
Once you have the refernece it's easy to get the value:
var CurValue = LanguageFld.value;
Hope this helps!