call function When Submit is Clicked - javascript

Hello guy's im trying to call a Function But after i Click on Submit but there is no ID for the submit
here what i got :
<input type="submit" name="save" value="Continue" onclick="return validateFrm();" class="btn primary-btn btn-ctnue row alignCenter" autocomplete="off">
so i want it to be like this for example :
if Submit Clicked then Run this :
function example()
{ alert('Yay!'); )
Anyidea How to do it on JavaScript/Jquery
Ps: There a lot of Submit so i want this specific Submit

Select the submit button using CSS selector input[name=save]
Add listener to fire on click event and pass the function to execute.
document.querySelector("input[name=save]").addEventListener("click", function(){
alert('Yay!');
});

<button id="submit-btn">SUBMIT</button> //html file
const submitBtn = document.getElementById('submit-btn');
function showAlert() {
alert ('YAY!');
}
showAlert();
submitBtn.addEventListener('click', showAlert);

Related

click event triggers without button click

Hi i'm new to JS and could use some help.
So I am basically trying to send some text from a textarea to a function called inputFromText on a submit button click event, but somehow the function is being triggered before the click (when opening the html window via electron) and nothing happens when you click the button afterwards.
How do I prevent this from happening?
<body>
<form>
<div class="form-group">
<textarea class="form-control" rows="5" id="txa_trainingText"></textarea>
<button type="submit" class="btn btn-default" id="btn_submit">Submit</button>
</div>
</form>
<script>
const trainingText = document.getElementById("txa_trainingText").value;
document.getElementById("btn_submit").addEventListener("click", inputFromText(trainingText));
function inputFromText(text) {
...
}
</script>
</body>
I found out that when using a function without the text argument one could solve the problem by writing:
function inputFromText(e) {
e.preventDefault();
...
}
I believe you need to wrap the click event handler as a function, so line would read:
document.getElementById("btn_submit").addEventListener("click", function() { inputFromText(trainingText)});
Just change the button type="submit" to button type="button"
<button type="button" class="btn btn-default" id="btn_submit">Submit</button>

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>

ASP.NET MVC and Javascript - Submit button submitting form, onclick #URL.Action not firing

I have two submits, one to submit the form on page 1, the other to submit form on page 1 and redirect to form 2 on page 2.
<input type="submit" value="Submit and Add Expense" onclick="window.location.href='#Url.Action("Create", "Expense")';"/>
The issue is, when this secondary submit button is clicked it just submits the form just like the first submit button. It appears that the redirect #url.action is not firing. Thoughts?
The following code should do the trick.
<input type="submit" id="btnOne" value="One"/>
<input type="button" id="btnTwo" value="One"/>
<script>
var sample = sample || {};
sample.url = '#Url.Action("Create", "Expense")';
</script>
//you can move it to a separate file
<script>
$(function(){
$("#btnTwo").click(function(){
var form = $("form");
form.submit();
setTimeout(function() {
window.location.href = sample.url;
},100);
});
});
</script>
I wound up going the easy route of assigning value property to the button, and then checking the button value in the controller.
// View
<input type="submit" value="Submit" />
<button name="button" value="SubmitAndExpense">Submit and Add Expense</button>
// Controller
[HttpPost]
public ActionResult Create(string button)
{
if (button != "SubmitAndExpense") {...}
}

Delete confirmation for html form

I would like to add a delete confirmation to my form button
Possible javascript to use??
<script type="text/javascript">
function confirmDelete() {
return confirm("Are you sure you want to delete?");
}
</script>
This is currently working inside my form.
<input type="button" onclick="parent.location='<?php echo "delete.php?id=" . $people['id'] ?>'" value='Delete'>
How can I integrate the javascript into the onclick event? Either using the above javascript or any other way that may be better
It's possible :)
On the tag, use the attribute onsubmit like this :
<form onsubmit="return confirm('Are you sure?');">
or using a method
<form onsubmit="return myMethod">
The same for a button on onclick event. If it return false, it will be not clicked.
Remember, if the method return false, the form will not be submited
How can I integrate the javascript into the onclick event?
<input type="button" onclick="javascript:confirmDelete();" value='Delete'>
and
<script type="text/javascript">
function confirmDelete() {
var status = confirm("Are you sure you want to delete?");
if(status)
{
parent.location.replace("parent.location='<?php echo "delete.php?id=" . $people['id'] ?>'");
}
}
</script>
I hppe this will help you
It work for me
Delete
First of all add an onclick method in your HTML, like:
**HTML:**
<a class="btn btn-danger" href="some url" onclick="DeleteItem();"></a>
**JavaScript:**
function DeleteItem()
{
return confirm("Are you sure to delete this")
}
// Or you can simply do it like below:
<button onclick="javascript: return confirm('Are you sure to delete?');">Delete</button>
Bind your event handler in javascript.
<input type="button" id="delete" value='Delete' />
document.getElementById('delete').onclick = function () {
if (confirm('Are you sure?')) {
parent.location='<?php echo "delete.php?id=" . $people['id'] ?>';
}
};
Add button element with onclick event handler as below:
<input type="submit" name="delete" value="Delete" onclick="return confirmDelete();">
and the JavaScript content as below:
function confirmDelete() {
return confirm("Are you sure you want to delete?");
}
It works for me.
HTML also supports a reset button on the form, if you are not attached to using javaScript.
You can have a structure like this:
<form>
...
items in your form
...
<input type="reset">
...
</form>
When the reset button is clicked, all of the form inputs will reset to their default values.

Categories