Form Action - change with jQuery

Question

<form name="selEstadoRepresentante" id="form" method="post" action="/representantes/?uf=">
  <select class="selectpicker" name="state" id="state">
    <option value="">Selecione</option>
    <option value="AC">Acre</option>
    <option value="AL">Alagoas</option>
    <option value="AP">Amapá</option>
    <option value="AM">Amazonas</option> 
    <option value="BA">Bahia</option>
    <option value="CE">Ceará</option>
    <option value="DF">Distrito Federal</option>
    <option value="ES">Espírito Santo</option>
    <option value="GO">Goiás</option>
    <option value="MA">Maranhão</option>
    <option value="MT">Mato Grosso</option>
    <option value="MS">Mato Grosso do Sul</option>
    <option value="MG">Minas Gerais</option>
    <option value="PA">Pará</option>
    <option value="PB">Paraíba</option>
    <option value="PR">Paraná</option>
    <option value="PE">Pernambuco</option>
    <option value="PI">Piauí</option>
    <option value="RJ">Rio de Janeiro</option>
    <option value="RN">Rio Grande do Norte</option>
    <option value="RS">Rio Grande do Sul</option>
    <option value="RO">Rondônia</option>
    <option value="RR">Roraima</option>
    <option value="SC">Santa Catarina</option>
    <option value="SP">São Paulo</option>
    <option value="SE">Sergipe</option>
    <option value="TO">Tocantins</option>
  </select>
  <input class="btBuscar" name="btBuscar" value="BUSCAR" type="submit" title="Buscar">
</form>

Steps:

Select: One of the options
Option Value: Ex: AM
Submit
<form name="selEstadoRepresentante" id="form" method="post" action="/representantes/?uf=AM">

How can I do this?

I think jQuery solves this But I don't know how to do this.

Possible duplicate of [jQuery Get Selected Option From Dropdown](https://stackoverflow.com/questions/10659097/jquery-get-selected-option-from-dropdown) — Deja, Sep 15 '17 at 21:50

score 0 · Answer 1 · edited Sep 15 '17 at 22:27

$('#state').change(function() {
  var action = '/representantes/?uf=' + $(this).find(":selected").val();
  $('#form').attr('action', action);
  alert($('#form').attr('action'));
});

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha256-k2WSCIexGzOj3Euiig+TlR8gA0EmPjuc79OEeY5L45g=" crossorigin="anonymous"></script>
<form name="selEstadoRepresentante" id="form" method="post" action="/representantes/?uf=">
  <select class="selectpicker" name="state" id="state">
    <option value="">Selecione</option>
    <option value="AC">Acre</option>
    <option value="AL">Alagoas</option>
    <option value="AP">Amapá</option>
    <option value="AM">Amazonas</option> 
    <option value="BA">Bahia</option>
    <option value="CE">Ceará</option>
    <option value="DF">Distrito Federal</option>
    <option value="ES">Espírito Santo</option>
    <option value="GO">Goiás</option>
    <option value="MA">Maranhão</option>
    <option value="MT">Mato Grosso</option>
    <option value="MS">Mato Grosso do Sul</option>
    <option value="MG">Minas Gerais</option>
    <option value="PA">Pará</option>
    <option value="PB">Paraíba</option>
    <option value="PR">Paraná</option>
    <option value="PE">Pernambuco</option>
    <option value="PI">Piauí</option>
    <option value="RJ">Rio de Janeiro</option>
    <option value="RN">Rio Grande do Norte</option>
    <option value="RS">Rio Grande do Sul</option>
    <option value="RO">Rondônia</option>
    <option value="RR">Roraima</option>
    <option value="SC">Santa Catarina</option>
    <option value="SP">São Paulo</option>
    <option value="SE">Sergipe</option>
    <option value="TO">Tocantins</option>
  </select>
  <input class="btBuscar" name="btBuscar" value="BUSCAR" type="submit" title="Buscar">
</form>

Yes! It works here en Stackflow... It can be conflict in my page. — Kleyton Renato, Sep 15 '17 at 22:14
Just move my first code to the footer in Wordpress. It worked. It is crazy rsrsrs THANK YOU ALL! — Kleyton Renato, Sep 15 '17 at 22:18
thumbs up =D. Please mark as useful to help another users to find the answer easily. — Abe, Sep 15 '17 at 22:20
mark an answer as useful, by checking the V sing above arrows, and change the title to [closed] — Abe, Sep 16 '17 at 01:02

score 0 · Answer 2 · answered Sep 15 '17 at 22:04

jsFiddle: https://jsfiddle.net/fkpnvecq/1/

Jquery code

$(function()
{
  $('.selectpicker').on('change', function()
  {
    if($(this).val())
    {
        $('#form').submit();
    }
  });
});

On change on the dropdown selectpicker, check to see if it has a value $(this).val() and if it does have a value then select the form with its ID #form then run the submit method.

If you only want it to work for a specific value you can just use the if state like so if($(this).val() && $(this).val() == 'AM')

score 0 · Answer 3 · answered Sep 15 '17 at 22:21

If you want to achieve the same with PHP, why don't you use Method as GET and change the name of field to uf, like this ?

    <form name="selEstadoRepresentante" id="form" method="get" action="/representantes">
      <select class="selectpicker" name="uf" id="state">
        <option value="">Selecione</option>
        <option value="AC">Acre</option>
        <option value="AL">Alagoas</option>
        <option value="AP">Amapá</option>
        <option value="AM">Amazonas</option> 
        <option value="BA">Bahia</option>
        <option value="CE">Ceará</option>
        <option value="DF">Distrito Federal</option>
        <option value="ES">Espírito Santo</option>
        <option value="GO">Goiás</option>
        <option value="MA">Maranhão</option>
        <option value="MT">Mato Grosso</option>
        <option value="MS">Mato Grosso do Sul</option>
        <option value="MG">Minas Gerais</option>
        <option value="PA">Pará</option>
        <option value="PB">Paraíba</option>
        <option value="PR">Paraná</option>
        <option value="PE">Pernambuco</option>
        <option value="PI">Piauí</option>
        <option value="RJ">Rio de Janeiro</option>
        <option value="RN">Rio Grande do Norte</option>
        <option value="RS">Rio Grande do Sul</option>
        <option value="RO">Rondônia</option>
        <option value="RR">Roraima</option>
        <option value="SC">Santa Catarina</option>
        <option value="SP">São Paulo</option>
        <option value="SE">Sergipe</option>
        <option value="TO">Tocantins</option>
      </select>
      <input class="btBuscar" name="btBuscar" value="BUSCAR" type="submit" title="Buscar">
    </form>

If you have to do it specifically with jQuery than you can do this :

$('#state').change(function() {
        var formaction = '/representantes/?uf=' + 
$(this).find(":selected").val();
        $('#form').attr('action', formaction);
        $('#form').submit();
    });

Form Action - change with jQuery

3 Answers3