Jquery to change a form's target

Question

I want to change the form's target based on the option which is selected.

<form id='post_form' target="targetvalue">

<select id="select" name="select">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
</select>

    </form>


 <script>
 $("#select").change(function() {
    var targetvalue = $("#select option:selected").text();
    $("#post_form").attr("target", targetvalue);
    });

 </script>

And what is your question? So far you stated the truth, which is nice, but not at all leading to anything. — Till Helge, Nov 28 '11 at 11:25
I have this in my header: My question is why isnt it working? — Martijn van den Broeck, Nov 28 '11 at 11:26
@Martijn, does it "work" better if you put the code in a `ready` handler? — Frédéric Hamidi, Nov 28 '11 at 11:29

score 16 · Accepted Answer · edited May 23 '17 at 11:54

If you want to set the target to either Option 1 or Option 2, what you have is correct. However, if you want to set the target to either option1 or option2, you should have:
```
var targetvalue = $("#select option:selected").val();
```
which can be simplified to just;
```
var targetvalue = $(this).val();
```

If you're using jQuery > 1.6, you should be using prop() instead of attr(). For more details see StackOverflow: .prop() vs .attr()

$("#select").change(function() {
    var targetvalue = /* which ever you decide */;
    $("#post_form").prop("target", targetvalue);
});

You shouldn't really be linking to just the latest version in a production environment; if a new version of jQuery gets released with breaking changes, you're screwed. Link to a specific version of jQuery, and test thoroughly before you upgrade to a new release;
```
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
```

If you're only defining the <script> after the <form> element to be able to target it, realise you can use a $(document).ready() block to define the script anywhere;

<script>
    $(document).ready(function () {
        $('#select').change(function () {
            var targetvalue = /* which ever you decide */;
            $('#post_form').prop("target", targetvalue);
        });
    });
</script>

Manse · Answer 2 · 2011-11-28T11:38:06.160

0

If indeed your HTML page is written as is specified in the question then the script will run after the DOM has been updated with the form you are trying to modify - but if the script is part of a JavaScript file linked in the then you need to enclose it within the $(document).ready() function ....

Thanks @T.J.Crowder for linking the following article on this -> Document ready event ?

Place your script within the $(document).ready() block - this will ensure the DOM is ready before attemptig to change it :

<script type="text/javascript">
  $(document).ready(function() {
     $("#select").change(function() {
       var targetvalue = $(this).val();
       $("#post_form").prop("target", targetvalue);
     });
  });
</script>

edited Nov 28 '11 at 11:38

answered Nov 28 '11 at 11:30

Manse

37,765
10
83
108

1

If things are as shown in the question, there's no need. As long as the `script` block is *below* the `select` box in the document source, the `select` box will be there and accessible even before jQuery's `ready` event fires. See [this message on the subject](http://groups.google.com/group/closure-library-discuss/browse_thread/thread/1beecbb5d6afcb41) from the Google's Closure library engineers. – T.J. Crowder Nov 28 '11 at 11:33

Jquery to change a form's target

2 Answers2

Linked