Parse number from text in select dropdown to calculate the number and save both text and number to DB

Question

I have a select dropdown with a number value only but the user sees a descriptor for a service attached to the amount

<option value="400">New Report</option>

So long as the value is a pure #, all the javascript code I use runs all the calcs and totals nicely.

The issue is I can't figure out how to save the number and the descriptor at the same time so the form still calculates and I know the choice the user made.

If I include the text to be parsed with php later on to split the number from the text and save in 2 fields in the DB, my calc result is 'NaN' because text is present in the value field

I have tried to somehow split the number from the text in the onchange event, but that has not worked

eg

<select id="srv1" name="srv1" onChange="calcexp(this.form,str.split('srv1','-','0'));">

the idea is to draw from the value what is on the left of the dash.

as in

 <option value="400-New Report">New Report</option>

You should probably read the documentation for split(). Also str doesn't appear to be defined in code shown — charlietfl
– charlietfl, Commented Feb 10, 2019 at 5:46

Rohit Mittal · Accepted Answer · 2019-02-10 06:07:57Z

1

I prefer to create an attribute in all options which has option numeric value. And for calculation, you can pass numeric value by getting attribute. Check below code:

    <select id="srv1" name="srv1" onChange="calcexp(this.form, this.options[this.selectedIndex].getAttribute('data-value'));">
        <option value="400-new" data-value="400">New Report</option>
        <option value="500-old" data-value="500">old  Report</option>
    </select>

Hope it helps you.

edited Feb 10, 2019 at 6:07

answered Feb 10, 2019 at 5:50

Rohit Mittal

2,1142 gold badges12 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

P Varga Over a year ago

Good practice is to use data- attributes for custom data, not something like attr-value

Rohit Mittal Over a year ago

Thanks @pete I will surely follow this from now.

user6096423 Over a year ago

I tried 'data-value' and 'srv1', but the value is not picked up. Still get NaN. If there was a way to POST the 'data-value- variable, then I could get that to work

Rohit Mittal Over a year ago

Can you show your code to me, so I can check? I have checked my shared code and it is working fine.

user6096423 Over a year ago

I didn't want to fight all the other code that did the calcs so I used this sample and it works now

<select id=srv1 name=srv1 onChange="calcexp(this.form,'srv1');"><option value="">Select</option> <option value="400" data-service="New R">New Report</option> </select>  <input type=hidden name=service id=service />  <script> $('#srv1').change(function () { var service=$(this).find('option:selected').attr('data-service'); $('#service').val(service); }); </script>

then: $service = $_POST['service'];

P Varga · Accepted Answer · 2019-02-10 05:42:11Z

1

This is how you'd parse a number in a string to the left of a -

let str = "123-etc";
let int = Number.parseInt(str.split("-", 1)[0]);
console.log(int);

answered Feb 10, 2019 at 5:42

P Varga

20.4k14 gold badges77 silver badges118 bronze badges

Comments

himank · Accepted Answer · 2019-02-10 06:04:37Z

1

You can use data attributes to store the extra text with html elements. You can read about data attributes here. https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes

answered Feb 10, 2019 at 6:04

himank

4393 silver badges5 bronze badges

Collectives™ on Stack Overflow

Parse number from text in select dropdown to calculate the number and save both text and number to DB

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related