I have a multi-part form that will use PHP for the server side database insertion. The form needs to be validated, and I intend to use JQuery Validate to display one icon if the section validates, and another if the section does not.
I'm aware of the use of collapsible panels or DIVs. However, I need to use this same collapsible effect inside my form. How can this be achieved either via JQuery or another client side library?
Thanks much!!
Since you're at the point to decide what framework to use you may check the collapsible forms by ExtJS framework, it may give you some initial idea.
EDIT
#SidC: OK, if you're going with JQuery, you'll better not to mess up with Ext. Don't see much pain to implement if from zero using JQuery::Accordion plugin plus the JQuery::DIALOG. And check this feed
JQuery Accordion: how to embedded it into a dialog box?
You can hide inside a form just as easily as outside.
object.style.display = "none"
is the JS.
Wrap what you're showing and hiding in a div and go to it.
Scott is correct, and not only because we share the same name.
Wrap your HTML form in a div, and then use this:
http://www.dynamicdrive.com/dynamicindex17/animatedcollapse.htm
It's animated too ;)
Related
I have a search form through which users can, well, perform searches. When the "advanced search" checkbox is checked, a new part of the form shows, allowing for full customisation of the search. For a multitude of reasons, I have decided to send the form using the "get" method, thus displaying all variables in the url.
Problem is, when submitting a non-advanced search, the variables from the advanced part are still sent using the get method, making for a lengthy URL when it is not needed, as the advanced variables aren't used by the PHP that handles the search.
To hide the advanced form when the "advanced search" checkbox isn't checked, I've put the advanced form in a div of its own and have JavaScript set its style.display to "none" when the checkbox isn't checked, and have it reset to default when it is.
How would I best go about submitting only part of the form when "advanced search" isn't checked? A form within a form, removing and re-writing the div's content instead of simply hiding it, or what? Or is there an easy trick to this nobody's told me about?
Thanks!
you should probably use the attribute
<input disabled="disabled" ..
on the input fields when you do not want to submit them
you can find more information in this article
you will probably need to keep your "display:none" as the rendering of disabled elements depends on the browser.
If you take the part where you do the display:none and add a piece where you set all the form-fields to disabled you'll be set.
You could probably use two forms, one for a simple search and one for an advanced search.
If the 'advanced' search is selected, hide the simple search and vice-versa.
Hi I think you use a Ajax (Jquery) part and load the Advance part. So from the server side you easily retreive. If you post your code part we can give a clear answer. thank you
I wonder is someone can help, I'm building a website, which is driven from a database. It will consist of user submitted information.
Currently all the information is pulled from a record in the database and is being output via a PHP echo, what i would like too do is add a feature that would allow me to edit the information if incorrect from the websites front end.
I have seen many websites have some form of edit icon next to information in there databases, when clicking this icon the echoed text changes from text to a text field and you are able to update the field being echoed from the database.
Im a designer so have limited knowledge of how functionality for this kinda feature might work.
please could anyone let me know how something like this might be achieved.
many thanks.
You would need to build some kind of javascript functionality to allow the in-place editing of those data bits. One possible solution is a jQuery plugin like jEditable.
Then you need to build a server-side script in something like PHP or ruby where it would take the submitted information and update the database.
well the process is the same for the front-end and back-end. it depends whether you want you build a password protected editable forms or just editable for everyone.
One way you can do this is
echo your information into text inputs
give them a css class that removes the border and makes it transparent
make it readonly(so someone couldnt tab into it and change it)
add a javascript onclick event that changes the class to a normal
text box that is not readonly
add a javascript onchange event that uses ajax to save the new
information into the database when they are done typing, or press enter
after the ajax is done turn the text box back to the first css class
EDIT also add a onblur event that changes it back as well
you could even change the cursor for the text input to a pointer instead of the default (text) cursor so that is looks like you can click on it.
.
now html5 has contenteditable attribute which you can set for elements
simple example:
www.hongkiat.com/blog/html5-editable-content/
simpler demo:
https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_global_contenteditable
I want to change the appearance of the web page according to an input is focused or not, If it is not focused, it will display something and if it is focused, replace something with another things simultaneously.How can i do that that?Can it be done with PHP?
Thanks
You will definitely have to use JavaScript for this if your making changes beyond changing styling of the checkbox. If its imperative to get information from the server on focus you could make an ajax request to a php file to have data returned. The link below is an example using JavaScript and onfocus to change a div elsewhere on the page.
Live Demo
Simple snippet.
var check = document.getElementById("YourIdOrWhatHaveYou"),
check.onfocus= function(){
// DO your thang!
}
no, you'll need css, see the
:focus selector
(php is serverside code only, which means it cannot see if the user has put focus on anything, javascript could do it but css would be best in this case.)
PHP cannot do this for you as it is a server side language and doesnt know about focus.
If you want to change the the appearance of something based on focus, #red-X already mentioned the :focus selector in css.
If you want modify the content of the object or others in the DOM based on if something has focus, you'll need to use javascript, the jquery library allows you to use the same :focus selector to detect if an object has focus or when it gets/losses focus.
Just wondering if anyone can point me in the directuon of some tutorial/s that
Delve into sql queries/insertions/deletions (is that a word?) using jquery and/or php.
What I was specifically wanting to do was have a button that added an entry to a table
And then the button would change or dissappear or become greyed out.
Any links that might set me on the right track would be awesome!
Thank you in advance!
http://agiletoolkit.org/intro/addons
Scroll down for a CRUD implementation using jQuery UI dialog on top of Agile Toolkit
You should use something like achieved in jQuery UI dialog modal-form.
In the other end, you just sanitize input and make modifications.
It would be awesome, if you give more exact description of what you want achieve.
So I am trying to have a dynamic tabs kind of thing using both php and javascript. To make it much easier to understand, remember the two choices on facebook (Recent news and most recent) or something like that, when you click on one of them it just changes the content that you see in the middle without updating the page. i know how to delete the content in a div for example, but after deleting the content in the div (innerHTML = "") I want to populate it with the option chosen from the database.
So let's say I have an option (all) and an option (only this)
The default is all so when I run the page, I will just get all. However, if I click on only this, it will clear the div "my header" and will replace the content with the latest content from the database (database) and display it.
For that I need both php and javascript, is there a sample or an easy way to do this before i start digging around.
((Sorry if is not clear but the facebook example should be clear enough))
Whatyou are looking for a is AJAX/PHP approach.
Clicking on the tab
The current content gets removed. This is possible because it has a unique "id" attribute in the HTML code
The server is asked for the new content. This is the AJAX request that will be triggered after/while/... the content is removed.
The server sends back the code. This can be HTML, JSON, XML or similar.
You script recieves the answer, may "do" something with it (like some parsing or similar)
The content will be placed on the page (again, this is possible due to an unique "id"
This is basically the way it is done.
Check out the different JavaScript frameworks. They all come with nice AJAX support:
jQuery
MooTools
dojo
Prototype
And of course, SO is also a nice place to look at: https://stackoverflow.com/questions/tagged/ajax+php
What you're talking about is ajax.
I would suggest a javascript library to help leverage this, like jquery.
It can be as cool as
$.post('serverScript.php',
function(data) {
$('#idOfDivToUpdate').html(data); //shove script data into div
},'html' );
tutorial.