Submitting the form with subsequent replacement value - javascript

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

Inserting <object> in current html form

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>

How to take form name, from which, on submit, is call javascript function in this jscript function and then use name in same js function as variable

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");

How to disable submit action

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>

Problem while calling a javascript function using jsp

<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.

How to get submit button POST Data while submitting by JavaScript form.submit()

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.

Categories

Resources