Combine Together Select Class and Input Class

Question

At the moment I have to select a value from the drop down list and then click the button Items Per Page. I don't want to have to click the Items Per Page button. I want to embed the functionality from the Items Per Page button into the 4 options (3,6,9,12) in the Select element.

<form method="GET">
    <input class="btn btn-primary mb-4 height" type="submit" value="Items Per Page">
    <select class="btn btn-outline-primary mb-4 height" name="paginate_by" id="">
        <option value="3">3 </option>
        <option value="6">6 </option>
        <option value="9">9 </option>
        <option value="12">12 </option>
    </select>    
</form>

I have had a couple of attempts (including the two below) and don't think any of them have been remotely close.

    <option value="3" type="submit">3 </option>
    <option class="btn btn-primary mb-4 height" value="6">6 </option>

I Googled the issue but did not find anything remotely along the right lines. Does anyone have any suggestions or links to documentation?

Problem Solved

I resolved my problem with onchange="javascript:this.form.submit()". The below code works perfectly.

    <div class ="example" style="display: inline-block" ><div style="text-align:center"> <form method="GET">
  <input class="btn btn-primary mb-4 height" type="submit" value="Items Per Page">
    <select class="btn btn-outline-primary mb-4 height" name="paginate_by" id="ItemsPerPage" onchange="javascript:this.form.submit()">
        <option value="3">3 </option>
        <option value="6">6 </option>
        <option value="9">9 </option>
        <option value="12">12 </option>
    </select>    
</form>
</div></div>

I learnt about onchange="javascript:this.form.submit()" from Larrys post (How to Submit Form on Select Change).

I don't think I understand your question what you've tried so far — Umutambyi Gad, Jul 10 '20 at 00:00
I let the user decide how many items to display on a page (3,6,9 or 12). — Ross Symonds, Jul 10 '20 at 00:06
When the user chooses 3,6,9 or 12 I want the page to reload and only show 3,6,9 or 12 items (depending on the users choice). — Ross Symonds, Jul 10 '20 at 00:07
At the moment the user has to choose 3,6,9 or 12 and then click Items Per Page. — Ross Symonds, Jul 10 '20 at 00:07
ok and you want this to be done onselect only without submission — Umutambyi Gad, Jul 10 '20 at 00:08

score 1 · Answer 1 · answered Jul 10 '20 at 17:28

Here is one when you select any value(number) JavaScript detects the value(number) you selected and it create elements based on the value(number) and append them in the DOM so it's up to you to customize the contents div

const select = document.getElementsByTagName('select')[0];
const container = document.getElementById('container');
select.onchange = () => {
  container.innerHTML = "";
  for (let i = 0; i < Number(select.value); i++) {
    let content = document.createElement('div');
    content.classList.add('content');
    container.appendChild(content);
  }
}

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body {
  height: 100vh;
}

.app {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 12% 88%;
  background: #5F9EA0;
}

select {
  width: 100px;
  height: 50px;
  background: red;
  color: #fff;
  font-size: 24px;
  border-radius: 10px;
  outline: none;
}

#container {
  width: 100%;
  height: 100%;
  background: darkcyan;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.content {
  width: 150px;
  height: 150px;
  border-radius: 15px;
  background: darkgreen;
  margin: 10px;
}

<div class="app">
  <select class="nothing">
    <option>0</option>
    <option>3</option>
    <option>6</option>
    <option>9</option>
  </select>
  <div id="container"></div>
</div>

if this doesn't answer your question please let me know if there could be any farther support

Combine Together Select Class and Input Class

1 Answers1