Form doesn't work inside fancybox - javascript

I have a form that works just fine when I try it out (with the correct address of course).
When I use that for in my site, inside a fancybox it doesn't work. Nothing happens (no error in the console either).
The relevant code is:
<a class="fancybox" href="#inline1" id="link_consultar">
Consultar
</a>
<div style="display: none">
<div id="inline1">
Producto: {$product->
name|escape:'htmlall':'UTF-8'}
<br>
<br>
<form id="myForm" action="http://danielvi.com/send_mail.php" method="post">
Nombre:
<input type="text" name="firstname">
<br>
<br>
Consulta:
<br>
<textarea rows="4" cols="50">
</textarea>
<br>
<br>
<input type="submit" value="Enviar Consulta" />
</form>
</div>
</div>
The JS:
$(document).ready(function() {
$('#myForm').submit(function(){
alert("submitted");
});
});
I have also tried:
$(document).ready(function() {
$("#myForm").on("submit", function(event){
alert("submitted");
});
});
I have included the form plugin like this:
<script src="http://malsup.github.com/jquery.form.js"></script>
With no success, the end goal is to send form by AJAX, this is a simplified example to debug.
What I don't understand either is that even when I remove all js it wont direct me to the action page.
You can see a live example here (When you click consulta).

The problem is shown on your live site. Upon examining the source code, you can see that you're adding a form within another form
<form id="buy_block" action="http://danielvi.com/index.php?controller=cart" method="post">
[...]
<form id="myForm" action="http://danielvi.com/send_mail.php" method="post">
[...]
</form>
</form>
Which invalidates the second form you're working with. That is why it's not doing anything. Other than that, the code is valid.

On the live site, you seem to be missing the <form> element in the #fancybox-content.

You've got the contact form inside form#buy_block which is invalid. Try moving the whole <div id="inline1"> outside of the <form id="buy_block

$("input[type='submit']").click(function(){
$.ajax: {
type : "POST",
cache : false,
url : "http://danielvi.com/send_mail.php",
success: function(data) {
$.fancybox({
'width': 400,
'height': 400,
'enableEscapeButton' : false,
'overlayShow' : true,
'overlayOpacity' : 0,
'hideOnOverlayClick' : false,
'content' : data
});
}
}
});

Related

How can I open a URL inside a DIV tag using AJAX?

I have the following php files. One that captures a user's text from a simple form, and the other echos this text. The files are shown below..
file1.php:
<form action="output.php" method="post">
Paste text document: <br><br>
<textarea name="doc" rows="5" cols="50" value="">
</textarea><br><br>
<input type="submit" name="submit" value="submit">
<input type="reset" name="reset" value="Clear">
</form>
<br><br>
<div id="output_area">
</div>
</body>
</html>
output.php:
<html lang="en">
<head><title>Output</title></head>
<body>
<?php
$doc = $_POST['doc'];
echo $doc;
?>
</body>
</html>
I want the output to be displayed between the DIV tags, rather than to load and show the output on a new page. I want the text to be output in between the DIV tags on the same page. Maybe the best way is to use AJAX to display output.php within the DIV tags and output the text after the user has clicked on the "submit" button. How can I use AJAX to do this in the most basic way possible?
You can use JQuery ajax function:
JQuery:
$("form").on("submit", function(event){
event.preventDefault();
$.ajax({
type: "POST",
url: "output.php",
data: { doc: $('#doc').val()}
})
.done(function( data) {
$("#output_area").html(data);
});
});
Change html:
<textarea name="doc" id="doc" rows="5" cols="50" value=""></textarea>
You can use the function:
$(document).ready(function() {
$( "#output_area" ).load( "output.php" );
});
But remeber!
That the load function from jquery, loads everything on the page you are asking for, so dont use:
<html lang="en">
<head><title>Output</title></head>
<body>
</body>
</html>
Now the load(function), will put in the PHP you made in output.php
if you want to output the answer on a submit i would do it like:
First add:
Show doc
Then add jquery:
$(document).ready(function() {
$('.pressme').on('click', function(){
var yourdata = $(this).parent().find("textarea[name='doc']").val();
$.ajax({
type: "POST",
url: "output.php",
data: {doc: yourdata},
success: function(data) {
$('#output_area').html(data);
});
});
});
I added a <a>, instead of using the <input type="submit"> because the submit, will post the form, thats not what you need, after what i understand, you need to preview the textarea in a div.
Hope it helps!
If you want your $_POST variable to be shown on the same page, then
1.change form's action to it. In your case
action="file1.php" or leave it empty to reload the page on submit (not valid in HTML5)
2.insert echo part directly in your div
<div id="output_area">
<?php
echo $_POST['doc'];
?>
</div>
not in another file
You need not use ajax for this. You can do this by using javascript. It will improve your performance of your code.
Try This:
<script>
function show() {
document.getElementById("output_area").innerHTML=document.getElementById("doc").value;
return false;
}
</script>
<form action="#" method="post">
<textarea name="doc" id="doc" rows="5" cols="50" value="">
</textarea>
<input type="submit" name="submit" value="submit" onclick="return show();">
<input type="reset" name="reset" value="Clear">
</form>
<div id="output_area"></div>
</body>
</html>

Fancybox form ajax post close on submit

I have a table in a div. The table contains a link to add a row. Clicking on the link opens a fancybox2 with the form to add the new row.
I am facing the following issues: the lightbox close and the entire page reload.
UPDATED: through more debugging seems that the form is posted to the page but in Firebug I see that the target page is marked in red, receive the posted values but returns nothing.
I open the fancybox with:
$('.new').fancybox({
type: 'ajax',
autoSize : true,
padding: 5,
closeClick: false,
autoResize:true
});
the form page is:
<script type="text/javascript">
function ajax_submit(){
$.ajax({
type: "POST",
url: "bp/new_row1.php",
data: $('#new_row').serialize(),
success: function(data){$.fancybox(data);}
})
}
$(document).ready(function(){
$('#insert').click(function(){ajax_submit();});
});
</script>
<form name="new_row" id="new_row">
<div class="sez-form"><label>Descrizione: </label><input tabindex="10" name="descr" id="descr" size="100" maxlength="256"></div>
<div class="sez-form"><label>Tempestivo ammesso: </label><input tabindex="10" name="descr" id="descr" size="65" maxlength="65"></div>
<div class="sez-form"><label>Tardivo ammesso: </label><input tabindex="10" name="descr" id="descr" size="65" maxlength="65"></div>
<div class="sez-form"><button id="insert"><?php echo $azione; ?></button><button id="undo">Annulla</button></div>
</form>
The destination page for the posted values is just:
<?php echo 'Hello World'; ?>
Thank eveyone who will help me!
Try either one should work, inside the success function.
parent.jQuery.fancybox.close(); Or parent.window.close();

Script not working when url was changed

I used to be able to log in with the following code to a URL. It alerts me if the log in details are wrong and logs me in when it is correct.
The URL changed slightly and right now, I am not able to log in. I do not even get the alert message saying the input is wrong. Nothing happens.
Old URL where it was working fine:
http://softwarehuttest.x10.mx/public/account/login/?id=notmyid&password=notmypassword
new URL where nothing happens:
http://softwarehuttest.x10.mx/public/account/login/?id=notmyid&password=notmypassword&rank=22
Rank is always going to be a same number (22 is just an example); thus, I don't want the user to have to input that. I just added an input for rank to test if that is the issue, but the problem persists.
If I directly input the URL with the log in details to a browser, it works.
I don't get what went wrong considering the codes were working fine prior to the URL change. Please advice. Thank you.
<html>
<script>
$(document).on("pageinit", "#loginForm", function () {
$("#form1").on("submit", function (event) {
event.preventDefault();
$.ajax({
type: "GET",
url: "http://softwarehuttest.x10.mx/public/account/login/",
data: $("#form1").serialize(),
success: function (data) {
console.log(data);
if (data.loggedIn) {
$.mobile.changePage("#home");
} else {
alert("You entered the wrong username or password. Please try again.");
}
}
});
});
});
</script>
<div data-role="page" id="loginForm" data-theme="e">
<!--Start of Log In Page-->
<header data-role="header">
<h1>Log In</h1>
</header>
<!--OLD FORM-->
<form id="form1" name="form1" method="GET" action="http://softwarehuttest.x10.mx/public/account/login/">
<label for="id">Username </label>
<input type="text" name="id" id="id" />
<label for="password">Password </label>
<input type="password" name="password" id="password" />
<label for="rank">Rank </label>
<input type="rank" name="rank" id="rank" />
<input type="submit" name="submit" value="Login"/>
</form>
<footer data-role="footer" data-position="fixed">
<h1></h1>
</footer>
</div>
</html>
I tested your code on JSFiddle and it apparently works. I got the response:"{"loggedIn":false}"
If you want to simply "hide" the Rank input, you can use input type HIDDEN instead of TEXT with the value set to 22.
<input type="hidden" name="rank" id="rank" value="22">

prevent redirect to php file after form submit

After researching this for too many hours I finally decided to post the question myself, as what is working for others, doesn't seem to work for me. Please keep in mind that I am fairly new to ajax and jquery, but as I am on a deadline with my current project I wont have time to go through it all.
I have the following html form:
<div class="form">
<form id="savePlacemarkForm" method="post" action="createPlacemark.php">
<div>
<input type="text" id="placemarkName" name="placemarkName" placeholder="Name:"/>
</div>
<div>
<input type="text" id="placemarkAddress" name="placemarkAddress" placeholder="Adress:"/>
</div>
<div>
<input type="text" id="placemarkTag" name="placemarkTag" placeholder="Tags:"/>
</div>
<div>
<textarea id="placemarkDescription" name="placemarkDescription" placeholder="Description" rows="1" cols="1"></textarea>
</div>
<div>
<input id="latitude" type="text" name="latitude"/>
</div>
<div>
<input id="longtitude" type="text" name="longtitude"/>
</div>
<button class="md-close" id="savePlacemark" onclick="createPlacemark();"/>Save</button>
</form>
<button class="md-close">Cancel</button>
<script src="my_script.js" type="text/javascript"></script>
</div>
As you see I have the action set to createPlacemark.php which takes input from these fields and saves it to my DB, which works fine!! However since this should work without redirecting or resubmitting the page, meaning ajax! I include my_script.js which looks like this:
$("#savePlacemark").click( function() {
$.post( $("#savePlacemarkForm").attr("action"),
$("#savePlacemarkForm :input").serializeArray();
});
clearInput();
});
$("#savePlacemarkForm").submit( function() {
return false;
});
function clearInput() {
$("#savePlacemarkForm :input").each( function() {
$(this).val('');
});
}
As you see it does the post for me, which works, but for some reason the return false; doesnt seem to work for me, as I am continuously redirected to the before mentioned php file.
Any help would be greatly appreciated! thx!
Try the following. The .submit() function actually triggers a submit for the form. Take this out of the script since you don't need it when you've already posted the values with $.post.
$("#savePlacemark").click( function() {
$.post( $("#savePlacemarkForm").attr("action"),
$("#savePlacemarkForm :input").serializeArray();
});
clearInput();
});
function clearInput() {
$("#savePlacemarkForm :input").each( function() {
$(this).val('');
});
}
try this
<button onclick="return createPlacemark();">Save</button>
it may help you.

bootstrap tooltip/popover on a button not working

I am using php to authenticate a user login and I would like to show a popover/tooltip saying "invalid username or password" under the sign in button in case the user/password were invalid.
my php part is working, tested with echo, but I can't make the tooltip to work.
I have included the following import
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-tooltip.js"></script>
created the following javascript function
$(document).ready(function() {
function invalid(){
$('#userNameField').tooltip({
'selector': '',
'placement': 'bottom',
'content' : 'bbbbblblblbl'
});
$('#userNameField').tooltip('show');
}
</script>
my button has the userNameField id
<form class="navbar-form pull-right" action="" method="post">
<input type="submit" class="btn" id="userNameField" value="Sign in">
</form>
and my php stops before I am calling the invalid function (I tested this part with an alert("test") and it is working
?>
<!--Code for invalid username/password combo goes here-->
<script type="text/javascript">
invalid();
</script>
<?php
any ideas what am i doing wrong?
Tooltip doesnot have content property instead you need to use title
Demo
Doc
$('#userNameField').tooltip({
'placement': 'bottom',
'title' : 'bbbbblblblbl'
});
$('#userNameField').tooltip('show');

Categories

Resources