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.
Related
I am trying to make an element with jQuery, which contains text from an input field after the user clicks the SUBMIT button.
Here is my jsfiddle: http://jsfiddle.net/2y26rzot/
Here is my javascript:
$(document).ready(function () {
$('button[type=submit]').click(function () {
var typedText = $('input[type=text]').val();
var resultText = $('<p></p>').text(typedText+'2');
$('section.result').append(resultText);
console.log(typedText);
alert(typedText);
console.log(resultText);
alert(resultText);
});
});
I have included bootstrap js and css and of course jQuery as well.
The problem occurs somewhere between the first and the second alert, but I have no idea where and why. I have basic understanding of jQuery, as I learned it by doing, so I may be getting something wrong here.
The error on my local machine reads:
text
index.html:45 [p, jquery: "1.11.0", constructor: function, selector:
"", toArray: function, get: function…]
Navigated to file:///C:/Users//Desktop/textonbackground/index.html?
Of course if I remove the last 2 lines with the resultText console log and alert I don't get an error, but the text still vanishes and I don't understand why. Can someone explain this to me and of course suggest some other way to achieve my goal, namely to get information from the input field and post it as a paragraph on the page.
I should mention that I've tried different approaches building the variables and appending the text (with .add and .after) but nothing changed. I am missing something here.
Your help is much appreciated!
The text disappears because the page refreshes after form submission. The problem is not in .text()
If you add e.preventDefault() to it, the text will stay where it should.
If you don't want to change the event, you could use a regular button (<button type="button">) without the form
Online here: http://jsfiddle.net/2y26rzot/3/
Your code seems to work fine in the fiddle, you just need to prevent the default action of the form submitting (if it submits it will refresh the page and so your clientside changes, ie. the changes made with js, will not show):
$('button[type=submit]').click(function (e) {
e.preventDefault();
...rest of code
});
Updated Fiddle
If you want to append a p element, with a text inside, you should bascalliy do
var resultText = $('<p>'+typedText+'2</p>');
Because .text() returns either the text of the concerned element if you dont pass any argument (to get text), or the jquery object of the concerned element if you pass an argument (to set text)
I am feeling really stupid and not sure if doing something really dumb what... so excuse me in advance.
I have the following HTML:
<input type="text" value="0" name="pcscubes" id="pcscubes">
I have the below jquery syntax:
var cubes=123.2;
$("#pcscubes1").val(cubes);
var test=$("#pcscubes1").val();
alert(test);
When the jquery executes, the input box will display 123.2 and the alert will be 123.2.
if you inspect the html object though, the value is still 0?
so the display of the input is different from what the real value is. so when I submit this form it posts 0 rather than 123.2
Now I have built a whole web app with this syntax and works perfectly. today it just stops working? I have restarted browser, checked old code that was working, logged off and on and still it does the same.
web app obviously has jquery loaded and jquery ui on this form.
using codeigniter?
any ideas as I am banging my head over something so stupid....
Out of interest I created the below fiddle and it is doing the same?
http://jsfiddle.net/49nqU/
why is the value 0 when it is showing 123.2?
Thanks as always,
This is a case of attributes vs. properties.
What you are seeing in the inspector is the value attribute, which does not update when you programmatically update a field's value property.
Pay no attention to what the DOM inspector says; it'll only show the value as it was when the page loaded (unless you explicitly change the field's value attribute rather than, as jQuery's val() does, its value property.)
Further reading: http://jquery-howto.blogspot.co.uk/2011/06/html-difference-between-attribute-and.html
Some attributes are closely tied to their property counterparts. That is to say, updating the property also updates the attribute. This is the case, for example, with the class attribute and its className property counterpart. value, however, is different; updating the property does not update the attribute (but, just to confuse things further, updating the attribute does update the property!)
val() is changing the value property, not attribute. The value attribute is initialized at the loading of the page. Once you change text field the value property and attribute have differnet values.
But you can use plain JS for changing the value attribute also.
Try:
var cubes=123.2;
document.getElementById('qty').setAttribute('value',cubes);
var test=$("#qty").val();
alert(test);
DEMO
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);
I'm meeting a problem with getting input value from sharepoint people editor via js.
usually, we can get value from this control via below codes:
var user;
var pe = document.getElementById('<%=peStaffAccount.ClientID %>').getElementsByTagName('div');
var i;
var peopleEnt;
for (i in pe) {
if (pe[i].id != null) {
if (pe[i].id == 'divEntityData' && pe[i].description != null) {
peopleEnt = pe[i]
}
}
}
// this is the value from this textbox but only after we click checked user
alert(peopleEnt .description)
my question is, when i input some value into this textbox directly, how can I get this value?
refer to below image, my input value.. I want to get this...
Working with people picker in javascript is pretty awful. The actual control that you type into is really a content editable div. It will have an ID which is the ID of your control followed by _upLevelDiv. You will need to grab that and then parse what is within.
The code you posted is actually dealing with the nested divs created when an entity is resolved. These divs are contained within upLevelDiv.
If you only have text in the control as shown in your screenshot, then it's pretty straightforward. If you have a mix of text and resolved entities then it's more complicated as there will be both text and html in the div.
NOTE: All of the above is only true for IE, in other browsers it uses a textarea (which is hidden when in IE).
I am not sure if I have understood the question properly.
You can bind KeyPress Event to the textbox, so that you can get the text real time while typing before clicking checked user button.
yourTextField.onKeyPress = function(){
var txt = yourTextField.value;
}
Use the following to investigate the rendered page:
Use 'View Source' to make sure that getElementById('<%=peStaffAccount.ClientID %>') is correctly substituted by the server with a valid ClientID.
Use the browser's debugger (F12 in IE9, Developer tools in Chrome) to inspect the DOM for the existence of the element by that ClientID
Using the same tools, watch for any script error reported by the debugging tools (which are otherwise silently ignored by the browsers).
I'm trying to update a span tag on the fly with data from an input text field. Basically I have a text field and I'd like to be able to grab the user's input as they type it and show it to them in a span tag below the field.
Code:
<input id="profileurl" type="text">
<p class="url">http://www.randomsite.com/<span id="url-displayname">username</span></p>
JQuery:
var username;
$('#profileurl').keyup(function(username);
$("#url-displayname").html(username);
See it in JS Fiddle: http://jsfiddle.net/pQ3j9/
I'm guessing the keyup function is not the best way to do this. Since checking the key wouldn't be able to grab prefilled or pasted form input.
Ideally there is some magical jQuery function that can just output whatever info is in the box whenever it detects a key up but if that method exists I haven't found it yet.
EDIT: You guys are fricken amazing. It looks like .val() is that magic method.
Second question: How would you restrict input? Looking at the modified jsfiddle's, when a user inputs an html tag like < hr > the browser interprets it and breaks the form. Do you specify an array and then check against that? Does jquery have anything like PHP's strip_tags function?
$('#profileurl').keyup(function(e) {
$("#url-displayname").html($(this).val());
}).keypress(function(e) {
return /[a-z0-9.-]/i.test(String.fromCharCode(e.which));
});
check out the modified jsfiddle:
http://jsfiddle.net/roberkules/pQ3j9/5/
Update: As #GregL points out, keyup indeed is better, (otherwise e.g. backspaces are not handled at all).
Similar to roberkules' answer, but using keyup() like you proposed seems to work better for me in a Chrome-based browser:
$('#profileurl').keyup(function(e) {
$("#url-displayname").html($(this).val());
});
Updated jsFiddle: http://jsfiddle.net/pQ3j9/3/
For the second question, if you wish to maintain characters and not have them parsed as html entities then you should do this instead :
$('#profileurl').keyup(function(key) {
$("#url-displayname").text($(this).val());
});
Check it out at - http://jsfiddle.net/dhruvasagar/pQ3j9/6/
You can bind multiple events with bind
http://jsfiddle.net/dwick/DszV9/