Forms submit button not working?

lurtnowski · April 12, 2022, 11:57pm

I have

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="refresh" content="1800; url=../login/logout.php" /><title>Edit Power Strip</title>
<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
<link rel="stylesheet" href="../css/font-awesome.min.css" type="text/css" />
<link rel="stylesheet" type="text/css" href="../css/tabs.css">
<link rel="stylesheet" href="../css/style.css" type="text/css" />
<link href='../css/select2.min.css' rel='stylesheet' type='text/css' />
<style>
 img.type {
	margin-right:15px;
	display: inline-block;
	width:40px;
}
.tab label {
    order: 0;
    display: block;
    padding:0;
    margin: 0;
    background: none;
    color: #000;
    border: none;
    transition: none;
}
li.select2-results__option:hover { background-color:#ddd; }
.select2-container { width: 461.77px !important; }
small { font-size:60% }
</style> 
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark" style="margin-bottom:10px">
<a class="navbar-brand mb-2" href="../index.php">Data Collection Tool</a>
<p class="text-white position-absolute font-weight-bold font-italic" style="top:35px">Beta</p>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item">
        <a class="nav-link" href="../index.php">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="../rooms/comms.php">Comms&nbsp;Room</a>
      </li>      
      <li class="nav-item">
        <a class="nav-link" href="../rooms/crypto.php">Crypto&nbsp;Room</a>
      </li> 
      <li class="nav-item">
        <a class="nav-link" href="../rooms/data.php">Data&nbsp;Center</a>
      </li>      
      <li class="nav-item">
        <a class="nav-link" href="../rooms/server.php">Server&nbsp;Room</a>
      </li> 
      <li class="nav-item">
        <a class="nav-link" href="../rooms/tech.php">Tech&nbsp;Control</a>
      </li>      
      <li class="nav-item">
        <a class="nav-link" href="../rooms/watch.php">Watch&nbsp;Floor</a>
      </li> 

	  </ul>
    <span class="navbar-text">
You&nbsp;are&nbsp;logged&nbsp;in&nbsp;as&nbsp;&nbsp;ssam@industechnology.com&nbsp;&nbsp;<a class="btn btn-danger btn-sm" href="../login/logout.php" role="button">Logout</a>	</span>
  </div>
</nav>
<div class="card" style="margin:25px auto; width:85%">
    <div class="card-header">
	  <h2 style="display:inline"><img src="../images/edit_power_strip_icon.png" alt="Power">&nbsp;&nbsp;Edit Power Strip</h2>
    </div>
	<div class="card-body p-3">
	  <form method="post" action="edit_power_strip_engine.php">
		<div class="row"> 
			<div class="col">
				<div class="alert alert-light shadow" role="alert">
					<div class="row">
						<div class="col">	
						  <label for="name">Name (Optional)</label>
						  <input type="text" class="form-control" id="name" name="Name" maxlength="50" value="">						  
						</div>	 
					</div>
					<div class="row mt-3">
						<div class="col">	
						  <label for="Manufacturer">Manufacturer:</label>
							<div class="input-group">
								<div class="input-group-prepend">
								  <span class="input-group-text icon-search text-secondary"></span>
								</div>							  
							  <input list="manufacturers" name="Manufacturer" id="Manufacturer" class="form-control" value="Dell APC" required>	
								<datalist id="manufacturers">
	<option value="Dell">
<option value="Dell APC">
<option value="Interex">
<option value="Lucent Technologies">
<option value="Surge Master">
<option value="Wiremold">
								</datalist>						  
							</div>							
						</div>
					</div>
					<div class="row mt-3">
						<div class="col">	
						  <label for="Model">Model:</label>
							<div class="input-group">
								<div class="input-group-prepend">
								  <span class="input-group-text icon-search text-secondary"></span>
								</div>							  
							  <input list="models" name="Model" id="Model" class="form-control" value="wvbjn" required>	
								<datalist id="models">
	<option value="J58890CH1L1">
<option value="J58890CH1L2">
<option value="J58890CH1L3">
<option value="DM07RM-20T">
<option value="AP6020">
<option value="8558N">
<option value="J60B2B20X">
								</datalist>						  
							</div>							
						</div>
					</div>
					<div class="row mt-3">
						<div class="col">	
						  <label for="Voltage">Voltage:</label>
							<div class="input-group">
								<div class="input-group-prepend">
								  <span class="input-group-text">#</span>
								</div>						  
								  <select class="form-control" id="Voltage" name="Voltage">
								  <option value='120'>120</option>
								  <option value="120">120</option>
								  <option value="208">208</option>
								  <option value="240">240</option>
								  </select>						 	
								<div class="input-group-append">
								  <span class="input-group-text">Volts</span>
								</div>	
							</div>						
						</div>
					</div>
					<div class="row mt-3">
						<div class="col">
					      <label for="Rack">Rack (Row, Bay)</label>
						  <select class='form-control' name='Rack' id='Rack'>
						  <option value="1">jo, 1</option>
<option value=1>(jo, 1)</option>	
						  </select>
						</div>
					</div>
					<div class="row mt-3 mb-5">
						<div class="col">
						  <label for="operational_status">Operational Status</label>
						  <select class="form-control" id="operational_status" name="operational_status">
<option value="1">Yes</option><option value="0">No</option>						  </select>
						</div>
					</div>
				</div>
			</div>
			<div class="col">
			  <h6 class="mb-2"><a href="#guide"><span class="icon-question"></span>&nbsp;&nbsp;Receptacle/Outlett Reference</a></h6>
				<div class="row mt-3">
					<div class="col">
					  <label for="Receptacle">Receptacle</label>
						<div class="input-group">
							<div class="input-group-prepend">
							  <span class="input-group-text icon-search text-secondary"></span>
							</div>							  
						  <input list="receptacles" name="Receptacle" id="Receptacle" class="form-control" maxlength="25" required value="NEMA L6-20R">					
						  <datalist id="receptacles">
							 <option value='NEMA L5-20R'>
							 <option value='NEMA L5-30R'>
							 <option value='NEMA L6-20R'>
							 <option value='NEMA L6-30R'>
							 <option value='NEMA L21-20R'>
							 <option value='NEMA L21-30R'>
						  </datalist>
					    </div>	
					</div>
				</div>						
				<div class="row mt-3">
					<div class="col">
					  <label for="r_type1">Outletts</label>
						<div class="tabs">
						  <input type="radio" name="tab" id="tabone" checked>
						  <label for="tabone">Group 1</label>
							<div class="tab">						
								<div class="form-group">
								  <label for="r_type1" style="font-size:.95em">Type</label>
									<div class="input-group">
										<div class="input-group-prepend">
										  <span class="input-group-text icon-search text-secondary"></span>
										</div>							  
									  <input list="r_types1" name="r_type1" id="r_type1" class="form-control" maxlength="25" value="NEMA 5-20R" required>				
									  <datalist id="r_types1">
										 <option value='NEMA 5-15R'>
										 <option value="NEMA 5-20R">
										 <option value='IEC-320 C13'>
										 <option value='IEC-320 C19'>
									  </datalist>
									</div>	
								</div>
								<div class="form-group">
								   <label for="Count" style="font-size:.95em">Count</label>
									  <div class="input-group">
										<div class="input-group-prepend">
										  <span class="input-group-text">#</span>
										</div>	
											<select id='Count' name="Count" class="form-control">
											 <option value="3">3</option>
											 <option value='1'>1</option>
											 <option value="2">2</option>
											 <option value='3'>3</option>
											 <option value='4'>4</option>
											 <option value='5'>5</option>
											 <option value='6'>6</option>
											 <option value='7'>7</option>
											 <option value='8'>8</option>
											 <option value='9'>9</option>
											 <option value='10'>10</option>
											 <option value='11'>11</option>
											 <option value="12">12</option>
											 <option value='13'>13</option>
											 <option value='14'>14</option>
											 <option value='15'>15</option>
											 <option value='16'>16</option>
											 <option value='17'>17</option>
											 <option value='18'>18</option>
											 <option value='19'>19</option>
											 <option value='20'>20</option>
											</select>
										  </div>
									 </div>
								</div>
							  <input type="radio" name="tab" id="tabtwo">
							  <label for="tabtwo">Group 2</label>
								<div class="tab">						
									<div class="form-group">
									  <label for="r_type2" style="font-size:.95em">Type</label>
										<div class="input-group">
											<div class="input-group-prepend">
											  <span class="input-group-text icon-search text-secondary"></span>
											</div>							  
										  <input list="r_types2" name="r_type2" id="r_type2" class="form-control" maxlength="25" value="" required>					
										  <datalist id="r_types2">
											 <option value='NEMA 5-15R'>
											 <option value="NEMA 5-20R">
											 <option value='IEC-320 C13'>
											 <option value='IEC-320 C19'>
										  </datalist>
									    </div>	
									</div>
									<div class="form-group">
									   <label for="Count2" style="font-size:.95em">Count</label>
										  <div class="input-group">
											<div class="input-group-prepend">
											  <span class="input-group-text">#</span>
											</div>	
											<select id='Count2' name="Count2" class="form-control">
											 <option value="0">0</option>
											 <option value='1'>1</option>
											 <option value="2">2</option>
											 <option value='3'>3</option>
											 <option value='4'>4</option>
											 <option value='5'>5</option>
											 <option value='6'>6</option>
											 <option value='7'>7</option>
											 <option value='8'>8</option>
											 <option value='9'>9</option>
											 <option value='10'>10</option>
											 <option value='11'>11</option>
											 <option value="12">12</option>
											 <option value='13'>13</option>
											 <option value='14'>14</option>
											 <option value='15'>15</option>
											 <option value='16'>16</option>
											 <option value='17'>17</option>
											 <option value='18'>18</option>
											 <option value='19'>19</option>
											 <option value='20'>20</option>
											</select>
										 </div>
									</div>
								</div>
							  <input type="radio" name="tab" id="tabthree">
							  <label for="tabthree">Group 3</label>
								<div class="tab">						
									<div class="form-group">
									  <label for="r_type3" style="font-size:.95em">Type</label>
										<div class="input-group">
											<div class="input-group-prepend">
											  <span class="input-group-text icon-search text-secondary"></span>
											</div>							  
										  <input list="r_types3" name="r_type3" id="r_type3" class="form-control" maxlength="25" value="" required>					
										  <datalist id="r_types3">
											 <option value='NEMA 5-15R'>
											 <option value="NEMA 5-20R">
											 <option value='IEC-320 C13'>
											 <option value='IEC-320 C19'>
										  </datalist>
									    </div>	
									</div>
									<div class="form-group">
									   <label for="Count3" style="font-size:.95em">Count</label>
										  <div class="input-group">
											<div class="input-group-prepend">
											  <span class="input-group-text">#</span>
											</div>	
											<select id='Count3' name="Count3" class="form-control">
											 <option value="0">0</option>
											 <option value='1'>1</option>
											 <option value="2">2</option>
											 <option value='3'>3</option>
											 <option value='4'>4</option>
											 <option value='5'>5</option>
											 <option value='6'>6</option>
											 <option value='7'>7</option>
											 <option value='8'>8</option>
											 <option value='9'>9</option>
											 <option value='10'>10</option>
											 <option value='11'>11</option>
											 <option value="12">12</option>
											 <option value='13'>13</option>
											 <option value='14'>14</option>
											 <option value='15'>15</option>
											 <option value='16'>16</option>
											 <option value='17'>17</option>
											 <option value='18'>18</option>
											 <option value='19'>19</option>
											 <option value='20'>20</option>
											</select>
										  </div>
										</div>
									</div>				
								</div>				
						</div>
					</div>
				</div>		
				<div class="col">
					<div class="form-group" style="margin-bottom:.5rem">
					  <label for="Location">Location</label>						  
						<div class="input-group">
							<div class="input-group-prepend">
							  <span class="input-group-text icon-search text-secondary"></span>
							</div>							  
						  <input list="locations" name="Location" id="Location" class="form-control" maxlength="25" required value="Top-Right">					
						  <datalist id="locations">
							<option value="Top-Left">
							<option value="Top-Right">
							<option value="Middle-Left">
							<option value="Middle-Right">
							<option value="Bottom-Left">
							<option value="Bottom-Right">
						  </datalist>
						</div>
					</div>	
<svg viewBox="0 0 75 85">
<defs>
  <pattern id="pattern" x="0" y="0" width="4" height="4" patternUnits="userSpaceOnUse" patternTransform="rotate(-45)">
    <rect fill="#dc3545" x="0" y="0" width="4" height="2"></rect>
    <rect fill="white" x="0" y="2" width="4" height="2"></rect>
  </pattern>
<style>
rect.power_strip_in_rack {
      fill:url(#pattern);
      stroke:#000;
      stroke-width:.2;
}
</style>
</defs>
 <rect x="5" y="2" width="25" height="75" style="fill:rgb(255,255,255);stroke-width:.6;stroke:rgb(0,0,0)" />			
 <rect x="25" y="5" width="3" height="9" class="power_strip_in_rack" />			
</svg>					
			
				</div>
			</div>
			<div class="row justify-content-center">
				<div class="col-4" style="margin-top:25px">	
				  <button type="submit" class="btn btn-outline-dark btn-block btn-lg"><span class="icon-pencil"></span>&nbsp;&nbsp;Edit</button>
				  <input type="hidden" name="power_strip_id" value="1">
				</div>
			</div>
		  </form>
		</div>
</div>
<div id="guide" class="overlay">
	<div class="popup">
	  <a class="close" href="#">&times;</a>
		<div class="content p-3">
		  <h4>Types of Recepticals <small>(Under the Floor)</small></h4>
		  <hr>
		  <figure class="figure">
		  <img src="../images/plug_type_7.png" class="figure-img img-fluid rounded" alt="NEMA 5-15R" width="100">
		  <figcaption class="figure-caption text-center">NEMA L5-20R</figcaption>
		  </figure>
		  <figure class="figure">
		  <img src="../images/plug_type_8.png" class="figure-img img-fluid rounded" alt="NEMA 5-20R" width="100">
		  <figcaption class="figure-caption text-center">NEMA L5-20R</figcaption>
		  </figure>
		  <figure class="figure">
		  <img src="../images/plug_type_9.png" class="figure-img img-fluid rounded" alt="NEMA L6-20R" width="100">
		  <figcaption class="figure-caption text-center">NEMA L6-20R</figcaption>
		  </figure>
		  <figure class="figure">
		  <img src="../images/plug_type_10.png" class="figure-img img-fluid rounded" alt="NEMA L6-30R" width="100">
		  <figcaption class="figure-caption text-center">NEMA L6-30R</figcaption>
		  </figure>
		  <figure class="figure">
		  <img src="../images/plug_type_11.png" class="figure-img img-fluid rounded" alt="NEMA L21-20R" width="100">
		  <figcaption class="figure-caption text-center">NEMA L21-20R</figcaption>
		  </figure>
		  <figure class="figure">
		  <img src="../images/plug_type_12.png" class="figure-img img-fluid rounded" alt="NEMA L21-30R" width="100">
		  <figcaption class="figure-caption text-center">NEMA L21-30R</figcaption>
		  </figure>
		  <h4>Types of Outletts <small>(Grouped in Power Strips)</small></h4>
		  <hr>
		  <figure class="figure">
		  <img src="../images/plug_type_1.png" class="figure-img img-fluid rounded" alt="NEMA 5-15R" width="100">
		  <figcaption class="figure-caption text-center">NEMA 5-15R</figcaption>
		  </figure>
		  <figure class="figure">
		  <img src="../images/plug_type_2.png" class="figure-img img-fluid rounded" alt="NEMA 5-20R" width="100">
		  <figcaption class="figure-caption text-center">NEMA 5-20R</figcaption>
		  </figure>
		  <figure class="figure">
		  <img src="../images/plug_type_3.png" class="figure-img img-fluid rounded" alt="IEC-320 C13" width="100">
		  <figcaption class="figure-caption text-center">IEC-320 C13</figcaption>
		  </figure>
		  <figure class="figure">
		  <img src="../images/plug_type_4.png" class="figure-img img-fluid rounded" alt="IEC-320 C19" width="100">
		  <figcaption class="figure-caption text-center">IEC-320 C19</figcaption>
		  </figure>
		</div>
	</div>
</div>


<!--
<script src='../scripts/jquery-3.0.0.js' type='text/javascript'></script>

 select2 script 
<script src='../scripts/select2.min.js'></script>        
<script>
$(document).ready(function(){
	$("#r_type1").select2({
		templateResult: formatOptions,
		minimumResultsForSearch: Infinity
	});
	$("#r_type2").select2({
		templateResult: formatOptions,
		minimumResultsForSearch: Infinity
	});
	$("#r_type3").select2({
		templateResult: formatOptions,
		minimumResultsForSearch: Infinity
	});	
});

function formatOptions (state) {
	if (!state.id) { return state.text; }

	console.log(state.element.value);
		var $state = $(
	'<span><img class="type" src="../images/plug_type_' + state.element.value.toLowerCase() + '.png"  /> ' + state.text + '</span>'
	);
	return $state;
}
</script>
-->
<script src="../scripts/popper.min.js"></script>
<script src="../scripts/bootstrap.min.js"></script>
</body>
</html>

lurtnowski · April 13, 2022, 12:01am

the page validates, but the button seems not to do anything

mabismad · April 13, 2022, 1:08am

A copy of your code submits to the action url for me, The page you are submitting to is probably redirecting back to the form.

To provide the best possible User eXperience (UX) and take the least amount of code, the form processing code and the form should be on the same page.

DaveMaxwell · April 13, 2022, 11:50am

Agreed. I don’t see anything in there which would prevent the button from working. It’s enabled and should fire. Does the form seem to submit, or is the button not clickable?

On an aside and off-topic…why? Just why?

<span class="navbar-text">
You&nbsp;are&nbsp;logged&nbsp;in&nbsp;as&nbsp;&nbsp;ssam@industechnology.com&nbsp;&nbsp;<a class="btn btn-danger btn-sm" href="../login/logout.php" role="button">Logout</a>	</span>

Please stop abusing the space escape

lurtnowski · April 19, 2022, 6:56pm

ok, so instead of  , ill just use a space

Gandalf · April 19, 2022, 7:02pm

And if you want/need to pad things out, use CSS padding.

DaveMaxwell · April 19, 2022, 7:51pm

That works on the edges, not in the middle of text

Ray.H · April 19, 2022, 11:06pm

That’s where word-spacing comes into play

system · July 20, 2022, 6:07am

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.