JavaScript injected form field does not appear in POST data - php

I have a form that generates new input fields via JavaScript on click.
the inputs are successfully added to the FORM with the desired naming convention.
<input type="text" name="util_name0" id="util_name0" value="" /><br/>
<input type="button" onClick="newUtil(this)" value="Add New" />
newUtil() adds:
<input type="text" name="util_name1" id="util_name1" value="" />
however after posting, print_r($_POST) only lists 'util_name0'.
Normally i'd paste some code, but that's all i really need to do at this point...
form is in an include called from parent.php.
Javascript is called in parent.php
JS:
function newUtil(el) {
var newval = util_count++;
$('#qty').attr('value', newval);
$(el).before('-------------<br />
<div class="newUtilField">
<label for="util_type'+newval+'">Type (i.e. gas, electric...) '+newval+'</label><br />
<input type="text" name="util_type'+newval+'" id="util_type'+newval+'" value="" /><br /><br />
<label for="util_name'+newval+'">Company Name</label><br />
<input type="text" name="util_name'+newval+'" id="util_name'+newval+'" value="" /><br /><br />
<label for="util_number'+newval+'">Company Number</label><br />
<input type="text" name="util_number'+newval+'" id="util_number'+newval+'" value="" />
</div><br /><br />');
}

After execute the js code that adding the new field, inspect the new element using Firebug (in Firefox) or Web Inspector (in safari and google chrome). If the new field is outside the form tag, then it will not be included to form submit.
If you can, please provide the structure of form and it's fields. Also, make sure that the page contain no other error, and the tag is well balanced, all open tag have been closed in the right place. Misplace closing tag might yield error and unexpected behaviour.

Is this behaving differently in IE than it is in Firefox? Run an HTTP sniffer (like Fiddler) on it check the HTTP post headers carefully.

Would recommend creating proper objects rather than creating the elements like that.
Create elements and inject them one by one.
EDIT : check link http://domscripting.com/blog/display/99

Related

Validation errors when using echo PHP variable as value of input field

I have a simple HTML form and I use PHP to validate user input. If there are errors in the form I redisplay the form, keeping the values that are okay so the user can modify only the fields that have errors. Everything works as expected but when I tried validating the markup I got errors on this line:
<input type="text" name="hours" value="<?php echo $hoursWorked; ?>" />
Here's the function that redisplays the form:
function redisplayForm($hoursWorked, $hourlyWage) {
?> <h2 style = "text-align:center">Paycheck Form</h2>
<form action="process_Paycheck.php" method="post">
<p>Hours Worked: <input type="text" name="hours" value="<?php echo $hoursWorked;?>" /></p>
<p>Hourly Wage: <input type="text" name="wage" value="<?php echo $hourlyWage;?>" /></p>
<p><input type="reset" value="Clear Form" />
<input type="submit" name="Submit" value="Send Form" /></p>
</form>
<?php }
When I uploaded the .php source file to validate the markup I got these error messages and for each of these errors the opening " after value= is highlighted in red:
Character "<" is the first character of a delimiter but occurred as data
Unescaped '<' not allowed in attributes values
Attributes construct error
How can I fix this so I don't get validation errors?
As you have already known from the comments, the W3C Validator cannot be used to validate the PHP files. If the page can be accessed from the Internet then use its URL, otherwise use the browser's "View Source" command to view the generated HTML and copy-paste the HTML into the validator.
This is not a limitation of W3C Validator. There is no way to validate the HTML by looking at the PHP source. PHP is a dynamic language, by executing the code you can get different HTML output depending on the input.
Without using any validator, the code you posted has one strong flaw: if $hoursWorked is a string that contains " (double quotes), the generated HTML is incorrect pieces of markup are rendered as text by the browser.
Imagine what happens if $hoursWorked is '2">'. The generated HTML is:
<input type="text" name="hours" value="2">" />
and the fragment " /> becomes visible in the rendered output because it is not part of the markup any more.
This is what happens when dynamic content is rendered as HTML without being properly encoded as HTML. PHP provides the function htmlspecialcharacters() that must always be used to properly encode (as HTML) content that is used to generate HTML. Especially when the content is retrieved from an outside source (from the browser, f.e.). The code should be:
<input type="text" name="hours" value="<?php echo htmlspecialchars($hoursWorked); ?>" />
<input type="text" name="wage" value="<?php echo htmlspecialchars($hourlyWage); ?>" />
Other than that, the HTML generated by the posted code looks fine.

Trying to pass three parameters from one php file to another

I am trying to pass three parameters from one php file to another. Two of those parameters are in variables that are already determined long before the button is clicked to call the second php file, but one will be taken from a text box at the time the button is clicked.
So far I have the following (snippet) in the first php file. The two parameters that are in the existing variables show up in the URL just fine, but I can't figure out how to get the student number to be included. The URL just has "studentNumber=?&club=..."
Thanks!
<input type="text" id="studentNum" placeholder="Student Number">
<input type="button" value="Add Student" onclick="window.location = '<?php $url = 'http://npapps.peelschools.org/editor/add.php?studentNumber='.$_GET["StudentNum"].'&club='.$club.'&type='.$type.''; echo $url;?>'" />
Is it really necessary to use window.location? I would encourage you to use something like this
function doSubmit() {
document.getElementById("myformid").submit();
}
<form id="myformid" action="receivingPHP.php" method="POST">
<input id="studentnr" type="text" value="42" />
<button onclick="doSubmit()">Send</button>
</form>
Of course there is no receivingPHP.php file on the StackOverflow servers, so if you try this script you will reach a white page (close it in the top right corner where it says close)
If you use $_GET["StudentNum"], it must come from an HTML-form or a html-link:
example
or
<form method="GET"><input name="StudentNum" value="1337"></form>
Good luck
The URL of your current page needs to have had studentNum present as a query parameter to be able to use $_GET. For example, if current page URL =
http://npapps.peelschools.org/myotherpage.php?studentNum=100
then you can $_GET["studentNum"]. Also, if you are accessing this URL via ajax
http://npapps.peelschools.org/myotherpage.php
then it must be passed as a data parameter.
Find out what the URL of the page is where you have the HTML that you have shown, and if studentNum has not been passed as a query parameter or data parameter from however you get there (e.g. an anchor tag href) then add that parameter to the URL.
Ended up reworking it so that all the information was sent in a form rather than trying to embed it in a button. The secret came from w3schools where I figured out how to hide the known parameters in a hidden input element in the form, as follows:
<form action="add.php" method="GET">
<input name="studentNo" type="text" placeholder="Student Number" />
<input name="club" type="hidden" value="<?php echo htmlspecialchars($club); ?>" />
<input name="type" type="hidden" value="<?php echo htmlspecialchars($type); ?>" />
<input type="submit" value="Add Student" />
</form>

Input fields in one form required for one submit button, but not for other?

How can I differentiate two separate actions for my submit buttons in one form, whereas one SAVES data into database (as is), and other submits form as a valid request, >>but<< according to HTML5 native validation (I use "required" attributes in HTML form)?
My form has 66 fields and I don't want to validate them all in PHP AFTER submission (as it's too cumbersome and time consuming), or validate them all in JS BEFORE submission (as I am not that agile in JS, as in PHP), so I use "required" and "type" attributes in HTML5, which is very convenient and quite versatile way of validation (besides older browsers).
However I cannot find a easy way to bypass the "required" attribute, when using save button, but not using "Send for submission" button. Can you help suggest a solution? I guess the prefered way is some JS/jQuery way, as I cannot determine which button would be used before hitting the button (so that I can make a field required or not).
Sample code:
<form>
A: <input type="text" name="A" required />
B: <input type="text" name="B" required />
C: <input type="text" name="C" />
<input type="submit" name="save" value="Save"> <!--do not require anything-->
<input type="submit" name="send" value="Send for submission"> <!-- require everything-->
</form>
Of course my form is huge, as it has 66 fields, so best solutions here are possibly general and versatile.
Something like this might get you started:
$('#sub1').click(function() {
$('[name=A]').removeAttr('required');
$('[name=B]').removeAttr('required');
$('form').append('<input type="hidden" name="save" />');
$('form').submit();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form>
A: <input type="text" name="A" required /><br>
B: <input type="text" name="B" required /><br>
C: <input type="text" name="C" /><br>
<input id="sub1" type="button" name="save" value="Save">
<!--do not require anything-->
<input type="submit" name="send" value="Send for submission">
<!-- require everything-->
</form>
I've eventually come up with something like this.
HTML:
<input type="submit" name="save" value="Save" onClick="removeRequired(this.form)">
JS (using jQuery):
function removeRequired(form){
$.each(form, function(key, value) {
if ( value.hasAttribute("required")){
value.removeAttribute("required");
}
});
}
This is tested and working. It has this nice property, that I can keep the function elsewhere in files, to not clutch the php/html that is executing it.
Only improvement I'd like (and probably other would be interested in) would be to eliminate jQuery as it's only used for browsing each input element in form, which seems easy enough for pure JS. However I could not find an easy way, and run out of time and used above with jQuery. Thanks
To remove the required attribute from all tags before submitting, modify the code to:
$('#sub1').click(function() {
$('[required]').removeAttr('required');
$('form').append('<input type="hidden" name="save" />').submit();
});
jsFiddle Demo to show it works
Note this answer also demonstrates chaining the jQuery methods: $(tag).append().submit()

Php: $_POST is not set after form is sent to iframe

I have just spent 4 hours researching and nothing has fixed my problem, so here I am. I am trying to design my own little chunk file uploader, and all is working quite well.
I have a main upload page that lets you set a file to upload. It then automatically cuts the first chunk out of the bytes of the file, and puts it into a form, along with some other bits of information:
<form id="hiddenform" name="hiddenform" action="SecretChunkUploader.php" target="iframe" enctype="multipart/form-data" method="post">
<hidden id="Bytes" name="Bytes" value="" />
<hidden id="Pass" name="Pass" value="<?php echo $_POST['Pass'];?>" />
<hidden id="FileName" name="FileName" value="" />
<hidden id="PackageNumber" name="PackageNumber" value="" />
</form>
Every <hidden> has its value correctly sent when the form is submitted through this javascript command:
document.forms["hiddenform"].submit();
The form is submitted to an iframe:
<iframe id="iframe" name="iframe" onload="" style="display:block"></iframe>
When submitted, the iframe navigates to the page specified in the form's action attribute.
Everything works well, except for when the form is received. The page loads, but there is no post data, and the variables for post are not set.
Here is the code for SecretChunkUploader.php:
<?php
echo "Password: ".$_POST["Pass"]."<br/>";
echo "FileName: ".$_POST["FileName"]."<br/>";
echo "PackageNumber: ".$_POST["PackageNumber"]."<br/>";
echo "Bytes: ".$_POST["Bytes"];
?>
The loaded page from SecretChunkUploader.php looks like:
Password:
FileName:
PackageNumber:
Bytes:
I have tried testing isset() and it returned false for all of the post variables.
What on Earth am I doing wrong? I have tested and know that the form is fully working, it just doesn't pass the values onwards.
Thanks in advance for any help!
Instead of:
<hidden id="Bytes" name="Bytes" value="" />
Try:
<input type="hidden" id="Bytes" name="Bytes" value="" />
Same for all the others, of course.

HTML Forms to query multiple pages

i am trying to build a meta search engine.
I currently have the following code.
<form method="POST" action="google_basic.php">
<label for="service_op">Service Operation</label><br/>
<input name="service_op" type="radio" value="Web" CHECKED />
Web <input name="service_op" type="radio" value="Image" />
Image <br/> <label for="query">Query</label><br/>
<input name="query" type="text" size="60" maxlength="60"
value="" /><br /><br /> <input name="bt_search" type="submit"
value="Search" /> </form> <h2>Results</h1>
{RESULTS}
I need the form to have more than one action= ""(I realise a form can only have one action, i need the equivalent of 3 actions ="" ). The form needs to access 3 search engines and display the results. What is the best way to do this?? I know that javascript may an option but is not a solution for me as it may be switched off in the clients browser.
Any ideas on the best way to go about this??
TIA
You need to perform the 3 "actions" on the server (in or from the google_basic.php file). After POSTing to the server, you can perform an arbitrary number of "actions" from there.
See also: http://us2.php.net/manual/en/intro.curl.php
it only needs one action, then the action is what will display all 3 searches. so instead of having google_search.php, bing_search.php, and yahoo_search.php, combine them all into a generic search page that will display all 3

Categories