There are similar questions at SO, but none that seem to address this.
Below is a very simplified variant of my situation. Drupal/PHP site -- I have a form w/ submit button that I am using jquery.form plugin to ajax-ly submit. It works fine if I use the submit (#submit) button.
Now, I want to programmatically fire that button using another button (#submit2) outside of the form. I can do that using jquery click() function, but the content coming back isn't going to the ajax target as I would expect.
I do not have much freedom to re-organize this code, else i would.
(Note I tried to make this code easy for you to run by src-ing jquery and the form plugin from my website.)
Ideas? Thanks!
<?php
if ($_REQUEST['submit'] == 'Submit') {
print 'ajax returns ... ' . $_REQUEST['text'];
exit;
}
?>
<html>
<head>
<script type="text/javascript" src="http://enjoy3d.com/scripts/jquery-1.2.6.js"></script>
<script type="text/javascript" src="http://enjoy3d.com/scripts/jquery.form.js"></script>
<script type="text/javascript">
$(function() {
$('#form').ajaxForm( { target: $('#span') } );
$('#submit2').click( function() { $('#submit').click(); } );
});
</script>
</head>
<body>
<span id='span'>target span</span>
<form method='post' id='form'>
<input type='text' name='text' size='50' />
<input type='submit' id='submit' name='submit' value='Submit'/>
</form>
<input type='submit' id='submit2' name='submit2' value='Submit Too?' />
</body>
</html>
I managed to solve a similar situation to yours. If the only objective of simulating a click on submit1 is to submit the form, you might try:
$('#submit2').click(function() {
$('#form').trigger('submit');
});
You may also need to return false immediately after triggering the form submit button from the non-form submit button click event code. For example:
<script type="text/javascript">
$(function() {
$('#form').ajaxForm({ target: $('#span') });
$('#submit2').click(function() { $('#submit').click(); return false; });
});
</script>
It works for me. Is that what you are looking for?
Have you tried giving a name to the form, and instead of
$('#submit2').click( function() { $('#submit').click(); } );
doing
$('#submit2').click( function() { document.myForm.submit(); } );
That should do the same thing as having the submit button clicked if the form has been ajaxified.
Related
I have seen many of the posts in stackoverflow but i'm unable to find my answers so thats why i'm posting here.
Scenario is this:
My Page is having many div containers and each div is having EDIT Button and when a user clicks EDIT of any DIV i want the user to be redirected to another page with ID of that DIV,
I want to do this whole this using POST method.
File edit.php
<button class="edit_btn" onclick="edit_ID('$btn_id')">
<script type="text/javascript">
function edit_ID(array){
$.ajax({ type:"POST",
url:'redirecter.php',
data:{editorID:array.split("_")[1]},
success:function(data){
//window.location.href="editapplication.php";
}
});
}
</script>
File redirector.php
<form action='editapplication.php' method='post' name='frm'>
<?php
foreach ($_POST as $a => $b) {
echo "<input type='hidden' name='".htmlentities($a)."' value='".htmlentities($b)."'>";
}
?>
</form>
<script language="JavaScript" type="text/JavaScript">
document.frm.submit();
</script>
you need to hook the click event of the button, and perform your actions there:
$(function() {
$('#buttonID').bind('click', function(event){
var id = $(this).parent().id;
$.ajax({....});
});
});
<script language="javascript" type="text/javascript">
function popitup(url) {
newwindow=window.open(url,'name','height=200,width=350');
if (window.focus) {newwindow.focus()}
return false;
}
</script>
Link to popup
the top code is my index, where in you can see a Link to a popup link
and when you click that a simple form will rise, the form has 2 textbox and one submit button this is the code for the form popupex.php
<html>
<head>
<title>Form</title>
</head>
<body>
<?php
print"<form action='func.php?add/inside_add' method='post'>";
?>
<input type='text' name='ok'><br>
<input type='text' name='notok'><br>
<input type='submit'>
</form>
</body>
</html>
Question: why the code in my func.php is not running? simply because of error? and can some explain the error and also give solution?
this is my func.php
<?php
function goback()
{
window.history.go(-1);
}
class add{
function inside_add(){
goback();
}
}
?>
what im hoping in this function , is when i click the button in my popupex.php it will go back in the form popupex.php. thx
The code you provided is a javascript function window.history.go(-1)
use header('Location:' . $_SERVER['HTTP_REFERER']); for PHP to return to the previous page.
I have a page that dynamically generates a list of items, in each one of those items is a button that submits a from containing data from that item in the list (that is sorted and working). I submit the form via this code (Jquery):
<script type="text/javascript" src="./js/jquery.form.js"></script>
<script type="text/javascript">
$('document').ready(function(){
$('#readlatersubmit').ajaxForm( {
target: '#result',
success: function() {
//$('#readlatersubmit').fadeOut('1000');
//$("#loader").fadeOut();
}
});
return false;
});
</script>
When I click the button it submits the correct data and without the refreshing the whole page. The problem is that if I then go and click another one of the buttons in another one of the list items it goes to the form process page (does not submit via the Jquery).
Does anyone know how I can fix this issue?
Edit
This is what my form currently looks like:
<form id='readlatersubmit' action='RL.php' method='post'>
<input type='hidden' name='RLURL' value='".$item->get_link()."'/>
<input type='hidden' name='RLTitle' value='".$item->get_title()."' />
<input type='hidden' name='user-id' value='$loggedInUser->user_id' />
<input type='image' src='images/ReadLaterRibbon_Active.png' name='submit' value='Submit' class='button' />
</form>
<div id='result'></div>
Remove return false and let it check. because when you click on submit once, this will hold you on false but you don't need false, just remove return or use return true,
<script type="text/javascript" src="./js/jquery.form.js"></script>
<script type="text/javascript">
function doitRun() {
$('#readlatersubmit').ajaxForm( {
target: '#result',
success: function() {
//$('#readlatersubmit').fadeOut('1000');
//$("#loader").fadeOut();
}
});
}
</script>
I have an HTML form that currently just posts the data directly to a PHP file. I want to update the code so that the submit button sends the data to a JavaScript function so that I can create an AJAX function. Is it possible for the submit button to activate a JavaScript function rather than posting to a php file? The only thing I have come up with is below, which quite obviously does not work:
<html>
<head>
<script type="text/javascript">
function ajax(){
//...
}
</script>
</head>
<body>
<form action="ajax();">
<!-- ... -->
<input type="submit" value="Submit" />
</form>
</body>
</html>
You can give the "submit" input a "click" handler that explicitly prevents the default behavior from being carried out.
<input type='submit' value='Submit' onclick='ajax(event)'>
Then in the function:
function ajax(event) {
if ('preventDefault' in event) event.preventDefault();
event.returnValue = false; // for IE before IE9
// ...
}
edit #Esailija points out correctly that another option is to handle the "submit" event on the <form> element instead. The function would look pretty much the same, in fact exactly the same, but you'd wire it up like this:
<form id='yourForm' onsubmit='ajax(event)'>
That will also trap things like the "Enter" key action, etc.
Of course you can. But it's more useful to call your Javascript function in the input like this :
<input type="submit" value="Submit" onclick="ajax();" />
And remove the action part in the form.
I jQuery you can use event.preventDefault(); otherwise just use return false;
http://jsfiddle.net/mKQmR/
http://jsfiddle.net/mKQmR/1/
Pointy is correct... just add a click handler to the submit button, however make sure the last line of the click handler returns "false" to prevent the form from actually being posted to the form's action.
<html>
<head>
<script type="text/javascript">
function ajax(){
//...
return false;
}
</script>
</head>
<body>
<form action="thispage.htm">
<!-- ... -->
<input type="submit" value="Submit" onclick="ajax();" />
</form>
</body>
</html>
In a php page I have placed a submit button,
HTML:
<input type="submit" name="btnAdd" id="btnAdd" Value="Add">
I need to hide this button (using jQuery) when link is cliked,
Link:
echo ' Edit ';
Javascript:
<script type="text/javascript">
$(document).ready(function() {
function MyFunction(){
$('btnAdd').hide();
});
</script>
But this code does not hide the button as expected. How can I fix this?
You have a wrong selector. You need to use #btnAdd for an id selector:
<script type="text/javascript">
function MyFunction() {
$('#btnAdd').hide();
}
</script>
Also you should put the MyFunction function outside of the document.ready callback to avoid making it privately scoped.
Another possibility is to do this unobtrusively:
echo ' Edit ';
which seems easier to be written as:
Edit
and then subscribe for the .click() event of the edit link:
<script type="text/javascript">
$(function() {
$('#edit').click(function() {
$('#btnAdd').hide();
});
});
</script>