I am having problem with creating tool for my app as I have about 50 input fields. i have created a single html5 file in dreamweaver with phonegap build file is rendering on real device and emulator properly.
I have to do calculation from user input and display on the result page which is in same html5 file.
Problem is how do i do it i have created a java code for same but JAVASCRIPT code is new to me can any one tell me how do i get data out of input box and put data in respective div??
any tutorial will be really helpful.
In JAVASCRIPT you can get by input id or name. best choice is Id.
Get value from input document.getElementById('IdValue').value;
Assign value to HTML Element document.getElementById('IdValue').value = "new value"
Using input name
Get value from input document.getElementsByName('inputName').value
Assign value to HTML Element document.getElementsByName('inputName').value = "new value"
Or
You can use JQuery. In JQuery selector is using for getting and setting value
For getting value - $('selector').val()
For setting value - $('selector').val('new value')
More about selector
you can loop through all the input fields using jquery and append it to div
var test="";
$('input[type=text], textarea').each(function() {
alert($(this).val())
test+=$(this).val();
});
// your div
$('#divid').append(test);
Related
I have created JS script that capture user inputs and publish them in another hidden input document.
I confirmed it works because I made the hidden input visible and publish all the input as delimited string.
So far it works fine
but when I try to use the property document in another textarea, ironpython etc.. within the same DXP it is returning blank, even though I can see the string published in the previous text area.
I used this html tags ...
for input property to display the captured data.
jQuery to capture all the inputs
inval=$.....
......
....
then used this to publish them in the input field $('#dfdklsfksldfkslfs').text(inval).blur()
so far all works fine.
but after this when trying to use the document property in textarea, irontpython, within the same DXP, it is returning (BLANK) even though I can see them published in the textarea.
am I missing any steps? do I need to reassign some features?
also I have tried $('#dfdklsfksldfkslfs').val(inval).blur() this won't even publish the data in the inputfield.
here is the update with code
html
<div id='dispInput'> <spotfirecontrold id='dfdklsfksldfkslfs'></div>
jquery
$('button')click(function(){
inval=$('input').map(function(){
return $(this).val(); }).get().join('-');
$('#dfdklsfksldfkslfs').text(inval).blur() //this publish the result but don't assign the data to the document property
})
I am completely lost.
thanks a lot
Try setting timeout in the function (500ms will do).
$('button')click(function(){
setTimeout(function (){
inval=$('input').map(function(){
return $(this).val(); }).get().join('-');
$('#dfdklsfksldfkslfs').text(inval).blur()
}), 500
});
Hope this helps.
Before HTML5, I used to be able to easily find the form associated with an input using jQuery, because all inputs were contained within the form element.
For example, with jQuery I would do something like:
jQuery('.info-container input').closest('form')
I still would like to use jQuery because I use some features that are easier to implement in jQuery. But, with HTML5, inputs can be outside of the form element. For example the following can be anywhere in the HTML but still part of the form:
<input name='city' form='address_form'>
Is there any easy way in jQuery to get the form associated with a given input/button/select ?
You can get the form property to get the associated form.
$($('input[name=city]').prop('form'))
I believe this will work whether the input is inside a form or uses the form attribute to connect with a form.
How about just get list using this.
var inputs = $(document).find('input[form="address_form"]');
then you can find what input you want within form "address_form" using their name. But if you just need one element, just like this
var inputs = $(document).find('input[form="address_form"][name="city"]');
I have a product form with 3 inputs
Price (fixed number)
Quantity (an input with type="text" where the user can enter a number)
Optional extra (a checkbox that the user can tick to add a number)
So far I have been using Javascript to get the value of the html elements, and then adding them and outputting the result into a html element.
I need the form to update on the fly, so that a user can enter a number into quantity and tick the box and the result update live. Unfortuantely I have been unbale to find a way to set variables when there is an update in a field, please see the link below of what I have done so far.
http://jsbin.com/tapen/2/watch?html,css,js,output
With Jquery its very easy to acess the value of an input field, or to set events to will execute when the field value is changed / updated.
As a pratical example i would suggest that you take a look in the code of a sample calculator using only jquery and html: http://firstemission.blogspot.com.br/2012/10/jquery-and-watermark-example.html
I have a form where a user can chose the applications he has access to? and when he the applications he wants access to, he is presented with more options. One of them is notification email address. if the user choses two applications, he gets two notification email address fields to fill. But both of them are stored in the same column in the database.
There are multiple fields like user authorisation level, user branch etc which are uniform accross all applications.
i am trying to replicate the value of one field in the other with jquery. i tried the below which obviously fails. Can anyone suggest how to acheive the replication?
$("#email").val().change(function() {
$("#email1").val($("#email").val());
});
Edit: I have drop down fields as well as text boxes.
.val() returns a string which cannot have a change event. You need to use
$("#email").change(function() {
$("#email1").val($(this).val());
});
You will want to bind the change event using on or live depending on your version of jquery, if you haven't wrapped this piece of code in a ready block.:
$("#email").on("change",function() {
$("#email1").val($(this).val());
});
This fiddle shows setting a <select> tags value using .val() http://jsfiddle.net/8UG9x/
It is an often asked question:
Copy another textbox value in real time Jquery
depending on when you need this action to execute, but if live
$(document).ready(function() {
$('#proname').live('keyup',function() {
var pronameval = $(this).val();
$('#provarname').val(pronameval.replace(/ /g, '-').toLowerCase());
});
});
http://jsfiddle.net/KBanC/
another one, basically same:
JQUERY copy contents of a textbox to a field while typing
I am trying to set value to a hidden column. Previously i have achieved this by doing:
var bc = $("select[title='Broadcast Channel']").val();
$("select[title='Execution Channel']").val(bc);
This works fine as I am able to get the column which exist in html source.
Now I am trying to set value to a hidden column which I have hidden in Sharepoint 2010 list setting. And I am not able to find it under html source (e.g. <input type=hidden....>).
How can I set value to this hidden column?
Not sure if the following method will be acceptable to you, but here goes...
In sharepoint, make the input field non-hidden. Instead, make it invisible at document.ready() using JQuery. If the input field is given a specific ID/class name, you can get a reference to the same, and set the text (using text() function), or for more complex situations, consider enclosing it all in a div.
Best Regards,
Gopal Nair.
In share point make the field as text input and then using jquery make it hidden and then set the value. try something like
$('input[type="text"][title="abc"]').attr('type','hidden').val("abc");
There is a common problem that if an element is hidden from back end code, normally it is simply not rendered in the html generated. Elements that needs to be manipulated at the front end need to be shown but hidden using html or js code.