JSFiddle - React, Tailwind, and code Playground
HTML
<form method="post" id="BRV_brtrv" action="">
<div data-role="fieldcontain">
<label for="BRV_brtrvrb">Requested By *</label>
<input type="text" name="BRV_brtrvrb" id="BRV_brtrvrb" value="<?php echo $_SESSION['name']; ?>" />
</div>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>Service Type *</legend>
<input type="radio" name="BRV-id-service-type" id="BRV-brtrv-standard-service" value="standard" />
<label for="BRV-brtrv-standard-service">Standard</label>
<input type="radio" name="BRV-id-service-type" id="BRV-brtrv-rapid-service" value="rapid" />
<label for="BRV-brtrv-rapid-service">Rapid</label>
</fieldset>
</div>
<div data-role="fieldcontain">
<label for="BRV-brtrv-department">Department *</label>
<select name="BRV-brtrv-department" id="BRV-brtrv-department" class="select" data-inline="true" data-native-menu="false">
<option>Choose Department</option>
<?php
while($row = mysql_fetch_array($BRVdept_result))
{
$value=$row['name'];
$caption=$row['name'];
echo "<option value=\"", $value, "\">", $caption, "</option>";
}
?>
</select>
</div>
<div data-role="fieldcontain">
<label for="BRV-brtrv-address">Address *</label>
<select name="BRV-brtrv-address" id="BRV-brtrv-address" class="select" data-inline="true" data-native-menu="false">
<option>Choose Address</option>
<?php
...
JavaScript
//function to update box # from slider in BOX RETRIEVAL
$(function() {
$("#BRVbrtrv_boxnumber").hide();
$("#BRV-brtrv-submitDiv").hide();
$("#BRV-brtrv-slider").live("change", function() {
if($(this).val() > 0) {
$("#BRVbrtrv_boxnumber").addClass("ui-input-text").show();
$("#BRV-brtrv-submitDiv").show();
$("#BRVbrtrv_boxnumber").empty();
for(var i = 0;i < $(this).val();i++) {
$("#BRVbrtrv_boxnumber").append('<div data-role="fieldcontain"><label for="BRVbrtrv_boxnumber" class="ui-input-text">Enter box ' + (i + 1) + ' number:</label><input type="text" name="BRVbrtrv_boxnumber['+i+']" id="BRVbrtrv_boxnumber['+i+']" class="BRVbrtrv_boxnumber ui-input-text ui-body-null ui-corner-all ui-shadow-inset ui-body-a" required="required" /></div>')
}
}else {
$(this).val() == 0 && ($("#BRVbrtrv_boxnumber").hide(), $("#BRV-brtrv-submitDiv").hide())
}
})
});
// function to deal with box requests
$(function() {
$("#BRV_brtrv").submit(function() {
var send = $(this).serialize();
$.ajax({
type: "POST",
url: "boxrtrvajax.php",
cache: false,
data: send,
success: function (data) {
if (data == 'No data'){
$('#brtv-result').addClass("result_msg").html('Please fill in all fields');
}
else
{
$('#brtv-result').addClass("result_msg").html("You have successfully retrieved: "+data);
$("#BRV_brtrv").get(0).reset();
}
},
error:function (xhr, ajaxOptions, thrownError){
jAlert('There was an exception thrown somewhere');
alert(xhr.status);
alert(thrownError);
}
});
return false;
});
});