How to keep new updated input value while printing the html page? - javascript

I have some input fields that get default values.
A user can change the values of the inputs.
Then, I try to print the html page (window.print()) with the updated values, BUT the print preview shows the old default values (i.e., the printed page doesn't show the new inputs' values).
Any ideas? Thanks in advance.

I looked around a little bit and noticed the npm site successfully prints the entered value. I also noticed that the value in the input box gets live-updated in the html, which isn't how most input boxes work:
$('.classname').attr('value', newvalue);
If you have access to jquery, that code changes the value in the actual html, not just behind-the-scenes. Try that and see if it prints.
--- edit
I made a test html document with some inputs and I'm not having any trouble at all seeing changed input values with window.print(). You'll possibly need more context for your issue.

You could add an onChangeListener, which can print your value.
E.g.
function onChangeHandler(val) {
console.log(val);
}
And your input
<input type='text' value='myDefaultValue' onchange='onChangeHandler(this.value)' id='exampleInput' />

Related

Spotfire Document Property setting using JS

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.

Print the HTML form with User Filled Information/Data

I have HTML form and I would like to print the HTML form, with the User Filled Information/Content.
Is there exist any way in jQuery or JavaScript to get a HTML Form with user filled values and print it?
This is what I have tried
$(form).html() but it returns only empty form
$(document).find("form").html() which also returned html with empty form.
NOTE: I am not talking about serialize function here. I don't want to submit a form but want to convert form to a printable version by setting input, select background transparent.
You can use
$('form').find('input').each(function( key, value ) {
console.log(value);
});
And to get the data ready for POST or something like it use this
$('form').serialize();
I think I got your issue. What you are actually want is, to print the HTML form, but it should contain the User Input.
First and foremost, you can use the 'window.print()' method. If you want to print only the Form, then you should use some CSS tricks.
I guess, what you are looking is answered in the following SO Questions. Please check out.
Javascript print web form with user input included
How to print only a selected HTML element?
If you are still not able to get your solution done, then let me know. Let me see how I can help you. Good Luck.

jQuery .val() returns empty when control has value

I have a function
var saveName = function (aName) {
console.log(aName);
$("#hiddenFieldName").val(aName);
}
which is called on button click and certain value from the button is stored into the hidden field. Then, after postback, I want to print the value into console
$(function () {
console.log("The value is " + $("#hiddenFieldName").val());
});
but I am getting only "The value is ". It seems, as if there was nothing stored in the hidden field. Even when displaying the code in console (F12, tried both in Chrome and IE), the value there is empty. However, when displaying source code, I can see the value stored in the hidden field. Does anybody know, what might be the problem?
When you say:
Even when displaying the code in console (F12, tried both in Chrome
and IE), the value there is empty. However, when displaying source
code, I can see the value stored in the hidden field.
I get the sense that there must be some other js on the page that is writing "" into the value for that hidden field. That way, when you view the source, the value from the server is correct because no js has run yet, but when you look in console or inspector, because the client page has executed the js in question, it has cleared the value.

innerHTML not being updated after changing value of input (checked = true/false/"checked")

Brief: I need to grab the information in parentElement, but I need the input information updated. when I am grabbing the innerHTML of parentElement, after the box is unchecked, it still shows up checked. The html is not reflecting changes I've made with javascript.
I have a small snippet of my code here: http://jsfiddle.net/7993K/8/
<div id="parentElement">
<label id="thisLabel">
<input type="checkbox" id="idnumber" checked="checked"> Bring Mail Inside
</label>
</div>
<p>
<a onClick="checkit()">Check it out</a>
</p>
<p onclick="checkToggle()">change to false</p>
function checkit() {
alert(document.getElementById("parentElement").innerHTML);
}
function checkToggle() {
element = document.getElementById("thisLabel");
element.childNodes[0].checked = false;
alert("the checkbox is checked: " + element.childNodes[0].checked);
}
The slightly longer version of why I am going about it like this:
This is a large form that a site inspector checked out. It is brought into an online software app, and the lady in charge of communication with clients will review this information, speak back with the inspector on the phone. This form is saved in a database as html. After the woman is done reviewing the form, there may be a box or two that wasn't checked, that she would like to check, before emailing to the client ( there were issues, needed to be fixed, now that they are fixed, she can send out the proper report that everything was checked off)
She checks the boxes off, but they don't update the HTML, they only change the value, which will show, but won't show up when I get the innerHTML of parentElement. You will see in my JSFIDDLE http://jsfiddle.net/7993K/8/:
Click check it out upon loading: checked = checked
uncheck box: checked = checked
change to false: alert confirms the checked property is false, but check it out shows the innerHTML as checked.
I will need to access this innerHTML with the proper information loaded (as in, if it is checkmarked, the html should reflect that)
PRE-EDIT: I think I can do this by making an event onclick of the label. That event takes the ("parentElement").innerHTML and split it in a few different places and put it back together with the right checked value. Will be slightly different if the input isn't checked to begin with. That is the only way I can think of doing this, and it just doesn't seem like the right way.
The state of checkboxes and the value of input boxes are NOT a part of the source HTML.
For proof of this, try putting a textbox on a page with value="old", change the value, then compare element.getAttribute("value") and element.value - they're not the same.
You really should save the state of the form, rather than the HTML behind it.
This is happening because element.childNodes[0].checked = false; is setting the DOM property, which is a separate entity than the HTML attributes.
Your checkit function should also be interrogating the DOM property, not checking the innerHTML.
See this question for more information about DOM properties and HTML attributes.

reload a page without losing field values like in FireFox using javascript

I'm very new to JavaScript and HTML.
I have a simple html form that has some select fields. When the user selects the options from the fields, a function is called that takes the values of the fields, multiples the values against other field values and spits out the results to an input text field named "result".
This is all working great, however I would love a way that instead of outputting the results to a text field, it would output as standard text on the page.
What I did was call the calculate function the tag, within the body, I inserted a document.write(result), then I created a button that calls the calculate function in addition to location.reload().
In Firefox, it works perfectly where it KEEPS the options selected, calculates the results, reloads the page and updates the document.write(result) value on the page.
But in IE or Safari, it resets the select options values to the default settings.
I hope this makes sense and appreciate any help!
how about this:
every time the user selects an option, or makes any sort of a selection, serialize that control, and slap the serialized string to the end of the current window.location, then navigate to it.
also, you will need to add javascript to check the current url, figure out what selection was made, and pro grammatically change the control's values. this way, when the user refreshes the page, the url will contain all of his selections.
got it?
Instead of document.write you could setup an element used specifically to hold the output value much like you do currently with the input element.
In place of the current input element used to output the result..
<span id="calculationResult"></span>
Then to populate that value and avoid reloading the page at all so that your fields maintain current values..
document.getElementById("calculationResult").innerHTML = result;
if you need to append you can always just create text nodes and append to the element which would be preferred anyway.
In order to keep text boxes' content as is, set the button as type="button" and call the calculate function and document.write in onclick. No reload, no mess.

Categories

Resources