How to push action form with variable of select? - php

Question

I want to take value from select in html and push it into action url.
So when users select something value of action buyoption will be the value of the selection
I would prefer to do it with php if there is no option to do it with html.
This is my test buy it doesn't change the buyoption to selection variable..
please help
<form action="<?php echo URLROOT; ?>/trades/trade/buyoption/selloption" method="POST">
<div class="row">
<div class="col-md-9 register-right" >
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
<h3 class="register-heading">TRADE</h3>
<div class="row register-form">
<div class="col-md-12">
<label for="buy"><b>YOU SEND:</b></label>
<div class="form-group">
<select class="form-control" name="buyoption" id="buyoption">
<option class="hidden" selected disabled>Please select what you want to sell</option>
<option value="btc">Bitcoin (BTC)</option>
<option value="ltc">LITECOIN (LTC)</option>
<option value="eur">NATIONAL BANK TRANSFER (EUR/USD/HRK)</option>
</select>
</div>
<label for="buy"><b>YOU RECEIVE:</b></label>
<div class="form-group">
<select class="form-control" name="selloption" id="buyoption">
<option class="hidden" selected disabled>Please select what you want receive</option>
<option value="btc">Bitcoin (BTC)</option>
<option value="ltc">Litecoin (LTC)</option>
<option value="eur">NATIONAL BANK TRANSFER (EUR/USD/HRK)</option>
</select>
</div>
<input type="submit" class="btnRegister" value="Proceed"/>
</div>
</div>
</div>
</div>
</div>
</div>
</form>

Answer 1

There must not be multiple elements in a document that have the same id value.
You can watch for change event of select element and on Change, manipulate the Action URL.
let buyoption = document.getElementById('buyoption');
let selloption = document.getElementById('selloption');
let postForm = document.getElementById('postForm');
let action = postForm.getAttribute('action');
let replacerFn = function() {
let temp = action;
if (buyoption.value) {
temp = temp.replace('buyoption', buyoption.value);
}
if (selloption.value) {
temp = temp.replace('selloption', selloption.value);
}
postForm.setAttribute('action', temp);
console.log('Action Attribute=> ', postForm.getAttribute('action'));
};
buyoption.addEventListener('change', function() {
replacerFn();
});
selloption.addEventListener('change', function() {
replacerFn();
});
<form action="/trades/trade/buyoption/selloption" method="POST" id="postForm">
<div class="row">
<div class="col-md-9 register-right">
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
<h3 class="register-heading">TRADE</h3>
<div class="row register-form">
<div class="col-md-12"> <label for="buy"><b>YOU SEND:</b></label>
<div class="form-group">
<select class="form-control" name="buyoption" id="buyoption">
<option class="hidden" selected disabled value="">Please select what you want to sell</option>
<option value="btc">Bitcoin (BTC)</option>
<option value="ltc">LITECOIN (LTC)</option>
<option value="eur">NATIONAL BANK TRANSFER (EUR/USD/HRK)</option>
</select>
</div><label for="buy"><b>YOU RECEIVE:</b></label>
<div class="form-group">
<select class="form-control" name="selloption" id="selloption">
<option class="hidden" selected disabled value="">Please select what you want receive</option>
<option value="btc">Bitcoin (BTC)</option>
<option value="ltc">Litecoin (LTC)</option>
<option value="eur">NATIONAL BANK TRANSFER (EUR/USD/HRK)</option>
</select>
</div><input type="submit" class="btnRegister" value="Proceed" /> </div>
</div>
</div>
</div>
</div>
</div>
</form>