Showing default values that disappear once a user clicks in the field « HTML Form Builder Online , PHP Form Creator

This forum is no longer open and is for reading/searching only.

Please use our new MachForm Community Forum instead.

MachForm Community Forums » MachForm 2

Showing default values that disappear once a user clicks in the field

Started 14 years ago by raewell | 18 posts |

raewell
Member

I am trying to edit a clients form (they are using MachForm). They want the form to display like the form on this site... http://www.pdxsmiles.com/

They are trying to condende the existing form they have to open up space. They feel that instead of using a label like "Name:" next to or above the feild, they want the default value listed in the field. When the user clicks in the field, the default value disappears allowing them to enter the info.

Any suggestions would be appreciated.

Raewell

Posted 14 years ago #

redityo

Hi Raewell,

I think it could be done, let's say your 3 field information is like this :

* full name : element 1, default value is name
* phone : element 2, default value is phone
* email : element 3, default value is email

I assume all filed on form id 17, Then you need to edit "includes/view-functions.php", try to follow these steps :

1. Go to around line 40 ~ 50, you will see these code :

$element_markup = <<<EOT
		<li id="li_{$element->id}" {$error_class}>
		<label class="description" for="element_{$element->id}">{$element->title} {$span_required}</label>
		<div>
			<input id="element_{$element->id}" name="element_{$element->id}" class="element text {$element->size}" type="text" value="{$element->default_value}" />
		</div>{$guidelines} {$error_message}
		</li>
EOT;

replace with these one

if ($_GET['id'] == 17) {
	if ($element->id == 1 || $element->id == 2 || $element->id == 3 ) {
		$onclick_event = ' onclick="javascript:reset_field(\''.$element->id.'\')" ';
	}
}

$element_markup = <<<EOT
		<li id="li_{$element->id}" {$error_class}>
		<label class="description" for="element_{$element->id}">{$element->title} {$span_required}</label>
		<div>
			<input {$onclick_event} id="element_{$element->id}" name="element_{$element->id}" class="element text {$element->size}" type="text" value="{$element->default_value}" />
		</div>{$guidelines} {$error_message}
		</li>
EOT;

2. Go to around line 1832 ~ 1827, you will see these code :

if($has_calendar){
	$calendar_js = '<script type="text/javascript" src="js/calendar.js"></script>';
}else{
	$calendar_js = '';
}

put these code exactly bellow that code

if ($form_id == 17) {
		$javascript_event = <<<EOT
<script type="text/javascript" src="js/jquery/jquery-core.js"></script>
<script type="text/javascript">
	function reset_field(element_id)
	{
		if ($('#element_'+element_id).val() == 'name' ||
			$('#element_'+element_id).val() == 'phone' ||
			$('#element_'+element_id).val() == 'email'
			){

		$('#element_'+element_id).val('');

		}
	}
</script>
EOT;
}

3. Go to line 1855, you'll see

<script type="text/javascript" src="js/view.js"></script>

then put this code bellow that line

{$javascript_event}

Don't forget to change those id with yours

MachForm Support

Posted 14 years ago #

raewell
Member

Thank you so much for the quick reponse. I tried the solution but ended up with an error. I know it was a mistake I made so if you (or anyone else) can look at the form on the right hand side of www.renewingsmiles.com . The form id is 5.

I think I need to know exactly what to replace in the above solution so this will work.

If you could use any other info from me, I will get it to you right away.

I really appreciate your assistance and enjoy working with your product.

Posted 14 years ago #
yuniar

Hello raewell,

Can you send us your modified "includes/view-functions.php" file please?
We'll check it.

Please send to: customer.service [at] appnitro.com
MachForm Founder

Posted 14 years ago #
raewell
Member

I have just sent the file to the address.

What great customer service ! I really appreciate this assitance.

Raewell Graphics

Posted 14 years ago #
hotchecks
Member

I've also implemented this tweak (perhaps it could come as standard?)

line 44 of includes/view-functions.ph

From:
<input id="element_{$element->id}" name="element_{$element->id}" class="element text {$element->size}" type="text" value="{$element->default_value}" />

To:
<input id="element_{$element->id}" name="element_{$element->id}" class="element text {$element->size}" type="text" value="{$element->default_value}" onclick="this.value='';" />

Posted 13 years ago #

Machmail
Member

hotchecks there is a better solution, which will reset only the default field value:

Save this code into file js\reset_field.js:

function resetBox(box, defaultvalue) {
	if (box.value == defaultvalue) {
		box.value = "";
	}
}

Near line 50 in includes\view-functions.php change

from:

<input id="element_{$element->id}" name="element_{$element->id}" class="element text {$element->size}" type="text" value="{$element->default_value}" />

to:

<input id="element_{$element->id}" name="element_{$element->id}" class="element text {$element->size}" type="text" value="{$element->default_value}" onclick="resetBox(this, '{$element->default_value}')" />

Near line 1850 in includes\view-functions.php change

from:

<link rel="stylesheet" type="text/css" href="{$css_dir}view.css" media="all" />
<script type="text/javascript" src="js/view.js"></script>

to:

<link rel="stylesheet" type="text/css" href="{$css_dir}view.css" media="all" />
<script type="text/javascript" src="js/view.js"></script>
<script type="text/javascript" src="js/reset_field.js"></script>

Posted 12 years ago #

arnaudboub
Member

Great !
Thank you Machmail

Posted 12 years ago #
klintrudolph
Member
I added another step to this with another function for the onblur event. This way, when you click out it comes back.

in your js file (same one as above is fine):
```
function resetCustomValue(box, defaultvalue) {
	if (box.value == '') {
		box.value = defaultvalue;

	}
}
```
In your includes/view-functions.php you add another attribute to all instances of the desired fields. Just like we already did for the onclick event, we are adding the onblur event. You need to find all desired fields such as input and textarea and add both attributes to all of them:
onclick="resetBox(this, '{$element->default_value}')" onblur="resetCustomValue(this, '{$element->default_value}')"
Posted 10 years ago #
klintrudolph
Member

I forgot to ask. I haven't figured out how to do this for the 'email' fields. Any ideas?

Posted 10 years ago #

klintrudolph
Member

Doh! Same as others...

To add this to the email fields look near line 729 of includes/view-functions.php you'll find the function:

//Email
function mf_display_email($element){

towards the end of this function you'll see the $element_markup output and you just need to do the same thing.

from:

<input id="element_{$element->id}" name="element_{$element->id}" class="element text {$element->size}" type="text" maxlength="255" value="{$element->default_value}" />

to:

<input id="element_{$element->id}" name="element_{$element->id}" onclick="resetBox(this, '{$element->default_value}')" onblur="resetCustomValue(this, '{$element->default_value}')" class="element text {$element->size}" type="text" maxlength="255" value="{$element->default_value}" />

Posted 10 years ago #

ryanmilles
Member

I have tried to implement this, copying what Machmail and klintrudolph have posted, but can't get it to work. :/

Any insight or advice from the admins? Thanks!

Posted 10 years ago #
ryanmilles
Member
I did a search in the view-functions.php for the code posted above by redityo:
```
$element_markup = <<<EOT
		<li id="li_{$element->id}" {$error_class}>
		<label class="description" for="element_{$element->id}">{$element->title} {$span_required}</label>
		<div>
			<input id="element_{$element->id}" name="element_{$element->id}" class="element text {$element->size}" type="text" value="{$element->default_value}" />
		</div>{$guidelines} {$error_message}
		</li>
EOT;
```
but it does not come up at all, and is definitely not in "line 40 ~ 50"... i think this entire method is outdated (4 years ago), and no longer is suitable for functionality. I need to do this exact same thing "Showing default values that disappear once a user clicks in the field" but then also reappears when clicked out of the field. Is this possible? Shouldn't it be a standard feature? Help!
Posted 10 years ago #
ryanmilles
Member

ahhh.. this is for machform 2. I definitely need a solution to this for version 3.4

Posted 10 years ago #
ryanmilles
Member

Any update or solution to this yet for v3.4 and above?

Posted 10 years ago #
atypicalv
Member

Just followed this for v4.3 and got it to work, so posting for anyone else with questions.

For v4.3, in the view-functions.php file look around line 144 for the $element_markup to insert the onclick & onblur functions.

Then look around line 5393 to insert the additional javascript, after the <link rel="stylesheet" type="text/css" href="{$machform_path}{$css_dir}view.css" media="all" />.

Cheers.

Posted 8 years ago #
yuniar

This will be available as built-in feature within v4.4. We'll be releasing it next month (June)
MachForm Founder

Posted 8 years ago #
williamansley
Member

Wow! Version 4.4 is going to be a really big update. I can hardly wait!

Posted 8 years ago #

RSS feed for this topic

Reply

You must log in to post.