I am creating a website using PHP and JQuery and have come into problems rearding forms.
For example, my index.php looks like the following:
<body>
<?php
echo "<div id=\"web_Page\">";
require("public/templates/header.php");
require("public/templates/menu.php");
require("public/templates/home.php");
require("public/templates/footer.php");
echo "</div>";
?>
</body>
It then loads a header, footer, menu area and a starting page. The files that are loaded are also encased in div areas so the final index.php is rendered like so:
<div id="web_Page">
<div id="web_Header">
//contents of header.php loaded into this div//
</div>
<div id="web_Menu">
//contents of menu.php loaded into this div//
</div>
<div id="web_Contents">
//contents of home.php loaded into this div//
</div>
<div id="web_Footer">
//contents of footer.php loaded into this div//
</div>
</div>
The menu items are then loaded into the web_contents DIV area using the javascript code:
$('#web_Menu a').click(function(e)
{
e.preventDefault();
$('#web_Content').load($(this).attr('href'), function()
{
});
});
Now the code loads all pages selected from the menu into the web_Contents div area. But i have now created a page called register.php and it has some very unexpected functuality. Below is the rendered HTML for it, It will also load in the web_Contents div area:
<div id="reg_Div">
<form id="reg_Form>
<label>Desired Username: </label><input type="text" name="uname" id="uname" />
<button>Register</button>
</form>
</div>
The index.php page would then be rendered like this:
<div id="web_Page">
<div id="web_Header">
//contents of header.php loaded into this div//
</div>
<div id="web_Menu">
//contents of menu.php loaded into this div//
</div>
<div id="web_Contents">
<div id="reg_Div">
<form id="reg_Form>
<label>Desired Username: </label><input type="text" name="uname" id="uname" />
<button>Register</button>
</form>
</div>
</div>
<div id="web_Footer">
//contents of footer.php loaded into this div//
</div>
</div>
The problem is that even though this form has no functionality and neither does the button, whenever the button is clicked, the website navigates to the index.php page. I really cannot understand why?
Could anyone see why the code would then cause the triggered button navigate to index.php. Also, since index.php is just a collection of require() pages, and the register.php is also loaded there, what is causing the page to automatically discard the web_Contents div that contained register.php and replace it with contents of home.php?
This is really confusing me?
Any feedback would be much appreciated.
Thanks.
Firstly, you are missing a quotation in this line
<form id="reg_Form> // <--- missing a quote
also, you'll want to update it to something like this...
<form id="reg_Form" onsubmit="return(false);"> // <--- should prevent form submittion
Form has action attribute, which tells browser where to navigate after submit button is clicked. If no action attribute is specified then, by default it is current page, in your case "index.php".
HTML forms submit their data to a page, if none is specified, then it submits to the current page (index.php in your case).
<form id="reg_Form">
Is the same as
<form id="reg_Form" action="index.php" method="GET">
To stop the form from submitting, create an onsubmit handler that tells it not to submit.
$('#reg_Form').submit(function(e){
e.preventDefault(); // Tells the form not to submit
});
The reason that the form submits after clicking the button, despite not having an action attribute, is that the action attribute defaults to the URL of the current page if it is not specified.
One way to prevent the form from being submitted is to include an onsubmit attribute in the form tag. If the JavaScript code contained within this attribute returns false, then the form will not be submitted.
<form id="reg_Form" onsubmit="return false;">
Related
I have a page that has multiple php forms that send me different informations depending on the user and the form. How do I make php differentiat these? I saw something about the actions and I thought maybe it was like having a separate file, but when I created a "questions.php" and copied and pasted my php code into that and then added "action="questions.php"" to the tag, and ran it just as I had before it didn't work. So what is the correct way to do this?
My code is extremely long and filled with words which is why it would be nice to have separate files for it depending on the form instead of all in the top of my main page.
You could build one page as a standard page. in this page you could include the different forms. See the example below:
<!-- These are just example names -->
<div class="form-1">
<?php include "forms/form-1.php"; ?>
</div>
<div class="form-2">
<?php include "forms/form-2.php"; ?>
</div>
<div class="form-1">
<?php include "forms/form-3.php"; ?>
</div>
If you would like to save data that a user puts in a form in lets say a database you should use the <form method="post"> by adding an action to it. You're asking the form to send the user to another page when the submit button is clicked. an example of a form down below.
<form class="form-1" method="post" action="second_page.php">
<label>Name:
<input type="text" class="input" name="name">
</label>
<label>Email:
<input type="email" class="input" name="email">
</label>
<button type="submit">Send!</button>
</form>
Hope this helps!
I just added a / before the questions.php. apparently it had to do with file path? I don't understand it but it works now.
<form action="questions.php" method="post">
<!-- text boxes to get user inputs-->
<button type="submit" value="submit_btn">click here to go to page in action tag
</button>
</form>
If questions.php file is in same folder action="questions.php" is enough. If its inside 'x' folder, correct path should be given as action="x/questions.php"
I have a link on a website when it's clicked it will load a form in a div. The form is processed by a PHP script. I need the output from the PHP script to appear in that div. Any idea how to do this? Thanks
File header.php
<html>
<head>
<script>
$(document).ready(function(){
$('#mylink').click(function(){
$('#content').load("form.php");
});
});
</script>
</head>
<body>
<li>Add Account</li>
file index.php
<?php
include_once 'header.php';
?>
<div id="content"></div>
in form.php
<form id= method="POST" action="script.php">
......
........
<input type="submit" value="Add account" />
</form>
in script.php
i need to send error message or thank you note in div #content
Ajax may help you. It's easy to do so. Try it.
First, this sounds like a job that JavaScript would be perfect for. But if you want to go old school, once you submit your form, depending if you set it to be method="post" or method="get" in the form tag, you can access it with php in the receiving script with $_GET or $_POST.
example:
html:
<form action="yourScript.php" method="post">
<input type="text" name="location" />
php (file: yourScript.php): echo $_POST['location'];
I am trying to load the same form but slightly rearranged html based on screen size.
I know this can be achieved with css but this is not what I am after as I have specific pages where I don't want the form to load so I am using php to check what page I am on and show/hide the form depending on the page.
Both search.php and search_mobile.php are using the same forms and everything is the same except minor html rearranging.
On submission, even though the mobile form is hidden, it still affect the search results. Is there any way to completely hide it? I tried visibility:hidden but that's just visually hidding it and display:none doesn't seem to work either..
<form method="get" action="">
<?php include 'search.php'; ?>
<div id="mobile" style="display:none;">
<?php include 'search_mobile.php'; ?>
</div>
...more code
</form>
It depends on what is the condition for loading the mobile or the default. When you have this condition, you won't have to hide it, you just don't include it on the page... The result html won't even contain the code.
<form method="get" action="">
<?php
if( /* CONDITION FOR SHOWING MOBILE OR DEFAULT */ )
include 'search.php';
else
include 'search_mobile.php';
?>
...more code
</form>
It's hard to be sure exactly what is happening or what you are trying to achieve but I would check that each form tag, they needs to have their own name attribute to work exclusively on a page.
<form name="form1" method="get" action="">
<?php include 'search.php'; ?>
...more code
</form>
<form name="form2" method="get" action="">
<div id="mobile" style="display:none;">
<?php include 'search_mobile.php'; ?>
</div>
...more code
</form>
Yes, any input element in the form is submitted, regardless it it's visible or not. You can solve it by disabling the elements before submit.
$('form').on('submit', function() {
$(this).find(':input').not(':visible').attr('disabled', true);
});
No need to change the HTML or PHP.
I am testing Html form using post method and got this odd result:
I have two html pages on server apache (already installed php): post.html and target.html, and the code for these page are followings:
post.html (don't worry about the html standard)
<div style="text-align: center">
<form method="POST" action="target.html">
<input type="text" name="testname" value="sometext" />
<input type="submit" value="submit" />
</form>
</div>
and target.html
<html>
<head>
</head>
<body>
<h1>Target page</h1>
</body>
</html>
When I entered data to the form on post.html page and hit submit button, I got to the target.html page. When on this page(target.html), I refreshed the page, and what I receive is a blank page. The second time I refreshed, It turned to normal Html page.
I don't know why it returned a blank page the first time I refreshed, I have tried the same approach but with PHP page, and the content of target page (assum name target.php) still remains (not blank like html files above)
So, could you explain me about this problem?
Thank you.
This definitely has something to do with your browser. Same here on a mac using Safari, on some pages after submitting the content, the page seems to freeze, I refresh it, and then it works again.
Definitely not a code problem, as far as I'm concerned.
It's because you cannot pass an input from html to html file. Your target.html should be a php file (target.php).
and try to put this code on your target.php
<?php
var_dump($_POST); //this will show the inputted text and also show the data type and will stop the code execution here. other codes below will not be executed.
echo $_POST['testname'];
?>
Additionally, change target.html to target.php in your form action
First I will start out by correcting your post.html
<div style="text-align: center;"> <!-- added a ; after center -->
<form method="POST" action="target.html">
<input type="text" name="testname" value="sometext" />
<input type="submit" value="submit" />
</form>
</div>
that may not matter but you should end all your styles with ;
To continue, everything looks fine. maybe something weird happened between refreshes.
save your form page in php than add the php script in the same page, here try this. remember save in .php.
<?php $testname = $_Post['testname'];
echo $testname ?>
<div style="text-align: center">
<form method="POST" action="">
<input type="text" name="testname" value="sometext" />
<input type="submit" value="submit" />
</form>
</div>
I have a rather strange problem. I know forms within forms are not valid HTML. But i need a solution that allows me to do something simular.
I use 'tabifier' javascript library, to create tabs. Different tabs are created by using divs with special id for each tab.
I have a main form that is around all tabs like this:
<form id=......>
<div id=...>
</div>
<div id=...>
</div>
</form>
In one of the tabs i need to create a fileupload systems, which makes use of a form. If i place this form outside of the 'main form' it is not displayed in the tab layout, but seperatly.
<form id=......>
<div id=...>
</div>
<div id=...>
</div>
<div id='fileuploads'>
<form id=......>
</form>
</div>
</form>
Is there any way to make this work?
I tried moving the fileupload as the last subtab and then ending the main form before the last subtab, but this way the form ends inside the tab div. Which is also not valid html.
I'm guessing that document.getelementbyid(div).innerhtml and inserting the form like that would not work aswell.
UPDATE:
Thanks for the given answers, although i dont quite understand how to fully implement them. I came up with an other idea.
If i just create the fileupload input fields, but not surrounded with a form, and then add a button which calls a js function. This functions places the values of the fileuploads in the 'invisible form' outside the div, and sumbits.
Would that be a good solution?
Place your file upload controls in the outer form:
<form id=...>
<!-- other tabs go here -->
<div id="fileuploads">
<!-- your file upload controls and markup go here -->
</div>
<!-- other tabs go here -->
</form>
You can use a trick here.
First leave the original wrapper form inact.
Then if you put a submit button inside the fileupload form, set an onsubmit event and before sending the form create a new form just around the fileuploads tab, and delete the outside form. If you send the form after that with your new form id ($(form_id).submit in Prototype or document.getElementById(form_id).submit in normal javascript) the new form will be send without the outside form elements.
You could use the HTML 5 <input> form attribute
<form id="fileuploads" action="http://yo.ur/target/" method="POST"></form>
<form id="mainform">
<div id="first_tab">
</div>
<div id="second_tab">
</div>
<div id="fileuploads">
<input type="text" name="desc" form="fileuploads">
<input type="file" name="file" form="fileuploads">
<input type="submit" value="Submit" form="fileuploads">
</div>
</form>
The only problem is that you'll have to provide a JS fallback (like Opi suggested) for Internet Explorer, as it does not support this attribute at all.