I'm doing an Invoice system, and i'm facing a problem.
Imagine a simple Invoice, where you have rows (lines, tuples, whatever) where you place the thing you're buying, the amount, the price, etc.
So, in my script i've a form like this:
<form action='I-process-the-form-but-not-see-data.php'>
<input ... //some other imputs (client,date,etc)
<table>
//table hedaers
<tr>
<td><input type='text' name='invoiceData[0][name]' /></td>
<td><input type='text' name='invoiceData[0][amount]' /></td>
<td><input type='text' name='invoiceData[0][price]' /></td>
</tr>
</form>
I provide a button that adds a line to the invoice. I'm doing it with JQuery.
I first get the first and clone it. Replace invoiceData[0] with invoiceData[COUNTER] (Global counter) and everything looks great.
The problem is that my data is not being sent to the php script. The only data i get is the inputs that are static (first loaded). Not the one that i add with jquery.
I've inspect it with firebug and it's adding the new lines ok.
Actually, if i paste the code generated by JQuery in the static form it sends it well.
What could be happening?
EDIT (JQUERY MAGIC):
var clon = $("#selectorForTR").clone().html(); //there is a minimal workaround for this but doesn't matters
clon = $(html.replace(/invoiceData\[0\]/ig, "invoiceData["+contador+"]"));
$("#tableBody").append(clon);
Make sure you are opening and closing your cloned tr, i think that is why it is only getting one row.
<tr> ...html... </tr>
See my example : http://jsfiddle.net/wADef/
Changed it a bit to work in jsFiddle, but check it out and let me know.
Are you certain that you are appending the generated html in the right place? ie, inside the form tag? If the data isn't coming through, that's the only thing I can think of immediately! :]
Related
I have this field on my screen which is a text input field, but when I try to access the value from JS it returns null
Below I've attached a screen shot where you can see that Chrome has the value stored (see left panel) and that JavaScript could not get the value (bottom panel) and the top half of the bottom panel you can see the html code.
Now I am also not sure if this will help but the fields are created dynamically using PHP, and the script is registered at the top of the html document. And there is only one of the fields with that name on my HTML Page
FULL HTML CODE
<body>
<link href="Objects.css" rel="stylesheet" type="text/css">
<script src="eFarmClicks.js"></script>
<div class="ContentPanel"><label class="HeadingLabel">ADD GROUP</label>
<table>
<tbody>
<tr>
<td><label>GROUP NAME</label></td>
<td><input type="text" name="edtGroupName"></td>
</tr>
<tr>
<td><label>MAX ANIMALS</label></td>
<td><input type="text" name="edtMaxAnimal"></td>
</tr>
<tr>
<td><label>MAX MALE ANIMALS</label></td>
<td><input type="text" name="edtMaxMAnimal"></td>
</tr>
<tr>
<td><label>MAX FEMALE ANIMALS</label></td>
<td><input type="text" name="edtMaxFAnimal"></td>
</tr>
</tbody>
</table>
<input type="submit" name="btnSubmitAddGroup" value="Add Group" onclick="btnSubmitAddGroup_click()" ;="" onmousemove="mousemove(this)" onmouseout="mouseout(this)" style="background-color: green;">
</div>
</body>
Sorry about the way the code pasted. It was copied directly out of chrome.
** edit **
My javascript code :
function btnSubmitAddGroup_click(){
var xmlhttp = new XMLHttpRequest();
var groupname = document.getElementsByName('edtGroupName').item(0).value;
var max1 = document.getElementsByName('edtMaxAnimal').item(0).value;
var max2 = document.getElementsByName('edtMaxMAnimal').item(0).value;
var max3 = document.getElementsByName('edtMaxFAnimal').item(0).value;
alert(max1); // to test the value
};
** mouse move functions **
function mousemove(obj){
if(document.getElementsByName(obj.name).item(0).style.backgroundColor!="blue")
{document.getElementsByName(obj.name).item(0).style.backgroundColor="Green";};
};
function mouseout(obj){
if(document.getElementsByName(obj.name).item(0).style.backgroundColor!="blue"){
document.getElementsByName(obj.name).item(0).style.backgroundColor="transparent";
};
};
****EDIT 4 OF TODAY**
(ALSO IN MY COMMENTS)
Guys, how will this impact my code? I just realized it might be relevant to mention that the edits are in an iframe. I realized this might be relevant when I checked this command document.getElementsByTagName('input')
okay i found the problem, and i would like to thank This link and This Link for helping me get to the answer.
Okay so this was the actual problem:
The iframe is created dynamically
and the inputs were in the iframe (which i at first didnt feel the need to say in the original question)
but after some further research and review i found that this was the cause of the problem
I assume its because the input was in the iframe which is a seperate document (and i still stand under correction). So the actual code to get the value was
document.getElementById('content').contentDocument.getElementsByName('edtGroupName').item(0).value
which could also be solved using the methods mentioned in the links.
for all beginners with js this is what the code does:
//this gets the i frame of the current page
document.getElementById('content')
// this is the document (or if you will, the page loaded in the iframe)
document.getElementById('content').contentDocument
//this gets my edit on my page of the frame
document.getElementById('content').contentDocument.getElementsByName('edtGroupName')
// and this simply gets the input value
document.getElementById('content').contentDocument.getElementsByName('edtGroupName').item(0).value
I've been tinkering with this for a few days. Checked out all the posts related and still can't quite get it to work. Anyone able to take a look and steer me in the right direction?
I have a site where everything gets loaded into a div on a page.
everything is working great except the form data.
I can load the session data for a test and it works fine, however i can't seem to get any of the entered form data.
i have the session_start(); included at the top just under the opening php tag in connection.php. connection.php is required on each page.
connection.php beginning.
<?
session_start();
Here are some code samples from addvehicle.php (not posting it all as it's huge and the rest is not relevant, can if need be though)
...
<script type="text/javascript">
$(document).ready(function()
{
$('form#newvehicleform').submit(function()
{
<?php
$trucknumbera=$_POST["trucknumber"];
$_SESSION['trucknumber']=$trucknumbera;
$_SESSION['info']="this is some info";
?>
$("#mainwindow").load("addvehiclepost.php");
return false;
});
});
</script>
.....
<form id="newvehicleform" class="newvehicleform" method="post" action="<?php echo $PHP_SELF;?>">
<table>
<tr>
<td>
Truck Number
</td>
<td>
<input name="trucknumber" class="validate[required,custom[number]]" type="text" id="trucknumber" autofocus autocomplete="off" required />
</td>
</tr>
<tr>
<td>
<br>
<input type="submit" id="submit" class="s-submit" alt="Submit" value="Submit">
</td>
</tr>
</table>
</form>
the test of, addvehiclepost.php
require ('./connection.php');
echo "<br>info: " .$_SESSION['info']. "<br>";
$trucknumber=$_SESSION['trucknumber'];
echo "<br>trucknumber: " .$trucknumber;
and here is the output i get from addvehiclepost.php
info: this is some info
trucknummer:
so you can see it's passing the $_SESSION properly and that function is working however I just can't get it to pass the submitted for data.
Anyone have any ideas on getting this to go?
Thanks in advance.
-Colin.
When you execute your first script with PHP, there is no form data.
And the PHP fragment executed there does not do anything besides transfering an empty POST value (NULL) to a local variable and then to the session array.
I think you think that this PHP code gets executed when the javascript is called, but this is not the case! First all PHP is executed, and the result is echoed back to the browser. Then the page is rendered and javascript is executed.
So the PHP part of your code does copy an empty value (and sets a static one as well, that's what you see) at the time the form page is first loaded by the browser.
Then javascript acts. Which would mean in your case that there is no form POST request, but simply a GET request for the addvehiclepost.php script. No POST request means no $_POST data. Which isn't accessed in the loaded script anyway.
I don't know if you are able to fix this, but I hope I enabled you to understand the structural error of your code. I have seen this with about any newbie I know.
I have a dynamic form that i am creating in php then i have a static button after that. However, the button is appearing on top of the dynamic form.
The code for the button is simple, it is :
echo "<input type=\"submit\" value=\"Click here\" />
</table></form>";
but i don't understand why does the button appear on the top of the form instead of appearing on the bottom even though its code is after the php code for creating the form, is there anything i could test or do to change that?
I can only guess from the little bit of code that you have posted, but it looks like you dont have your submit button in a <td>. Usually when you put html elements inside of a table, and not inside of the td, it puts it on top, or below the whole table. The way it should be done is like this:
echo "<tr>
<td><input type=\"submit\" value=\"Click Here\" /></td>
</tr>
</table>
</form>";
Well, firstly the code snippet you've got there isn't valid. I can tell that immediately. You've got an input as a child to a table. Can't do that. The browser is then treating that like it's meant to be before or after or something. You need:
<table>
...
<tr>
<td><input type="submit" ... ></td>
</tr>
</table>
or something like that. Only TR, TBODY, THEAD, TFOOT, COLGEROUP and COL elements are legal child elements of a table.
You may also have a problem with not closing tags or closing them in the wrong order higher up in the document. Not closed:
<p>This is a <b>test</p>
Wrong order:
<p>This is a <b><i>test</b></i></p>
although browsers can usually figure these ones out, once you start getting into tables and more complicated structures any missing or wrong closing tag can throw the whole thing out.
I got following scenario:
A site is sending a request to a php-file to hand me some data. For this request I am selecting an item - here is the code for that part:
<form action="?modul=transaktionen&subModul=monitor" method="post">
<input type="hidden" name="suchVal" value="1">
<input type="hidden" name="action" value="1">
<!-- A LOT OF STUFF INBETWEEN ... -->
<table>
<tr>
<td>
<input type="radio"
name="hostsARR[host][idGcomp]"
id="nod_331"
value="331">
</td>
<td>Some text which is really not important</td>
</tr>
<tr>
<td>
<input type="radio"
name="hostsARR[host][idGcomp]"
id="nod_332"
value="332">
</td>
<td>more text that is not important</td>
</tr>
</table>
<input type="submit" class="sendButton" name="edit" value="Show details">
</form>
And when I select one of these item and hit the button it should send me the request with these attributes:
action 1
edit Show details
hostsARR[host][idGcomp] 332
It does that normally, but when I add javascript to it it gets totally messed up! It does not send the right request. What happens is that I do not get the hostsARR. Everything else gets through. I added a script by frequency-decoder.com for pagination and for sorting. You can find the script here if you need a look at it: http://www.frequency-decoder.com/2007/10/19/client-side-table-pagination-script.
Basically my question is whether there are known Javascripts or bugs or whatever I don't know or am not capable of giving a name for that mess up POST (or other) requests?
Seriously this is driving me crazy as I really do not see a reason why sorting a table or rather adding javascript should alter a form element to that extent.
Thnx in advance for your help.
EDIT: The request doesn't work anywhere BUT IE ... dunno where IE is maybe more tolerant?
Answering to the information given, I can conclude that the pagination or sorting script has nothing to do with what causes your error.
My guess is that your manual actions have caused this or some other included script.
But unless you provide us these no-one can tell.
If you could provide the full source to recreate the problem we could all be of more help.
$('#images_upload_add').click(function(){
$('.images_upload:last').after($('.images_upload:last').clone().find('input[type=file]').val('').end());
});
using this code to append file input's does not upload the file in firefox.
also
$('#image_server_add input[type=button]').click(function(){
var select = $(this).siblings('select').find(':selected');
if(select.val()){
$('#image_server_add').before('<tr class="images_selection"><td><input type="button" value="Delete"></td><td class="main">'+select.html()+'<input type="hidden" value="'+select.html()+'" name="images_server[]"/></td></tr>');
}
})
also does not upload the values to the $_POST
I can't find anything to say why this wouldn't work in the documentation, this works in IE but not it Firefox/WebKit
Why wouldn't these examples correctly upload the form values?
Bottom line the markup on the page was mangled.
The form was in a table based layout, not by my choice, and the form declaration was inside a tr.
I moved the form declaration to a parent td of the form inputs and now it works.
This is an interesting result considering the rendering engine will correctly submit inputs that are improperly placed, but attempting to add those inputs using jQuery/javascript? into the same place will not work in Firefox/WebKit.
I imagine this has to do with the dom manipulation that javascript does and how it may be more strict about the block level element requirements.
Any more notes/conjectures about my findings would be appreciated.
Are you having the same problem if you create a new input rather than cloning an existing one?
Are you changing the name of the cloned input to avoid name collisions or are you using an array style name (e.g. file[])?
What is the purpose of adding the markup of the selected option to a hidden input?
For fun, have you tried using .clone(true)?
Wow! Sometimes jQuery can actually be too dense to read. Would also help if we could see your markup.
Stab in the dark here because I'm guessing at what you're trying to do.
You can't programmatically enter a filename into a file field and it be uploaded to the server. That would be dangerous.
Perhaps I'm barking up the wrong tree?
Maybe rather than adding the element just as the form is submitted, put the element in, but with default values.
Then when the button is clicked, populate that element with the right value.
I just say that because by the time you click on the submit, it might be too late for the added element to be submitted along with the form.
I got to this section from google searching a similar problem.
To me, I was able to fix it by taking a step back at the problem -
in a example form:
<table>
<form method="post">
<tr>some content <input type="text" name="test"> </tr>
</form>
</table>
This will work in Internet explorer for some reason, but it is actually invalid html.
Move the form tags to outside the table, like so:
<form method="post">
<table>
<tr>some content <input type="text" name="test"> </tr>
</table>
</form>
And it will then work.
The input's will work fine (even dynamicly) this way, I was having a lot of trouble where a form would work, until you inserted more inputs or form elements - only the original elements would submit, which was very hard to track.