How can i split the value of a dropdown list option and pass it in two different input fields scripts
<script>
function getsciname()
{
("#selectsci").change(function() {
var sciname = (this).val().split(',');
("#sid").val(sciname[0]);
("#sname").val(sciname[1]);
}};
</script>
(dropdown) select option code
<select id="scinameid" class="scinameclass" onchange="getsciname()">
<option disabled="true" selected>-- Scientific name --</option>
{% for getData in TaxonmyDistributionInsert %}
<option value={{getData.id}},{{getData.ScientificName}}>{{getData.id}} -
{{getData.ScientificName}}</option>
{% endfor %}
</select>
input box code
<input type="text" style="font-size: 16px" placeholder="Shrimp Prawn ID" name="ShrimpPrawnID"
id="sid" />
<input type="text" style="font-size: 16px" placeholder="Scientific Name"
name="ScientificName" id="sname" />
You had several problems in your script. By the way some were pretty serious and showed that you didn't grasp the concepts of events. You shouldn't reattach the handler any time the function was called. I didn't really get that point. Plus when you use jQuery you should do it through the $ object like $(selector).
By the way you just need one change event handler and in my example I attached it to the element via js instead of using the inline definition (because it's not recommended that way).
//on document ready
$(document).ready(()=>{
//adds an handler to the change event on #sinameid
$("#scinameid").change((e)=>{
//this will work as long as the only comma used is for separation
let sciname = $(e.target).val().split(',');
console.log(sciname);
$("#sid").val(sciname[0]);
$("#sname").val(sciname[1]);
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="scinameid" class="scinameclass">
<option disabled="true" selected>-- Scientific name --</option>
<option value="1,Name1">Name1</option>
<option value="2,Name2">Name2</option>
<option value="3,Name3">Name3</option>
<option value="4,Name//with space//4">(4) Option with spaces</option>
</select>
<input
type="text"
style="font-size: 16px"
placeholder="Shrimp Prawn ID"
name="ShrimpPrawnID"
id="sid" />
<input
type="text"
style="font-size: 16px"
placeholder="Scientific Name"
name="ScientificName"
id="sname" />Either you use onchange or jquery .change() method check this
function getsciname(e){
var [val1, val2] = e.target.value.split(',');
document.getElementById('input1').value = val1
document.getElementById('input2').value = val2
};<select id="select" onchange="getsciname(event)">
<option value="a, b">A, B</option>
<option value="c, d">C, D</option>
<option value="e, f">E, F</option>
</select>
<input type="text" id="input1">
<input type="text" id="input2">$(document).ready(function(){
$('#select').change(function(e){
var [val1, val2] = e.target.value.split(',')
$('#input1').val(val1)
$('#input2').val(val2)
})
})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="select">
<option value="a, b">A, B</option>
<option value="c, d">C, D</option>
<option value="e, f">E, F</option>
</select>
<input type="text" id="input1">
<input type="text" id="input2">Your onchange event handler for the drop down box, should be like below. Need not call the onchange inside it once again.
In your html, bind the function to your dropdown box' onchange event like so,
<select id="scinameid" class="scinameclass" onchange="getscOptname(this)">
<script>
function getscOptname(e)
{
var selOpt = e.value.split(',');
$('#sid').val(selOpt[0]);
$('#sname').val(selOpt[1]);
};
</script>