Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 323
  • 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 MVEDeveloperCommented:
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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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 GandhiCommented:
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 GandhiCommented:
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

Featured Post

Upgrade your Question Security!

Add Premium security features to your question to ensure its privacy or anonymity. Learn more about your ability to control Question Security today.

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