checkbox to open a second address 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

checkbox to open a second address field

Started 15 years ago by Freddy | 19 posts |

Freddy
Member

I need some help.

On my form i have the address field called Return address.
I would like to have a checkbox saying¨Use alternative address for pickup of goods.

When they check the checkbox a brand new address field should just slide or popup side by side with the other one so that the customr could fill in a second address.

How would i go to achieve this?

I'm a beginner with PHP and the reason i bought Machform was because it´s so simple :)
but can be a quite difficult if you want to add extra stuff.

Hope anyone can help me :)

Posted 15 years ago #
yuniar
Ok first you'll need to add a single checkbox and the address field which you would like to hide/show.

After adding them, view the HTML source of your form and get the id for those fields.
Let say you have the following:

checkbox --> id = element_3_1
address --> id = li_2

Edit your includes/view-functions.php file, around line 1831 you should see this:
```
<script type="text/javascript" src="js/view.js"></script>
```
right below that line, add this code:
```
<script type="text/javascript" src="js/jquery/jquery-core.js"></script>
<script>
	$(document).ready(function(){
			$('#li_2').css('display','none');
			$('#element_3_1').click(function(){
				$('#li_2').toggle();
			});
	});
</script>
```
that would toggle your address field based on the checkbox.

Make sure to adjust the above code with your own ids.
MachForm Founder
Posted 15 years ago #
Freddy
Member

That worked great man! I thought i wouldn´t get a reply because of being an hard request :)

Thank you for your brilliant script and amazing support.

Posted 15 years ago #
Jacy1001
Member

I've tried this option and it works great.
Now my question is:
Is it possible to hide and reveal more lines.
I've got element_32_1 (the ceckbox)
and the lines li_27, li_28, li_29 to hide.
How would the code look like

thanks in advance

Posted 15 years ago #

redityo

Yes it's possible, try with this code :

<script>
	$(document).ready(function(){
			$('#li_27').css('display','none');
			$('#li_28').css('display','none');
			$('#li_29').css('display','none');
			$('#element_32_1').click(function(){
				$('#li_27').toggle();
				$('#li_28').toggle();
				$('#li_29').toggle();
			});
	});
</script>

MachForm Support

Posted 15 years ago #

tania
Member

I would like to do something very similar, but opposite, meaning --> based on a checkbox I want hide fields rather than have then show. Is this possible? For example, I have a form and they can check the box "reschedule" -- when they check it I want some elements to hide.

Thanks.

Posted 14 years ago #
tania
Member

Scratch the above question - that is what Redityo answered. However, I have another question, how do you make the above javascript pertain to one form and not all?
Thanks!

Posted 14 years ago #
redityo
You can remove these line to make the field displayed when the form loaded
```
$('#li_27').css('display','none');
	$('#li_28').css('display','none');
	$('#li_29').css('display','none');
```
And to use the script on specific form, you can use the method in here :

http://www.appnitro.com/forums/topic/showhide-question?replies=2
MachForm Support
Posted 14 years ago #
jamespeck
Member

This method seems to work well with the standard iframe methodology, but doesn't work with the advanced code option.

Is there a solution that works for the advanced code?

Thank you.

Posted 14 years ago #
jamespeck
Member

Just a thought - would it be possible to put a similar script in the head of the webpage, so as the php delivery method works?

Posted 14 years ago #
yuniar

To apply the code using the advanced code, you need to modify another line.
Edit your "includes/view-functions.php" file and search around line 2171.

Add the same code as above.

Or yes, you can also put the script into the head of the webpage.
MachForm Founder

Posted 14 years ago #
jamespeck
Member

Tried the head of the webpage and that works great. Thank you!

Posted 14 years ago #
anderfelix
Member

Hi there … it all works great.
But is it possible to show/hide a field that is required?

If i do it the way you show, i cant send the form if the adressfield is hidden (set to display:none)

But in my case i need the adressfield to be required if shown. is it possible?

Posted 14 years ago #
Radices
Member

I'm looking to make a field mandatory based on a check box selection. I have 3 check boxes
and if any one of them is clicked I'd like to make the phone number field mandatory.

http://www.home-search-the-easy-way.ca/view.php?id=3

Posted 13 years ago #
yuniar

I'm afraid setting the "required" rule for a field based on a checkbox won't be quite easy to do, since this would involve server side interaction, not just a simple javascript.

Basically, you will need to do some ajax call when the checkbox being selected and the ajax need to modify the "required" value of the field.

We won't be able to provide you with the code for this. Sorry.
MachForm Founder

Posted 13 years ago #
Radices
Member

Ok thanks for the speedy reply.

Posted 13 years ago #
jpello
Member

Can this same code be used to add a field if a dropdown selection is selected?

I.E.

Do you play Golf?

If Yes, show a text box where they put their handicap

If No, do nothing

Posted 12 years ago #
oliver
Member

Hi Yuniar,

Good day.

I need some help.

I'm having problem with my form where i apply similar function like what Freddy did in his form but i used radio button instead of check-box.

I have a radio field saying "With clinic?" and the radio field have 2 option: Yes and No,
If you select option: yes, 3 text fields(tel no. 1, Tel. no. 2, Fax no.) will show up and if you choose option: No, 1 field will show-up (Default Tel. No.)

Here is my Code:

<script>
$(document).ready(function(){
$("input[name$='element_24']").click(function(){
var value = $(this).val();
if(value=='1') {
$('#li_3').show();
$('#li_4').show();
$('#li_5').show();
$('#li_6').show();
$('#li_25').hide();
}
else if(value=='2') {
$('#li_25').show();
$('#li_3').hide();
$('#li_4').hide();
$('#li_5').hide();
$('#li_6').hide();
}
});
$('#li_3').hide();
$('#li_4').hide();
$('#li_5').hide();
$('#li_6').hide();
$('#li_25').hide();
});
</script>

Now, here the problem: The yes and no part is working but When i click the other fields like 'name', 'department' and others, it shows the hidden fields.

I've been trying to solve the problem but still no luck.

Hope you can help.

Thank you.

Posted 12 years ago #
yuniar

oliver -- can you let me know the URL of your form please? Or contact us directly if you don't want to post it here.

http://www.appnitro.com/contact
MachForm Founder

Posted 12 years ago #

RSS feed for this topic

Reply

You must log in to post.