Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 331
  • Last Modified:

Hidden required form value trouble!

I have a form here with 3 radio buttons (the bottom three) that open and close divs once selected.

http://www.theflowershoponline.co.uk/test.html

My problem is that there is a required text input field on the two bottom choices which, although hidden, stop the form being sent when selecting the top (sameday) value.

Hope this makes sense!

I basically need any form field data closed divs not be recognised at all.



<style>
	
		
	/* calendar styles */
	#calendar1 {border:solid #666666 1px;
		background:#ffffff;
		padding-bottom:5px;
		padding-top:5px;
		width:183px;}
	#calendar1 .ng-cal-header-table {width:173px;}
	
</style>

<style type="text/css">
<!--

.style2 {font-size: 12px}
.style4 {color: #D5B9C1}
#calendar1 {border:solid #666666 1px;
		background:#ffffff;
		padding-bottom:5px;
		padding-top:5px;
		width:183px;}
-->
</style>

<style>
.samedaydisplay {
display : block;
}
.samedayhide {
	display : none;
	padding: 10px;
	border: 1px solid #CCC;
	background-image: url(images/gifts/sprybg.jpg);
	background-repeat: repeat-x;
}

.deliverydisplay {
display : block;
}
.deliveryhide {
	display : none;
	background-image: url(images/gifts/sprybg.jpg);
	background-repeat: repeat-x;
	border: 1px solid #CCC;
	padding: 10px;
}

.collectdisplay {
display : block;
}
.collecthide {
		display : none;
	background-image: url(images/gifts/sprybg.jpg);
	background-repeat: repeat-x;
	padding: 10px;
	border: 1px solid #CCC;
}
</style>
</style>
<script type="text/javascript">
   function HideDivsThatShouldBeHidden(divToKeepOpen){
      var divArray = new Array("samedayid", "deliveryid", "collectid");

      var i = 0;
      for ( i = 0; i < 3; i++ ) {
      	if ( divToKeepOpen != divArray[i] ) {
      	   document.getElementById( divArray[i] ).style.display = "none";
      	 }
      document.getElementById( divToKeepOpen ).style.display = "block";
      }

   }
</script>

Open in new window



    <input type="radio" name="weight" id="radio2" value="5" onclick="HideDivsThatShouldBeHidden('samedayid');" />
                                              <span class="atitle">Sameday Delivery</span></p>
                                            <p>
                                              <input type="radio" name="weight" id="radio2" value="1" onclick="HideDivsThatShouldBeHidden('collectid');" />
                                              <span class="atitle">Choose a delivery date</span></p>
                                            <p>
                                              <input type="radio" name="weight" id="radio2" value="1000"   onclick="HideDivsThatShouldBeHidden('collectid');"/>
                                              <span class="atitle">Collect from store </span><br />
                                            </p>
                                            <div id="samedayid" class="samedayhide">  <p><strong>Please note we can only deliver the same day before 1.30pm Mon - Sat (Exc Bank Holidays and with the execption of Mothering Sunday)</strong><span class="prices"> </span></p>
                                          <p>There is an additional £1.85 charge for sameday delivery</p>

                                            </div>
                                            <div id="deliveryid" class="deliveryhide"></div>
                                            <div id="collectid" class="collecthide">
                                              <p>Date:
                                              <span id="sprytextfield1">
<input name="itemname6" type="text" id="itemname6" />
<span class="textfieldRequiredMsg">A value is required.</span></span>
                                              </p>
                                              <p>Time:
                                                <label for="itemname4"></label>
                                                <select name="itemname4" id="itemname4">
                                                  <option value="Anytime" selected="selected">No Preference</option>
                                                  <option value="AM">AM 9-12</option>
                                                  <option value="PM">PM 12-5</option>
                                                </select>
                                              </p>
                                            </div>

Open in new window

0
BrighteyesDesign
Asked:
BrighteyesDesign
1 Solution
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Your date field should be outside of the radio group.  

A better way to do this is for the radio group to simply be pick up or deliver.  Then a separate date field that would represent the date to be delivered or picked up.  But you only need one date field.

If they choose today's date and to be delivered, your script should probably also check the time of day.  If it is before whatever time that is, go with the charges for same day.  If it is paste that time, then a message, "The next delivery day is xx/xx/xxxx.    Even better, don't offer the same day choice if it is paste that time.   Or have a note, "It is paste the online deadline for today's delivery, please call us to confirm your order."
0
 
Dave BaldwinFixer of ProblemsCommented:
Sorry, it doesn't work that way.  Your 'action' page must know what to do based on the values submitted from the radio buttons.

Also, you have some formatting problems starting with the first </head> tag.  You need to delete it and the blank <script> section so they don't cause you any problems.
0
 
BrighteyesDesignAuthor Commented:
I think this will work if like Scott mentioned, i.e if the date field is outside of the form and it just appears when the radio button is selected.

Currently of course it's within the form and just displays or not.

How would I have the date div outside of the form yet bring it inside of the form when selected?
0
Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

 
BrighteyesDesignAuthor Commented:
Oh by the way just having one delivery option is a good idea it's just that there's a different cost with sameday delivery (an additional £1.85) and i'm not sure how to only ad that if the date is before a certain time. I might look into that though if there's no other way.
0
 
Brijesh GandhiProgrammerCommented:
I think you have used "SpryValidationTextField.js" in your application.so my suggestion is that whenever your Sameday Delievery option is true and click Add to cart then try to skip following code reside in above js file situed at line number 1978

if (!Spry.Widget.Form.validate) {
	Spry.Widget.Form.validate = function(vform) {
		var isValid = true;
		var isElementValid = true;
		var q = Spry.Widget.Form.onSubmitWidgetQueue;
		var qlen = q.length;
		for (var i = 0; i < qlen; i++) {
			if (!q[i].isDisabled() && q[i].form == vform) {
				isElementValid = q[i].validate();
				isValid = isElementValid && isValid;
			}
		}
		return isValid;
	}
};

Open in new window



This might be helpful If I understand your question properly..
0
 
BrighteyesDesignAuthor Commented:
Thanks a lot for that.

I think you have understood it from what you're saying.

I guess I need to personalise that code? i'm not completely sure what bits I need to change!

And would I just place this in the header of the page?


if (!Spry.Widget.Form.validate) {
	Spry.Widget.Form.validate = function(vform) {
		var isValid = true;
		var isElementValid = true;
		var q = Spry.Widget.Form.onSubmitWidgetQueue;
		var qlen = q.length;
		for (var i = 0; i < qlen; i++) {
			if (!q[i].isDisabled() && q[i].form == vform) {
				isElementValid = q[i].validate();
				isValid = isElementValid && isValid;
			}
		}
		return isValid;
	}
};

Open in new window

0
 
Brijesh GandhiProgrammerCommented:
Nope don't misplace it . just put condition like that  after this line "Spry.Widget.Form.validate = function(vform) {"


if ( document.getElementById( 'deliveryid' ).style.display == "block")
{
return true;
}

I hope this will work and try to find solution inthis direction
0
 
BrighteyesDesignAuthor Commented:
Thanks by the way, I'm a bit held up on this project so won't be able to continue development for another week...will be in touch then
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now