How to submit a form in a shadow box? - javascript

I'm using shadow box to submit a form, and since I'm new to JavaScript it's little difficult for me. I have three pages, a parent window, a child window(shadow box content) with the form and an update page to show the results. When I submit the form data in the child window, the form doesn't close and I am unable to retrieve the vales in my update page.
Can you please suggest me a tutorial or example that will help me to get a better idea of how to do this?
This is my code so far
// parent window(index.php)
<html>
<head>
<script type="text/javascript" src="jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="shadowbox/shadowbox.css">
<script type="text/javascript" src="shadowbox/shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init();
</script>
</head>
<body>
Example shaodow box
<script language="javascript">
$('#mylink').click(function(){
Shadowbox.open({
content: 'mybox.php',
player: 'iframe',
height: 550,
width: 800,
options: {
onClose:
function() {
top.location = "update.php";
}
}
});
});
</script>
//mybox.php
<form name="theform" action="update.php" method="POST">
<input type="text" name="nametxt" id= "nametxt"><br>
<input type="submit" value="submit">
</form>
//update.php
<?php
if(isset($_POST['nametxt']))
echo $_POST['nametxt'];
?>
please consider, this is just an example.when the form is submitted data needs to be shown in update php.
can any one help, Thanks in advance

Check out this simple example of submitting a form on NetTuts: http://net.tutsplus.com/tutorials/javascript-ajax/submit-a-form-without-page-refresh-using-jquery/

First, since the form you are submitting is in an iframe, by default, the result of the POST will be also. You can use target="_top" on the iframe to redirect this to the top level,sothe page is submitted to update.php and the output replaces the whole page. Check the documentation for Shadowbox to see how to set this parameter.
Another option would be to store the output in the session and send it back in the second GET request that results from your top.location = "update.php".
This is easiest if you name the resultts page something else, but it depends on your application.

Related

Get form data and put into a href link?

I'd like to send a SMS on website by
<a href="sms:+12345678?body=form data"
and popup the SMS application on cellphone.
I'd like user to fill the form, javascript get form data and insert into body= in a link.
Does javascript or jquery can do it?
Here is the code I've tried with input
sms-link.min.js is for make SMS links compatible cross devices, but it only works on Android not iOS.
<html>
<body>
<div class="container">
<input type="text" maxlength="5" id="ca_no">
<div class="col-md-12"> Register </div>
</div>
</body>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="sms-link.min.js"></script>
<script>
var card_no=document.getElementById('ca_no').value;
document.addEventListener('DOMContentLoaded', (function () {
link = new SMSLink.link();
link.replaceAll();
}), false);
</script>
</body>
</html>
enter data and click link won't work, it will works when click back with same data which already filled.
You can achieve this in following manner:
Put an event listener on button or anchor click that collects the form data and out it in some variable.
Make an ajax call to some server side scripting language with that stored data.
From server side scripting language you can hit the SMS API with the specified parameter using GET or POST method.
Reference
Here is a simple jquery
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#ca_no").blur(function()
{
var card_no=$('#ca_no').val();
$("#register").text(card_no); //you can remove this
$("#register").attr('href',window.location.href+'?body=EDS'+card_no);
});
});
</script>
</head>
<body>
<div class="container">
<input type="text" maxlength="5" id="ca_no">
<div class="col-md-12">
Register
</div>
</div>
</body>
</html>
Javascript and jquery can do that. but you need to clear what exactly you want to happen
please specify an example of output

HTML file to auto login form

I need to find a way for a page to redirect you to a third party page with a login form and log in for you. Need to use it on a screen that can access pages but cant input anything to said page.
I've managed to create a html file that takes me to the page;
<html>
<head>
<script type="text/javascript" language="JavaScript">
window.onload = function() {
window.location.href = 'www.URL.com';
};
</script>
</head>
</html>
I have also figured out that if I paste the following in to the address field after opening the page it logs me in;
javascript:void(document.loginForm.name.value = 'MYUSERNAME');
javascript:void(document.loginForm.password.value = 'MYPASSWORD');
javascript:void(document.loginForm.submit())
I have not been able to combine the two though. Any thoughts?
Inspect the source of the form on the other site and look for the action attribute (probably something like action="/login/")
(also make an note of the method attribute)
Then make a form on your own page with the other sites action like this:
<form id="loginForm" action="http://othersite.com/login/" method="same as other site">
<input type=hidden name="name" value="MYUSERNAME"/>
<input type=hidden name="password" value="MYPASSWORD"/>
</form>
You can submit the form on page load with
<script>
window.onload = function() {
document.getElementById('loginForm').submit();
};
</script>

Jquery with dynamic paragraphs

im doing a school work with Jquery and I just want to know if its possible and how to do the following:
Page A has the following : external JS file that has the function to allow a user to enter some text and then when they press the submit button that text is automatically put as the paragraph text as ive use JS to get the element and replace the text using innerhtml.
External JS file:
function grabText() {
var grabThePara = document.getElementById("firstP").value;
var intoParagraph = document.getElementById("pOne").innerHTML = grabThePara;
}
HTML FILE :
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="jquery-1.10.2"></script>
<script type="text/javascript" src="ts.js"></script>
</head>
<body>
<input type="text" id="firstP" name="firstP">
<br />
<p id="pOne">Static works fine -- > this is the static</p>
<input type="button" onclick="grabText()" value="Submit">
GO to JD Panel
</body>
</html>
Page B has the Jquery part, this has the code that will grab the text from the Page A's first paragrpah called ID pOne, it gets the text without an issue if its STATIC input but the moment you use as described previous by using the textbox and dynamically changing the text of the paragraph the page A does the change but Page B still shows the static text input, not the new dynamic changes that occurred after input-ed into the textbox and submitted. I will show code.
Page B code :
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="jquery-1.10.2.js"></script>
<script type="text/javascript" src="ts.js"></script>
</head>
<body>
Change the text again
<script type="text/javascript">
jQuery.ajax({
url: "adminPanel.html",
success: function (printIt) {
var html = jQuery('<p>').html(printIt);
var grabIt = html.find("p#pOne").html();
var sendItToParaOne = document.getElementById("paraOne").innerHTML = grabIt;
}
});
</script>
<p id="paraOne"></p>
</body>
</html>
Sorry for my English i know its not the best. thanks for taking the time in reading my issue and any helps is appreciated
Thanks again!
M
You need to save your data somewhere. If you don't want to work with a database, you can use HTML 5 web storage: http://www.w3schools.com/html/html5_webstorage.asp
Furthermore, looking at your external JS file, you might want to have a look at jQuery selectors: http://www.w3schools.com/jquery/jquery_selectors.asp
I hope this helps you.
You're confusing yourself by thinking that pages are able to talk to each other. Your page A has to send the changes to the server, but the server also has to be programmed to listen to those changes in server code like PHP or ASP.NET. Only then can page B get the changes made by page A.

Manually render dynamically generated Google 'plus one' button

Here's the scene:
The webpage doesn't have a google+ button.
User clicks a button.
AJAX request is sent which loads some text and the google+ button (<g:plusone href="http://www.website.com"></g:plusone>)
into a div.
I can see when I look at the code that it is there, but it is not rendering.
I've heard that this might be useful:
gapi.plusone.go();
But I'm not sure.
Any ideas?
Thanks
You're on the right track. gapi.plusone.go() is one way to explicitly render the +1 button. Here's a code snippet from the official docs that illustrates another method using gapi.plusone.render().
<html>
<head>
<title>+1 Demo: Explicit render</title>
<link rel="canonical" href="http://www.example.com" />
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
{"parsetags": "explicit"}
</script>
<script type="text/javascript">
function renderPlusone() {
gapi.plusone.render("plusone-div");
}
</script>
</head>
<body>
Render the +1 button
<div id="plusone-div"></div>
</body>
</html>
The JavaScript API is further documented elsewhere on the previously linked page.

jQuery and HTML forms

I have an iframe with a HTML form dynamically added. I need the parent page to have a button which submits this form (to a page set in the iframe), but then also is able to receive the return value.
The part I am struggling with is how to receive the return value. Submitting the form is fine, but getting the parent page to receive the return value - like with an AJAX request - is eluding me.
Here is an example of the kind of thing I am trying to achieve:
<html>
<head>
etc...
<script type="text/javascript">
$(doument).ready(function() {
$("#myFormButton").click(function () {
// This is what doesn't exist, a callback with the data
// this is what I would like to acheive somehow...
$("#myForm").submit(function(data) {
// do stuff with the data
});
});
});
</script>
</head>
<body>
<iframe>
etc...
<form action="mypage.ashx">
various inputs...
</form>
etc...
</iframe>
</body>
</html>
Thank you all very much for your help,
Richard Hughes

Categories