access value attribute data-CodePudding

I have the below form suppose I choose the first option. I want to ask is There a way to access value =0 and converted to number rather than A if the form submitedd

    <form  id="rpoerForm" action="http://localhost:5000/result"   method="post" >
        <div >
           <label for="City">Select city</label>
   <select name="City" id="City" >
            <option value='0'>A</option>
            <option value='1'>B</option>
            <option value='2'>C</option>
            <option value='3'>D</option>
            <option value='4'>E</option>
            <option value='5'>F</option>
      </select>

CodePudding user response：

Try this, onsubmit you will receive an array with the values of all inputs/select inside the form inside a tuple with the shape ["name", value] :

rpoerForm.onsubmit = e => {
  e.preventDefault()
  const data = [...new FormData(e.target).entries()].map(entry => [entry[0],  entry[1]])
  console.log(data)
}

<form id="rpoerForm" action="http://localhost:5000/result"  method="post">
  <div >
    <label for="City">Select city</label>
    <select name="City" id="City" >
      <option value='0'>A</option>
      <option value='1'>B</option>
      <option value='2'>C</option>
      <option value='3'>D</option>
      <option value='4'>E</option>
      <option value='5'>F</option>
    </select>
    <button>Submit</button>
</form>

CodePudding user response：

simply you can do it in jquery

<form id="rpoerForm">
  <div >
    <label for="City">Select city</label>
    <select name="City" id="City" >
      <option value='0'>A</option>
      <option value='1'>B</option>
      <option value='2'>C</option>
      <option value='3'>D</option>
      <option value='4'>E</option>
      <option value='5'>F</option>
    </select>
    <button id="submit">Submit</button>
</form>

$('#submit').on("click",function(){
  console.log($('#City option').val())
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="rpoerForm">
  <div >
    <label for="City">Select city</label>
    <select name="City" id="City" >
      <option value='0'>A</option>
      <option value='1'>B</option>
      <option value='2'>C</option>
      <option value='3'>D</option>
      <option value='4'>E</option>
      <option value='5'>F</option>
    </select>
    <button id="submit">Submit</button>
</form>