I have a drop down list in a html document, the options in the drop down are obtained via a PHP GET request, with Ajax populating the HTML document (Done on page load). The purpose of the drop down is to select an option, click the button, where the map will zoom to the extent. However the POST request for the selected option doesn't return anything.
Is there any reason for this?
HTML
<form id="form" method="post" action="php/zoom.php">
<select id="selectProp" name="selectProp">
<optgroup class="zoomProp_OG" id ="zoom">
</optgroup>
</select>
<input type="button" value="Zoom to property" onClick="zoomToProp()">
</form>
PHP
$attribute = $_POST['selectProp'];
<input type="button"> is for a button that doesn't do anything (unless you hang JavaScript off it). Your form isn't being submitted so there is no POST request and the PHP doesn't run..
You need <input type="submit"> (or Ajax).
Related
I have an input like this:
<input value="<?php echo $formdata['title'] ?>" type="text" name="title" id="Editbox2">
This is an edit page, I load database data into fields with echo, replace them, and hit submit to update them.
But when I hit submit it refreshes the old data onto browser's fields, how can I prevent this?
Submit your form using ajax request with jquery submit.
Use action="javascript:;" for the form tag
You need to handle the script with javascript, then prevent the default behaviour, which is refreshing the page. Here is an example:
*I haven't tested this, but from what I recall this is what I used to do. Let me know if it doesn't work, I'll give other suggestions.
<form>
<!-- elements inside -->
<input type="submit" id="submit-btn" value="Submit"/>
</form>
and in your javascript have the following:
<script>
$("#submit-btn").click(function(e){
e.preventDefault();
// handle form here with your JS
});
</script>
I have a PHP page that loads several parts of a form using AJAX. For instance, first check if the user is already registered, if so the script loads (with AJAX) the rest of the form. The form will not be submited using AJAX what can be a problem when the user submits the form (without AJAX) - imagine there are some errors - the form will loose all values.
I'm wondering if CSS hiding part of the form and after the successful login use JS to display the rest of the form, would be better.
Here some code:
<form action="some_action.php">
Email: <input type="text" name="email" id="email"> <br />
Password: <input type="password" name="password" id="password"> <br />
<button id="vrf_login">Verificar</button>
<div id="rest_form">
</div>
</form>
AJAX:
- CHECK login: if email and password matches then
- LOAD the form for div with id "rest_form"
(it is in another file, for instance:
<input type="text" name="place" id="place">
<input type="text" name="age" id="age">
<input type="submit" name="submit" value="submit">
)
The problem is if I submit the form (without AJAX) and there are errors I will loose the form loaded with AJAX
EDIT (again)
Thank you all for your constructive suggestions:
The solution I adopted is close to the first Alkis's suggestion:
almost all the form is hidden (CSS)
after some logic choices the (part of the) form is turned visible (jQuery) - to "remember" what parts should be visible in case of submission failed (server side validation) some session variables hold the information (AJAX) - and then, after the submission (failed) use jQuery to restore the prior form structure (get the session variables with JS this way: var xpto = "<?php echo $_SESSION['prior_xpto']; ?>" ; )
the fields of the form will remember theirs values (with PHP)
You have 3 options.
Stop loading the whole form by ajax. Hide it with css and show it if the the conditions are met. If the page is shown after some validation error, just show it (change the css inline or give it a different class)
Have a condition and every time the page loads check if it is a first load or if the page is shown after some validation error occured. If the latter is true then load again the form with ajax. This condition can be a hidden field that takes its value from the server and you check it on the client every time you serve the page.
The second solution can be done on the server too. Have the condition be checked on the server. If it's a first load, then don't populate the form and let it be populated from ajax as you do now. If it's after a validation error then pre-populate the form. It's just an if/else clause.
Please provide some codes for your question, but i guess your problem is sending result using a button with "submit" type !
if you have a form like this:
<form>
<inputs ...>
<input type="submit" value="Send data" onclick="SendDataUsingAjax()" >
</form>
after clicking on submit all values on input will reset regardless of what your ajax function is doing. to fix this problem you only need to change type="submit" to type="button".
I have a page which displays data for a given year.
I would like to ask the user a simple question like "what year would you like to see" via a dropdown menu.
The data set (called from a database) is defined by the single variable $year.
My current solution is to as the user the question within a form:
<form id="year" method="post" action="processing.php">
<select name="year" >
<option value="2011">2011</option>
<option value="2012" selected>2012</option>
<option value="2013">2013</option>
</select>
<input type="submit" value="View Year" />
</form>
The page processing.php has a single hidden field populated by the POST data $_POST['year'] and automatically submits this back to the original page, which in turn defines the variable $year via the newly received POST data from processing.php
Code on processing.php page:
$year=$_POST['year'];
echo '
<div class="hide" >
<form id="year" method="post" action="original_page.php">
<input name="year" value="'.$year.'" />
<input type="submit" onload="submitForm()" />
</form>
</div>
<script>
function submitForm()
{
document.year.submit();
}
</script>
';
Question 1:
Is this a sensible way to achieve this, is there something more elegant I could do?
Question 2:
It does not work - the secon page does not forward me back to the first page on load, what have I don wrong in my code?
Thank you!
The elegant method I think you are talking about is called AJAX. It will allow you to retrieve the data from the server without the need to switch pages at all.
See this : Your code implementing AJAX via jQuery $.get
Of course, now your processing.php script will need to retrieve the data you want to display and return it in HTML format so that the $.get callback can drop it into the retrieved_contents div.
In my HTML form I need the URL output like this:
"example.com/mycontroller/action/mike/apple"
When I submit form with "post" my form values are not visible and can be get through "_POST". I don't prefer this because it makes output like this: "example.com/mycontroller/action/"
When I submit with "get" my form becomes "example.com/mycontroller/action?type=mike&key=apple"
I also don't prefer to change form action with javascript, like: "onSubmit take value of select and append it to form action" Because I don't want this snippet be javascript dependent.
I can submit form with "get" or "post" parse system variables of POST or GET and make a redirection. Like this:
Redirect this "example.com/mycontroller/action?type=mike&key=apple" to this "example.com/mycontroller/action/mike/apple"
But I didn't find this solution well designed.
Is it possible to pass form values with slashes (other than questiın marks)
< form class="well form-horizontal" id="myform"
method="get" action="/mycontroller/action" >
<select name="type" id="type">
<option value="mike" selected="selected">
mickey bricks</option>
<option value="albie">albert</option>
</select>
<input type="text" name="key" class="input-xlarge"
id="key" required="required">
<button type="submit" class="btn btn-primary" id="submit">
submit
</button>
</form>
If you make a POST form, it doesn't really matter where does it post to, what matters is where does it redirect. Many site searches redirect you to www.domain.com/search/search_terms so if this is a search form, there is nothing wrong with redirecting to ../action/mike/apple.
Additionally, if it is a POST form, it will not be filled in by the search crawlers (or at least not to my knowledge), so again it shouldn't matter where does the form post to, what matters is the return value and where does it redirect.
It all really depends on what are you trying to accomplish.
I try to create an upload progress bar with PHP and jQuery. However, I have a problem when I bring it to the form data. The code is similar like this:
<form method="post" action="upload.php" enctype="multipart/form-data" id="upload-form" target="upload-frame">
Suburb:<input type="text" name="txtSuburb" id="txtSuburb">
Picture:
<input type="hidden" id="uid" name="UPLOAD_IDENTIFIER" value="<?php echo $uid; ?>">
<input type="file" name="file">
<input type="button" name="submit" value="Upload!">
<iframe id="upload-frame" name="upload-frame">
</iframe>
<input type="submit" name="DataSubmit" value="Submit Data"/>
</form>
As you can see, I got 2 submit buttons. If I keep the form like this then the form can't submit data to server. It just submits the file to iFrame. If I change the action and target of the form then the upload progress function will not work.
Could anyone please help me to find the solution for this?
I want the user can click on upload button to upload their file. Then they can take the rest to fill the form. When everything is done, they can click on another submit data button to submit their data (included the file) to the server.
Make sure that you have only one input element of type submit within your form.
If you want the first button to trigger some Javascript, use a regular input element or even a styled link and attach a Javascript event to it's onclick event, then prevent it's default behavior, e.g. by returning false.
Like this only the second button will actually submit your form which should do what you're describing.
In general I'd second #Treffynnon's suggestion to use a existing library for this purpose. These hacks have a tendency to get pretty nasty, especially when it comes to crossbrowser compatibility.