Get an URL of selector's option and add it as a link to Submit button

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}

I broke my head trying to get an URL value of an option in my selector and add it to the Submit button so that when an user choose an option 1 its URL is added to the Submit button url.

For example if the option 1 URL is <option><a href="https://example.com/1">1</a></option> the button should follow to the link https://example.com/1

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form>

  <div class="form-row">

    <div class="form-group col-md-12">

      <label for="inputState">State</label>

      <select id="inputState" class="form-control">

        <option selected>Choose an option</option>

        <option><a href="https://example.com/1">1</a></option>

        <option><a href="https://example.com/2">2</a></option>

        <option><a href="https://example.com/3">3</a></option>

        <option><a href="https://example.com/4">4</a></option>

      </select>

    </div>

  </div>

  <button type="submit" class="btn btn-primary">Submit</button>

</form>

My js knowledge is poor unfortunately so I would much appreciate any help.

edited Nov 25 '18 at 7:23

asked Nov 23 '18 at 7:15

Jamdev

397215

2

You can't put html inside <option>. It is a text only element

– charlietfl
Nov 23 '18 at 7:16

add a comment |

I broke my head trying to get an URL value of an option in my selector and add it to the Submit button so that when an user choose an option 1 its URL is added to the Submit button url.

For example if the option 1 URL is <option><a href="https://example.com/1">1</a></option> the button should follow to the link https://example.com/1

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form>

  <div class="form-row">

    <div class="form-group col-md-12">

      <label for="inputState">State</label>

      <select id="inputState" class="form-control">

        <option selected>Choose an option</option>

        <option><a href="https://example.com/1">1</a></option>

        <option><a href="https://example.com/2">2</a></option>

        <option><a href="https://example.com/3">3</a></option>

        <option><a href="https://example.com/4">4</a></option>

      </select>

    </div>

  </div>

  <button type="submit" class="btn btn-primary">Submit</button>

</form>

My js knowledge is poor unfortunately so I would much appreciate any help.

edited Nov 25 '18 at 7:23

asked Nov 23 '18 at 7:15

Jamdev

397215

2

You can't put html inside <option>. It is a text only element

– charlietfl
Nov 23 '18 at 7:16

add a comment |

I broke my head trying to get an URL value of an option in my selector and add it to the Submit button so that when an user choose an option 1 its URL is added to the Submit button url.

For example if the option 1 URL is <option><a href="https://example.com/1">1</a></option> the button should follow to the link https://example.com/1

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form>

  <div class="form-row">

    <div class="form-group col-md-12">

      <label for="inputState">State</label>

      <select id="inputState" class="form-control">

        <option selected>Choose an option</option>

        <option><a href="https://example.com/1">1</a></option>

        <option><a href="https://example.com/2">2</a></option>

        <option><a href="https://example.com/3">3</a></option>

        <option><a href="https://example.com/4">4</a></option>

      </select>

    </div>

  </div>

  <button type="submit" class="btn btn-primary">Submit</button>

</form>

My js knowledge is poor unfortunately so I would much appreciate any help.

edited Nov 25 '18 at 7:23

asked Nov 23 '18 at 7:15

Jamdev

397215

I broke my head trying to get an URL value of an option in my selector and add it to the Submit button so that when an user choose an option 1 its URL is added to the Submit button url.

For example if the option 1 URL is <option><a href="https://example.com/1">1</a></option> the button should follow to the link https://example.com/1

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form>

  <div class="form-row">

    <div class="form-group col-md-12">

      <label for="inputState">State</label>

      <select id="inputState" class="form-control">

        <option selected>Choose an option</option>

        <option><a href="https://example.com/1">1</a></option>

        <option><a href="https://example.com/2">2</a></option>

        <option><a href="https://example.com/3">3</a></option>

        <option><a href="https://example.com/4">4</a></option>

      </select>

    </div>

  </div>

  <button type="submit" class="btn btn-primary">Submit</button>

</form>

My js knowledge is poor unfortunately so I would much appreciate any help.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form>

  <div class="form-row">

    <div class="form-group col-md-12">

      <label for="inputState">State</label>

      <select id="inputState" class="form-control">

        <option selected>Choose an option</option>

        <option><a href="https://example.com/1">1</a></option>

        <option><a href="https://example.com/2">2</a></option>

        <option><a href="https://example.com/3">3</a></option>

        <option><a href="https://example.com/4">4</a></option>

      </select>

    </div>

  </div>

  <button type="submit" class="btn btn-primary">Submit</button>

</form>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form>

  <div class="form-row">

    <div class="form-group col-md-12">

      <label for="inputState">State</label>

      <select id="inputState" class="form-control">

        <option selected>Choose an option</option>

        <option><a href="https://example.com/1">1</a></option>

        <option><a href="https://example.com/2">2</a></option>

        <option><a href="https://example.com/3">3</a></option>

        <option><a href="https://example.com/4">4</a></option>

      </select>

    </div>

  </div>

  <button type="submit" class="btn btn-primary">Submit</button>

</form>

javascript html

edited Nov 25 '18 at 7:23

asked Nov 23 '18 at 7:15

Jamdev

397215

edited Nov 25 '18 at 7:23

asked Nov 23 '18 at 7:15

Jamdev

397215

edited Nov 25 '18 at 7:23

asked Nov 23 '18 at 7:15

Jamdev

397215

asked Nov 23 '18 at 7:15

Jamdev

397215

asked Nov 23 '18 at 7:15

Jamdev

397215

2

You can't put html inside <option>. It is a text only element

– charlietfl
Nov 23 '18 at 7:16

add a comment |

2

You can't put html inside <option>. It is a text only element

– charlietfl
Nov 23 '18 at 7:16

You can't put html inside <option>. It is a text only element

– charlietfl
Nov 23 '18 at 7:16

add a comment |

3 Answers
3

active

oldest

votes

Vanilla JS solution:

You can set the href attribute of the anchor tag based on the selection at runtime.

window.onload = function() {



  document.querySelector('#inputState').addEventListener('change', function(event) {



    document.querySelector('#anchorSubmit').setAttribute('href', `https://www.example.com/${event.currentTarget.value}`);



  });



}

<form>

  <div class="form-row">

    <div class="form-group col-md-12">

      <label for="inputState">State</label>

      <select id="inputState" class="form-control">

        <option selected value="">Choose an option</option>

        <option value="1">1</option>

        <option value="2">2</option>

        <option value="3">3</option>

        <option value="4">4</option>

      </select>

    </div>

  </div>

  <a id="anchorSubmit">

    <button id="btnSubmit" type="submit" class="btn btn-primary">Submit</button>

  </a>

</form>

edited Nov 25 '18 at 7:27

Jack Bashford

18.8k51950

answered Nov 23 '18 at 8:10

Kunal Mukherjee

2,17221227

add a comment |

I think this would help you - 



<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<form id="myFarm">

  <div class="form-row">

    <div class="form-group col-md-12">

      <label for="inputState">State</label>

      <select id="inputState" class="form-control">

        <option value="" selected>Choose an option</option>

        <option value="1">1</option>

        <option value="2">2</option>

        <option value="3">3</option>

        <option value="4">4</option>

      </select>

    </div>

  </div>

  <button type="submit" class="btn btn-primary">Submit</button>

</form>







<script type="text/javascript">

    $(document).ready(function(){

      $('#inputState').on('change', function() {

          $("#myFarm").attr("action", "https://example.com/"+ $(this).val()).submit();

      })

    })

 </script>

answered Nov 23 '18 at 7:56

sunil sharma

262

As soon as I submit the form, the page refreshes and I see the following url example.com?

– Jamdev
Nov 23 '18 at 8:01

add a comment |

If i right understand your question - you need to redirect user by the chosen <option> url.

For this you can do:

        $(document).ready(function(){

          $(document).on('submit', '#myForm', (event) => {

           event.stopPropagation();

           const selectElement = $(this).find('#inputState');



           if(selectElement.val()){

              location.href = selectElement.val();

           }

      });

    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form id="myForm">

      <div class="form-row">

        <div class="form-group col-md-12">

          <label for="inputState">State</label>

          <select id="inputState" class="form-control">

            <option value="" selected>Choose an option</option>

            <option value="http://url/1">1</option>

            <option value="http://url/2">2</option>

            <option value="http://url/3">3</option>

            <option value="http://url/4">4</option>

          </select>

        </div>

      </div>

      <button type="submit" class="btn btn-primary">Submit</button>

    </form>

But if you wantsubmit form to url from <option> value, you can do it:

<script type="text/javascript">

    $(document).ready(function(){

      $(document).on('submit', '#myForm', (event) => {

          event.stopPropagation();

          const selectElement = $('#inputState');



          if(selectElement.val()){

              $(this).attr('action', selectElement.val());

              $(this).submit();

          }

      });

    });

 </script>

upd. moved code from first example to snippet

edited Nov 23 '18 at 13:30

answered Nov 23 '18 at 8:16

Евгений Худолеев

113

Thank you so much for this solution. Unfortunately when I'm trying to submit the form, the page refreshes and nothing changed.

– Jamdev
Nov 23 '18 at 8:25

Sorry, it's my mistake, it was typo in for id tag. And url in value

– Евгений Худолеев
Nov 23 '18 at 13:24

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53442160%2fget-an-url-of-selectors-option-and-add-it-as-a-link-to-submit-button%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

3 Answers
3

active

oldest

votes

3 Answers
3

active

oldest

votes

Vanilla JS solution:

You can set the href attribute of the anchor tag based on the selection at runtime.

window.onload = function() {



  document.querySelector('#inputState').addEventListener('change', function(event) {



    document.querySelector('#anchorSubmit').setAttribute('href', `https://www.example.com/${event.currentTarget.value}`);



  });



}

<form>

  <div class="form-row">

    <div class="form-group col-md-12">

      <label for="inputState">State</label>

      <select id="inputState" class="form-control">

        <option selected value="">Choose an option</option>

        <option value="1">1</option>

        <option value="2">2</option>

        <option value="3">3</option>

        <option value="4">4</option>

      </select>

    </div>

  </div>

  <a id="anchorSubmit">

    <button id="btnSubmit" type="submit" class="btn btn-primary">Submit</button>

  </a>

</form>

edited Nov 25 '18 at 7:27

Jack Bashford

18.8k51950

answered Nov 23 '18 at 8:10

Kunal Mukherjee

2,17221227

add a comment |

Vanilla JS solution:

You can set the href attribute of the anchor tag based on the selection at runtime.

window.onload = function() {



  document.querySelector('#inputState').addEventListener('change', function(event) {



    document.querySelector('#anchorSubmit').setAttribute('href', `https://www.example.com/${event.currentTarget.value}`);



  });



}

<form>

  <div class="form-row">

    <div class="form-group col-md-12">

      <label for="inputState">State</label>

      <select id="inputState" class="form-control">

        <option selected value="">Choose an option</option>

        <option value="1">1</option>

        <option value="2">2</option>

        <option value="3">3</option>

        <option value="4">4</option>

      </select>

    </div>

  </div>

  <a id="anchorSubmit">

    <button id="btnSubmit" type="submit" class="btn btn-primary">Submit</button>

  </a>

</form>

edited Nov 25 '18 at 7:27

Jack Bashford

18.8k51950

answered Nov 23 '18 at 8:10

Kunal Mukherjee

2,17221227

add a comment |

Vanilla JS solution:

You can set the href attribute of the anchor tag based on the selection at runtime.

window.onload = function() {



  document.querySelector('#inputState').addEventListener('change', function(event) {



    document.querySelector('#anchorSubmit').setAttribute('href', `https://www.example.com/${event.currentTarget.value}`);



  });



}

<form>

  <div class="form-row">

    <div class="form-group col-md-12">

      <label for="inputState">State</label>

      <select id="inputState" class="form-control">

        <option selected value="">Choose an option</option>

        <option value="1">1</option>

        <option value="2">2</option>

        <option value="3">3</option>

        <option value="4">4</option>

      </select>

    </div>

  </div>

  <a id="anchorSubmit">

    <button id="btnSubmit" type="submit" class="btn btn-primary">Submit</button>

  </a>

</form>

edited Nov 25 '18 at 7:27

Jack Bashford

18.8k51950

answered Nov 23 '18 at 8:10

Kunal Mukherjee

2,17221227

Vanilla JS solution:

You can set the href attribute of the anchor tag based on the selection at runtime.

window.onload = function() {



  document.querySelector('#inputState').addEventListener('change', function(event) {



    document.querySelector('#anchorSubmit').setAttribute('href', `https://www.example.com/${event.currentTarget.value}`);



  });



}

<form>

  <div class="form-row">

    <div class="form-group col-md-12">

      <label for="inputState">State</label>

      <select id="inputState" class="form-control">

        <option selected value="">Choose an option</option>

        <option value="1">1</option>

        <option value="2">2</option>

        <option value="3">3</option>

        <option value="4">4</option>

      </select>

    </div>

  </div>

  <a id="anchorSubmit">

    <button id="btnSubmit" type="submit" class="btn btn-primary">Submit</button>

  </a>

</form>

window.onload = function() {



  document.querySelector('#inputState').addEventListener('change', function(event) {



    document.querySelector('#anchorSubmit').setAttribute('href', `https://www.example.com/${event.currentTarget.value}`);



  });



}

<form>

  <div class="form-row">

    <div class="form-group col-md-12">

      <label for="inputState">State</label>

      <select id="inputState" class="form-control">

        <option selected value="">Choose an option</option>

        <option value="1">1</option>

        <option value="2">2</option>

        <option value="3">3</option>

        <option value="4">4</option>

      </select>

    </div>

  </div>

  <a id="anchorSubmit">

    <button id="btnSubmit" type="submit" class="btn btn-primary">Submit</button>

  </a>

</form>

window.onload = function() {



  document.querySelector('#inputState').addEventListener('change', function(event) {



    document.querySelector('#anchorSubmit').setAttribute('href', `https://www.example.com/${event.currentTarget.value}`);



  });



}

<form>

  <div class="form-row">

    <div class="form-group col-md-12">

      <label for="inputState">State</label>

      <select id="inputState" class="form-control">

        <option selected value="">Choose an option</option>

        <option value="1">1</option>

        <option value="2">2</option>

        <option value="3">3</option>

        <option value="4">4</option>

      </select>

    </div>

  </div>

  <a id="anchorSubmit">

    <button id="btnSubmit" type="submit" class="btn btn-primary">Submit</button>

  </a>

</form>

edited Nov 25 '18 at 7:27

Jack Bashford

18.8k51950

answered Nov 23 '18 at 8:10

Kunal Mukherjee

2,17221227

edited Nov 25 '18 at 7:27

Jack Bashford

18.8k51950

edited Nov 25 '18 at 7:27

Jack Bashford

18.8k51950

edited Nov 25 '18 at 7:27

Jack Bashford

18.8k51950

answered Nov 23 '18 at 8:10

Kunal Mukherjee

2,17221227

answered Nov 23 '18 at 8:10

Kunal Mukherjee

2,17221227

answered Nov 23 '18 at 8:10

Kunal Mukherjee

2,17221227

add a comment |

I think this would help you - 



<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<form id="myFarm">

  <div class="form-row">

    <div class="form-group col-md-12">

      <label for="inputState">State</label>

      <select id="inputState" class="form-control">

        <option value="" selected>Choose an option</option>

        <option value="1">1</option>

        <option value="2">2</option>

        <option value="3">3</option>

        <option value="4">4</option>

      </select>

    </div>

  </div>

  <button type="submit" class="btn btn-primary">Submit</button>

</form>







<script type="text/javascript">

    $(document).ready(function(){

      $('#inputState').on('change', function() {

          $("#myFarm").attr("action", "https://example.com/"+ $(this).val()).submit();

      })

    })

 </script>

answered Nov 23 '18 at 7:56

sunil sharma

262

As soon as I submit the form, the page refreshes and I see the following url example.com?

– Jamdev
Nov 23 '18 at 8:01

add a comment |

I think this would help you - 



<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<form id="myFarm">

  <div class="form-row">

    <div class="form-group col-md-12">

      <label for="inputState">State</label>

      <select id="inputState" class="form-control">

        <option value="" selected>Choose an option</option>

        <option value="1">1</option>

        <option value="2">2</option>

        <option value="3">3</option>

        <option value="4">4</option>

      </select>

    </div>

  </div>

  <button type="submit" class="btn btn-primary">Submit</button>

</form>







<script type="text/javascript">

    $(document).ready(function(){

      $('#inputState').on('change', function() {

          $("#myFarm").attr("action", "https://example.com/"+ $(this).val()).submit();

      })

    })

 </script>

answered Nov 23 '18 at 7:56

sunil sharma

262

As soon as I submit the form, the page refreshes and I see the following url example.com?

– Jamdev
Nov 23 '18 at 8:01

add a comment |

I think this would help you - 



<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<form id="myFarm">

  <div class="form-row">

    <div class="form-group col-md-12">

      <label for="inputState">State</label>

      <select id="inputState" class="form-control">

        <option value="" selected>Choose an option</option>

        <option value="1">1</option>

        <option value="2">2</option>

        <option value="3">3</option>

        <option value="4">4</option>

      </select>

    </div>

  </div>

  <button type="submit" class="btn btn-primary">Submit</button>

</form>







<script type="text/javascript">

    $(document).ready(function(){

      $('#inputState').on('change', function() {

          $("#myFarm").attr("action", "https://example.com/"+ $(this).val()).submit();

      })

    })

 </script>

answered Nov 23 '18 at 7:56

sunil sharma

262

I think this would help you - 



<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<form id="myFarm">

  <div class="form-row">

    <div class="form-group col-md-12">

      <label for="inputState">State</label>

      <select id="inputState" class="form-control">

        <option value="" selected>Choose an option</option>

        <option value="1">1</option>

        <option value="2">2</option>

        <option value="3">3</option>

        <option value="4">4</option>

      </select>

    </div>

  </div>

  <button type="submit" class="btn btn-primary">Submit</button>

</form>







<script type="text/javascript">

    $(document).ready(function(){

      $('#inputState').on('change', function() {

          $("#myFarm").attr("action", "https://example.com/"+ $(this).val()).submit();

      })

    })

 </script>

answered Nov 23 '18 at 7:56

sunil sharma

262

answered Nov 23 '18 at 7:56

sunil sharma

262

answered Nov 23 '18 at 7:56

sunil sharma

262

answered Nov 23 '18 at 7:56

sunil sharma

262

As soon as I submit the form, the page refreshes and I see the following url example.com?

– Jamdev
Nov 23 '18 at 8:01

add a comment |

As soon as I submit the form, the page refreshes and I see the following url example.com?

– Jamdev
Nov 23 '18 at 8:01

As soon as I submit the form, the page refreshes and I see the following url example.com?

– Jamdev
Nov 23 '18 at 8:01

add a comment |

If i right understand your question - you need to redirect user by the chosen <option> url.

For this you can do:

        $(document).ready(function(){

          $(document).on('submit', '#myForm', (event) => {

           event.stopPropagation();

           const selectElement = $(this).find('#inputState');



           if(selectElement.val()){

              location.href = selectElement.val();

           }

      });

    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form id="myForm">

      <div class="form-row">

        <div class="form-group col-md-12">

          <label for="inputState">State</label>

          <select id="inputState" class="form-control">

            <option value="" selected>Choose an option</option>

            <option value="http://url/1">1</option>

            <option value="http://url/2">2</option>

            <option value="http://url/3">3</option>

            <option value="http://url/4">4</option>

          </select>

        </div>

      </div>

      <button type="submit" class="btn btn-primary">Submit</button>

    </form>

But if you wantsubmit form to url from <option> value, you can do it:

<script type="text/javascript">

    $(document).ready(function(){

      $(document).on('submit', '#myForm', (event) => {

          event.stopPropagation();

          const selectElement = $('#inputState');



          if(selectElement.val()){

              $(this).attr('action', selectElement.val());

              $(this).submit();

          }

      });

    });

 </script>

upd. moved code from first example to snippet

edited Nov 23 '18 at 13:30

answered Nov 23 '18 at 8:16

Евгений Худолеев

113

Thank you so much for this solution. Unfortunately when I'm trying to submit the form, the page refreshes and nothing changed.

– Jamdev
Nov 23 '18 at 8:25

Sorry, it's my mistake, it was typo in for id tag. And url in value

– Евгений Худолеев
Nov 23 '18 at 13:24

add a comment |

If i right understand your question - you need to redirect user by the chosen <option> url.

For this you can do:

        $(document).ready(function(){

          $(document).on('submit', '#myForm', (event) => {

           event.stopPropagation();

           const selectElement = $(this).find('#inputState');



           if(selectElement.val()){

              location.href = selectElement.val();

           }

      });

    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form id="myForm">

      <div class="form-row">

        <div class="form-group col-md-12">

          <label for="inputState">State</label>

          <select id="inputState" class="form-control">

            <option value="" selected>Choose an option</option>

            <option value="http://url/1">1</option>

            <option value="http://url/2">2</option>

            <option value="http://url/3">3</option>

            <option value="http://url/4">4</option>

          </select>

        </div>

      </div>

      <button type="submit" class="btn btn-primary">Submit</button>

    </form>

But if you wantsubmit form to url from <option> value, you can do it:

<script type="text/javascript">

    $(document).ready(function(){

      $(document).on('submit', '#myForm', (event) => {

          event.stopPropagation();

          const selectElement = $('#inputState');



          if(selectElement.val()){

              $(this).attr('action', selectElement.val());

              $(this).submit();

          }

      });

    });

 </script>

upd. moved code from first example to snippet

edited Nov 23 '18 at 13:30

answered Nov 23 '18 at 8:16

Евгений Худолеев

113

Thank you so much for this solution. Unfortunately when I'm trying to submit the form, the page refreshes and nothing changed.

– Jamdev
Nov 23 '18 at 8:25

Sorry, it's my mistake, it was typo in for id tag. And url in value

– Евгений Худолеев
Nov 23 '18 at 13:24

add a comment |

If i right understand your question - you need to redirect user by the chosen <option> url.

For this you can do:

        $(document).ready(function(){

          $(document).on('submit', '#myForm', (event) => {

           event.stopPropagation();

           const selectElement = $(this).find('#inputState');



           if(selectElement.val()){

              location.href = selectElement.val();

           }

      });

    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form id="myForm">

      <div class="form-row">

        <div class="form-group col-md-12">

          <label for="inputState">State</label>

          <select id="inputState" class="form-control">

            <option value="" selected>Choose an option</option>

            <option value="http://url/1">1</option>

            <option value="http://url/2">2</option>

            <option value="http://url/3">3</option>

            <option value="http://url/4">4</option>

          </select>

        </div>

      </div>

      <button type="submit" class="btn btn-primary">Submit</button>

    </form>

But if you wantsubmit form to url from <option> value, you can do it:

<script type="text/javascript">

    $(document).ready(function(){

      $(document).on('submit', '#myForm', (event) => {

          event.stopPropagation();

          const selectElement = $('#inputState');



          if(selectElement.val()){

              $(this).attr('action', selectElement.val());

              $(this).submit();

          }

      });

    });

 </script>

upd. moved code from first example to snippet

edited Nov 23 '18 at 13:30

answered Nov 23 '18 at 8:16

Евгений Худолеев

113

If i right understand your question - you need to redirect user by the chosen <option> url.

For this you can do:

        $(document).ready(function(){

          $(document).on('submit', '#myForm', (event) => {

           event.stopPropagation();

           const selectElement = $(this).find('#inputState');



           if(selectElement.val()){

              location.href = selectElement.val();

           }

      });

    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form id="myForm">

      <div class="form-row">

        <div class="form-group col-md-12">

          <label for="inputState">State</label>

          <select id="inputState" class="form-control">

            <option value="" selected>Choose an option</option>

            <option value="http://url/1">1</option>

            <option value="http://url/2">2</option>

            <option value="http://url/3">3</option>

            <option value="http://url/4">4</option>

          </select>

        </div>

      </div>

      <button type="submit" class="btn btn-primary">Submit</button>

    </form>

But if you wantsubmit form to url from <option> value, you can do it:

<script type="text/javascript">

    $(document).ready(function(){

      $(document).on('submit', '#myForm', (event) => {

          event.stopPropagation();

          const selectElement = $('#inputState');



          if(selectElement.val()){

              $(this).attr('action', selectElement.val());

              $(this).submit();

          }

      });

    });

 </script>

upd. moved code from first example to snippet

        $(document).ready(function(){

          $(document).on('submit', '#myForm', (event) => {

           event.stopPropagation();

           const selectElement = $(this).find('#inputState');



           if(selectElement.val()){

              location.href = selectElement.val();

           }

      });

    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form id="myForm">

      <div class="form-row">

        <div class="form-group col-md-12">

          <label for="inputState">State</label>

          <select id="inputState" class="form-control">

            <option value="" selected>Choose an option</option>

            <option value="http://url/1">1</option>

            <option value="http://url/2">2</option>

            <option value="http://url/3">3</option>

            <option value="http://url/4">4</option>

          </select>

        </div>

      </div>

      <button type="submit" class="btn btn-primary">Submit</button>

    </form>

        $(document).ready(function(){

          $(document).on('submit', '#myForm', (event) => {

           event.stopPropagation();

           const selectElement = $(this).find('#inputState');



           if(selectElement.val()){

              location.href = selectElement.val();

           }

      });

    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form id="myForm">

      <div class="form-row">

        <div class="form-group col-md-12">

          <label for="inputState">State</label>

          <select id="inputState" class="form-control">

            <option value="" selected>Choose an option</option>

            <option value="http://url/1">1</option>

            <option value="http://url/2">2</option>

            <option value="http://url/3">3</option>

            <option value="http://url/4">4</option>

          </select>

        </div>

      </div>

      <button type="submit" class="btn btn-primary">Submit</button>

    </form>

edited Nov 23 '18 at 13:30

answered Nov 23 '18 at 8:16

Евгений Худолеев

113

edited Nov 23 '18 at 13:30

answered Nov 23 '18 at 8:16

Евгений Худолеев

113

answered Nov 23 '18 at 8:16

Евгений Худолеев

113

answered Nov 23 '18 at 8:16

Евгений Худолеев

113

Thank you so much for this solution. Unfortunately when I'm trying to submit the form, the page refreshes and nothing changed.

– Jamdev
Nov 23 '18 at 8:25

Sorry, it's my mistake, it was typo in for id tag. And url in value

– Евгений Худолеев
Nov 23 '18 at 13:24

add a comment |

Thank you so much for this solution. Unfortunately when I'm trying to submit the form, the page refreshes and nothing changed.

– Jamdev
Nov 23 '18 at 8:25

Sorry, it's my mistake, it was typo in for id tag. And url in value

– Евгений Худолеев
Nov 23 '18 at 13:24

Thank you so much for this solution. Unfortunately when I'm trying to submit the form, the page refreshes and nothing changed.

– Jamdev
Nov 23 '18 at 8:25

Sorry, it's my mistake, it was typo in for id tag. And url in value

– Евгений Худолеев
Nov 23 '18 at 13:24

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Wsrtjtyk