[Webinar] Streamline your web hosting managementRegister Today

x
?
Solved

javascript - send data to server without page reload

Posted on 2010-03-28
3
Medium Priority
?
852 Views
Last Modified: 2012-06-21
Hi,

I'm new to javascript and need some guidance.  I have a page with a form and a text input box.  I want to send  or I should say "submit" the data in the text box to the server but I don't want that page to be reloaded.  

Here's the challenge though: The server I'm using is an embedded server that is very limited in functionality.  The only way I can send data to it is in a "get" format (i.e. "ip addr/?c=xxx").  What is some javascript code that allows me to effectively do a submit without reloading the page?

Alternatively, what would the HTML / javascript code look like to put my text box into a frame, submit the text from that frame and just reload that frame?

Thanks,
Charlie
0
Comment
Question by:charlieopp
3 Comments
 
LVL 5

Expert Comment

by:irocwebs
ID: 28897503
0
 
LVL 83

Accepted Solution

by:
leakim971 earned 1000 total points
ID: 28903389
Hello charlieopp,

>Alternatively, what would the HTML / javascript code look like to put my text box into a frame, submit the text from that frame and just reload that frame?

You can get content of iframe from parent... Sorry I should say : I don't know how to get content of iframe from parent

You can post content of a textbox with ajax or with an hidden (or not) iframe :

We set URL of an iframe
document.getElementById('likeAjax').src = 'mypage.php?field=' + encodeURI( document.getElementById('field1').value );

mypage.php use : $_GET['field'] to get the "field" value
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head></head>
<body>
Field: <input id="field1" name="field1" />
<input type="button" onClick="document.getElementById('likeAjax').src = 'mypage.php?field=' + encodeURI( document.getElementById('field1').value );" value="send value to mypage.php" />
<div style="display:none"><iframe id="likeAjax"></div>
</body>
</html>

Open in new window

0
 
LVL 3

Expert Comment

by:SPARC-DESIGN
ID: 28961467
I would use jQuery. Nice, easy and simple.

You can check out an example and all the information on this page: http://api.jquery.com/jQuery.get/
0

Featured Post

Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses how to implement server side field validation and display customized error messages to the client.
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
Suggested Courses

607 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question