Want to create a form with each option having own submit button

Touseef Qamar 0
Viewed 44

I want to create a form like the attached image. So far, here is my progress.

function gotoTask() {
    var message = document.getElementById("goto").value;
    goto_message.innerHTML = message;
}

function waitTask() {
    var message = document.getElementById("wait").value;
    wait_message.innerHTML = message;
}
body {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 50px;
}
div.input_fields {
    width: 50%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid #17375e;
    border-radius: 15px;
    padding: 10px 15px;
    margin-bottom: 10px;
}

.task_window {
    width: 50%
    display: flex;
    justify-content: space-between;
    border: 1px solid #17375e;
    border-radius: 15px;
    padding: 10px 15px;
}

select {
    padding: 3px 5px;
    border-radius: 10px;
    margin-right: 10px;
}

button {
    background-color: #17375e;
    color: #fff;
    padding: 5px 15px;
    border: 0px;
    border-radius: 10px;
}
<body>
<div class="input_fields">
  <label for="goto">Go to</label>

  <select id="goto">
    <option value="Place 1">Place 1</option>
    <option value="Place 2">Place 2</option>
    <option value="Place 3">Place 3</option>
    <option value="Place 4">Place 4</option>
  </select>
  <button type="button" onclick="gotoTask()">OK</button>
</div>
<div class="input_fields">
  <label for="wait">Wait for</label>

  <select id="wait">
    <option value="Place 1">Place 1</option>
    <option value="Place 2">Place 2</option>
    <option value="Place 3">Place 3</option>
    <option value="Place 4">Place 4</option>
  </select>
  <button type="button" onclick="waitTask()">OK</button>
</div>

<div class="task_window">
  Task: <span id="goto_message"></span> <span id="wait_message"></span>
  <button type="submit" onclick="pushTask()">OK</button>
</div>
</body>

Basically it has several option inputs and each input have its own submit button which when clicked shows the selected option at the bottom of the page. My question is do I have to create a number of forms to make this happen or I can do this within one single form? Or is there any other way to do this altogether?

image

php javascript css html
1 Answers

So here is how I finally did it.

function createTaskFn(label, messageId) {
  var task_value = document.getElementById(messageId).value;
  var task_label = document.getElementById(label).textContent;
  if (task_value) {
    final_task.innerHTML += `<span class="task_box">${task_label}: ${task_value} <a onclick="clearTask(this)"><img src="cross.png"></a></span>`;
  }
}

function clearTask(e) {
  e.parentElement.remove();
}
body {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 50px;
}

div.input_fields {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 80%;
  border: 1px solid #17375e;
  border-radius: 15px;
  padding: 10px 15px;
  margin-bottom: 10px;
}

.input_fields label {
  width: 50%;
}

.input_fields select {
  width: 30%;
  padding: 3px 5px;
  border-radius: 10px;
  margin-right: 10px;
}

#final_task {
  display: flex;
  flex-wrap: wrap;
}

.task_window {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 80%;
  border: 1px solid #17375e;
  border-radius: 15px;
  margin-top: 100px;
  padding: 10px 15px;
}

.task_box {
  border: 1px solid #17375e;
  padding: 3px 8px 3px 8px;
  border-radius: 10px;
  margin: 5px 5px;
}

span.task_box img {
  padding-left: 10px;
  cursor: pointer;
}

button.task_btn {
  background-color: #17375e;
  color: #fff;
  padding: 5px 15px;
  border: 0px;
  border-radius: 10px;
}
<body>
  <div class="input_fields">
    <label for="goto" id="goto_label">Go to</label>

    <select id="goto">
      <option value="" selected disabled hidden>Select</option>
      <option value="Place 1">Place 1</option>
      <option value="Place 2">Place 2</option>
      <option value="Place 3">Place 3</option>
      <option value="Place 4">Place 4</option>
    </select>
    <button type="button" onclick="createTaskFn('goto_label', 'goto')" class="task_btn">
        OK
      </button>
  </div>

  <div class="input_fields">
    <label for="wait" id="wait_label">Wait for</label>

    <select id="wait">
      <option value="" selected disabled hidden>Select</option>
      <option value="Place 1">Place 1</option>
      <option value="Place 2">Place 2</option>
      <option value="Place 3">Place 3</option>
      <option value="Place 4">Place 4</option>
    </select>
    <button type="button" onclick="createTaskFn('wait_label', 'wait')" class="task_btn">
        OK
      </button>
  </div>

  <div class="input_fields">
    <label for="pickup" id="pickup_label">Pick-up load</label>

    <select id="pickup">
      <option value="" selected disabled hidden>Select</option>
      <option value="Place 1">Place 1</option>
      <option value="Place 2">Place 2</option>
      <option value="Place 3">Place 3</option>
      <option value="Place 4">Place 4</option>
    </select>
    <button type="button" onclick="createTaskFn('pickup_label', 'pickup')" class="task_btn">
        OK
      </button>
  </div>

  <div class="input_fields">
    <label for="wait" id="dropoff_label">Dropp-off load</label>

    <select id="dropoff">
      <option value="" selected disabled hidden>Select</option>
      <option value="Place 1">Place 1</option>
      <option value="Place 2">Place 2</option>
      <option value="Place 3">Place 3</option>
      <option value="Place 4">Place 4</option>
    </select>
    <button type="button" onclick="createTaskFn('dropoff_label','dropoff')" class="task_btn">
        OK
      </button>
  </div>

  <div class="input_fields">
    <label for="charge" id="charge_label">Charge</label>

    <select id="charge">
      <option value="" selected disabled hidden>Select</option>
      <option value="Place 1">Place 1</option>
      <option value="Place 2">Place 2</option>
      <option value="Place 3">Place 3</option>
      <option value="Place 4">Place 4</option>
    </select>
    <button type="button" onclick="createTaskFn('charge_label', 'charge')" class="task_btn">
        OK
      </button>
  </div>

  <div class="input_fields">
    <label for="repeat" id="repeat_label">Repeat</label>

    <select id="repeat">
      <option value="" selected disabled hidden>Select</option>
      <option value="Place 1">Place 1</option>
      <option value="Place 2">Place 2</option>
      <option value="Place 3">Place 3</option>
      <option value="Place 4">Place 4</option>
    </select>
    <button type="button" onclick="createTaskFn('repeat_label', 'repeat')" class="task_btn">
        OK
      </button>
  </div>

  <div class="input_fields">
    <label for="stop" id="stop_label">Stop</label>

    <select id="stop">
      <option value="" selected disabled hidden>Select</option>
      <option value="Place 1">Place 1</option>
      <option value="Place 2">Place 2</option>
      <option value="Place 3">Place 3</option>
      <option value="Place 4">Place 4</option>
    </select>
    <button type="button" onclick="createTaskFn('stop_label', 'stop')" class="task_btn">
        OK
      </button>
  </div>

  <div class="task_window">
    Task:
    <div id="final_task"></div>
    <button type="submit" onclick="pushTask()" class="task_btn">OK</button>
  </div>
</body>

Touseef Qamar0
Related