We Keep Coding

Vue - how can i pass button value to submit in form?

I created a Vue form where there are two buttons. In my formSubmit() function i need to somehow find which button was used to submit the form. Here is what i tried:
<form #submit.prevent="formSubmit()">
<input type="text" class="form-control" v-model="name">
<input type="text" class="form-control" v-model="product">
<button class="btn btn-primary" v-model="buttonType" value="button1">BUTTON1</button>
<button class="btn btn-primary" v-model="buttonType" value="button2">BUTTON2</button>
</form>
And my function:
formSubmit(){
console.log(this.buttonType)
}
But once i click the button, i always get an undefined. Is there any other way to get the button used to submit the form? Any advice is appreciated.

You shouldn't really use v-model on a <button> element.
You can register separate event handlers for each button and call submit your form at the event of the respective event handlers.
<form #submit.prevent="onFormSubmit">
<button #click="onClickButton1">Button 1</button>
<button #click="onClickButton2">Button 2</button>
</form>
{
// ...
methods: {
onFormSubmit() {},
onClickButton1() {
// code for when button 1 is pressed
this.onFormSubmit()
},
onClickButton2() {
// code for when button 2 is pressed
this.onFormSubmit()
},
},
}

Add 'keydown' event listener to document except for input field

I am creating a Hangman game with a virtual keypad and a form input section where users can guess the entire word.
I am able to add a 'keydown' event listener to the document, but I DO NOT want want the 'keydown' event to fire off if I am typing into the input field.
Here is how I've added the event listener.
document.addEventListener('keydown', handleKeyDown);
Here is the form input.
<form onSubmit={e => onSubmit(e)}>
<div className="input-group">
<input
type="text"
className="form-control"
name="letter"
placeholder="Guess the word"
value={formWord}
onChange={e => setFormWord(e.target.value.toUpperCase())}
disabled={disabled}
/>
<div className="input-group-append">
<button
className="btn text-white"
type="submit"
disabled={disabled}
>
<i className="far fa-arrow-alt-circle-right" /> Go!
</button>
</div>
</div>
</form>
I've already tried using document.getElementsByTagName[0].removeEventListener('keydown', handleKeyDown), but that's not working. I'm assuming that's because the event listener was added onto the actual document instead of the element.
Please help!

Inside handleKeyDown, only execute the body of the function if the event.target does not match the input field, eg:
const handleKeyDown = (event) => {
if (event.target.matches('[name="letter"]')) {
return;
}
// rest of function body
};

How we can have events in one form with angular 2

All I want is one form which has two different buttons with different actions behind. I was wondering in every angular 2 component we can have only one onSubmit to call service. how can I have two? and how can I tell angular which buttons is associate to which service call.
when there is one button every thing is Ok but not with two buttons.
this is my onSubmit code:
onSubmit() {
this.service.generatePhone(this.data)
.subscribe(
() => {
this.success = true;
},
(error) => {
},
I want another onSubmit to call service.updatePhone.
and in my shortened html file:
<div class="form-signin">
<form #myForm="ngForm" (ngSubmit)="onSubmit()">
<div class="form-group">
<p class="text-left">your phone number </p>
</div>
<button type="submit" >
generate
</button>
<br/>
</form>
</div>
I want another
<button type="submit" >update </button>

<button type="button" (click)="doSomething()">

React form with multiple buttons - how to choose one to handle onSubmit event?

Let's say I have this HTML:
<div id="container"></div>
<p>Output: <span id="output"></span></p>
and this JS:
function otherAction(e) {
document.getElementById('output').innerHTML = 'otherAction';
e.preventDefault();
}
function submit(e) {
document.getElementById('output').innerHTML = 'submit';
e.preventDefault();
}
ReactDOM.render(
<form onSubmit={submit}>
<input type="text" defaultValue="foo" />
<button onClick={otherAction}>Other Action</button>
<button type="submit">Submit</button>
</form>,
document.getElementById('container')
);
Actually, let's not just say it, let's put it in a JSFiddle example. What I want to happen is that:
Clicking the "Other Action" button triggers the otherAction function (it does!)
Clicking the "Submit" button triggers the submit function (it does!)
Putting your cursor in the text box and pressing enter triggers the submit function (this does not work currently!)
In #3, what happens instead is that otherAction gets triggered. How can I change that?

If you set the first button to type="button" (i.e. provide a type for each button) it should work.
<button type="button" onClick={otherAction}>Other Action</button>
https://jsfiddle.net/L0urqamz/3/

You should provide types for all buttons, otherwise it won't work:
<form onSubmit={handleSubmit}>
// form content
<button type="button" onClick={someButtonEvent}>DO STH</button>
<button type="submit">SUBMIT</button>
</form>

Javascript: avoiding window to reload

I have this form, that is never submitted: it just triggers a calcularplazas() function when pressing a non-submit button:
<form name="what" id="what" action="">
<input id="mat" type="text"/>
<button id="btnEnviar" class="btn" onclick="calcularplazas();">SEND</button>
<input id="btnLimpiar" class="btn" type="reset" value="CLEAR" />
<p id="resultado"></p>
</form>
When clicking on the button, function works properly but no result can be shown, as the window reloads. I do not understand this behaviour as there's nothing on the function making it reload, neither is a form submitting.
As consequence of this, the result text is exported to <p id="resultado"></p> but on miliseconds dissapears, as window reloads.
Why this behaviour?
function calcularplazas(){
var mensaje = "MENSAJE FINAL";
document.getElementById("resultado").innerHTML = mensaje;
}

You say "non-submit" button, but since you haven't given your <button> element a type attribute, it is a submit button by default. You need to tell the browser to treat it as a "normal" button:
<button type="button" id="btnEnviar" class="btn" onclick="calcularplazas();">SEND</button>
Clicking this will now not submit the form, and not cause the page to reload.

You can prevent submit event to be dispatched.
myForm.addEventListener('submit', function(e) {
e.preventDefault();
calcularplazas();
// do anything else you want
})
And HTML
<form id="myForm">
<input id="input1" type="text"/>
<button type="submit" id="myButton">SEND</button>
</form>
It will works for Return key to do as well

The button in the form, have you tried giving it type="button" ?
Because in a form it gets type="submit" by default (or the form behaves like it would with a submit type).

You Need to make only 2 changes and the code will run .
Put return false in the javascript function.
when you call the function on onclick function write return calcularplazas.
check the below code for for your reference.
function calcularplazas(){
var mensaje = "MENSAJE FINAL";
document.getElementById("resultado").innerHTML = mensaje;
return false;
}
<button id="btnEnviar" class="btn" onclick="return calcularplazas();">SEND</button>