Get "Default" Properties for Element in Website [closed] - javascript

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I'm building a very basic website, and am currently working user creation. The user fills out a form, which then has the inputs validated and written to a MYSQL DB if valid.
I'd like to add some basic error checking while the user is inputting data - for example:
Validate the username the user is attempting to select against the Users table in the database.
Validate that the FirstName/LastName/Email fields contain values.
Validate that the password fields match.
You get the idea...if any of the above conditions fails, I'd like the label for the textbox to turn red, bold, and a slightly different size than the form otherwise, as well as provide a simple error message for the user somewhere on the page.
I've written a simple javascript function that can perform #2 and #3 above, and change the appropriate text to the "error" style.
My questions are:
How do I query the MYSQL db when the cursor exits the username field (to check if the username is still available)? I can easily do this when the user actually submits the form, but I'd like to query once it appears that the user is done typing, i.e. when the cursor leaves the textbox.
How do I display the simple error message on the page (and control what it says)?
How do I get the "default" or "standard" font size/weight/color values from the css stylesheet that controls the webpage's layout, so that I can then change the element back once the user corrects the error condition?
Is javascript even the right way to do this? I'm not incredibly familiar with it, but it seems similar enough to other languages I've worked with that I can kind of muddle through it.
Thank you in advance - if for some reason you think this question has been previously asked/answered, please provide a link for my benefit, as I was unable to find any questions directly on point.

First and foremost you need to understand that pure javascript in client side only. Something that the client could even turn off if the so desired.
Javascript is for display (like having fancy input validation or anything that could change the DOM after the page is loaded).
Server side languages like PHP is the only way you could talk to a MYSQL database. (Not saying that php is the only one-- others might include Ruby/Python/Node.js)
But everything you laid out here is a question/project itself.

If you want to check some information without refreshing the page, you'll need to look into AJAX.
The most basic message would be something like alert('That name is taken!').
You could add a new class to the form element with the error, so that it gets some additional CSS properties. Then once the user corrects the error, remove that class from the element and the browser will redraw the element with the original properties.
JavaScript will handle the AJAX request part and the changing styles part. Obviously the actual database querying will happen through your server-side language of choice. But it sounds like you're okay with that side.

Related

Trying to put the pieces together - JavaScript, HTML, PHP and reloading content [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I am currently building a CMS for a company I recently started working for. We're building the CMS with an MCV structure. I am familiar with JavaScript, PHP, HTML5 and CSS3. I also build responsive features using JQuery.
Now I have to make a content manager with a sidebar with settings. With that sidebar you can e.g. change the background color, add a title or a background image to the content in the main section. The website has to automatically update (a part) of the content with that setting.
I'm trying to understand the process and putting the different languages back together. For example: You change a setting, eg a color, my process is as following:
The color in the sidebar changes the value in the Javascript.
Javascript then updates that value displayed with HTML on sidebar. <With a JQuery function?>
The value of Javascript is send to the PHP with <something>?
The PHP then generates a entire new page with this new setting with <something>
<Something> then refreshes a part of the content and thus changes the color.
Every bit with quotes are things I don't understand.
How does the process of this goes and with what do you update the browser, AJAX?
I don't know where to ask this question so if you might fill in some gaps I be very thankful!
Edit
An example from which this question arose:
I can drag an element from a left bar into the page. This adds a PHP function with Javascript, which echos a HTML section of columns with text onto the main page. I've created the element with PHP and the JavaScript was already there. Now I am adding a settings bar that generates buttons en settings which can alter the look of that element. I've creates this sidebar in PHP.
I understand how the PHP works with getting values from the database and generating this into a HTML. I understand how you can target a ID or an class in HTML with JavaScript. I don't understand, however, how you can do that effectively on a large scale. Like in an CMS.
There are a lot of ways you could go about doing this. Here is just one way the process might go.
A jquery event handler is attached to an element that accepts user input.
$("#colorpicker").change(function() {
// Code here.
});
The form element is changed, and the code within the handler is executed, modifying the style of the sidebar.
$("#sidebar").css("background-color", $(this).val());
An ajax request is sent to a php script.
var color = $(this).val();
$.ajax({
method: "POST",
url: "change_sidebar.php",
data: { color : color }
});
The php script process the request, and stores it into some sort of database.
Next time your page loads, php will set the initial color of the sidebar to be the color that you stored. However, until your page loads again, the color has already changed for the client, and nothing more needs to be done.
If you want to do the update asynchronously you can use a jquery function, or, you can create a form that does it and then have PHP update the color code as the page reloads.
That works, or you can do it with a form as stated in 1.
jQuery's $.ajax() function will do nicely.
..with PHP.. that's what it's for. It doesn't need anything else.
If you're only refreshing part of it, then you'd use jQuery/JS, perhaps while employing PHP to update the server.
I don't know if you were expecting someone to write all this code for you or what but if you have specific questions please post them. This question is really vague. Normally we like to see what you've tried and exactly what the problem is.

In PHP, how can you set a textbox value by clicking text on a page?

I have a page where users can vote for businesses by choosing a category and typing a business name. When they begin typing, the page predicts the business name in a span below the text box.
I want a user to be able to click one of these predicted names and have the name become the value of the text box for submitting. This will ensure consistently correct business names. Ideally, this will happen without having to submit a form or reload the page.
I've seen lots of mentions of jQuery and AJAX but I'd really rather just use PHP in possible. If I have to use a second programming language, let me know.
I apologize if this question isn't very detailed, but I'm new to PHP and still trying to poke around, and I'm picking up on work done by someone else. Also, I'm not looking for blocks of code as answers. If I know the functions I have to use, I should be able to get the rest myself. Thanks SO!
You need some form of JavaScript manipulation for this. It cant be done in PHP alone.

A separate page for unauthorized users or different configurations of the same page? [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I am making an events website using technologies like HTML, CSS, Javascript, Jquery, PHP etc. I retrieve data from a RESTful service in PHP.
There is a separate event page which is viewed both by actual intended audience and by the organizers who can edit details of the event on this page. When organizer opens the page he should see the options to edit the details of the event. But these options should not be visible to the other users. Other than these options, the page view is same for both the organizers and other users.
My question is that should i hide these options using Javascript/Jquery? Or should I have separate pages for each of the versions of this event page and direct the users according to whether he is a organizer or not? Which is preferable and why?
In php you will know if the current user is an organizer or not. Simply send back a variable in the response like is_organizer: 1 then you can determine what to show based on the user.
If there is not much difference in the html output to the user then this method is preferable to using a completely different view as you keep your code DRY and do not have duplicates of the same markup.
I assume you already check that the user is an organizer before they can save changes to an event. If not you should definitely do so.
UPDATE
Here is some more info based on your recent comment.
If you're using jQuery to make and ajax call and get the data from the REST api I would do something like this (please bear in mind that this is pseudo code):
$.ajax({
url: "event-data.php"
}).done(function(response) {
html = "";
//loop over events
foreach response.events as event
//add event html
eventHtml = "<div class='event'>" + event.name + "</div>";
//if organizer add edit tools
if response.is_organizer
eventHtml += "<div class='edit-controls'>...</div>";
//concat html string
html += eventHTML;
//insert html to dom
$('#content').html(html);
});
I don't know how you are inserting your html into the dom but this way is just an example of how you might build the html based on the user's role.
On a side note I would recommend using a front end framework for this sort of stuff. Here is a decent list:
https://github.com/showcases/front-end-javascript-frameworks
You should use Php.
If you use Jquery to hide these fields , everyone could "unhide" these fields easily. But you could combine these two techniques. Just Hide the fields and if somone do edits the server has to check again if the user is allowed to do changes.

Add a not-predefined amount of input boxes to a webpage (and use that with Google App Engine)

In GAE it's easy to set up an HTML page with 1 (or any other predefined number) of text input fields and then deal with the data you get. My question is how is it possible for a user to start with 1 text box, and using a button (like "Add more") to add any number of additional boxes he wants.
I'm not sure both about the HTML implementation of this (I think it'll require JS, but I'm pretty much a noob with these stuff), and the GAE implementation of this (How to write code that'll accept an arbitrary number of inputs?)
An answer to either would be very welcome; perhaps the GAE problem is not even a problem. It'll be easier for me to ponder on once I get the html/js part right.
The Answer depends on what size of information you expect. One option is an Expando Class where you add to it as needed.
Or the easier to implement if your input is small enough you probably can get away with a db.StringListProperty and use object.append(var) to add more fields in the post.
You will certainly need to use JavaScript to create the additional text boxes. Then loop through the submission in the post to add the data to either option.

Read only textfield editable via inserted javascript?

I have a form with a read only field for display/submit to the next page purposes.
However, I noticed using developer tools in Chrome, I was able to add an id to an element, use the javascript console to select that element, and change its value. I submitted the form and what do you know - the next page acted on it as if it was the original value.
Now, there shouldn't be any problem with the people using the site I'm building, but it seems like a huge security flaw to me. Isn't the point of read-only to remain constant? If a savvy user to change it around, doesn't that pose a big problem? In fact, I didn't even think you could add and change attributes in chrome.
Please post your thoughts below, and let me know if there's a solution ("disabled" textfield, but setting the disabled property doesn't send the data to the next page).
NEVER trust input from a web form.
The user could, just as easily, remove the readonly attribute and edit the value. The readonly attribute is only something to help the user when filling out the form, so they don't edit a value expecting it to change, when your server actually won't let it be changed. So, always remember to code the behavior on your server first, and have the HTML form be a helpful guide for users to make the form easier to fill out (without having to submit the form several times to get relevant error messages).
To overcome this, if something is readonly and you do not want it edited, you could store the value in your database. Also, values provided by users should always be checked (and sanitized) as no amount of JavaScript, HTML, or CSS is going to prevent someone who knows what they're doing from adding new or changing/removing existing values.

Categories

Resources