Modified 3rd Party Script - Some issues

SalientAnimal · February 19, 2015

Hi All,

I found a 3rd party script that solved one of my earlier issues, however, it is not working exactly as intended.

The two issues I am having with the script is the following:

1. After selecting the radio button, I am able to submit the form without completing the required field that is created / unhidden.

2. 3 out of my 4 Radio buttons create a text field that need to be written to the same column in my database table, as a result all three fields have the same name, however when submitting the form, blank fields are written to the table for the first two fields (I'm assuming it's because the fields are over-writting each other in the submit process.)

I would appreciate your help here. My code (With a live view) can be found here: http://codepen.io/SalientAnimal/pen/bNvaJg.

Alternatively, here is the code (although it is very messy):

First the CSS for the hide function

#highlights .reveal-if-active {
	opacity: 0;
	max-height: 0;
	overflow: hidden;
	font-size: 16px;
		-webkit-transform: scale(0.;
		-ms-transform: scale(0.;
	transform: scale(0.;
		-webkit-transition: 0.5s;
	transition: 0.5s;
}
#highlights .reveal-if-active label {
	display: block;
	margin: 0 0 3px 0;
}
#highlights .reveal-if-active input[type=text] {
	width: 		70%;
	float:		left;  
}
#highlights input[type="radio"]:checked ~ .reveal-if-active, input[type="checkbox"]:checked ~ .reveal-if-active {
  	opacity: 1;
 	max-height: 100px;
 	padding: 10px 20px;
 		-webkit-transform: scale(1);
		-ms-transform: scale(1);
	transform: scale(1);
	overflow: visible;
  
}

#highlights .highlight_body
{
 	color:			#FFFFFF;
 	font-size:		14px;
 	font-weight:	normal;
 	text-align:		left;
 	background-color:#001B54;
	border-bottom:	#F30 1px solid;
	border-top:		#F30 1px solid;
 	font-weight:	normal;
 	font: 			85%/1.2 arial, helvetica, sans-serif;	
}


#highlights label
 {
 	display:		block;
 	font-weight: 	none;
 	text-align:		left;
 	float:			left;
 	font: 			85%/1.2 arial, helvetica, sans-serif;
 }
 
#highlights .highlight_small
{
 	color:			#FFFFFF;
 	font-size:		10px;
 	font-weight:	normal;
 	text-align:		left;
 	font: 			85%/1.2 arial, helvetica, sans-serif;	
	
 }
 
 
#highlights .small{
 	color:			#666666;
 	display:		block;
 	font-size:		10px;
 	font-weight:	normal;
 	text-align:		left;
 	font: 			85%/1.2 arial, helvetica, sans-serif; 

 }
 
 
#highlights .radio_label{
 	color:			#666666;
 	font-size:		10px;
 	font-weight:	normal;
 	text-align:		left;
 	font: 			85%/1.2 arial, helvetica, sans-serif; 

 }


#highlights h1
{
	font-family:	Arial, Helvetica, sans-serif;
	font-size:		16px; 	
	text-align:		center;
				
	
}

The actual form code:

<head>
  	<title>My Page</title>
</head>
<script>
var FormStuff = {
  
  init: function() {
    // KICK IT OFF ONCE, IN CASE THE RADIO IS ALREADY CHECKED WHEN THE PAGE LOADS
    this.applyConditionalRequired();
    this.bindUIActions();
  },
  
  bindUIActions: function() {
    // when a radio or checkbox changes value, click or otherwise
    $("input[type='radio'], input[type='checkbox']").on("change", this.applyConditionalRequired);
  },
  
  applyConditionalRequired: function() {
    // find each input that may be hidden or not
    $(".require-if-active").each(function() {
      var el = $(this);
      // find the pairing radio or checkbox
      if ($(el.data("require-pair")).is(":checked")) {
        // if its checked, the field should be required
        el.prop("required", true);
      } else {
        // otherwise it should not
        el.prop("required", false);
      }
    });
  }

};

FormStuff.init();
</script>


<div id="container">
<div id="content" style="margin-top:-45px;">
<img src="images/logo.png" alt="logo"></img>
<h1>Auxilium</h1>

<div id="highlights" class="form">

<h1>My Page</h1> 	
<table class='radio' border ='0'><tbody>
<form id="retentions_sales" name="retentions_sales" action="process/submit_sales_retentions2.php" method="post">

<tr>
<td colspan='5'>
				<p class='highlight_body'>
				<br/><b>User Details</b>				
				</p>
</td>
</tr>



			<!-- USER INFORMATION IS AUTOMATICALLY WRITTEN TO THE FORM - THIS IS DONE THROUGH SESSION INFORMATION DURING THE LOGIN PROCESS -->	
<tr>
<td>
			<label>Logged In As :
			<span class="small">User who is logged in</span>
			</label>
			<input type="text" name="username" id="username" value="<?php echo htmlentities($_SESSION['username']);?>" readonly style="background-color: #C9C9C9">
			<input type="hidden" name="user_id" id="user_id" value="<?php echo htmlentities($_SESSION['user_id']);?>" readonly style="background-color: #C9C9C9">			
</td>
</tr>

		



			<!-- A RANDOM REFERENCE NUMBER IS GENERATED - THIS IS DISPLAYED TO THE USER WHEN THE FORM HAS BEEN SUCCESSFULLY SUBMITTED -->	
<tr>
	<td>		
		<input type="hidden" name="sales_reference" id="sales_reference" value="<?php echo $random;?>" readonly style="background-color: #C9C9C9">		
	</td>
</tr>



			<!-- ALL INFORMATION THAT IS REQUIRED IS CAPTURED IN THE TRANSACTION DETAILS SECTION OF THE FORM - THIS IS ALL DONE BY USER INPUT -->	
<tr>
	<td>
		<!-- TRANSACTION DETAILS THAT NEED TO BE CAPTURED -->

		<p class="highlight_body"><br/><b>Transaction Details:<b>
	</td>
</tr>


<tr>		
	<td>		
	<div>	
		<input type="radio" name="sale_type" id="sale_type_new" value="0" required>
		<span class="radio_label">New Sale</span>
	
	<div class="reveal-if-active">
      	<label for="sale_type_new">Customer ID:
     	<span class="small">ID on which the transaction was performed</span></label>	
        <input type="text" id="new" name="identity" class="require-if-active" data-require-pair="#sale_type_new">
    </div>	
	</div>
	</td>
</tr>


<tr>
	<td>	
		<input type="radio" name="sale_type" id="sale_type_save" value="1" required>
		<span class="radio_label">Save</span>
	
	<div class="reveal-if-active">
      	<label for="sale_type_save">Customer MSISDN:
     	<span class="small">MSISDN on which the transaction was performed</span></label>	
        <input type="text" id="msisdn" name="msisdn" class="require-if-active" data-require-pair="#sale_type_save">
    </div>
	</td>
</tr>


<tr>
<td>			
		<input type="radio" name="sale_type" id="sale_type_upgrade" value="2" required>
		<span class="radio_label">Upgrade</span>
	
	<div class="reveal-if-active">
      	<label for="sale_type_upgrade">Customer MSISDN:
     	<span class="small">MSISDN on which the transaction was performed</span></label>	
        <input type="text" id="upgrade" name="msisdn" class="require-if-active" data-require-pair="#sale_type_upgrade">
    </div>
</td>
</tr>


<tr>
<td>		
		<input type="radio" name="sale_type" id="sale_type_cancellation" value="3" required>
		<span class="radio_label">Cancellation</span>				
	<div class="reveal-if-active">
      	<label for="sale_type_cancellation">Customer MSISDN:
     	<span class="small">MSISDN on which the transaction was performed</span></label>	
        <input type="text" id="cancellation" name="msisdn" class="require-if-active" data-require-pair="#sale_type_cancellation">
    </div>
</td>	
</tr>



</table>


<table border='0'>
<td align="right"> </td>
<td align='right'><input type="submit" name="btn_submit2" id="btn_submit2" value="Submit"></td>
<td align="right"> </td>
</table>

Edited February 19, 2015 by SalientAnimal

Sign In

Modified 3rd Party Script - Some issues

Recommended Posts

SalientAnimal

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information