Javascript with HTML *and* input field data - javascript

I have this script code in a current page I'm working on - it returns the HTML for the document. The alert was just debug to see if this code was running. The current HTML it returns is only the last part of the document, but at least it returns something...
<script type="text/javascript">
function getHtml() {
var html_source = document.createElement("INPUT");
html_source.type = "hidden";
html_source.name = "html_source";
html_source.value = document.documentElement.outerHTML;
document.forms[0].appendChild(html_source);
alert('getHtml(): completed...');
}
</script>
What I need this code to actually do is return the entire page as the HTML string (this page has lots of text fields and other controls), and I need the HTML to actually be marked up with all field data that is currently filled out on the form. I think this would mean that the value fields for all text inputs would be modified to contain what the control currently contains, returning the HTML as a string like above.
Does anyone have code that will do this? The reason I need the HTML like that with all fields filled out is so I can convert the HTML form to a PDF document that already has input field data entered, as if the form was already filled out.
The above script will return the HTML, but if I add data to some of the fields in that section of the HTML document, that data isn't evident in the string that code returns. I need that code to return all the data as well, associated with each field.
I hope this makes sense; basically I'm trying capture to a 100% an HTML document as a string that was already filled out by a user, at the time they click Submit. Once I have that string, I can do whatever I want with it including send it to another browser instance where it would be rendered as already filled out, or more to the point for me, to a PDF file renderer, converting the HTML form into a PDF file that is already filled out.

Related

take html input from user and out modified html back to the user

I have a text box on my site that will take in HTML from the user. I want to be able to take that HTML and modify it and then output the new HTML back to the user. The changes would always be easy because I would only be replacing certain characters within that HTML. They would be the same characters each time.
I think the best way to do this would be to take each line and add it to an array. That way i can output each part of the array into a new line using a for loop or something. This would also preserve line breaks. But that still doesn't solve the HTML issue. Right now when I take in HTML and try to output it, i can't. It won't show up unless it's plain text.
Currently I can only do a single line of text by just using innerHTML.
Is there a way to do this with vanilla JS?
any suggestions on where i could look would be awesome! thank you.
Consider using a prompt like so:
<html>
<script type="text/javascript">
function getValue(){
var retVal = prompt("Enter your name : ", "your name here");
// You can do something like convert it all to lowercase here:
document.write("You have entered : " + retVal.toLowerCase());
}
</script>
Click the following button to see the result:
<form>
<input type="button" value="Click Me" onclick="getValue();" />
</form>
Thus returning modified user input to the user without posting anything or submitting a form. This is just a simple example, but you can take this and apply it to an input field with a button by adding
onclick="functionToDoSomething()"
as an attribute to the button, and having the function get and alter the value of the input field.

Autopopulate form input texboxes with javascript

I have this following problem because I don't have expertise in Javascript
I'm testing a Facebook login at
http://goo.gl/3R3owa
After the user is logged in Facebook an alert windows with the birthday and location comes up. So far so good.
Rather than show that window i will like to autopopulate the day, month and year input boxes in that page.
Is there any way to do that?
Here is my code
http://goo.gl/IFhJdu
Thanks in advance!
Assuming that you have all the data in the response object and element_id# is a valid id of an element present on the HTML page. You can simply use following JS code do set the value of an input field in JS:
document.getElementById('element_id1').value = response.gender;
document.getElementById('element_id2').value = response.birthday;
document.getElementById('element_id3').value = response.location.name;
Similarly, for feeding the data to an HTML element, you can use innerHTML, for example:
document.getElementById('element_id1').innerHTML= response.gender;
(You can use the above code to replace the alert() method in you JS code.)

Autocomplete and open new window

Goal: User enters one item in text box that has autofill, after clicking button they are taken to a second page that has other corresponding items already filled out in form.
Problem: Autofill works but becomes erased/wiped out when second page opens (in other words the form is blank.
Question: I suspect I am not properly associating the actions of "form auto fill" and "open second page" with the one button. Any ideas?
$("#nextbutton").click(function () {
$("#favorite_appetizer").trigger("meals");
window.location.href = 'dinner-ideas.html';
});
Well probably problem is already solved, but try adding $_GET into javascript href, like:
window.location.href = '/index.php?first=1&second=2';
Part in part after you declare variable names and values that you can catch in second php page, like:
$_GET['first'];
$_GET['second'];
Ofcourse you need to get values from form elements with .val() or .text() and etc.
And ofcourse this has drawbacks, best used for numbers and words but not texts with symbols. Knowing more about type of form content would help, like if its data to be saved to database, you could AJAX half filled form, then retrieve its data from database with a query. If you are just filtering data, you can URL $_GET database ids of form elements, then query in second page by those ids. So again, depends on data in your forms that you want to pass to second page.

HTML textarea value is coming up as 'undefined'

I have HTML textareas that 'sometimes' have 'undefined' in the value property - I can't work out what is causing it.
Background: I have a PHP script that generates lots of textareas on a page - each with a unique ID using a counting system. The textareas belong to different forms that appear on the page. It is like an email inbox with a 'quick reply' form under each email.
Sometimes, when the forms are submitted the corresponding textarea value comes up as 'undefined' instead of the actual value the user has typed into the field. Example code:
//Javascript
function quickReply(id)
{
message = document.getElementById('textarea_' + id).value();
//Send 'message' and other details to PHP for handling...
}
I have also tried calling the value with the jQuery equivalent:
$('textarea_' + id).val();
Most of the time everything works as expected, but sometimes the value comes up as 'undefined'. 'undefined' is then send to my PHP code in Javascript and ends up getting saved in the database as the 'reply' which is how the issue is being discovered.
What causes a textarea to have an 'undefined' value property? Anything I can try to resolve this?
This is prob because your dom hasnt loaded yet is your tag in a document ready
$(document).ready(function() {
$('textarea_' + id).val();
});
To select an item by Id in Jquery, don't forget to add the "#"
$('#textarea_' + id).val();
I was able to resolve this issue by using tags to enclose each form (with each form having a unique ID).
I believe it should be possible to consistently access the .value property of a textarea without it being contained within form tags, however it seems Internet Explorer needs it in form tags 'sometimes'.
Not the best answer - but it did solve the issue.

How can 2 Html forms share 1 hidden field?

I have a page with 2 forms and a hidden field that is outside of both of the forms.
How can the hidden field be submitted with either of the forms?
I thought about doing something like this with jQuery:
<script type="text/javascript">
$(function() {
$('form').submit(function() {
// do something to move or copy the
// hidden field to the submitting form
});
});
</script>
Will this work? Any other ideas?
EDIT
The hidden field stores a serialized object graph that doesn't change. Both server methods require the object. The serialized object string can get pretty hefty, so I don't want this thing sent down from the server 2 times.
You can simply inject a copy of the element into each form right before submission.
This way, you can have the option of having different information for each hidden form field without affecting the other.
Something like this:
<script type="text/javascript">
$(function() {
$('form').submit(function() {
$("#hidden_element").clone().appendTo(this);
});
});
</script>
If you want to use the exact same element for both forms without creating a fresh copy, just don't use clone()
See documentation for clone() and for appendTo()
EDIT:
If you don't want to send the hidden element with every request the form sends. Consider storing it in the database for that user for that time. You can submit its content once, and once only for every page reload, and then just send the database id of the hidden element with each form post.
On page load, something like this:
$.post("page.php", { reallyBigObject : $("#hiddenfield").val() }, function(insertedID){
$("#hiddenfield").val(insertedID);
});
Then, in the server side code:
//insert $_POST["reallyBigObject"] into databse
//get the just inserted id (in php it's done with mysql_insert_id())
//echo, or print the just inserted id, and exit
This way your js gets the callback.
Now, you can submit the form as you would, but this time, you're only sending the id (integer number) to the server.
You can then simply delete the object from your server (run a cron to do it after X amount of time, or send another request to delete it.
Honestly, though, unless you object is HUGE(!!), I think storing it by submitting it only once is a lot more complex to execute than to simply send two requests to the server.
Let me know if you have any other questions...
With HTML5, you can include a "form" attribute with an input element. The value of the form attribute is the id of the form(s) the field belongs to. To include the field in more than one form, include all form ids in a space-delimited list. Unfortunately, the form attribute is not supported in IE at all (as of IE 9). FF and Chrome support start in version 4 and 10 respectively.
Append the field to both forms at page load:
$(function() {
$('#form1, #form2').append($('input[name=fieldName]'));
});
Assuming you are doing a non ajax submit you could just append the field into the form being submitted. However if you need this info in both forms is it not better to store this value server side in a session store. This way any non js clients will also work!
$(function() {
$('form').submit(function() {
$('input.yourhiddenSubmit').appendTo(this);
});
});
The only way to pass the variable to the next form is to have that variable in the data that is passed when the form is submitted (either GET or POST), unless you want to use AJAX. Assuming you want to have the hidden variable outside of the actual form for a "good reason", I would recommend using jQuery to include the hidden input field into the form just before submission, like so:
<script type="text/javascript">
$(function() {
$('form').submit(function() {
$(this).append("<input type='hidden' name='hiddenField' value='"+$("#hiddenField").val()+"' />");
return true;
});
});
</script>
Replace all the instances of "hiddenField" with the ID of your hidden field outside the form. This will create a new input inside of the form just before it is submitted with the value of the hidden field that is elsewhere on the page.
Beyond that, you'd have to be a bit more specific about what your exact problem was (and why the field isn't being included in the form) for me to help.
Note that the above code should work in theory, but I didn't have a chance to actually test it out myself.

Categories