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
Related
I'm getting my multiple forms using a while loop (fetch data in the database).
<form id="form" class="form-horizontal" method="post" >
<input type="text" class="form-control" name="name" value="test1">
<input type="text" class="form-control" name="car_type">
<button type="submit" class="buttona" id="buttona">Send</button>
</form>
<form id="form" class="form-horizontal" method="post" >
<input type="text" class="form-control" name="name" value="test2">
<input type="text" class="form-control" name="car_type" value="test2">
<button type="submit" class="buttona" id="buttona">Send</button>
</form>
Here's my ajax (It only works in the 1st form but the rest not working):
$(document).ready(function(){
$(".form").submit(function(e) {
e.preventDefault();
$("#buttona").html('...');
$("#buttona").attr("disabled", "disabled");
sendInfo();
});
});
Function for ajax:
function sendInfo() {
$.ajax({
type: 'POST',
url: '../process.php',
data: $(".form").serialize(),
success: function(data){
if(data == 'Success') {
$('#text_errora').html('added');
}else {
$('#text_errora').html('not aadded');
}
}
})
return false;
}
How can I set or how ajax will recognize the button I click/submit to process the form?
You don't close your <form> tag.
You use the same id twice.
You select anything with class form, not ID form.
Actually, I am amazed it works even one time.
Try this (no need to touch the JavaScript), your form should submit, but the button changing might not work (you use identical IDs there too; tip: an id has to be unique within the entire HTML DOM).
<form class="form form-horizontal" method="post" >
<input type="text" class="form-control" name="name" value="test1">
<input type="text" class="form-control" name="car_type">
<button type="submit" class="buttona" id="buttona">Send</button>
</form>
Using "this" keyword inside submit handler, you will receive a reference to the form to which the clicked button belongs.
$(document).ready(function(){
$(".form").submit(function(e) {
e.preventDefault();
var form_to_submit = this;
$("#buttona").html('...');
$("#buttona").attr("disabled", "disabled");
sendInfo(form_to_submit);
});
});
function sendInfo(form_to_submit) {
$.ajax({
type: 'POST',
url: '../process.php',
data: $(form_to_submit).serialize(),
success: function(data){
if(data == 'Success') {
$('#text_errora').html('added');
}else {
$('#text_errora').html('not aadded');
}
}
})
return false;
}
Using the jQuery form plugin, I just want to submit the visible fields (not the hidden ones ) of the form.
HTML:
<div class="result"></div>
<form id="myForm" action="comment.php" method="post">
Name: <input type="text" name="name" />
Comment: <textarea name="comment"></textarea>
<div style="display:none;">
<input type="text" value="" name="name_1" />
</div>
<input type="submit" value="Submit Comment" />
</form>
I cannot find a way to submit only the visible fields using any of the methods below:
ajaxForm:
// wait for the DOM to be loaded
$(document).ready(function() {
// bind 'myForm' and provide a simple callback function
$('#myForm').ajaxForm(function() {
alert("Thank you for your comment!");
});
});
ajaxSubmit:
$('#myForm').ajaxSubmit({
target: '.result',
success: function(response) {
alert("Thank you for your comment!");
}
});
There is another method formSerialize but found no way to use it with the 2 methods mentioned above (usable with $.ajax however).
How to submit only the visible fields using any of the two methods ?
$("#myForm").on("submit", function() {
var visibleData = $('#myForm input:visible,textarea:visible,select:visible').fieldSerialize();
$.post(this.action, visibleData, function(result) {
alert('Thank you for your comment!');
});
// this is needed to prevent a non-ajax submit
return false;
});
Is it possible to submit two forms using a single submit button?
like if a user clicks submit on a form, that form runs test.php and form.php with the variables still intact?
If not then is it possible when the user clicks submit on a form it runs only test.php then test.php runs form.php with the variables still intact.
I don't think this is possible on a normal form submission, but you can try to utilize an AJAX request on both forms on demand. (This is just an example, not tested, just a guide or an idea.).
<!-- forms -->
<fieldset><legend>Form #1</legend>
<form id="form_1" action="test.php">
<label>Username: <input type="text" name="username" /></label>
<label>Password: <input type="text" name="password" /></label>
</form>
</fieldset>
<br/>
<fieldset><legend>Form #2</legend>
<form id="form_2" action="form.php">
<label>Firstname: <input type="text" name="fname" /></label>
<label>Lastname: <input type="text" name="lname" /></label>
</form>
</fieldset>
<button id="submit" type="button">Submit</button>
<!-- the forms is just an example -->
<!-- it would be weird to separate such fields in to different forms -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#submit').on('click', function(){
$.ajax({
url: $('#form_1').attr('action'),
data: $('#form_1').serialize(),
type: 'POST', // or whatever get
dataType: 'JSON', // or whatever xml script html
success: function(response) {
}
});
$.ajax({
url: $('#form_2').attr('action'),
data: $('#form_2').serialize(),
type: 'POST', // or whatever get
dataType: 'JSON', // or whatever xml script html
success: function(response) {
}
});
});
});
</script>
The form can have only one action, if you want to pass data to a different page then you can do that by calling an ajax function..
<div id = "result"> Fade me in and hide div hideme</div>
<div id="hideme">
<form method="POST">
Yes<input type="radio" name="name" value="yes"/>
No<input type="radio" name="name" value="no" checked=true />
<input type="submit" id="submit" name="submit" value="HIDE NOW!" />
</form>
</div>
<script>
$(document).ready(function () {
$('#result').hide();
$('#submit').click(function(e) {
e.preventDefault();
$('#hideme').hide();
$('#result').fadeIn(5000);
});
});
</script>
This will hide my div where the submit is, whenever click on submit it wont send values to PHP.
How to fix that to make it send the values to PHP so i will get the values from html?
You have this e.preventDefault(); in your jquery click handler function. It means that when you press the submit button, the form wouldn't be submitted. It's simply preventing original action of that selector on click.
Here's how to fix it. Use ajax. There's many jquery functions for that, i will show you how to use $.ajax method.
$('#submit').click(function(e) {
e.preventDefault();
$.ajax({
type: "POST",
url: "yourphpscriphere.php",
data: "name=" + $('input[name="name"]').val(),
success: function() {
alert('thank you for using my form');
},
error: function() {
alert('an error happened during the request');
}
});
$('#hideme').hide();
$('#result').fadeIn(5000);
});
Remember to change url to your own. Then you can get your radio button value using $_POST['name'] in php.
try this code :
html:
<div id="result"> Fade me in and hide div hideme</div>
<div id="hideme">
<form method="POST" id="eform">
Yes<input type="radio" name="name" value="yes"/>
No<input type="radio" name="name" value="no" checked=true />
<input type="submit" id="submit" name="submit" value="HIDE NOW!" />
</form>
</div>
jQuery :
$(document).ready(function () {
$('#result').hide();
$('#submit').click(function(e) {
$.post("page.php",$("#eform").serialize(),function(data){
$('#hideme').hide();
$('#result').html(data).fadeIn(5000);
})
});
});
I'm trying to post some form data and return results but I am having trouble getting this to work:
The javascript:
<script type="text/javascript">
$(document).ready(function () {
$("#sendthis").click(function () {
$.ajax({
type: "POST",
data: $('#theform').serialize(),
cache: false,
url: "form.php",
success: function (data) {
alert(data);
}
});
return false;
});
});
</script>
The HTML:
<form id="theform">
<input type="text" class="sized" name="name" id="name"><br />
<input type="text" class="sized" name="email" id="email">
</form>
Submit
The page to post to (form.php):
<?php
if (isset($_POST['name'])){
$result = $_POST['name'];
}
echo $result;
?>
Now, it is my understanding that when the form is submitted, it would post to form.php, and the input value of "name" would be returned in an alert box. However, I can't seem to get the form data posting (or maybe returning) correctly.
Is it a problem with $('#theform').serialize()? Maybe something else?
Any help is much appreciated.
Try this and see if it works
<form id="theform" action="/form.php">
<input type="text" class="sized" name="name" id="name"/><br />
<input type="text" class="sized" name="email" id="email" /><br />
<input type="submit" name="submit" value="Submit" />
</form>
The jquery
$("#theform").on('submit', function () {
$.post($(this).attr('action'), $(this).serialize(), function(data) {
alert(data);
});
return false;
});
I would add an error callback to your ajax request to catch if there are issues being encountered during the post. Do you have a debugger like firebug that can show you what data is being posted (and where)?