Clever Geek Handbook

Value vs HTML Bookmark Attributes

I am working on a form and have fields that may or may not be filled in by the user. To keep the logical framework simple, I plan to take all the data from the form and update my records with everything, no matter what the user entered in the fields or not.

I was told (possibly incorrectly) that I can take the data that currently exists in the database (ie at the time the page is loaded) and put it in the "value" attribute of the input area. Presumably this will make it so that if the user does NOT enter anything in the field, the old / current values ​​will simply be passed back to the server and re-entered (but not changed).

If the user enters data, THAT will become the new value.

So it looks something like this:

<input type='text' name='XYZ' value='<?php echo $record['XYZ']; ?>'></td>

-1 - So the first question is: is this true?

The second question is that I don't want this value to appear in the actual textbox. So I added a placeholder attribute for the input tag:

<input type='text' name='XYZ' value='<?php echo $record['XYZ']; ?>' placeholder=''></td>

But the value attribute seems to override the placeholder tag!

-2 - So the second Q is there, still assign the value as I would like and NOT appear in the actual textbox?

+5


source to share


5 answers


  • Good, yes. The attribute value

    specifies what "is in the input field". This is the value of the input field. There are three ways to influence this value: enter in the field, change it with Javascript, or set it via an HTML attribute. So if you pre-fill a value via an HTML attribute and then submit the form, it is the value that is sent back to your server.

  • A placeholder is a value that is displayed as long as the actual value is empty. This is to give the user a hint that they should enter the field; once the user actually enters something, or the field is otherwise filled (see above), the placeholder is no longer needed.

You will need to decide what exactly you are trying to do exactly. Let's say you have a user profile page where a user can update their information, in which case I would really like to have all my current information populated and changed. I don't want an empty field, it doesn't make sense from a usability point of view.

If you really want empty fields and only update the information in the database for which the user has filled in the fields, the most useful method is probably to just update only those fields that the user has filled in:



// only these fields may be submitted
$allowedFields = ['foo', 'bar', 'baz'];

// protecting from invalid submitted data, simplifies SQL injection prevention
if (array_diff(array_keys($_POST), $allowedFields)) {
    throw new Exception('Invalid data submitted');
}

// filter out fields which do not have any input
$data = array_filter($_POST, 'strlen');

// prepare placeholders for binding data
$placeholders = array_map(
    function ($key) { return "`$key` = :$key"; }
    array_keys($data)
);

// prepare your query
$query = sprintf('UPDATE table SET %s WHERE id = :id', join(', ', $placeholders));
$stmt  = $pdo->prepare($query);

$data['id'] = /* some id you get from somewhere to know what record to update */;

$stmt->execute($data);

The above example assumes PDO is a database adapter, modifying it as needed for your own needs. He demonstrates, however, that it is rather trivial to write dynamic updates that only update the columns that were posted; you don't need to do special tricks on the form data.

+5


source


The first part is correct; you can set the value of the input field using the "value" attribute as in the first example. This is a very common and well understood part of how the web works.

Placeholder text, although it appears in the same place as the value, is not a value. It is never dispatched and only displayed if there is no value.

What you are describing is possible using javascript. But this is strange, unexpected behavior and potentially confuses users. Having the values ​​pre-filled in the form tells the user, "You can change this, but this is what will be sent if you don't." It is usually a good idea to stick to an established convention.

However, one way to do it is using javascript. You could hide all "real" input fields so that your pre-filled fields are invisible to the user. Then you can have unnamed 'dummy' fields that are marked as corresponding to real fields. When a user enters something in one of the dummy fields, you can use scripts to copy the value to its hidden partner, overwriting the given value.

Here's an example:

HTML:

<input id="dummy_name" type="text"    placeholder="Enter your name">
<!-- no name, there, notice: it won't be submitted -->
<input id="real_name"  type="hidden"  name="name" value="Default">


JQuery

$('#dummy_name').change(function(){
  var user_input = $('#dummy_name').val(); // get the user input
  $('#real_name').val(user_input);         // overwrite the value of the hidden field
});

or in plain Javascript:

document.getElementById('dummy_name').onchange=function(){
    var user_input = document.getElementById('dummy_name').value();
    document.getElementById('real_name').value = user_input;
};

If you went that route, you can also store the default in a variable so that it can be restored to a hidden field if they print something, but then clear it. But all of this is severely discouraged unless you have a good reason!

This solution is agnostic, but as deception suggests, it is perhaps better handled on the server side.

+3


source


  • Yes, the attribute value

    specifies the initial (default) value for the field input

    . (To textarea

    do this, you must use the content of the element instead.) And yes, the attribute value placeholder

    is only displayed when the field has no assigned value; it is assumed to be a hint of expected input.

  • To set a value for an invisible field, use type=hidden

    :

    <input type='hidden' name='XYZ' value='<?php echo $record['XYZ']; ?>'>

    However, then the user cannot change the value in any normal way. You can include an element input

    with the same attribute name

    , but then you have the problem that the presented data can contain two records and how can you decide which one is correct? Well, you can use different attributes name

    for example.

    <input type='hidden' name='XYZ-default' value='<?php echo $record['XYZ']; ?>'>
<input type='text' name='XYZ'>

    Then your form data processing should check for the existence of XYZ

    data, and if not, use data instead XYZ-default

    .

    However, the goal sounds like poor usability. You ask the user for something and it has a default value, but you don't tell the user what it is. Therefore, you can force the user to enter some of the data you already have.

+2


source


You can use @if

with two inputs like this:

if empty value show placeholder
else show value
+1


source


I would agree that the user will probably find it helpful to review the information they present.

I am currently working with jQuery and Javascript, not PHP, so while I am not aware of the capabilities of PHP and related tools, I do know that jQuery has a way to dynamically change the value of the placeholder; I would be very surprised if this was something that was not common with the language and tools you use.

By looking at how users see what they represent, you can always keep the placeholder up to date on what will be submitted. So they could write over it if they wanted to change it, but still see what happens if they don't. And if you can only do this update when the value of the input tag is changed, instead of just replacing the placeholder with the inline stored information every time - the additional resources it will use would be minimal. You can also reference the placeholder for older values ​​if you really want to keep things as simple as you asked, but if you don't see new or special circumstances, this is an inefficient way to do it.

This is, of course, a compromise from your request for something that the user will not see. If you put unprotected old information then it won't help, but even though it's been a couple of years now, I figured I'd drop this suggestion. After all, there may be some people who come here who are relatively new to these concepts, who can find some benefits from it. I know this is what I would appreciate.

Also, the following answer to your second question has ways to add data to html elements that don't affect their performance or normal behavior. The link I found is for Javascript, but again, I would imagine crossing the language barrier would be relatively easy, especially with Google.

I believe this only works with HTML5, not XHTML. But hopefully this is helpful. Just keep in mind that data stored in background content (in your PHP code) will be faster than referencing those values ​​back and forth. I believe it is mentioned in this link. I think this should only make a difference for larger projects, so if you're looking for efficiency this shouldn't be your first choice, but you may find yourself in a position where it's much easier to use.

http://html5doctor.com/html5-custom-data-attributes/

0


source






More articles:


All Articles