I am getting started with HTML and PHP. Doing alright, I understand the syntax and everything. But... what I know is simply how to build page elements that may interact with other .php files in my site. But what if I want to interact with other elements in the same page?
This is what I'm trying to achieve:
I got some text and a button. I want to press the button, and that will cause my text to become a textbox which I can edit, and afterwards press the button again to convert the textbox back to plain text.
That is what I don't quite get: interacting with other elements to change their attributes/values, seems to be little documentation about that, or I am looking in the wrong place. If that is the case, can someone point me to the correct learning source?
Thanks.
You need javascript for that.... There are loads of examples online and everywhere:
http://www.w3schools.com/js/tryit.asp?filename=tryjs_dom
You are looking at the wrong place as you can't do that with PHP. Changing elements on the client side will involve JavaScript. There are a lot of ways to change elements with JS and to get a quick start I'd suggest you take a look at jQuery, a JS library that will make it easy for you to access and change elements.
What you're looking for is client side interaction. Javascript is the ticket for this and you'll have to include a tag in the head of your html doc.
Look up javascript on w3schools.com and then learn jQuery which is a great implementation of key javascript principles with a lot of extra features like animation and client/server side interaction.
You are moving into the realms of Dynamic HTML. The easiest way I have found to manipulate elements within an HTML page is to use JQuery.
PHP is a predominantly a server scripting language and has very little impact on browser-centric behavior. HTML is a markup language, but with few exceptions isn't dynamic. You want to look into content/browser scripting languages - depending on your medium, the two more popular for the time being are Javascript and Actionscript.
PHP does not allow you to change your HTML dynamically. As the other people mentioned, you need Javascript for that.
What you could do is reload the page on button click and change a session variable (for example) to decide wether the text is displayed as a textbox or just text.
Related
I'm looking for a fast and efficient way to detect changes to a page HTML structure. This doesn't include text/strings within the html elements.
From all my research online I haven't been able to find any good method..
Does someone have an idea?
Re your comment:
Yes, but I need to achieve it serverside. In PHP prefably.
You have to use Javascript for this, and it has to run client-side. There is no option about that.
If you want to make PHP aware of it, then you will still have to use Javascript to detect it, and then use a Javascript Ajax call back to your server.
I'm working on a editing tool (type of a simple CMS) in PHP/MySQL for a product catalog. I have search the Internet for a solution but I don't even know what to search for. So now my hope is on you guys.
I have a form where you can put all kinds of data like part.no, description an so on. All of this data is saved into a MySql table (items). I also have a table with predefined specifications.
What I want to do, and that I can't find a solution for, is to have a dropdown meny (or similar) and a add button to add a row for each related specifications without saving the whole form each time. I want to save first when all specifications is selected.
So, can I use PHP for this or do I need jQuery/Javascript or similar? I know it's possible, have seen it in OpenCart :-)
I hope someone understands my question. It's hard to explane i a language I'm not fully manage.
Regards
Client-side vs Server-side
Javascript: This sits in the user's browser. So anything you want to move in the user's browser will be done with JavaScript. This is "client-side"
PHP: This site on the server, so takes inpute from the user's browser and gives back a response (generally HTML, but can also be JSON or XML which is read by Javascript.). This is "server-side".
Libraries
jQuery: This is a set of functions written for Javascript to make it easier. So it runs in the user's browser and makes it easier for you to write bits that move on the screen.
You get similar libraries that help you write PHP (commonly called "frameworks") and there are many others for javascript as well.
Where to start
Write your HTML page as you want it to look. Keep it simple for the first time.
Then write some javascript (possibly using jQuery) to move the menu. Google "jquery menu dropdown" or similar and you'll find a solution you cna customise.
Then write some PHP that gives you the HTML you wrote in '1'.
Then decide what's going to happen when you click on a link in the HTML, and repeat the process (write HTML, incorporate Javascript to make it move, write PHP to give HTML)
Then work out which bits of the HTML are common or structured and should come from a database.
Without writing it for you (in which case you'll never learn) best to start one bit at a time and build as your knowledge grows. Bucket loads of examples on the web when youreach a particular problem you need to solve.
After comment "[how to] make it possible to select and add single/multiple specifications (from another table) without saving the whole form each time a specs is added":
Growing with AJAX
What you are asking is AJAX - this is where you get Javascript to talk to the server, and for javascript to move bits on the page based on the results. jQuery is probably the easiest (and probably has best documentation / examples for the ajax, as well as moving the DOM).
Basically: you have an "event" that you trap in JavaScript, example
/// Using jQuery to trap a button click
$().ready( function() {
$("#ButtonID").click( function(e) {
e.preventDefault();
alert('Button Clicked');
});
});
Then you build in an AJAX call inside that event (also check out get or post as the syntax is easier, you just get less control). The AJAX wil send a request to your PHP server, and you can get PHP to return HTML which you can replace/insert using the DOM manipulation functions linked below (e.g. before, html etc) or, when you get more advanced, you'll send back JSON which is a data structure you cna more easily manipulate in JavaScript to stipulate what actions are required.
As above, without actually writing it for you, the best place to start is to read the docs and have a go. Google "jquery AJAX PHP table example" or similar and you'll find an example somewhere.
I'm trying to emulate the upvote/downvote system used on the SE sites. Each of my pages have a score which users can upvote or downvote.
The arrows are images with onclick links to javascript functions. I need to find a way to dynamically change the score without refreshing the page and then run a script (probably PHP) to increment the score in the server's data files.
Is javascript the best way to do this? I'm not that big of a fan of letting users see the source for my functions.
This is only possible using Javascript.
Don't worry about users seeing the source; as long as the server is secure and well-designed, it won't do any harm.
You should only implement display and validation logic in Javascript; everything must be validated again on the server.
Welcome to AJAX.
The easiest way to do that is to use jQuery and its $.ajax method.
See http://api.jquery.com/jQuery.ajax/
It's as simple as
$('a.upvote-button').click(function() {
$.ajax('/posts/123/upvote', {type: 'post'});
return false;
});
Yes, you need javascript (or something considerably less sane) to do this. Namely, you need an AJAX callback.
I'm not that big of a fan of letting users see the source for my functions.
The client-side source of your "function" would be ridiculously simple. It could be as simple as:
$.post('/1234567/vote/up')
You may use a direct link to a php script (and form post values) instead, and without a javascript library it would be a few more lines, but you shouldn't need to expose anything of value in your javascript.
Use javascript. JQuery is an excellent choice for manipulating on screen content and interacting with a server via asynchronous calls.
I want to make an online poll in which upon selecting any option I want to replace the content of the <div> with the result. Is there a simple PHP function to replace the content of a <div> tag upon selecting a radio button?
php is a server side scripting language. You need to use javascript. If you want to replace it without reloading the page you will need to use ajax. You have about 5 questions packed into your one, and none of them are entirely trivial.
It sounds like you need to start from scratch and learn php and javascript. I found an online resource that will walk you through the many hours it will take for you to produce this effect: http://net.tutsplus.com/tutorials/javascript-ajax/creating-a-dynamic-poll-with-jquery-and-php/
This cannot be done with PHP. You need to use Javascript to do it.
Example here
Php is not the way to go with this. jQuery, though, would be.
("#id_of_radio").click(function(){
("#div_tag").html("<html code here>");
});
What should I look into to accomplish this.
When you select an input field some text to the right shows up.
For example: https://twitter.com/signup
Anyway i need something like that works with PHP. What should I look in to?
And also How can you query the database and not have to reload the page to see result? For example i have seen on many sites registration you can check if the a username is used without the page reloading. Dont know how to explain better.
Thanks
Like Arkain said, they are making the text appear with JavaScript. PHP is server-side only, meaning it can't make any changes to the page once it has loaded.
You can however, call a PHP script dynamically (to check if a username is registered) using a technique called AJAX.
I'd look into Ajax using jQuery. I had done some things with ajax before trying jQuery but jQuery made it so easy that I found it enjoyable to keep implementing things using it.
You need to use JavaScript, look at this source for instance, for some beginner tutorials.
Learn JavaScript. You can start with jQuery (a pre-made javascript toolkit of functions that help you do many things without reloading the page).
Google for a jQuery Ajax tutorial.