Change value of input field inside form with 'getElementById' - javascript

<html>
<head>
</head>
<body>
<form>
<input type="number" id="number1">
<input type="number" id="number2">
<button onclick="dosomething">Click Me</button>
</form>
<script>
function dosomething(){
document.getElementById("number2").value=document.getElementById("number1").value
}
</script>
</body>
</html>
The JS function would change the number inside the second input field of the form, but it's not happenning.
May I know what went wrong? Thanks!

By default, a <button> will submit it's parent <form> so your page gets directed to the action (since this is empty, likely the page gets POSTed to the current URL). You need to update your function to stop this from happening. You also need to execute the function in your onclick handler: in its current form, no function is called. onclick="foo" isn't one - onclick="foo(event)" is.
HTML:
<!-- Pass the event object through to your function -->
<button onclick="dosomething(event)">Click Me</button>
Script:
function dosomething(e){
// Stop form submission
e.preventDefault();
document.getElementById("number2").value=document.getElementById("number1").value
}
function dosomething(e){
e.preventDefault();
document.getElementById("number2").value=document.getElementById("number1").value
}
<form>
<input type="number" id="number1">
<input type="number" id="number2">
<button onclick="dosomething(event)">Click Me</button>
</form>
<script>
</script>

Replace your button with following line
<button onclick="dosomething()">Click Me</button>

Related

Replace div after form submit

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#submit").click(function(){
$("#p").replaceWith($("#p1"));
});
});
</script>
</head>
<body>
<div id="p">This is a paragraph.</div>
<div id="p1">Replacement</div>
<form action="" method="get">
<input type="submit" id="submit" name="submit" value="Search"/>
</form>
</body>
</html>
This code works fine until I put form action.. When I keep that submit in a form, this code does not work. How can i replace that div after form submit. Thanks.
You can try this one. Hope it helps!
$(document).ready(function(){
$("#submit").click(function(event){
$("#p").replaceWith($("#p1").text());
return false;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div id="p">This is a paragraph.</div>
<div id="p1">Replacement</div>
<form action="" method="get">
<input type="submit" id="submit" name="submit" value="Search"/>
</form>
you need text method for that .
you were removing entire element before . you need to remove only text value
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#submit").click(function(){
$("#p").replaceWith($("#p1").text());
});
});
</script>
</head>
<body>
<div id="p">This is a paragraph.</div>
<div id="p1">Replacement</div>
<input type="submit" id="submit" name="submit" value="Search"/>
</body>
</html>
Specify what to replace it with:
$(this).replaceWith("<div><p>Replacement</p></div>");
Form submission needs to be done using AJAX then only you can achieve this which you want to do.
Otherwise the form will submit and page will refresh which will result to re initialization of script.
As Pooojaaqaa and Rayon mention the when the action attribute is set on the form tag, the form is submitted and the page is reloaded (even if action="#"). To catch this action you need to catch the form's submit event, not the button's click event. In the submit event handler you need to call preventDefault() on the event object passed into the handling function like below.
<form id="frmSearch" action="#" method="get">
<input type="submit" id="submit" name="submit" value="Search"/>
</form>
$("#frmSearch").submit(function(ev){
ev.preventDefault();
$("#p").replaceWith($("#p1").text());
});

HTML JS error logging input

<p>Enter some text</p>
<form>
<input type="text" id="userInput">
<button onclick="log();">Go!</button>
</form>
<script>
function log() {
var input = document.getElementById("userInput").value;
console.log(input);
}
</script>
When I click the button, it refreshes the page, clearing the log. I originally tried using <input type="submit"> but when I click any type of button, it refreshes. How would I stop this?
try with:
<p>Enter some text</p>
<form action="" method="">
<input name="userInput" type="text" id="userInput" />
<button type="button" onclick="log()">Go!</button>
</form>
<script>
function log() {
var input = document.getElementById("userInput").value;
console.log(input);
return false;
}
</script>
only add return false to you js.
Learn about stopPropagation.
<p>Enter some text</p>
<form>
<input type="text" id="userInput">
<button type="button" onclick="log();">Go!</button>
</form>
<script>
function log() {
var input = document.getElementById("userInput").value;
console.log(input);
}
</script>
So just add type="button"
Difficult to say with your example, but generally if you are trying to prevent an action that would do something like a page refresh from carrying out that default behavior, you would use the preventDefault method on the event handler. So your function would become
function log(e) { // passing in the event to the handler as "e"
var input = document.getElementById("userInput").value;
console.log(input);
e.preventDefault();
}
edit:
Updated with Patrick's notes in mind, although I still don't see an attempt to page refresh in the snippet, even with no type attribute, or type of button or submit.
<p>Enter some text</p>
<form action="" method="">
<input name="userInput" type="text" id="userInput" />
<button onclick="log(event)">Go!</button>
</form>
<script>
function log(e) {
var input = document.getElementById("userInput").value;
console.log(input);
e.preventDefault()
}
</script>

jQuery button click not submitting button value

I'm having some trouble getting the following code to work. I have a form that has several buttons on it. The first button has a class of ButtonAdditionalDelete. When it is clicked, it should then inspect the object for a data tag and then set the value of the tag to a hidden variable. Finally, it should then click the button with the id of saveAnswerButton.
However, when the form is submitted back to the server, the action variable from the button is not present. Any ideas?
<form action="/Area/Controller/Action/id?otherField=value" method="post">
#Html.HiddenFor(model => Model.SelectedSequenceNumber)
<button class="ButtonAdditionalDelete" data-sequence-number="1">Delete</button>
<button name="action" value="AnswerEdit" id="saveButton">Save</button>
<button name="action" value="AnswerEditAndAdd">Save and Add New</button>
<button name="action" value="AnswerEditAndReturn">Save and Return</button>
</form>
<script type="text/javascript">
$(".ButtonAdditionalDelete").on("click", function () {
var sequenceNumber = $(this).data("sequenceNumber");
$("#SelectedSequenceNumber").val(sequenceNumber);
$("#saveButton").click();
});
</script>
Shouldn't
$("#saveButton").click();
supposed to be
$("#saveAnswerButton").click();
that's a security measure. the name and value of a button will only be sent if it's a human click.
you'll have to keep a hidden input called action, then change it's value just before simulating the form submit:
<form method="post">
<input id="hiddenAction" name="action" type="hidden" value="">
<button class="ButtonAdditionalDelete" data-sequence-number="1">Delete</button>
<button name="action" value="AnswerEdit" id="saveAnswerButton">Save</button>
<button name="action" value="AnswerEditAndAdd">Save and Add New</button>
<button name="action" value="AnswerEditAndReturn">Save and Return</button>
</form>
<script type="text/javascript">
$(".ButtonAdditionalDelete").on("click", function () {
var sequenceNumber = $(this).data("sequenceNumber");
$("#SelectedSequenceNumber").val(sequenceNumber);
$("#hiddenAction").val($("#saveAnswerButton").val());
$("#saveAnswerButton").click();
});
</script>
Well, you are using sequenceNumber but your attribute is called sequence-number.

can I click one button and use the action of another?

I have two buttons, and I want to apply one action to another. For example.
<form>
<input type="submit" />
</form>
<input type="submit" />
I want to make the second button submit the form, despite being outside of the form.
You should make them of type button, and give your form an id.
Markup:
<form id="myForm">
<---STUFF---->
<input type='button' id='otherButton'>
</form>
<input type='button' id='someButton'>
jQuery:
$('#someButton').click(function() { $('#myForm').submit(); });
$(':input:last').click(function()
{
$('form').submit();
});
// enable form submit on the second <input>
$('input[type=submit]').click(function(){
$('form').submit();
});
// disable the inner <input>
$('form input[type=submit]').click(function(){
return false;
});
Something like this should do your trick.
If you want the second button to do everything the first can do (not just submit), you can try something like this:
html
<form>
<input id="insideButton" type="submit" />
</form>
<input id="outsideButton" type="submit" />
jsJQUERY
$("#outsideButton").click(function() {
$("#insideButton").trigger("click");
});
you can using jQuery $("#test").click() if you have jQuery instead of the document... stuff below or the way below will work without jQuery
<form name="testForm1">
<input type="submit" id="test" />
</form>
<!-- use this when not in a form: -->
<button onclick="button1_click();" id="button1"></button>
In your head tag
<script type="text/javascript">
function button1_click(){
document.forms.testForm1.submit();
}
</script>
Changed for the users that put performance under clean code

javascript function

i have Html document A.html and javascript file A.js, how to write a code in javascript within html body THAT SPECIFIES FUNCTION res AS THE EVENT HANDLER FOR THE onclick EVENT FOR THE BUTTON DEFINED IN THE FORM?
A.html-----------
<body>
<form>
<input type = "button" id="butt1" value = "Press for Results" /><br />
</form>
<script type="text/javascript">
</script>
</body>
This is a pretty poorly written question, but I think what you want to do is pretty straightforward. When you include an external script with
<script type="text/javascript" src="A.js"></script>
It's all there for the following execution. Thus if A.js has the following:
function res() {
...
}
You can use specify that in your HTML, as such:
<button onclick="res()" value="call res()">
I think this is what you mean..
a.html:
<head>
<script type="text/javascript" src="a.js"></script>
</head>
<body>
<form>
<input onclick="javascript:res();" type="button" id="butt1" value="Press for Results" /><br />
</form>
</body>
a.js:
function res()
{
alert("function logic to go here");
}
If you want all the code on the one page..
<head>
<script type="text/javascript">
function res()
{
alert("function logic to go here");
}
</script>
</head>
<body>
<form>
<input onclick="javascript:res();" type="button" id="butt1" value="Press for Results" /><br />
</form>
</body>
A.html
<script type="text/javascript" src="A.js">
<form>
<input type="button" name="test" value="Click me" onclick="inform()">
</form>
A.js
function inform(){
alert("You have activated me by clicking the grey button! Note that the event handler is added within the event that it handles, in this case, the form button event tag")
}
All at once
<script type="text/javascript">
function inform(){
alert("You have activated me by clicking the grey button! Note that the event handler is added within the event that it handles, in this case, the form button event tag")
}
</script>
<form>
<input type="button" id="button" name="test" value="Click me" onclick="inform()">
</form>
Calling function in javascript
if(condition in which you want onclick to b called)
document.getElementById('button').click();

Categories