?
Solved

Hidden required form value trouble!

Posted on 2014-04-21
10
Medium Priority
?
320 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
10 Comments
 
LVL 53

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 83

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
Independent Software Vendors: 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!

 

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
 
LVL 6

Accepted Solution

by:
Brijesh Gandhi earned 2000 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

On Demand Webinar: Networking for the Cloud Era

Did you know SD-WANs can improve network connectivity? Check out this webinar to learn how an SD-WAN simplified, one-click tool can help you migrate and manage data in the cloud.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
Find out what you should include to make the best professional email signature for your organization.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

741 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