How to get the value from an input in my codebehind while using @keyup

Question

I have an input box that the user types a phone number and it formats it for them.

<label>Primary Phone Number</label><input type="text" class="form-control" id="primaryPhone" placeholder="Primary Phone Number" v-model="primaryPhone" maxlength="12" @keyup="formatPhone" />

I have my formatting for the phone number below using Vue.js.

formatPhone: function (event) {
    if (['Arrow', 'Backspace', 'Shift'].includes(event.key)) {
        this.preventNextIteration = true;
        return;
    }
    if (this.preventNextIteration) {
        this.preventNextIteration = false;
        return;
    }

    if (this.step === 4 && event.target.id === 'primaryPhone') {
        var a = this.primaryPhone.replace(/-/g, '').match(/(\d{1,10})/g)[0];

        this.primaryPhone = a.replace(/(\d{1,3})(\d{1,3})(\d{1,4})/g, '$1-$2-$3');
    }
}

My submit button then runs my btnSubmit function on the code behind like so

<button  id="submit" v-show="agreement === true" class="btn" runat="server"  onserverclick="btnSubmit" style="float:right">Submit</button>

I need to get the value of the input box in my C# code behind. I know that I cannot use runat="server" because this will throw the server tag is not well formed with the @keyup. So I tried to get my value in C# using Request["primaryPhone"] or Request.Form["primaryPhone"] and neither worked. Both said that the object was undefined. How can I get my value in the code behind while using my validation?

I thought about using a hidden field running at the server and just setting that value to the value of my input as a last resort. I feel like there might be a simpler way though.

You'll need to POST that data to your webserver for it to see it. — Matt Oestreich
– Matt Oestreich, Commented Mar 19, 2019 at 14:10

Radu Diță · Accepted Answer · 2019-03-19 14:53:56Z

2

You aren't setting a name for your input. Try this

<input type="text" class="form-control" id="primaryPhone" name="primaryPhone" placeholder="Primary Phone Number" v-model="primaryPhone" maxlength="12" @keyup="formatPhone" />

Why does the name param matters ?

When the browser makes an HTTP request because of a form submit

it looks at all input descendants that are not disabled.
after that, depending on the type of input (text, radio, checkbox) it gets their value.
when making the request it needs to fill in a list of key, value pairs (this actually depends on the enc type). The key for each input is the value of the name attribute and not the id.

edited Mar 19, 2019 at 14:53

answered Mar 19, 2019 at 14:39

Radu Diță

14.3k2 gold badges33 silver badges37 bronze badges

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

1 Comment

SgtOVERKILL Over a year ago

It was really that simple.. Could you please explain why that would matter/make a difference?

Collectives™ on Stack Overflow

How to get the value from an input in my codebehind while using @keyup

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related