The problem is that when you first click changes value to add to delete but the form not sent when re-clicking on add value change and the form is submitted to add.
How to do ? Click > Send > Replacement
form
<form id="favorite" method="GET" action="" enctype="multipart/form-data" target="iframe">
<input type="submit" id="fav" name="favorite" value="add"/>
</form>
js
$(function(){$('#fav').click(
function() {
$(this).val() == "add" ? delete_item() : add_item();
});
});
function delete_item() {
$('#fav').val("delete");
}
function add_item() {
$('#fav').val("add");
}
I create a jsfiddle to show you how i would do it ...
Html
<div id="MyForm">
<form id="favorite" method="GET" action=""
enctype="multipart/form-data" target="iframe">
<input type="submit" id="fav" name="favorite" value="add" />
</form>
</div>
Js
$(function() {
$("#MyForm").on('click', '#fav', function() {
$(this).val() == "add" ? delete_item() : add_item();
console.dir($(this));
return false;
});
});
function delete_item() {
$('#fav').val("delete");
}
function add_item() {
$('#fav').val("add");
}
I put a return false; so the form'll not be submited in my example, you should remove it to use the code.
I put a container div to use $.on() properly
I put a console.dir so you can debug it, you could remove it to use the code.
Related
I have a webpage with an input box and a button. If a user inputs some values (12345) an object need to appear below or instead of that form (the input box and the button).
I am handling a value check through and my whole code looks like this:
<form name="form" action="" method="post">
<input type="text" name="subject" id="subject" placeholder="UNESI KOD">
</form>
<button onclick="proveriKljuc()" style="margin-top:20px">Potvrdi!</button>
<script>
function proveriKljuc() {
if (document.getElementById("subject").value == 12345) {
document.write(
"<center><object id='object1' data='http://termodom.rs/wp-content/uploads/2016/12/akcija1-1.jpg'></object></center>"
);
}
}
</script>
Currently this code is showing a object in a new window (only a object on the page).
Also this is offtopic but if you can help, how can I handle if enter is pressed to activate function proveriKljuc()?
Don't use document.write. If you want to replace the current form:
<div id="wrapper">
<form name="form" action="" method="post">
<input type="text" name="subject" id="subject" placeholder="UNESI KOD">
</form>
</div>
<button onclick="proveriKljuc()" style="margin-top:20px">Potvrdi!</button>
<script>
function proveriKljuc()
{
if(document.getElementById("subject").value == 12345)
{
document.getElementById("wrapper").innerHTML = "<center><object id='object1' data='http://termodom.rs/wp-content/uploads/2016/12/akcija1-1.jpg'></object></center>";
}
}
</script>
If you want your object to appear under the form:
<div id="wrapper">
<form name="form" action="" method="post">
<input type="text" name="subject" id="subject" placeholder="UNESI KOD">
</form>
</div>
<button onclick="proveriKljuc()" style="margin-top:20px">Potvrdi!</button>
<script>
function proveriKljuc()
{
if(document.getElementById("subject").value == 12345)
{
document.getElementById("wrapper").innerHTML += "<center><object id='object1' data='http://termodom.rs/wp-content/uploads/2016/12/akcija1-1.jpg'></object></center>";
}
}
</script>
You can NEVER use document.write after page load. It will wipe the page. Instead have div or a span and fill the innerHTML of it or appendChild of a div created using document.createElement. return false onsubmit to stop submission or make the button type="button" - alternatively show a hidden div How to show hidden div after hitting submit button in form?
I cannot show a working example because stacksnippets do not support submit
window.onload = function() {
document.getElementById("form").onsubmit = function() {
if (this.elements["subject"].value == 12345) {
document.getElementById("objContainer").innerHTML = "<center><object id='object1' data='http://termodom.rs/wp-content/uploads/2016/12/akcija1-1.jpg'></object></center>";
}
return false; // ignore submit
}
}
<form id="form" action="" method="post">
<input type="text" name="subject" id="subject" placeholder="UNESI KOD">
<button type="submit" style="margin-top:20px">Potvrdi!</button>
</form>
<div id="objContainer"></div>
I have to call same javascript function (chek() ) from three form's on onSubmit event and need to know which one form called this function. It is three buttons. How I can transfer name of form in javascript function chek(), which one is called on submit form, and then in javascript do something with name of form as variable. Example:
<form id="one" action="" method="post" onSubmit="chek();">
<input type="hiden" id="idfi11" name="idf1">
<input type="submit" id="idfi12"> value="B1" >
<form id="two" action="" method="post" onSubmit="chek();">
<input type="hiden" id="idfi21" name="idf1">
<input type="submit" id="idfi22"> value="B2" >
<form id="three" action="" method="post" onSubmit="chek();">
<input type="hiden" id="idfi31" name="idf1">
<input type="submit" id="idfi32"> value="B3" >
This is three buttons and depend of which one is click javascript chek() chek something and
count some result. Example javascript:
<script type="text/javascript">
function chek()
{
var message1,message2,message3="";
var data="";
... count data string, and message1,message2, messag3....
if (callname = form one) // here I need name of called form
{
alert("Message one :"+ message1);
document.getElementById("idfi11").value = data;
}
if (callname = form two)
{
alert(Message two : + message2);
document.getElementById("idfi21").value = data;
}
if (callname = form three)
{alert("Message three :"+message3);document.getElementById("idfi22").value = data;}
return (true);
}
</script>
Thank You very much for reply...
Try something like this
HTML
<form id="one" name="one" action="" method="post" onSubmit="chek(this);">
JAVASCRIPT
function chek(obj){
alert(obj.id);// will give you ID of form
alert(obj.name);// will give you NAME of form
}
Don't forget to add name attribute to form.
I do this
<form id="one" action="" method="post" onSubmit="chek(this);">
...
Javascript
function chek(vforma)
{
alert(vforma.id); // result= 'one'
...
}
Javascript :
chek(this);
Jquery :
$(element).closest("form").attr("id");
Hi i have have this form that i do no want to perform an action when the submit button is clicked. All i want to do is perform the a function that loads data into a div. Any Ideas??
<form method="POST" action="" id="search-form">
<input type="text" name="keywords" />
<input type="submit" value="Search" id="sButton" onclick="loadXMLDoc('file.xml')" />
</form>
onclick="loadXMLDoc('file.xml'); return false;"
or even better:
<script>
window.onload = function() {
document.getElementById("search-form").onsubmit = function() {
loadXMLDoc('file.xml');
return false;
};
};
</script>
To implement loadXMLDoc, you can use the ajax module in jQuery. for example:
function loadXMLDoc() {
$("div").load("file.xml");
}
Final code using jQuery:
<script>
$(function() {
$("#search-form").submit(function() {
$("div").load("file.xml");
return false;
});
});
</script>
I think you need ajax function to load data with in div without page reload
Change input type submit to button
<input type="button" value="Search" id="sButton" onclick="AjaxSend()" />
Ajax CAll:
<script type="text/javascript">
function AjaxSend(){
$.get('file.xml', function(data) {
$('div').html(data);
});
}
</script>
use prevent defaults to avoid form action.please refer the code below it might help you
function createRecord(){
event.preventDefault();
}
<form>
<input type="text"/>
<input type="submit" onclick="createRecord()"/>
</form>
just remove action param from form and add onsubmit="return false". It will return false everytime you click on any button in your form.
Try like this:
<form method="POST" onsubmit="return false" id="search-form">
<input type="text" name="keywords" />
<input type="submit" value="Search" id="sButton" onclick="loadXMLDoc('file.xml')" />
</form>
<form name='frm' action="Readcsvv" enctype="multipart/form-data" method="POST" >
<input type="file" name="file1"><br><br>
<input type="Submit" value="Upload File" onclick="showProgress()" method="POST">
<script>
function showProgress() {
if(document.frm.file1.value == "")
{
alert('Please upload a file');
}
else
{
document.getElementById('progress').style.display = 'block';
}
}
</script>
In my jsp file I have the above code. If there is no file selected the alert('Please upload a file') is displayed successfully . But it calls the servlet program Readcsvv and goes to the next page.
After diplaying the alert box i want to program to be in same page. What should I do for that?
<input type="Submit" value="Upload File" onclick="return showProgress()" method="POST">
use this with return false
Try below,
<form name='frm' action="Readcsvv" enctype="multipart/form-data" method="POST" >
<input type="file" name="file1"><br><br>
<input type="Submit" value="Upload File" onclick="return showProgress();" method="POST">
<script>
function showProgress() {
if(document.frm.file1.value == "")
{
alert('Please upload a file');
return false;
}
else
{
document.getElementById('progress').style.display = 'block';
return true;
}
}
</script>
Try this:
<form name='frm' action="Readcsvv" enctype="multipart/form-data" method="POST" onSubmit="return false;">
If this were jQuery you would have to return false at the end of an onClick event handler. I would try return false;.
You also need to change your onclick attribute to be an onsubmit attribute on the form element.
Let's say I have this form and script:
<SCRIPT LANGUAGE="JavaScript">
function handleSubmit() {
return false;
}
function Delete(element) {
var is_confirmed = confirm("Delete this record? \n" + title + " " + date);
if (is_confirmed) {
document.getElementById("Novinky").submit();
}
}
</SCRIPT>
<form action="index.php" method="post" id="Novinky" onsubmit="return handleSubmit();">
<input onclick="Delete(this)" value="Smazat" name="delete[12]" type="submit" />
</form>
Is there a way to get the submit button data (delete[] -> Smazat) to the POST request?
It seems that you are submitting a different form than the one that contains the Delete button (id=Novinky). In this case you could add a hidden field in this form and set it's value to the value of the Delete button just before submitting it:
if (is_confirmed) {
document.getElementById('myhiddenfield').value = element.value;
document.getElementById('Novinky').submit();
}
UPDATE:
Instead of attaching a click handler to the delete button you could do this:
<script type="text/javascript">
function handleSubmit() {
return confirm('Delete this record?');
}
</script>
<form action="index.php" method="post" id="Novinky" onsubmit="return handleSubmit();">
<input value="Smazat" name="delete[12]" type="submit" />
</form>
This will automatically post the value of the Delete button when you submit it.
UPDATE2:
<script type="text/javascript">
function handleSubmit() {
// check which button was clicked:
alert(window.clicked);
return confirm('Delete this record?');
}
</script>
<form action="index.php" method="post" id="Novinky" onsubmit="return handleSubmit();">
<input onclick="window.clicked=this.value;" value="Smazat" name="delete[12]" type="submit" />
</form>
I've just found out that this code does the trick:
<SCRIPT LANGUAGE="JavaScript">
function Delete(element) {
var is_confirmed = confirm("Delete this record? \n" + title + " " + date);
return is_confirmed;
}
</SCRIPT>
<form action="index.php" method="post" onsubmit="return handleSubmit();">
<input onclick="return Delete(this)" value="Smazat" name="delete[12]" type="submit" />
</form>
However, I'm still interested whether there is an answer to my original question
Java Script
document.cookie = "button="+element.value+";path=/<path of php file>; domain="+window.location.hostname+";";
PHP
<? echo $_COOKIE["button"]; ?>
be sure to supply the php path. or just set the path of the current page.
e.g: path=/sample
dont include the php page.