JavaScript validation-- onClick - javascript

I have the following piece of code which deletes a document when the delete image is clicked
<tr> To replace the document, you will need to first delete the current one.
<form name="delete_attachment_form" action="apr_attachment.cfc?method=delete_apr_attachment" method="post">
<input type="hidden" name="apr_attachment_id" value="#apr_attachment_id#">
<input type="hidden" name="apr_section_id" value="#apr_section_id#">
<input type="hidden" name="submit_mode" value="DELETE">
<input type="image" name="submit" src="images/delete.gif" alt="DELETE">
</form>
</tr>
Now I want to modify this and change the image to a button and put some basic JS validation so that it asks a confirmation message before deleting.
I have this as my code so far
<tr> To replace the document, you will need to first delete the current one.
<form name="delete_attachment_form" action="apr_attachment.cfc?method=delete_apr_attachment" method="post">
<input type="hidden" name="apr_attachment_id" value="#apr_attachment_id#">
<input type="hidden" name="apr_section_id" value="#apr_section_id#">
<input type="hidden" name="submit_mode" value="DELETE">
<input type="button" onClick ="return confirm('Are you sure you want to delete the current project activities document')" name="submit" Value="Delete">
</form>
</tr>
But there is no change/effect in the page when I click this button, Can anyone point out whats happening here? Thanks

Add id="form" to <form>, then
<input type="button" onClick ="if(confirm('Are you sure you want to delete the current project activities document')==1){document.getElementById('form').submit();}" name="submit" Value="Delete">

That's where the rest of the JavaScript comes in... or an AJAX call to a PHP file to perform that task for you. May I give you a couple of pointers? First, give that button element and ID, say id="deleter". Then, to clean up your inline markup, add this eventListener in your <head> section:
<script>
var d = document.getElementById('deleter');
var f = document.getElementByName('delete_attachment_form');
d.onClick = function() {
var yn = confirm('Are you sure you want to delete the current project activities document?');
// Note that the 'confirm' dialog is an obsolete construct
if (yn) {
f.submit();
}
};
</script>
HTML Markup
<tr>To replace the document, you will need to first delete the current one.
<form name="delete_attachment_form" action="apr_attachment.cfc?method=delete_apr_attachment" method="post">
<input type="hidden" name="apr_attachment_id" value="#apr_attachment_id#">
<input type="hidden" name="apr_section_id" value="#apr_section_id#">
<input type="hidden" name="submit_mode" value="DELETE">
<input type="button" id="deleter" name="deleter" Value="Delete">
</form>
</tr>

Related

Submit specific form inside foreach loop

I'm trying to submit a form like below
{foreach from=$myInfo item=list}
<tr>
<td>
<form id="formq" method="post" action="{eval var=$rootPath}/devt/index?request=getme">
<input type="text" name="taskida" value="{$list.pa_id}" >
<input type="button" onclick="addFunction();" value="Add Task">
</form></td></tr>{/foreach}
How will I submit only the pa_idwhich I click submit and not the entire list.
<script type="text/javascript">
function addFunction() {
document.getElementById('formq').submit();
}
First of all, You can assign one id to only one element. You can NOT use single ID for mutliple elements on the same page.
For example in the loop you have multiple forms after execution of loop with the same id formq. That is wrong. You have to use unique ID for each element.
So try your code in something like this:
HTML/PHP
{foreach from=$myInfo item=list}
<tr>
<td>
<form id="formq_{$list.pa_id}" post" action="{eval var=$rootPath}/devt/index?request=getme">
<input type="text" name="taskida" value="{$list.pa_id}" >
<input type="button" onclick="addFunction({$list.pa_id});" value="Add Task">
</form></td></tr>
{/foreach}
Javascript
<script type="text/javascript">
function addFunction(id) {
document.getElementById('formq'+id).submit();
}
solved it
using $list.pa_id as form id and passing it to script
<input type="button" onclick="addFunction($list.pa_id);" value="Add Task">
<script type="text/javascript">
function addFunction(id) {
document.getElementById(id).submit();

pass input value to another form on a diff url and run submit wordpress

I have 2 forms, 1st form is to submit an input value to the next page, and on the next page there's the 2nd form which is a search map function.
the 1st form is displayed on the homepage
<form role="search-map" method="" id="search-map" action="/find">
<h4>Where To Buy</h4>
<input type="text" class="form-control" id="addressInput" name="addressInput" placeholder="Your Suburb or Postcode">
<button type="submit" class="btn btn-vc btn-default btn-lg" id="search-address-btn">Find</button>
</form>
the 2nd form is on another page which is /find that has a map search plugin
<form onsubmit="cslmap.searchLocations(); return false;" id="searchForm" action="">
<input type="text" id="addressInput" name="addressInput" placeholder="Your Suburb" size="50" value="where-i-want-value-to-be-pass">
<input type="submit" class="slp_ui_button" value="Find" id="addressSubmit">
</form>
any ideas how can i pass the value from the 1st form "addressInput" to the 2nd form? and the run the search on the 2nd form? here's the 2nd form btw
i tried searching here but what i need seems to be more complex that what i have found
or maybe how can i get the 2nd page to get the value from the url (?addressInput=North+Bega%2C+NSW%2C+2550) into the 2nd form input "addressInput" and run the submit button function when the page loads?
thanks in advance guys
I'm assuming you want to get the value from s to the second form.
replace where-i-want-value-to-be-pass
with <?php echo $_REQUEST['addressInput']; ?>
<form onsubmit="cslmap.searchLocations(); return false;" id="searchForm" action="">
<input type="text" id="addressInput" name="addressInput" placeholder="Your Suburb" size="50" value="<?php echo $_REQUEST['addressInput']; ?>">
<input type="submit" class="slp_ui_button" value="Find" id="addressSubmit">
</form>

JavaScript Handling the onClick return value

I have the following code to delete a document
<tr> To replace the document, you will need to first delete the current one.
<form name="delete_attachment_form" action="apr_attachment.cfc?method=delete_apr_attachment" method="post">
<input type="hidden" name="apr_attachment_id" value="#apr_attachment_id#">
<input type="hidden" name="apr_section_id" value="#apr_section_id#">
<input type="hidden" name="submit_mode" value="DELETE">
<input type="submit" onClick ="confirm('Are you sure you want to delete the current project activities document')" Value="Delete">
</form>
But this is deleting the document irrespective the user clicks ok/cancel, I want the document to be deleted only for ok, how should I proceed?
Here's a one-liner edit to your submit button:
<input type="submit" onClick ="if(!confirm('Are you sure you want to delete the current project activities document')) return false;" Value="Delete">
Try this:
HTML:
<input type="submit" onClick ="return checkForm()" Value="Delete">
JS:
function checkForm() {
if (confirm("Are you sure")) {
alert("Clicked Ok");
return true;
} else {
alert("Clicked Cancel");
return false;
}
}

javascript function call for single form

I have multiple forms in my php file for different buttons. So, if I click on Back button, ramesh.php script should be called and so on. This is the code.
<form action="ramesh.php">
<input type="submit" value="Back" />
</form>
<form action="process.php" method="post">
<input name="rep_skyline" type="text" />
<input type="submit" />
</form>
<form action="update.php" method="post" >
<button type="submit">Update</button>
</form>
However, I need to pass some data to server from my client side on form submit just for the update button. I have a javascript function to send the data to server side as below.
<script type="text/javascript">
$(document).ready(function() {
$('form').submit(function(e) {
var mydata = 3;
if ($(this).is(':not([data-submit="true"])'))
{
$('form').append('<input type="hidden" name="foo" value="'+mydata+'">');
$('form').data('submit', 'true').submit();
e.preventDefault();
return false;
}
})
})
</script>
If I click on the update button, the javascript function is working fine. However, if I click on Back or Submit button, I should not be calling the javascript function. Is there someway to do this?
Give your form an id:
<form action="update.php" method="post" id="update-form">
Then use a more specific selector:
$("#update-form").submit(function() {
// Code
});
I'm not quite sure why you need JavaScript to dynamically add data to your form, however. You should just use an <input type="hidden" /> directly.
type=submit will always load the form's action. Try to specify wich form to submit.
<form name="backForm" id="backForm" action="ramesh.php">
<input type="submit" value="Back" />
</form>
<form name="form2" id="form2" action="process.php" method="post">
<input name="rep_skyline" type="text" />
<input type="submit" />
</form>
Now you can access the form via document.backForm or document.getElementById("backForm") and than use submit(); like document.getElementById("backForm").submit();

HTML form with two submit buttons and two "target" attributes

I have one HTML <form>.
The form has only one action="" attribute.
However I wish to have two different target="" attributes, depending on which button you click to submit the form. This is probably some fancy JavaScript code, but I haven't an idea where to begin.
How could I create two buttons, each submitting the same form, but each button gives the form a different target?
I do this on the server-side.
That is, the form always submits to the same target, but I've got a server-side script who is responsible for redirecting to the appropriate location depending on what button was pressed.
If you have multiple buttons, such as
<form action="mypage" method="get">
<input type="submit" name="retry" value="Retry" />
<input type="submit" name="abort" value="Abort" />
</form>
Note: I used GET, but it works for POST too
Then you can easily determine which button was pressed - if the variable retry exists and has a value then retry was pressed, and if the variable abort exists and has a value then abort was pressed. This knowledge can then be used to redirect to the appropriate place.
This method needs no Javascript.
Note: This question and answer was from so many years ago when "wanting to avoid relying on Javascript" was more of a thing than it is today. Today I would not consider writing extra server-side functionality for something like this. Indeed, I think that in most instances where I would need to submit form data to more than one target, I'd probably be doing something that justified doing a lot of the logic client-side in Javascript and using XMLHttpRequest (or indeed, the Fetch API) instead.
It is more appropriate to approach this problem with the mentality that a form will have a default action tied to one submit button, and then an alternative action bound to a plain button. The difference here is that whichever one goes under the submit will be the one used when a user submits the form by pressing enter, while the other one will only be fired when a user explicitly clicks on the button.
Anyhow, with that in mind, this should do it:
<form id='myform' action='jquery.php' method='GET'>
<input type='submit' id='btn1' value='Normal Submit'>
<input type='button' id='btn2' value='New Window'>
</form>
With this javascript:
var form = document.getElementById('myform');
form.onsubmit = function() {
form.target = '_self';
};
document.getElementById('btn2').onclick = function() {
form.target = '_blank';
form.submit();
}
Approaches that bind code to the submit button's click event will not work on IE.
In case you are up to HTML5, you can just use the attribute formaction. This allows you to have a different form action for each button.
<!DOCTYPE html>
<html>
<body>
<form>
<input type="submit" formaction="firsttarget.php" value="Submit to first" />
<input type="submit" formaction="secondtarget.php" value="Submit to second" />
</form>
</body>
</html>
This works for me:
<input type='submit' name='self' value='This window' onclick='this.form.target="_self";' />
<input type='submit' name='blank' value='New window' onclick='this.form.target="_blank";' />
In this example, taken from
http://www.webdeveloper.com/forum/showthread.php?t=75170
You can see the way to change the target on the button OnClick event.
function subm(f,newtarget)
{
document.myform.target = newtarget ;
f.submit();
}
<FORM name="myform" method="post" action="" target="" >
<INPUT type="button" name="Submit" value="Submit" onclick="subm(this.form,'_self');">
<INPUT type="button" name="Submit" value="Submit" onclick="subm(this.form,'_blank');">
Simple and easy to understand, this will send the name of the button that has been clicked, then will branch off to do whatever you want. This can reduce the need for two targets. Less pages...!
<form action="twosubmits.php" medthod ="post">
<input type = "text" name="text1">
<input type="submit" name="scheduled" value="Schedule Emails">
<input type="submit" name="single" value="Email Now">
</form>
twosubmits.php
<?php
if (empty($_POST['scheduled'])) {
// do whatever or collect values needed
die("You pressed single");
}
if (empty($_POST['single'])) {
// do whatever or collect values needed
die("you pressed scheduled");
}
?>
Example:
<input
type="submit"
onclick="this.form.action='new_target.php?do=alternative_submit'"
value="Alternative Save"
/>
Voila.
Very "fancy", three word JavaScript!
Here's a quick example script that displays a form that changes the target type:
<script type="text/javascript">
function myTarget(form) {
for (i = 0; i < form.target_type.length; i++) {
if (form.target_type[i].checked)
val = form.target_type[i].value;
}
form.target = val;
return true;
}
</script>
<form action="" onSubmit="return myTarget(this);">
<input type="radio" name="target_type" value="_self" checked /> Self <br/>
<input type="radio" name="target_type" value="_blank" /> Blank <br/>
<input type="submit">
</form>
HTML:
<form method="get">
<input type="text" name="id" value="123"/>
<input type="submit" name="action" value="add"/>
<input type="submit" name="action" value="delete"/>
</form>
JS:
$('form').submit(function(ev){
ev.preventDefault();
console.log('clicked',ev.originalEvent,ev.originalEvent.explicitOriginalTarget)
})
http://jsfiddle.net/arzo/unhc3/
<form id='myForm'>
<input type="button" name="first_btn" id="first_btn">
<input type="button" name="second_btn" id="second_btn">
</form>
<script>
$('#first_btn').click(function(){
var form = document.getElementById("myForm")
form.action = "https://foo.com";
form.submit();
});
$('#second_btn').click(function(){
var form = document.getElementById("myForm")
form.action = "http://bar.com";
form.submit();
});
</script>
It is do-able on the server side.
<button type="submit" name="signin" value="email_signin" action="/signin">Sign In</button>
<button type="submit" name="signin" value="facebook_signin" action="/facebook_login">Facebook</button>
and in my node server side script
app.post('/', function(req, res) {
if(req.body.signin == "email_signin"){
function(email_login) {...}
}
if(req.body.signin == "fb_signin"){
function(fb_login) {...}
}
});
Have both buttons submit to the current page and then add this code at the top:
<?php
if(isset($_GET['firstButtonName'])
header("Location: first-target.php?var1={$_GET['var1']}&var2={$_GET['var2']}");
if(isset($_GET['secondButtonName'])
header("Location: second-target.php?var1={$_GET['var1']}&var2={$_GET['var2']}");
?>
It could also be done using $_SESSION if you don't want them to see the variables.
Alternate Solution. Don't get messed up with onclick,buttons,server side and all.Just create a new form with different action like this.
<form method=post name=main onsubmit="return validate()" action="scale_test.html">
<input type=checkbox value="AC Hi-Side Pressure">AC Hi-Side Pressure<br>
<input type=checkbox value="Engine_Speed">Engine Speed<br>
<input type=submit value="Linear Scale" />
</form>
<form method=post name=main1 onsubmit="return v()" action=scale_log.html>
<input type=submit name=log id=log value="Log Scale">
</form>
Now in Javascript you can get all the elements of main form in v() with the help of getElementsByTagName(). To know whether the checkbox is checked or not
function v(){
var check = document.getElementsByTagName("input");
for (var i=0; i < check.length; i++) {
if (check[i].type == 'checkbox') {
if (check[i].checked == true) {
x[i]=check[i].value
}
}
}
console.log(x);
}
This might help someone:
Use the formtarget attribute
<html>
<body>
<form>
<!--submit on a new window-->
<input type="submit" formatarget="_blank" value="Submit to first" />
<!--submit on the same window-->
<input type="submit" formaction="_self" value="Submit to second" />
</form>
</body>
</html>
On each of your buttons you could have the following;
<input type="button" name="newWin" onclick="frmSubmitSameWin();">
<input type="button" name="SameWin" onclick="frmSubmitNewWin();">
Then have a few small js functions;
<script type="text/javascript">
function frmSubmitSameWin() {
form.target = '';
form.submit();
}
function frmSubmitNewWin() {
form.target = '_blank';
form.submit();
}
</script>
That should do the trick.
e.submitEvent.originalEvent.submitter.value
if you use event of form

Categories