0

I'm using Loopj's TokenInput and it's working fine.

I have three search boxes on the same page - one each for three different search attributes and each with its own external data source (in this case, search by ship name, ship class and ship type). Of course, there are three 'Submit' buttons, one for each search box.

My Problem: Clicking any 'Submit' button only returns values for its own search box (based on included script-refer below). What I'd like is to click ANY button and get the values for ALL the search boxes so that I can create a MySQL query. 

<script type="text/javascript">
  $(document).ready(function() {
    $("input[type=button]").click(function () {
      alert("Would submit: " + $(this).siblings("input[type=text]").val());
    });
});
</script>

Note: This earlier question "Using tokeninput jquery plugin on more than one input on a page".seems related but the answers to that question didn't address this issue.

Community
  • 1
  • 1
user1429842
  • 11
  • 3

1 Answers1

1

After some further testing, I've figured out the answer and I'll include it here for the sake of completeness. Unfortunately this highlights just how little I know about coding...

  1. The javascript 'alert' script is a red-herring. It doesn't magically get the token values out of thin air. The token values are already stored in the relevant input fields.

  2. The "Submit" buttons are a red-herring. That's because they are ". They're just there to trigger the javascript alert, they can't submit a form.

  3. You need a form! The "TokenInput" demos show how the plugin works, but they're meant to be used IN A FORM.

  4. I added a form field at the top of my page and a closing form field (</form>) at the bottom of the page. The result was that my three search boxes were inside the form. Note the action is to retrieve the same page and method = post.

    `<form id="myshiptype" name="pixsearchform" action="<?php echo $_SERVER[REQUEST_URI]; ?>" method="post" >`

  5. I changed the sample input "name" fields from 'blah' to something more meaningful - shipid, classid and typeid.

  6. I added a Submit button (of the <input type="Submit" /> variety) to the bottom of the form. <input type="submit" id="update" name="update" value="Update search" />

  7. I added some debugging code to the page to show the values of the input fields after the Submit button is clicked.

    <?php 
$postvalues = "";
if ($_POST) {
$kv = array(); 
foreach ($_POST as $key => $value) {
$kv[] = "$key=$value";
} 
$postvalues = join("&", $kv);
}
echo "post values are ".$postvalues;
?>

  8. Here's a sample of the debug - "post values are shipid=34&classid=&typeid=677,638&update=Update search"

Next steps are to adapt the form to Ajax and also disable the "Enter" key in the form (for when a user hits Enter in an empty Search).

user1429842
  • 11
  • 3