Solved

Hidden required form value trouble!

Posted on 2014-04-21
10
319 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
Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

 

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

Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

Question has a verified solution.

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

This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

695 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