Assigning variable with jQuery problem

Question

I'm trying to use jQuery to combine the user's select field choices (category + contributors) and insert this into a hidden field with an id of as_q, but when I run the script the value of as_q is always empty.

At the moment, I call the function when the user clicks submit - it gets the value of the two select fields and combines them, before assigning them to the as_q field - at least that's my logic.

Perhaps I've got the in the wrong place? My current code is below. Any help greatly appreciated, thanks

<form action="<? echo $PHP_SELF;?>" method="get" id="cse-search-box">
  <input type="text" name="q" size="31"/>
  <select name="category">
    <option>Movies</option>
    <option>Film</option>
    <option>Fashion</option>
  </select>
  <select name="contributors">
    <option>One</option>
    <option>Two</option>
    <option>Three</option>
  </select>
  <input type="hidden" name="as_q" id="as_q" value="" />
  <input type="submit" name="sa" value="Search" id="submit_query" />
</form>

<script>      
  $('#submit_query').click(function (){
    var category = $('[name=category]').val();
    var contributors = $('[name=contributors]').val();

    $('[#as_q]').val(category+' '+contributors);

  }); 
</script>

Putting your code into a test page results in it working fine in FF3.5. Can you provide any more details? — Steerpike
– Steerpike, Commented Sep 21, 2009 at 11:21
I've tried a test page myself outside of the deployment server, and that doesn't work work correctly either - I'm looking at the as_q section in the url, which is empty. Can I ask how you're testing that the two fields have been combined into as_q? Maybe that'll help me to provide some more accurate info? — Gibset
– Gibset, Commented Sep 21, 2009 at 11:34
I really recommend using pastehtml.com for questions like this. pastehtml.com/view/090921UbqT7OfJ.html — itsadok
– itsadok, Commented Sep 21, 2009 at 11:48

belugabob · Accepted Answer · 2009-09-21 10:50:39Z

1

Just a guess - get rid of the square brackets from...

$('[#as_q]').val(category+' '+contributors);

answered Sep 21, 2009 at 10:50

belugabob

4,47025 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Gibset Over a year ago

I realised this after submitting the question, but it's not the problem, thanks

karim79 · Accepted Answer · 2009-09-21 11:03:45Z

1

In addition to the other suggestions made:

1 - Put your code into a $(document).ready(... block. This could be why it's not working.

2 - Give your selects IDs for better performance, attribute filters (like [name=blah]) are not the snappiest way to select elements.

$(document).ready(function() {
    $('#submit_query').click(function (){
        var category = $('#category').val();
        var contributors = $('#contributors').val();
        $('#as_q').val(category + ' ' + contributors);
    });  
});

answered Sep 21, 2009 at 11:03

karim79

343k67 gold badges420 silver badges409 bronze badges

1 Comment

Gibset Over a year ago

Thanks for the suggestions, I'm using ID selectors now. I've wrapped the code into the doc ready block, but still no luck - really confused as to why this isn't working!

Steerpike · Accepted Answer · 2009-09-21 11:38:41Z

1

Here's the test code I'm using that results in your code working fine for me.

The file is called sandbox.php (I mention this as the only thing that's really unknown is if you've given your file a .php extension)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<!-- Above Doctype should provide S mode in Moz, Safari, Opera, IE8 and A (almost standards) in IE6/7 -->
<head>
  <meta http-equiv="Content-Type" content="application/text+html;utf-8">

  <title>Sandbox</title>
  <link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet">
  <script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
  <script src="http://dev.jquery.com/view/tags/ui/latest/ui/effects.core.js"></script>

<script type="text/javascript">
    $(document).ready(function() {
  $('#submit_query').click(function (){
    var category = $('[name=category]').val();
    var contributors = $('[name=contributors]').val();

    $('#as_q').val(category+' '+contributors);
  }); 
    });

</script>
</head>
<?php
if(isset($_REQUEST['as_q'])) {
    echo $_REQUEST['as_q'];
}
?>
<body class="calendarPage">
<form action="#" method="get" id="cse-search-box">
  <input type="text" name="q" size="31"/>
  <select name="category">
    <option>Movies</option>
    <option>Film</option>
    <option>Fashion</option>
  </select>
  <select name="contributors">
    <option>One</option>
    <option>Two</option>
    <option>Three</option>
  </select>
  <input type="hidden" name="as_q" id="as_q" value="" />
  <input type="submit" name="sa" value="Search" id="submit_query" />
</form>


    </body>


</html>

answered Sep 21, 2009 at 11:38

Steerpike

17.6k8 gold badges41 silver badges54 bronze badges

1 Comment

Gibset Over a year ago

Right, thanks - using your code on the development server, everything works fine. As far as I can tell, the only difference between my code and yours is the version of jQuery that's being used on the site I'm developing for - 1.2.6. I don't know the differences between the versions, but I wouldn't have thought this was the problem? Unless the included jquery, which is stored on the server locally, has been edited? I'm going to investigate and try to get some more info!

Rich Seller · Accepted Answer · 2009-09-21 10:58:07Z

0

Don't put square brackets around "as_q". Also, don't do this on the click of the submit button. That won't capture all the ways a form can be submitted. Instead do it on the form submit event:

$("#cse-search-box").submit(function() {
  var category = $('[name=category]').val();
  var contributors = $('[name=contributors]').val();
  $('#as_q').val(category+' '+contributors);
});

Note: calling form.submit() will bypass this handler too (on some browsers) but that'll bypass your click() event anyway.

edited Sep 21, 2009 at 10:58

Rich Seller

84.3k23 gold badges176 silver badges179 bronze badges

answered Sep 21, 2009 at 10:51

cletus

627k169 gold badges922 silver badges945 bronze badges

1 Comment

Gibset Over a year ago

I was doing it this way originally, but that doesn't seem to work either. Both ways leave as_q empty...I'm not an expert by any means so at a loss here! Any further help appreciated.

Collectives™ on Stack Overflow

Assigning variable with jQuery problem

4 Answers 4

1 Comment

1 Comment

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related