Forums

My client has placeholder labels for the mini-forms on his site, now he wants to toggle between 2 forms on the same page both with placeholder labels. The 2 forms have different names, there's code for both forms but it only plugs the labels in properly on the first form. You can see an example here:

http://192.185.187.54/~industra/index.php?option=com_k2&view=item&id=662:rebel-fl80w-led-floodlight-series&Itemid=171

The buttons Quick Contact and Request Catalogue toggle between the 2 forms.

The problem happens - even if we just display both forms (ie. no toggle).

Thanks
Lydia

Hi Lydia,

I can see a couple of problems here.

One is that for the placeholders to work correctly the submit buttons must have an id set and neither of these do. That's creating a JavaScript error - which may be preventing the second set of labels from showing

The second is that ids need to be unique so the two submit button mist have different ids which in turn means that the JavaScript needs to be duplicated to work with them both.

Please see if those changes fix the forms.

Bob

Thanks, I can change the submit ID - but I can't change the field IDs. The forms submit to the same Sugar CRM and it requires the IDs to be the same.

Lydia

Hi Lydia,

The Sugar submission surely uses the input names (which can be duplicated) not the ids (which should be unique in a page).

Bob

:-) Cool, I thought it used IDs. Thanks.

Bob,

Ok - I just made sure the form IDs are all unique and added an ID to the submit buttons. It's still doing the same thing.

Lydia

Hi Lydia,

The submit button on the Request Catalogue form still doesn't have an ID as far as I can see

<input name="input_submit_5" class="" value="Submit" type="submit">

Bob

Bob,

Not sure why it's coming up that way for you, the code looks like this for me:

form1 (id=qform):

<input name="input_submit_5" id="submit2" class="" value="Submit" type="submit" />

form2 (id=cform):

<input name="input_submit_5" id="submit1" class="" value="Submit" type="submit" />

I took it from this page (the one in the initial post): http://192.185.187.54/~industra/index.php?option=com_k2&view=item&id=668:rebel-fl400w-led-floodlight-series&Itemid=171

but any single product page will have it.

Thanks
Lydia

Hi Lydia,

The forms that I see on that page are catform and catform2 and neither of them have ids set for the submit button :-(

Bob

Bob,

Then I'm completely seeing a different page than you are, or we're talking about two different things... below is the code from the forms directly cut and pasted from that page:


First Form - you can see very clearly the submit button has an ID and it's "id="submit2"

<input name="input_submit_5" id="submit2" class="" value="Submit" type="submit" />

Complete first form:

<div class="custom"  >
	<div id="qform" class="pforms"><form action="http://192.185.187.54/~industra/index.php?option=com_k2&view=item&id=668:rebel-fl400w-led-floodlight-series&Itemid=171&chronoform=catform2&event=submit" name="catform2" id="chronoform_catform2" method="post" class="Chronoform"><div class="formleft">
<h4>Quick Contact</h4><div class="ccms_form_element cfdiv_text multiline_start" id="firstname2_container_div" style=""><label for="firstName2" style="display:none;">First Name</label><input id="firstName2" maxlength="150" size="30" class=" validate['required']" title="First Name" type="text" value="" name="firstName" />
<div class="clear"></div><div id="error-message-firstName"></div></div><div class="ccms_form_element cfdiv_text multiline_add" id="lastname2_container_div" style=""><label for="lastName2" style="display:none;">Last Name</label><input id="lastName2" maxlength="150" size="30" class="" title="Last Name" type="text" value="" name="lastName" />
<div class="clear"></div><div id="error-message-lastName"></div></div><div class="ccms_form_element cfdiv_text" id="companyname2_container_div" style=""><label for="companyName2" style="display:none;">Your Company Name</label><input id="companyName2" maxlength="150" size="30" class="" title="" type="text" value="" name="companyName" />
<div class="clear"></div><div id="error-message-companyName"></div></div><div class="ccms_form_element cfdiv_text multiline_start" id="emailaddress2_container_div" style=""><label for="emailAddress2" style="display:none;">Your Email</label><input id="emailAddress2" maxlength="150" size="30" class=" validate['email']" title="" type="text" value="" name="emailAddress" />
<div class="clear"></div><div id="error-message-emailAddress"></div></div><div class="ccms_form_element cfdiv_text multiline_add" id="phone2_container_div" style=""><label for="phone2" style="display:none;">Contact Number</label><input id="phone2" maxlength="150" size="30" class="" title="" type="text" value="" name="phone" />
<div class="clear"></div><div id="error-message-phone"></div></div><div class="ccms_form_element cfdiv_textarea" id="message2_container_div" style=""><label for="message2" style="display:none;">Your Message</label><textarea id="message2" cols="45" rows="6" class="" title="" name="message"></textarea>
<div class="clear"></div><div id="error-message-message"></div></div><div class="ccms_form_element cfdiv_submit" id="submit2_container_div" style="text-align:left"><input name="input_submit_5" id="submit2" class="" value="Submit" type="submit" />
<div class="clear"></div><div id="error-message-input_submit_5"></div></div></div><div class="ccms_form_element cfdiv_empty" id="empty_container_div" style=""><div class="clear"></div><div id="error-message-empty"></div></div><input type="hidden" name="d81e273a0b7466944b6279db7feabdb1" value="1" /></form><div class="chronoform"><a href="http://www.chronoengine.com">Powered By ChronoForms - ChronoEngine.com</a></div></div>

Complete 2nd form:

You can very clearly see the ID and it's : id="submit1"

<input name="input_submit_5" id="submit1" class="" value="Submit" type="submit" />

Complete 2nd form:

<div id="cform" class="pforms"><form action="http://192.185.187.54/~industra/index.php?option=com_k2&view=item&id=668:rebel-fl400w-led-floodlight-series&Itemid=171&chronoform=catform&event=submit" name="catform" id="chronoform_catform" method="post" class="Chronoform"><div class="catright"><img style="margin-top: 15px;" src="images/led_lighting_catalogue_1.png" alt="led lighting catalogue 1"></div>
<div class="formleft">
<h4>Request Catalogue</h4><div class="ccms_form_element cfdiv_text" id="firstname_container_div" style=""><label for="firstName" style="display:none;">First Name</label><input id="firstName" maxlength="150" size="30" class=" validate['required']" title="" type="text" value="" name="firstName" />
<div class="clear"></div><div id="error-message-firstName"></div></div><div class="ccms_form_element cfdiv_text" id="lastname_container_div" style=""><label for="lastName" style="display:none;">Last Name</label><input id="lastName" maxlength="150" size="30" class="" title="" type="text" value="" name="lastName" />
<div class="clear"></div><div id="error-message-lastName"></div></div><div class="ccms_form_element cfdiv_text" id="companyname_container_div" style=""><label for="companyName" style="display:none;">Your Company Name</label><input id="companyName" maxlength="150" size="30" class="" title="" type="text" value="" name="companyName" />
<div class="clear"></div><div id="error-message-companyName"></div></div><div class="ccms_form_element cfdiv_text" id="emailaddress_container_div" style=""><label for="emailAddress" style="display:none;">Your Email</label><input id="emailAddress" maxlength="150" size="30" class=" validate['email']" title="" type="text" value="" name="emailAddress" />
<div class="clear"></div><div id="error-message-emailAddress"></div></div><div class="ccms_form_element cfdiv_text" id="phone_container_div" style=""><label for="phone" style="display:none;">Contact Number</label><input id="phone" maxlength="150" size="30" class="" title="" type="text" value="" name="phone" />
<div class="clear"></div><div id="error-message-phone"></div></div><div class="ccms_form_element cfdiv_radio label_over" id="contact_container_div" style=""><label for="contact">Have someone from Industralight contact me about my project?</label><input type="hidden" name="contact" value="" alt="ghost" />
<div style="float:left; clear:none;"><input type="radio" name="contact" id="contact_0" title="" value="Yes" class="validate['required']" />
<label for="contact_0">Yes</label>
<input type="radio" name="contact" id="contact_1" title="" value="No" class="validate['required']" />
<label for="contact_1">No</label>
</div><div class="clear"></div><div id="error-message-contact"></div></div><div class="ccms_form_element cfdiv_submit" id="submit1_container_div" style="text-align:left"><input name="input_submit_5" id="submit1" class="" value="Submit" type="submit" />
<div class="clear"></div><div id="error-message-input_submit_5"></div></div></div><div class="ccms_form_element cfdiv_empty" id="empty_container_div" style=""><div class="clear"></div><div id="error-message-empty"></div></div><input type="hidden" name="d81e273a0b7466944b6279db7feabdb1" value="1" /></form>

Is there some other place I should be change the ID for the submit button?

Lydia

Hi Lydia,

Now I see the ids in place . . . is site caching on?

The next problem is that the ids in the JavaScript need to match the ids that you are using in the form, you will probably need to edit the JavaScript so that it works correctly with two different forms in the same page.

Bob

Bob,

Yes, caching was on. I've turned it off.

Makes sense what you want me to do... I'm just not sure what I'm changing. Not a programmer. Hint or example, please?

does ('submit') need changed to ('submit1') and then in the 2nd script ('submit2') ? But how does that effect the labels displaying?

Lydia

Hi Lydia,

There is a JavaScript error on the page - see the red message. That needs to be resolved in order for the placeholder scripts to run. The $('submit2') refers to the form element with the id='submit2' and links the remaining code to that element.

You may need help from someone with some JavaScript/MooTools experience to get this working.

Bob

Bob,

That fixed it! Thanks!

Lydia

ps. bought you a coffe 😉

Hi Lydia,

Thank you, much appreciated.

Bob