Submit a FORM after it was removed from DOM Tree - javascript

what i want to do is: i want to keep the form object somewhere and send it later to the server. It works fine if the form just contains text/radio/checkboxes etc. but it doesnt work in Internet Explorer when there is a field for fileupload.
Here an example:
<div id="container">
<form id="testForm">
<input type="file" name="photo"/>
</form>
<input type="button" onclick="uploadLater();"/>
</div>
function uploadLater()
{
window.oldForm = document.getElementById('testForm');
document.getElementById('container').innerHTML = "thanks!";
}
another function that is executed later looks like this (note: works in FF and Chrome but NOT in IE, IE sadly doens't send the file):
function doItNow()
{
if(!window.oldForm.parentNode) document.body.append(window.oldForm);
// ... other parameters omitted ...
window.oldForm.submit();
window.oldForm.parentNode.removeChild(window.oldForm);
alert('hurray! data on its way ...');
}
Does anyone know a solution to make something like this work in IE?
Sending a form that contains also a file and is not part of the DOM tree after a certain delay (cross browser).
Thx,


Would something like this work? You would just hide the form, keeping it where it is but not displaying. Then display another div with your text.
Here is the working copy: http://jsfiddle.net/KhJAt/
<div id="container">
<div id="displayMessage" style="display:none;"></div>
<form id="testForm">
<input type="file" name="photo"/>
</form>
<input type="button" onclick="uploadLater();" value="Click it"/>
</div>
function uploadLater()
{
window.oldForm = document.getElementById('testForm');
window.oldForm.style.display="none";
document.getElementById('displayMessage').style.display="";
document.getElementById('displayMessage').innerHTML = "thanks!";
}

Related

How to call function in another page?

I created a link https://www.sefaz.rs.gov.br/NFE/NFE-CCC.aspx?ErrKey=true&iCodUf=0&lCnpj=00110612000137 To fill the input field CNPJ.
This is fine. However, I need to run the function preencheParametros('CNPJ') together above link.
So, I tried something like this https://www.sefaz.rs.gov.br/NFE/NFE-CCC.aspx?ErrKey=true&iCodUf=0&lCnpj=00110612000137&exec=preencheParametros('CNPJ')
And not worked. How handle this?
First Way: Not Worked
GET method
<form method="post" action="https://www.sefaz.rs.gov.br/NFE/NFE-CCC.aspx?ErrKey=true&iCodUf=0" name="nForm" id="nForm">
<div class="CInput" id="CCnpj">
<input type="text" name="lCnpj" id="lCnpj" value="00110612000137">
</div>
</form>
Result: open new tab, like https://www.sefaz.rs.gov.br/NFE/NFE-CCC.aspx?ErrKey=true&iCodUf=0&lCnpj=00110612000137
Second Way: Not Worked
Read GET method in JS
Input values:
<input type="text" name="lCnpj" id="lCnpj" value="00110612000137">
<input type="button" value="Get Input Values" id="retrieveInputValuesButton" />
<script>
var cnpj = document.getElementById("lCnpj");
var element = document.getElementById("retrieveInputValuesButton");
element.onclick = function() {
window.open("https://www.sefaz.rs.gov.br/NFE/NFE-CCC.aspx?ErrKey=true&iCodUf=0" + cnpj.value + "&exec=preencheParametros('CNPJ')");
};
</script>
Result: open new tab, like https://www.sefaz.rs.gov.br/NFE/NFE-CCC.aspx?ErrKey=true&iCodUf=0&lCnpj=00110612000137&exec=preencheParametros('CNPJ')

I'm sorry, but there is no way to pass in executable instructions to a website like that (unless they specifically provide you a way to do so). That would be a huge security risk if anyone could just inject code.
You could however try cooking something up with a Greasemonkey script.
It's called Greasemonkey for Firefox, or Tapermonkey for Chrome

How would I go about changing the contents of a div after the user searches?

So I have this form:
<form method="post" action="index.php" id="searchform">
<input type="text" name="search" placeholder="Search...">
<input type="image" src="img/img1.png" alt="submit" onmouseover="hover(this);" onmouseout="unhover(this);" /></a>
</form>
When the user searches for something I want to change this div:
<div class = "mainText">
<h2>Today's Events: </h2>
</div>
To say this:
<div class = "mainText">
<h2>Results: </h2>
</div>
How can I do this?
EDIT: Is it possible to run this code from within a php if statement?

jquery .text() seems a better fit, so you can just change the text of the tag.
$(".mainText h2").text("Results:");
More on this here:
http://www.w3schools.com/jquery/html_text.asp

The action in your form is the destination of where your form ends up.
If you are looking to control the dom elements you need something like javascript or jquery to control the front end of your application.
You could use jquery to simply listen for when your user has clicked the button or submitted the form and parse the results (in this case, just switching html text). *Remove the the action destination otherwise the page will redirect to index.php
$('form').submit(function(){
$('.mainText').html('<h2>Results: </h2>');
return false;
});
Common usage is to put an ajax call in the submit function to retrieve some data from outside the page source. Hopefully that puts you on track :)

More submit button disabling on click with Jquery, doesn't work

I got this code here:
It works fine as far as disabling and replacing the Submit button goes, but it will not submit the form. My form uses the 'get' method and submits data to another page.
<script type="text/JavaScript">
$('.button').click(function() {
$('.button').remove();
$('.holder').append("DONT DOUBLE CLICK ANYTHING IN A BROWSER");
$('.form').submit();
});
</script>
I have tried most things, including changing .form to the id of my form, still no joy, any ideas would be helpful.
HTML code
<form action="liftingConfirm.asp" method="get" id="frmArchiveConfirm">
<input name="con_id" type="hidden" id="con_id" value="<%=request.querystring("con_id")%>" />
<input name="sub_id" type="hidden" id="sub_id" value="1" />
<input name="liftingDate" type="hidden" id="liftingDate" value="<%=Session("currentUSDate")%>" />
<div class="holder"><input name="btnConfirm" type="submit" class="button" id="btnConfirm" value="Start New Lifting Gear Examination" /></div>

You're using the wrong selector, the .form is looking for a <form> with a class of form. Furthermore you should be using the on() syntax:
$('form').on('click', '.button', function() {
$('.holder').append("DONT DOUBLE CLICK ANYTHING IN A BROWSER");
$('#frmArchiveConfirm').submit();
$('.button').remove();
});

For your jQuery code to work you should include the frmArchiveConfirm to your jQuery code as below.
Replace $('.form').submit(); with $('#frmArchiveConfirm').submit();
else if you only having one form in the page just use $('form').submit();
When you come across bug like this don't forget to make use of the firebug or the browser development tools. You can easily figure out the bug and what's wrong in your code.

document.write to current HTML page

I am a noob to programming, so I'd appreciate any advice from you more knowledgeable folks out there. I am working on a bit of javascript for a web page and I need the javascript to print to that current HTML page, preferably in the div tag I have set up for that purpose. Here's what I have so far:
<html>
<head>
<title>Tardy Reporting</title>
<script src="students.js" type="text/javascript">
</script>
</head>
<body>
<h1>Scan in Student ID</h1>
<form method="POST" name="idForm" onSubmit="getId(parseInt(document.idForm.studentId.value));">
<input type="text" name="studentId" id="studentId"/>
<input type="Submit" name="Submit" />
</form>
<div id="div1"></div>
<p>
</body>
</html>
and my JS file:
var studentNumberArray = [50011234, 50012345, 50013456];
var studentNameArray = ["Mike Simpson", "Greg Pollard", "Jason Vigil"];
var studentLastPeriodArray = ["George Washington", "Darth Vadar", "Obi Wan Kenobi"];
var tardyArray = [0, 0, 0];
function getId(studentId) {
for (i = 0; i < studentNumberArray.length; i++){
if(studentId === studentNumberArray[i]){
tardyArray[i] += tardyArray[i] + 1;
document.getElementById('div1').innerHTML='test';
}
}
}
Mind you, this is just the basic framework, so it's not nearly done yet, but the thing that is bugging me is that it'll go through the code correctly and print it out, but the result only lasts a fraction of a second on my browsers (chromium and firefox). Any help would be appreciated.

Here is an easier/better way to accomplish what you are trying to do
var students = {};
// Add students to object
students[50011234] = { 'id': '50011234', 'name':"Mike Simpson", 'lastPeriod':"George Washington", 'tardy':0 };
students[50012345] = { 'id': '50012345', 'name':"Greg Pollard", 'lastPeriod':"Darth Vadar", 'tardy':0 };
students[50013456] = { 'id': '50013456', 'name':"Jason Vigil", 'lastPeriod':"Obi Wan Kenobi", 'tardy':0 };
function getId(studentId) {
students[ studentId ].tardy += 1;
document.getElementById('div1').innerHTML='test';
}
Also, as pointed out below, you should change your button to not submit if that is not what you are intending to happen:
<form method="POST" name="idForm">
<input type="text" name="studentId" id="studentId"/>
<input type="button" onclick="getId(parseInt(document.idForm.studentId.value));" name="Mark Tardy" />
</form>

The reason why you see it only for a fraction of a second is that you are actually causing a submit. A submit is a full call back to the server which returns the page to its initial status.
To fix this simply make the function call on the onclick event of the button:
<html>
<head><title>Tardy Reporting</title>
<script src="students.js" type="text/javascript"> </script>
</head>
<body>
<h1>Scan in Student ID</h1>
<form method="POST" name="idForm" >
<input type="text" name="studentId" id="studentId" />
<input type="button" onclick="getId(parseInt(document.idForm.studentId.value));" value="submit" />
</form>
<div id="div1"></div>
<p>
</body>
</html>

What do you mean by "result"? It appears that you are setting the innerHTML of div1 to "test" over and over again.
Perhaps you mean to write
document.getElementById('div1').innerHTML += 'test';
Doing this is not efficient and it is preferable you concatenate on a string, or even better, join an array, before assigning the innerHTML.

but the result only lasts a fraction of a second on my browsers (chromium and firefox).
That is because you are submitting the page, so the page gets refreshed. You need to change the button type to button from submit. Also add a onclick to the button and call the js function getId

Forms are a special construct that allows communication with a server:
When a form is submitted, the form data is "POSTED" to a server via an HTTP request.
Typically, the browser displays the server's response as a new web page.
Forms use the action attribute to specify which server page should process the request
In your case, no action is specified, so the form POSTS to the current page, which is equivalent to refreshing the page. This means that all client-side (JavaScript) changes are wiped out, which is why you only see them for a split-second.
To achieve your desired result, change the input type from submit to button:
<input type="button" onclick=".." value="submit" />
Ideally, the student data exists in a database that is manipulated by code on a server. Your form would POST a request that returns an HTML page containing the desired data.
References
HTTP
Forms

How do I use a link instead of the browse button to attach a file?

I have a form like the following:
<form id="submit_idea" name="submit_idea" method="post" action="">
<a class="attach" title="Attach a file" onclick="clickAttachment()"
href="javascript:void(0)">Attach File</a>
<span id="id_filename"/>
<input id="id_attachment" type="file" name="attachment"/>
<input class="submit_btn" type="image" alt="Submit Idea" src="/static/img/submit_idea.png"/>
</form>
And the associated javascript that goes along with it.
function updateAttachment() {
var val = $("#id_attachment").attr("value");
if (val) {
var name = val.split('\\');
$("#id_filename").html(name[name.length - 1]);
}
else {
setTimeout(updateAttachment, 500);
}
}
function clickAttachment() {
jQuery('#id_attachment').click();
setTimeout(updateAttachment, 500);
}
This works great for IE, but does not work at all for FireFox 3.5.1. Is there another way to get the same result in FF 3.5.1 or later with just using dhtml/javascript (no Flash, etc.)?
We can use CSS to dress up the "Attach File" link, but we can't change the layout of the browse button FireFox puts up for the form. The IE solution lets us via a proxy click the button to browse for a file, but that does not work under FireFox.
Thanks in advance, -peter

Here's what you're looking for, I believe
Styling an input type="file"

Categories

Resources