I have some html code used in more than one place, I put it in a .php file and include it where needed. In one case I include this code inside a form.
This form has one element; and just below that, inside the form, is the include for the php file that has the html code.
I find that the included html from the .php file cannot access the form element but the one element that is on the same page as the form has no such trouble.
Here's the included code that's in a separate .PHP file:
// inside theIncluded.php
<div id="aDivToBeIncluded">Testing</div>
And here is my form declaration -- the signature looks overly complex because I removed other elements (text boxes, etc) for this explanation:
<form style="display: inline-block" name="areaComboboxForm" method="post"
autocomplete="off" enctype="multipart/form-data">
<select name="mySelect" id="mySelectId" onchange="return doChange(this)" >
<option value="one">one</option>
<option value="two">two</option>
<option value="three">three</option>
</select>
<?php require_once("theIncluded.php") ?>
</form>
And here is the troublesome code:
function doChange(theSelect)
{
var theSelect = document.getElementById('mySelectId');
// THIS REPORTS THAT THE FORM IS 'objectHTMLFormElement'
alert("doChange(), the form is: " + theSelect.form);
var theIncludedDiv= document.getElementById('aDivToBeIncluded');
// THIS REPORTS THAT theIncludedDiv IS 'objectHTMLDivElement'
alert("doChange(), the included Div is: " + theIncludedDiv);
// THIS REPORTS THAT theIncludedDiv.form IS 'undefined'
alert("doChange(), the form is: " + theIncludedDiv.form);
}
To recap, I include some html code from a .php file that has one DOM element, a div.
That div, when accessed on the page where its .php file is included, resolves to an
objectHTMLDivElement.
But when I try to access the .form that the objectHTMLDivElement is included on -- the form is 'undefined.'
Is there a reason for this? All this code is in the same folder on the same webserver, a localhost XAMPP web server.
According to your code, the div is inside the form and has no .form of its own.
You'd be looking for theIncludedDiv.parentNode if you wanted the form element.
.form is only a property of HTMLInputElements in HTML4 and in HTML5 it has some different behavior(it can be the id of the form element or null).
Related
I’m an amateur and can’t solve what I would imagine is a frequent problem in html/php forms processing.
Let’s say you have a simple html form which you want use over and over in one sitting and you want to keep track in a variable of how many times you’ve submitted the form. You need, let’s suppose, to send the form to a php file for various reasons (perhaps to put names into a data base). The trouble is that after you’ve submitted the form to the php file, which processes the form data and redirects back to the html file, doing so will reset your count variable to O -- and reset other variables to their original value -- which I dont want.
Here’s the html file, call it collect_and_post_data.html.
<!DOCTYPE html>
<html>
<body>
<form id="formID" method="post" action="process_form_data.php">
Enter first name: <input type="text" name="fname"><br>
Enter last name: <input type="text" name="lname"><br>
<input type="submit" value="Submit">
</form>
<script>
var noOfTimesFormSubmitted = 0;
document.getElementById("formID").addEventListener("submit", myFunction);
function myFunction() {
alert("The form was submitted");
alert("noOfTimesFormSubmitted: " + noOfTimesFormSubmitted);
noOfTimesFormSubmitted++;
}
</script>
</body>
</html>
And here’s the php file, process_form_data.php.
<?php
echo $_POST["fname"].' '.$_POST["lname"];
//do other stuff
header ("Location: collect_and_post_data.html");
die();
?>
How do I get the php file, when it redirects to collect_and_post_data.html, to keep noOfTimesFormSubmitted from startingagain at 0, and other variables that have changed on submission from returning to there original value?
Alternatively, is there some way one can persuade the php file to simply drop out of the picture after it has done its job after each form submission, leaving the user back in the html file?
I've tried using just one file, the form action being but this doesn't solve the problem. When the second iteration of the form appears, all global javascript variables that were changed when the .form is first submitted go back to their original values.
Help would be appreciated.
you can use the PHP session variable to update the noOfTimesFormSubmitted
$_SESSION['noOfTimesFormSubmitted']=+1
something above like this will enable your number of time form is submitted will store in session variable until the session is cleared
I write web front page page.jsp:
<select id="type_label" name="type_label">
<option value=""></option>
<c:forEach items="${types}" var="type" varStatus="status">
<option value="${type}">${type}</option>
</c:forEach>
</select>
function dosearch(){
var type_label = document.getElementById("type_label");
var tagVal = type_label.options[type_label.selectedIndex].value;
window.location="${ctx}/content/query?tag="+tagVal;
}
In controller Controller.java:
I get the data rows of mysql and put these data rows in List list.
Then put the list in model:
model.add("list", list);
The list has data rows in my log.
Then the controller make the page jump to page.jsp.
The project use rose java web frame.
return "content/page";
It make the page jump to page.jsp.
But the url is:
http://127.0.0.1:3428/web/content/page?type_label=%E6%90%9E%E7%AC%91¤tPage=
The url is expected to be:
http://127.0.0.1:3428/web/content/page?tag=%E6%90%9E%E7%AC%91¤tPage=
The url's parameter is type_label and not tag.
But type_label is select html element's id.
Why？Please give me a hand.Thanks a lot!
I know the reason about it.
After dosearch() executed, got the list of the tag from mysql.
Then jumped to content/page.jsp by
return "content/page";
The page would load by the form:
<form action="${ctx}/content/page" method="get" name="Form" id="Form"
class="form-horizontal">
It would get data list from mysql again. Because it got tag parameter by the tag element's name "type_label".
Then its url was "..type_label=tagname". The controller's method didn't get tag parameter from "type_label". So it had no tag parameter now.
It would get data list without tag.
So the data list was not the data of this tag.
Solution:
The tag element in HTML is that:
<select id="tag" name="tag">
<option value=""></option>
<c:forEach items="${tag}" var="tag" varStatus="status">
<option value="${tag}">${tag}</option>
</c:forEach>
</select>
Modify the dosearch() method to this:
function dosearch(){
$("#form").submit();
}
And modify the controller code to get tag parameter. Like that:
#Get("page")
public String page(Model model, #Param("tag") String tag){
...
}
The controller will get tag parameter by the tag element's name "tag".
After dosearch() executed, the controller will get tag parameter from the form.
Then get the data list of this tag in controller. And add list to model.
At last the page will show the list of the tag.
I am making a form with over 35 input fields and files that need to be uploaded with the form that can be relevant to that form's reviewing later.
In order to upload multiple files I wrote this script inside the form:
<script type="text/javascript">
function cancelFile(v){
$(v).closest('.input_file').remove();
}
function addFile(){
$('#files').append('<div class="input_file"><input name="attachment\[\]" type="file" ><img class="cancel_img" src="images/delete.png" onclick="cancelFile(this)"></div> ');
}
</script>
<input type="button" onclick="addFile()" value="Add file"><br><br>
<div id="files">
</div>
It basically appends an input of type file with the name attachment[] when an add file button is clicked, and a span that allows to cancel (remove) that input when clicked.
When I add only one file, all the POST data uploads fine: text, dates, files and all. But when I add multiple files, the POST request is empty: var_dump($_POST) shows me an empty array.
The form has enctype="multipart/form-data" declared.I also tried the uploading of multiple files in a separate test and it worked fine.
Anyone knows why my post ends up empty?
I have 2 html files(a.html and index.html) and 1 javascript file(file.js) In a.html-------i have a drop-down menu of different languages(like english,german,hindi). From the drop down 1 of the language is selected.
<select ng-model="lang" class="form-control input-custom input-sm" ng-change="language(lang)" required>
<option value="" selected>--Choose language--</option>
<option value="en-us">english</option>
<option value="id-id">indonesia</option>
</select>
file.js---Based on the language selected from a.html file, i update the index.html file.
$scope.language=function(lang){
var search_quarry = "bower_components/angular-i18n/angular-locale_" + lang + ".js";
var scr = document.createElement("script");
scr.src = search_quarry;
document.getElementsByTagName("body")[0].appendChild(scr);
console.log(document);
}
In file.js if i do console.log(document)...it shows that the script tag is attached in the body of index.html. But the result is not reflected when i select the language.
script tag for appending to index.html
<script src="bower_components/angular-i18n/angular-locale_id-id.js"></script>
index.html-----
If i append the script tag manually in index.html the result is shown but when i dynamically updates it..the script tag gets attached to index.html file but the results are not reflected. How can i reload index.html such that the dynamically added content also reflects while running the application?
Try using setAttribute() instead of direct assignment, change:
scr.src = search_quarry;
to
scr.setAttribute('src', search_quarry);
I have a form that have 1 dropdown, 1 text box and 1 submit button.
I want to be able to run various .php files based on the dropdown item that is selected. I was
hoping to use the return value of the dropdown but I have no idea how to do that.
The value in the text box is used by all the .php files that I have in the same directory as the html code.
Thanks
If I understood correctly, you are trying to run a certain php file based on the drop down selection. You can simply include the php file you want to "run".
Let's say you have 2 "runnable" php files: a.php and b.php
a.php
// a.php
echo 'a says '.$_POST['text'];
b.php
// b.php
echo 'b says '.$_POST['text'];
selector.php (where the form POST data goes)
<?php
// select.php
include $_POST['selection'];
?>
and the HTML:
<form method="POST" action="selector.php">
some text: <input type="text" name="text" /><br/>
select function:
<select name="selection"><option value="a.php">A</option><option value="b.php">B</option></select>
</form>
This is just an example, make sure to restrict the files you can include somehow for security reason.
Assuming i understand correctly, one way would be to do something like:
include 'fileWithFunctions.php';
$selection = $_POST['drop-down-selection'];
if($selection == "option1")
firstFunction();
else if($selection == "option2")
secondFunction();
//and so on
Should work, I'm a little out of touch with PHP.
Update: If you're getting error messages before you click the submit button, then you have to put this inside an if statement checking if the button has been pressed.