Transfering to datastring.

[Xtremer360]

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. Any tips?

 

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

[Xtremer360]

Any suggestions?