Result from JS function shows up and dissapears - javascript

I have a JavaScript function:
function SaskaitisanasFunkcija(){
var x = document.forms[0].elements[0].value;
var y = document.forms[0].elements[1].value;
var saskaitisana = parseFloat(x)+parseFloat(y);
document.forms[0].elements[6].value = saskaitisana;}
And a form, that includes this:
<form>
Pirmais skaitlis: <input type="text"><br>
Otrais skaitlis: <input type="text"><br>
Matemātiskā darbība:
<button onclick="SaskaitisanasFunkcija()">+</button>
<button onclick="AtnemsanasFunkcija()">-</button>
<button onclick="ReizinasanasFunkcija()">*</button>
<button onclick="DalisanasFunkcija()">/</button><br>
<b>Rezultāts</b><input type="text">
</form>
What happens is that when I press the button, that has the function "SaskaitisanasFunkcija()" attached to it, the result shows up in the "Rezultāts" input window (not sure how to call it any other way) and dissapears instantly. Can anyone explain why does that happen and give me a hint how to fix the problem?

It happens because the form gets submitted and the page reloads, add the parameter type="button" to the button element
<button type="button" onclick="SaskaitisanasFunkcija()">+</button>
and the form should no longer submit and reload when you click it

Related

queryselector onclick function gets rejected by DOM

Okay so here is the thing. I added a simple form like this:
<form class="form form--character">
<h1 class="title title--characters">Choose Players</h1>
<div class="form--inputs">
<input type="text" class="input input--players" placeholder="Player 1"><br>
<input type="text" class="input input--players" placeholder="Player 2"><br>
<input type="text" class="input input--players" placeholder="Player 3"><br>
<input type="text" class="input input--players" placeholder="Player 4"><br>
</div>
<br>
<button class="btn btn--add-characters">Add Player</button>
<button class="btn btn--continue">Continue</button>
</form>
The button called btn--add-players has the job to add another input into the div of inputs, which looks something like this:
window.onload =function(){
var players=[];
var playerInputCount=4;
var form = document.querySelector(".form--inputs");
document.querySelector(".btn--add-characters").onclick=function(){
playerInputCount+=1;
form.innerHTML = form.innerHTML + "<input type='text' class='input input--players' placeholder='Player " + playerInputCount + "'><br>";
}
}
The problem now is.. when I click the button, the input gets added to the page, but within milliseconds the DOM seems to get resettet and the Input isnt there anymore.
I put a console log into the function to have a look if it still lands in the console after clicking.
It lands in the console but also within milliseconds the console log is away.
How to fix that issue?
The button is inside a form, so when you click the button, it submits the form. Add type="button".
<button class="btn btn--add-characters" type="button">Add Player</button>
When element is placed within a , its default action will be as a form submit button unless type="button" attribute is specified.
The additional elements created are dismissed because the button submits the . To prevent that from happening, add type="button" attribute for the button with "btn btn--add-characters" class, and it'll be okay.

hello message function in js [duplicate]

I am new to javascript and on every simple thing i get some kind of problem but this seems un-solve-able to me. I googled and nothing simillar.
After i input data into textbox and store it into variable, i print out variable in paragraph.
Problem is that output i printed out disappears within less than second. Code seems to be normal, what might it be? It looks like c when you dont put getch();
Thanks in advance.
<form>Unesite broj koji ce se ispisat kasnije.<br>
<input type="text" id="userInput">
<input type="submit" name="unos" value="Unesi i ispisi" onclick="unesi()"><br><br>
</form>
<br><br>
<p>Unjeli ste <b id="ispis"></b></p>
<script>
function unesi(){
var userInput = document.getElementById('userInput').value;
document.getElementById('ispis').innerHTML = userInput;
}
</script>
The <form> tag doesn't specify an action attribute, so when you click the submit button, the browser will submit the form to the current URL - which will look a lot like the page is refreshing.
If you want to run the unesi function when the user clicks submit and prevent the HTML form from submitting, you need to change it slightly:
<input type="submit" name="unos" value="Unesi i ispisi"
onclick="unesi(); return false;">
The return false prevents the form from submitting itself.
Because the form submits and refreshes the page. Cancel the form request.
<input type="submit" name="unos" value="Unesi i ispisi" onclick="return unesi()">
and the function
function unesi(){
var userInput = document.getElementById('userInput').value;
document.getElementById('ispis').innerHTML = userInput;
return false;
}
better option is to do it on the form level
<form action="#" method="get" onsubmit="return unesi()">
Instead of cancelling the form submitting, another option is to change
<input type="submit" name="unos" value="Unesi i ispisi" onclick="unesi()">
to
<input type="button" name="unos" value="Unesi i ispisi" onclick="unesi()">
This will make it so the form does not try to submit at all when the button is pressed.

change form element before submit with javascript

In the below code I am able to get the alert message to display correctly displaying the message and the number "3". Does anyone know how to use that passes variable/number to declare a form element named "priority" to be passed to the form before submitting?
My goal is to use $_POST["priority"] and generate the number 1, 2, or three based on which link/button is clicked.
<script language="JavaScript">
function submitForm(priority)
{
alert("Changing to Priority " + priority);
document.frm.submit();
}
</script>
<span class="label">Low</span>
<span class="label">Medium</span>
<span class="label">High</span>
Add a hidden field in the form:
<input id='priority' name='priority' type='hidden'/>
Before the last form submit call, add something like this:
document.getElementById('priority').value = priority;
You don't need any script, use 3 submit buttons:
<button type="submit" name="priority" value="1">Priority 1</button>
<button type="submit" name="priority" value="2">Priority 2</button>
<button type="submit" name="priority" value="3">Priority 3</button>
Only the one that is clicked will send it's value to the server.

using javascript to modify form action submits form without doing submit

I have an HTML form that I submit after changing the action with some javascript. Two different buttons can do the submit.
The interesting thing is that I was trying to debug it and inserted an alert after changing the action and before submitting the form. The form is submitted without the alert ever being displayed. To make sure it's actually performing the javascript, I added an alert before changing the action. That alert displays; the alert after changing the action does not.
<form name='FormSelect' method='post' action='Undefined'>
...
<button onclick="SubmitForm('class')">Submit</button>
...
<button onclick="SubmitForm('student')">Submit</button>
...
</form>
<script type="text/javascript">
function SubmitForm(target){
alert("Action 1: " + document.FormSelect.action);
if (target=="class") {
document.FormSelect.action = "ClassAction.php";
} else {
document.FormSelect.action = "StudentAction.php";
}
alert("Action 2: " + document.FormSelect.action);
// document.FormSelect.submit();
}
</script>
Is that the expected sequence of events?
Any button placed inside form element will cause submit action. To prevent this you can add type="button" to button elements, or make you submit callback return false;
<button type="button" onclick="SubmitForm('class')">Submit</button
see http://jsfiddle.net/yD2Uu/
As the others have already pointed out the form will be submitted anyway if you don't cancle the event. I want to suggest a JavaScript free solution to your problem.
<button formaction="ClassAction.php">Submit</button>
<button formaction="StudentAction.php">Submit</button>
It's not supported in IE < 10 though. But you can still use your function as a fallback then, just a bit more elegant ;)
function SubmitForm(button){
button.form.action = button.formaction;
}
A better solution is to give the buttons a name each and submit to Action.php and let the server get the value of the named button
$student = filter_var($_POST["student"], FILTER_SANITIZE_STRING); // php5 cleaning
when you have
<form method="post" action="Actions.php">
<input type="submit" name="student" value="John Doe" />
<input type="submit" name="student" value="Jane Doe" />
<input type="submit" name="student" value="Whatever Doe" />
</form>
Otherwise if you must
Try this
<form method='post' action='Undefined'>
...
<input type="button" value="Class" onclick="SubmitForm(this)" />
...
<input type="button" value="Student" onclick="SubmitForm(this)"/>
...
</form>
<script type="text/javascript">
var actions = {
"class":"ClassAction.php",
"student":"StudentAction.php"
}
function SubmitForm(button){
button.form.action = actions[button.value];
button.form.submit();
}
</script>
Thanks to Yauhen Vasileusky's example, I started removing code between my 1st & 2nd alerts and found that the problem seems to be the following IF statement:
if (document.FormSelect.FormName.value.substr(0,19)=="ObservationRequest_" || document.FormSelect.FormName.value=="StudentReg2013rx" || document.FormSelect.FormName.value=="Toddler Update Form v3rx")
{
document.FormSelect.action = "GenerateXDP.php";
}
When I remove it, both alerts are displayed. So the answer to my question is that changing the action does not submit the form; it was some other error in my code that made it appear as if that was the case.

open new popup window and return value

I am trying to open a new popup window, insert values into database, after that return one value to current window. After I open a new popup window and click return, it returns the value but when I click on submit and return it after that, the value doesn't get returned. I think that's because the new window gets refreshed by the submit button. That's why it doesn't return the value.
Main Page
<form></form>
<form>
<input name="maparea" size="2" type="TEXT">
<input onclick='targetitem = document.forms[1].maparea; dataitem = window.open("popup.php", "dataitem", "toolbar=no,menubar=no,scrollbars=yes"); dataitem.targetitem = targetitem' value="Get Value" type="button">
</form>
Popoup window
<script>
function select_item(item){
targetitem.value = item;
top.close();
return false;
}
</script>
<form action="" method="post">
<input type="submit" name="sub" value="Submit" />
<input type="button" name="re" value="Return" onclick='return select_item("3")' />
</form>
Any solution for that?
I want to submit what I want first after that return the value
In the popup, hook an onclick event on your submit button so it executes before the submit.
Then in the onclick handler do:
window.opener['dataitem'] = <your return value>;
Then after the submit, your parent window will have that value, and you can access it like this:
var somevariable = window['dataitem'];
function setColor(color){ if (opener && !opener.closed){ opener.document.theForm.theField.value = color; opener.focus(); } window.close(); } ... <td width="30" bgcolor="#FFFF00" onclick="setColor(this.bgColor)"> </td>
Read more at http://www.codingforums.com/showthread.php?t=61319#gkH9pd6gdgvxYqQZ.99
How about this?
Open your popup.
In the popup: submit the form via AJAX (to avoid a page refresh).
In the popup: In the success handler for your AJAX call, grab the desired value, pass it back using window.opener, then close the popup.

Categories

Resources