I have a submit input as:-
<form method="POST">
<input onclick="myFunction()" type="submit" name="like" id="like" value="LIKE">
</form>
If the user presses it, I want to change it to "LIKED" and if it is pressed again, I want to change it back to "LIKE". For this, I wrote this JS code:-
<script>
function myFunction() {
var x=document.getElementById("like");
if(x.value=="LIKE") x.value="LIKED";
else x.value="LIKE";
}
</script>
Now the problem is that it does change, but that change lasts for a very small fraction of time. I can see it getting changed to LIKED, but it changes back to LIKE very quickly. I can't understand what I'm doing wrong. Please help. Thanks!
The problem is your form element, as action did't defined , when action not defined for form element it means action path is relative or point to the current page so in your example the form submits to itself and after submitting the content will be refreshed, so the clicked title will be changed to click(the first state).
in the other hand Form is a HTML page when you post or get it, it's content get refreshed.
Update:
If you want to hold the state of button, it would be better to move out the button outside of form and then submit form manually something like:
<form id="myform" method="POST">
</form>
<input onclick="myFunction()" name="like" id="like" value="LIKE" type="button" >
function myFunction() {
var x=document.getElementById("like");
if(x.value=="LIKE") x.value="LIKED";
else x.value="LIKE";
document.getElementById("myform").submit();
}
Related
I have a form which has a cancel button, a save (submit) button and a save continue link. Now the buttons work and the javascript is called via a function called from the form onsubmit method. This works as expected as does the cancel button. however the save and continue is not working. Follows is a simplified example:
<form id="save-form" class="admin-form" method="post" action="save-job" onsubmit="return jobFormSave(this);">
<input type="text" name="data" value="">
← cancel
<input class="button" type="submit" value="save">
<a class="button oklink" onclick="document.getElementById('save-form').submit();">ok →</a>
</form>
And the javascript for simplification just alerts ok (the real example has an ajax call to the save-job action):
<script>
window.jobFormSave = function (aForm) {
alert( "Ok" );
}
</script>
So when i click Save button the form is validated, saved and a message is displayed. Clicking on the Ok link however triggers the form submit action (save-job) but i want it to use the jobFormSave function. So I've a few questions:
can this be done while submitting the form data to the function?
can i determine whether i clicked the ok or the save button from within the javascript (or if not within the save-job action function)?
Is there a better way to achieve what seems an everyday thing.
I'm using php 7.2 to handle the forms action functionality and jQuery is available and used for the ajax query in the actual code.
I've kept the code short as mostly it is not relevent to the question but I can provide more code if you guys need it.
Probably you are looking for:
<script>
window.jobFormSave = function (aForm, action) {
alert('User '+ action + " form with data "+ JSON.stringify(aForm))
if (action == 'okayed')
aForm.submit();
}
</script>
<form id="save-form" class="admin-form" method="post" action="save-job" onsubmit="return jobFormSave(this, 'submitted');">
<input type="text" name="data" value="">
← cancel
<input class="button" type="submit" value="save">
<a class="button oklink" href="javascript:{}" onclick="return jobFormSave(document.getElementById('save-form'), 'okayed');">ok →</a>
</form>
Form can be passed as an argument as I did in anchor tag's onclick and then it can be decided to submit at function level based on the action
I have a form that submits data along with images that are uploaded with an onchange ajax function inside the form. They are added with hidden tags when the upload runs, but the problem is that the last image upload is running again when the form is submitted, probably because of the onchange function being inside the form.
Is there any way to prevent the onchange from running again when somebody clicks the submit button? The structure is like this:
<form id="upload_form" action="new.php" method="post" enctype="multipart/form-data" name="ad_create_form">
<input class="upload_button" type="file" name="item_file_upload_1" id="item_file_upload_1"
onchange="media_sync(ad_create_form, 1,
this.form.item_file_upload_1,
document.getElementById('item_file_url_1').value,
document.getElementById('item_file_embed_1').value,
document.getElementById('nb_uploads_1').value,
5,
'000000015');" />
<input name="finish" id="finish" value="Add" type="submit" class="btn">
</form>
So I'd need the onchange to run as many times as somebody clicks on the upload button, but not anymore when somebody clicks on the submit button. Is that possible?
This is more of a brainstorming idea than a decent answer, but hopefully it will give you ideas that lead to a solution.
Simplistic idea: create a var that tells you if the submit button has been pressed, and look for it in the onchange function.
For example:
var no_run = false;
function media_sync(data){
if (!no_run){
//ajax code goes here - files uploaded
}
}
$('form').submit(function(){
no_run = true;
});
Note that you must define the no_run var outside any functions.
jsFiddle to play with
I just found out that every time onclick event for my <button> placed inside <form> tag triggers, form submits it's data as if i clicked <input type='submit'>.
I don't want that. Buttons inside my form serve other task, form shouldn't submit data after i clicked one of them.
To be more clear, i want this code:
<form action="http://www.google.com" method="POST">
<button onclick="alert('hi!')">Button</button>
<br>
<input type="submit" value="submit"/>
</form>
to show alert "hi!" when i click on the Button and it shouldn't open Google after that. It should only show Google when i press "submit".
Specify type="button":
<button type="button" onclick="alert('hi!')">Button</button>
From the linked article:
This [submit] is the default if the attribute is not specified
Try this..
onclick="alert('hi!'); return false;"
With jQuery use a span rather than an input, put use the .button call and then set a click event.
I'm a newbie to scripting. I want to update HTML content with JavaScript, but as you can see
the web page keeps refreshing.
How can I prevent the page from refreshing?
Javascript:
function showResult(form) {
var coba=form.willbeshown.value;
var coba2=coba+2;
document.getElementById("showresulthere").innerHTML=coba2;
}
HTML
<form>
<input type="text" name="willbeshown" value="">
<button onclick="showResult(this.form)">Ganti1</button>
</form>
<p id="showresulthere">Result will be shown here</p>
</body>
Don’t use a form at all. You are not submitting any form data to a server. To process data in the browser, you don’t need a form. Using a form just complicates things (though such issues could be fixed by using type=button in the button element, to prevent it from acting as a submit button).
<input type="text" id="willbeshown" value="">
<button onclick=
"showResult(document.getElementById('willbeshown'))">Ganti1</button>
<p id="showresulthere">Result will be shown here</p>
<script>
function showResult(elem) {
document.getElementById("showresulthere").innerHTML = Number(elem.value) + 2;
}
</script>
I have used conversion to numeric, Number(), as I suppose you want to add 2 to the field value numerically, e.g. 42 + 2 making 44 and not as a string, 42 + 2 making 422 (which is what happens by default if you just use an input element’s value and add something to it.
Your button should be
<button onclick="showResult(this.form); return false;">Ganti1</button>
Javascript
function showResult(form) {
var coba=form.willbeshown.value;
var coba2=coba+2;
document.getElementById("showresulthere").innerHTML=coba2;
return false; // prevent form submission with page load
}
DEMO
The others will explain how you should use jQuery, but this would explain why it didn't work in your original code.
The <button> tag submits the form, so you have to add this inside your form tag to prevent form submission:
<form onsubmit="return false">
Btw, even without giving your form an explicit action, it uses the current page to submit; it's easy to think that it will not do anything without an action.
If you define a <button /> without defining its type it will work like a submit button. Just add type="button" to your button markup and the form won't be submitted.
<button type="button" onclick="showResult(this.form)">Ganti1</button>
With this change you won't need any return false or .preventDefault() "workarounds"
I have two submit buttons in a form that Lets user Update/ Delete content. I want a confirm pop only if the user clicks Delete button.
<html>
<head>
<script type="text/javascript">
function confirmation() {
// I need to know which submit button was pressed.
if (value==Delete){
var answer = confirm("Cancel?")
if (answer){
return true;
//Continue as intended
}
else{
return false
}
}
}
</script>
</head>
<body>
<form id="Edit_Data">
//form input fields go here
<input name="action" type="submit" onclick="confirmation()" value="Update">
<input name="action" type="submit" onclick="confirmation()" value="Delete">
</form>
</body>
</html>
Any Ideas?
First of all you have several problems with your code. The value in your if statement is an undefined variable secondly you need to put quotes around the delete. Here is working fiddle http://jsfiddle.net/SMBWd/ and the relevant code change. Also, I would encourage you to look how to do this without using javascript in your HTML.
function confirmation(e) {
// I need to know which submit button was pressed.
if (e.value=='Delete'){
and in the HTML
<input name="action" type="button" onclick="confirmation(this)" value="Update">
<input name="action" type="button" onclick="confirmation(this)" value="Delete">
For your onclick event definition in the html tag, why not call separate functions?
The simplest way would be to NOT call the javascript on the Update button.
If your form is static, then you do this in your IDE. If it's dynamic, then the dynamic code can create the form element accordingly.
If the form elements are generated automatically, then you should setup an event handler in JavaScript dynamically. Find all elements of type input with type attribute button or submit, and assign
elems[i].onclick = confirmation;
You'd then get the event object as a method parameter, and you could query that for the value of the button.