I have a form:
<form style="display: inline;" action="/player.php" method="post">
<input type="hidden" name="recname" value="'.$row['name'].'">
<input type="hidden" name="recordingdesc" value="'.$row['description'].'">
<input type="hidden" name="reclink" value="$_SESSION['customerid'].'-'.$row['timestamp'].'.wav">
<button type="submit" class="tooltip table-button ui-state-default ui-corner-all" title=" rec"><span class="ui-icon ui-icon-volume-on"></span></button>
</form>
and i want player.php to open in a modal dialog and be able to display the post information how can this be done.
Ajax is the answer. Post the form via ajax and in the callback function, (if the post was successful) you can create your dialog and load the data returned from the post. Check out Jquery's documentation on Jquery.post
First create a dialog using jquery-ui. You then need to ajax submit the form:
$("form button").click(function() {
$.post({url: '/player.php', data: $("form").serialize(),
success: function (data) {
$(div in dialog).html(data);
$("#MyDialog").dialog('open');
}
});
return false;
});
Related
I am using jquery ajax form library.... i want to change action url when i submit form
html
<div class="modal-body form"><?php echo form_open_multipart("#",array('id'=>'mng_form', 'name'=>'mng_form','class'=>'form-horizontal','role'=>'form')); ?>
javascript
var options = {replaceTarget:true, beforeSubmit: showRequest, success: showResponse};
how can i change action url using jquery form ?
use jQuery submit(). This happens prior to the actual submission, so you can change the action url.
<form id="fromID" action="action_page01.php" method="post" target="_blank" accept-charset="UTF-8" enctype="application/x-www-form-urlencoded" autocomplete="off" novalidate>
<input type="submit" value="Submit">
</form>
// jQuery
$( "#fromID" ).submit(function( event ) {
$('#fromID').attr('action', 'action_page02.php');
});
This is my registration form located in login.html:
<form action="Registar.php" method="post">
<input type="text" name="user" placeholder="Username (Sem espaços)" maxlength="25">
<input type="text" placeholder="Email" name="email" maxlength="31"/>
<input type="text" name="nome" placeholder="Nome" maxlength="31"/>
<input type="text" name="morada" placeholder="Morada" maxlength="120"/>
<input type="hidden" name="action" value="login">
<input type="number" name="telefone" placeholder="Telefone" maxlength="15"/>
<button type="submit" class="btn btn-default" name="submit">Signup</button>
</form>
It goes to "Registar.php" and runs the verification's i want like if the fields are empty or if the username already exists and show's that verification's in a jquery dialog.
Heres my Jquery script:
function alerta(msg,link){
var dialog = $('<div>'+msg+'</div>');
$(function() {
$( dialog ).dialog({
modal: true,
buttons: {
Ok: function() {
window.location = link;
}
}
});
})
};
The thing is it shows the dialog on the blank page of "Registar.php" and since i scripted some nice styles and overlays for my jquery dialog i want to show the jquery dialog verification messages in login.html and have that page in the background/overlay of the dialog.
Is there any way to do that but still running the action form to an external php script?
Thanks in advance!
One way to achieve this would be to use AJAX instead of sending the form via POST. Here's an example:
HTML
<form id="myForm" action="" method="post">
//your form content
</form>
JQuery
$('#myForm').on('submit', function(e) {
e.preventDefault(); //stop form submission
var formData = $(this).serialize();
$.ajax({
type: "POST",
url: "Registar.php",
data: formData,
success: function(result) {
//result is the value returned from Registrar.php
console.log(result);
//show the modal
}
});
});
JSFiddle
I'm using an ajax call for upload pdf files. After triggering upload button the ajax calls two times. I checked the entire code. But couldn't get any solution. Kindly help me :)
My code is,
HTML:
<div class="uk-form-row">
<div id="loadingPDFUpload"><i class="uk-icon-spinner uk-icon-spin"></i></div>
<div id="targetUpload"></div>
<label class="uploadLbl">Upload Book:</label>
<div class="uploadWrap">
<input name="pdfFile" id="pdfFile" type="file" size="30" />
<input type="submit" name="submitBtn" class="uk-button uk-button-primary uk-button-small" value="Upload" onclick="return uploadPDF()" />
</div>
</div>
ajax code:
function uploadPDF(){
$("#frm").attr("action","upload.php");
$("#loadingPDFUpload").show();
$("#frm").ajaxForm({
target: '#targetUpload',
complete: function(){
$("#loadingPDFUpload").hide();
}
}).submit();}
You have a submit button calling the function but then the function uses the forms submit method. That is probably triggering a double call on the function.
I see you are using jQuery and the jQuery Form Plugin, so this should be relatively easy to fix. I would create the event handler directly in the JavaScript to avoid messy markup. Remove the onclick attribute of your submit button:
<input type="submit" name="submitBtn" class="uk-button uk-button-primary uk-button-small" value="Upload" />
Then do something like this in your code:
$(document).ready(function() {
$('#frm').submit(function(e) {
e.preventDefault(); //stops the default submit action
$('#loadingPDFUpload').show();
$(this).attr('action', 'upload.php');
$(this).ajaxForm({
target: '#targetUpload',
complete: function(){
$("#loadingPDFUpload").hide();
});
});
})
});
You are using form submit button for trigger your ajax call
<input type="submit" name="submitBtn" class="uk-button uk-button-primary uk-button-small" value="Upload" onclick="return uploadPDF()" />
So when you trigger click it which call uploadPDF() function also which submit your form after submit() function. That is why there the function is call two times.
Try removing the submit at the end of ajaxForm request. It is submitting the form again. Also please update your HTML code. I cannot see #frm anywhere.
function uploadPDF() should return false, in order to prevent normal form submission.
as in documentation example code
// attach handler to form's submit event
$('#myFormId').submit(function() {
// submit the form
$(this).ajaxSubmit();
// return false to prevent normal browser submit and page navigation
return false;
});
This question already has answers here:
how can I make onclick function to submit just my form.php
(2 answers)
Closed 9 years ago.
I have this function on an html form, the form script there is this
<script type="text/javascript">
var conf = {
isVip:false,
isMem:false
};
</script>
and here is the the button, the button is to process two form in the html, here is the button.
<li class="current">
免费邮箱登录
</li>
<li>
<span class="vip"></span>VIPSubmit
</li>
<a href="#" class="loginBtn"
Here is the form
<form name="vip_login" method="post" action="process.php">
<input tabindex="1" id="vipname" type="text" class="username" name="username" value=""/><span class="vipDomain">#name.com</span>
<input tabindex="2" id="vippassword" type="password" class="password" name="password" value=""/>
My question is, how do i make the btn to process my form alone and send data to external process.php function.
First, give the form an id:
<form id="vip_login" method="post" action="process.php">
Next, download jQuery if you don't already have it, and then setup the onclick of the href to be this:
<a href='#' class='loginBtn' onclick="$('#vip_login').submit();" ...
and that will force the submit of the form.
This is correct
<form name="vip_login" method="post" action="process.php">
But you need to add a submit button, or use some javascript to do it, like
document.vip_login.submit()
You can add the previous after all validations are ok.
First of all, you have links not buttons. You need to make buttons with IDs.
<li class="current">
<input id="btn1" type="button" value="免费邮箱登录"></input>
</li>
<li>
<input id="btn2" type="button" value="VIPSubmit"><span class="vip"></span></input>
</li>
Second, you can then use jQuery/AJAX to submit your form from clicking these buttons. You will need to add an ID to your form as well. Below, I made the ID the same as the 'name' attribute.
$(document).ready(function() {
$("#btn1").click(function() {
$("#vip_login").submit(function() {
$.ajax({
type: "POST",
data: $(this).serialize(),
cache: false,
url: "process.php",
success: function(data) {
$("#id on process.php").html(data); //If setting in process.php
window.alert("Data send");
}
});
return false;
});
});
});
Also note: Using AJAX, you do not need an "action" supplied in your form.
<form name="vip_login" id="vip_login" method="post" action="">
add an id to your <form> so it would be something like this:
<form id="vip_login" name="vip_login" method="post" action="process.php">
Then set the button's attributes to be like this:
Submit
This will get it to work, although the more elegant way to do it is to add a submit button within this form by adding the following element in your <form>:
<input type="submit" value="Submit!" />
Then if you click on this button the parent form will be submitted.
I have a form, which take name from form and it sends to javascript codes and show in php by Ajax. these actions are done with clicking by submit button, I need to have another button, as review in my main page. how can I address to ajax that in process.php page have "if isset(submit)" or "if isset(review)"?
I need to do different sql action when each of buttons are clicked.
how can I add another button and be able to do different action on php part in process.php page?
<script type="text/javascript">
$(document).ready(function(){
$("#myform").validate({
debug: false,
submitHandler: function(form) {
$.post('process.php', $("#myform").serialize(), function(data) {
$('#results').html(data);
});
}
});
});
</script>
<body>
<form name="myform" id="myform" action="" method="POST">
<label for="name" id="name_label">Name</label>
<input type="text" name="name" id="name" size="30" value=""/>
<br>
<input type="submit" name="submit" value="Submit">
</form>
<div id="results"><div>
</body>
process.php:
<?php
print "<br>Your name is <b>".$_POST['name']."</b> ";
?>
You just need to add a button and an onclick handler for it.
Html:
<input type="button" id="review" value="Review"/>
Js:
$("#review").click(function(){
var myData = $("#myform").serialize() + "&review=review";
$.post('process.php', myData , function(data) {
$('#results').html(data);
});
}
);
Since you have set a variable review here, you can use it to know that is call has come by clicking the review button.
Bind the event handlers to the buttons' click events instead of the form's submit event.
Use the different event handler functions to add different pieces of extra data to the data object you pass to the ajax method.