Solved

Hidden required form value trouble!

Posted on 2014-04-21
10
314 Views
Last Modified: 2014-08-04
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
Comment
Question by:BrighteyesDesign
10 Comments
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 40013779
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
 
LVL 82

Expert Comment

by:Dave Baldwin
ID: 40013791
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
 

Author Comment

by:BrighteyesDesign
ID: 40014291
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
 

Author Comment

by:BrighteyesDesign
ID: 40014297
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
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
LVL 6

Accepted Solution

by:
Brijesh Gandhi earned 500 total points
ID: 40014415
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
 

Author Comment

by:BrighteyesDesign
ID: 40014429
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
 
LVL 6

Expert Comment

by:Brijesh Gandhi
ID: 40014448
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
 

Author Comment

by:BrighteyesDesign
ID: 40059199
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

What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

Join & Write a Comment

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
The viewer will learn how to dynamically set the form action using jQuery.

746 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now