Menu
I’m trying to figure with my li.data( ‘characterid’, characterid ); line how to send it to the datastring for processing. I don’t know how its impacted by the fact that there could be muliple values for this bit of data. Also would like to specialize the first entry because inside of processing I’m going to be doing something separate with that id. And also trying to figure out after my form submission how to clear the values inside the ul. I know how to do it for a form but since a UL isn’t a form selector I’m not sure how to.
[CODE]
<?php
// Include the database page
require (‘../inc/dbconfig.php’);
?>
<script type=”text/javascript”>
$(document).ready(function() {
$(‘div.message-error’).hide();
$(‘div.message-success’).hide();
$(‘ul#characterlist’).css( ‘margin-left’, ‘120px’ );
$(‘li’).remove(‘.characterName’);
$(“input.submit”).click(function() {
$(‘div.message-error’).hide();
var username = $(“input#username”).val();
if (username == “”) {
$(“div.message-error”).show();
$(“input#username”).focus();
return false;
}
var password = $(“input#password”).val();
if (password == “”) {
$(“div.message-error”).show();
$(“input#password”).focus();
return false;
}
var firstname = $(“input#firstname”).val();
if (firstname == “”) {
$(“div.message-error”).show();
$(“input#firstname”).focus();
return false;
}
var lastname = $(“input#lastname”).val();
if (lastname == “”) {
$(“div.message-error”).show();
$(“input#lastname”).focus();
return false;
}
var email = $(“input#email”).val();
if (email == “”) {
$(“div.message-error”).show();
$(“input#email”).focus();
return false;
}
var status = $(“select#status”).val();
if (status == “”) {
$(“div.message-error”).show();
$(“select#status”).focus();
return false;
}
var admin = $(“select#admin”).val();
if (admin == “”) {
$(“div.message-error”).show();
$(“select#admin”).focus();
return false;
}
var dataString = ‘username=’ + username + ‘&password=’ + password + ‘&firstname=’ + firstname + ‘&lastname=’ + lastname + ‘&email=’ + email + ‘&status=’ + status + ‘&admin=’ + admin + ‘&submithandler=True’;
$.ajax({
type: “POST”,
url: “processes/handler.php”,
data: dataString,
success: function() {
$(‘div.message-error’).hide();
$(“div.message-success”).html(“<h6>Operation successful</h6><p>Handler ” + firstname + lastname + ” saved successfully.</p>”);
$(“div.message-success”).show().delay(10000).hide(“slow”);
$(‘:input’,’#handlerform’)
.not(‘:submit’)
.val(”)
return true;
}
});
return false;
});
});
</script>
<!– Form –>
<form action=”#” id=”handlerform” method=”POST”>
<fieldset>
<legend>Add New Handler</legend>
<div class=”field required”>
<label for=”username”>User Name</label>
<input type=”text” class=”text” name=”username” id=”username” title=”User Name”/>
<span class=”required-icon tooltip” title=”Required field – This field is required, it cannot be blank, and must contain something that is different from emptyness in order to be filled in. “>Required</span>
</div>
<div class=”field required”>
<label for=”password”>Password</label>
<input type=”password” class=”text” name=”password” id=”password” title=”Password”/>
<span class=”required-icon tooltip” title=”Required field – This field is required, it cannot be blank, and must contain something that is different from emptyness in order to be filled in. “>Required</span>
</div>
<div class=”field required”>
<label for=”firstname”>First Name</label>
<input type=”text” class=”text” name=”firstname” id=”firstname” title=”First Name”/>
<span class=”required-icon tooltip” title=”Required field – This field is required, it cannot be blank, and must contain something that is different from emptyness in order to be filled in. “>Required</span>
</div>
<div class=”field required”>
<label for=”lastname”>Last Name</label>
<input type=”text” class=”text” name=”lastname” id=”lastname” title=”Last Name”/>
<span class=”required-icon tooltip” title=”Required field – This field is required, it cannot be blank, and must contain something that is different from emptyness in order to be filled in. “>Required</span>
</div>
<div class=”field required”>
<label for=”email”>Email</label>
<input type=”text” class=”text” name=”email” id=”email” title=”Email”/>
<span class=”required-icon tooltip” title=”Required field – This field is required, it cannot be blank, and must contain something that is different from emptyness in order to be filled in. “>Required</span>
</div>
<div class=”field required”>
<label for=”status”>Status</label>
<select class=”dropdown” name=”status” id=”status” title=”Status”>
<option value=”0″>- Select -</option>
<?php
$query = ‘SELECT id, statusname FROM statuses’;
$result = mysqli_query ( $dbc, $query ); // Run The Query
while ( $row = mysqli_fetch_array ( $result, MYSQL_ASSOC ) ) {
print “<option value=””.$row[‘id’].””>”.$row[‘statusname’].”</option>r”;
}
?>
</select>
<span class=”required-icon tooltip” title=”Required field – This field is required, it cannot be blank, and must contain something that is different from emptyness in order to be filled in. “>Required</span>
</div>
<div class=”field required”>
<label for=”admin”>Administrator</label>
<select class=”dropdown” name=”admin” id=”admin” title=”Administrator”>
<option value=”0″>- Select -</option>
<?php
$administrator = array(‘Yes’, ‘No’);
foreach($administrator as $admin):
?>
<option value=”<?php echo $admin; ?>”><?php echo $admin; ?></option>
<?php endforeach; ?>
</select>
<span class=”required-icon tooltip” title=”Required field – This field is required, it cannot be blank, and must contain something that is different from emptyness in order to be filled in. “>Required</span>
</div>
</fieldset>
<fieldset>
<legend>Handler’s Characters</legend>
<div class=”field”>
<label for=”charactersdrop”>Characters</label>
<select class=”dropdown” name=”charactersdrop” id=”charactersdrop” title=”Characters Dropdown”>
<option value=”0″>- Select -</option>
<?php
$query = ‘SELECT id, charactername FROM characters ORDER BY charactername’;
$result = mysqli_query ( $dbc, $query ); // Run The Query
while ( $row = mysqli_fetch_array ( $result, MYSQL_ASSOC ) ) {
print “<option value=””.$row[‘id’].””>”.$row[‘charactername’].”</option>r”;
}
?>
</select>
<input type=”button” value=”Add Character” class=”” onclick=”HandlerCharacters()”/>
<ul id=”characterlist”></ul>
</div>
<input type=”submit” class=”submit” name=”submithandler” id=”submithandler” title=”Submit Handler” value=”Submit Handler”/>
</fieldset>
</form>
<!– /Form –>
<!– Messages –>
<div class=”message message-error”>
<h6>Required field missing</h6>
<p>Please fill in all required fields. </p>
</div>
<div class=”message message-success”>
<h6>Operation succesful</h6>
<p>Handler was added to the database.</p>
</div>
<!– /Messages –>
<script type=”text/javascript” language=”javascript”>
// Long version
function HandlerCharacters() {
function isDupe(which) {
var result = false;
$(‘ul#characterlist li’).each(function(i, e) {
if ($(e).data(‘characterid’) == which) {
result = true;
return false; // break out of .each()
}
});
return result;
}
var characterid = $(‘#charactersdrop option:selected’).val();
var characterName = $(‘#charactersdrop option:selected’).text();
if (characterid > 0 && !isDupe(characterid)) {
// Create the anchor element
var anchor = $( ‘<a href=”#”>Remove</a>’ );
// Create a click handler for the anchor element
anchor.click( function() {
$( this ).parent().remove();
return false; // makes the href in the anchor tag ignored
} );
// Create the <li> element with its text, and then append the anchor inside it.
var li = $( ‘<li>’ + characterName + ‘ </li>’ ).append( anchor );
li.data( ‘characterid’, characterid );
// Append the new <li> element to the <ul> element
$( ‘#characterlist’ ).append( li );
}
}
</script>