Member Avatar for web3

I am new to Javascript and I don't want to use frameworks. I found a tutorial on how to make this:

<html>
<head>
<title></title>
<script src="jquery-1.4.2.js" type="text/javascript">
</script>
<script type="text/javascript">
$(document).ready(function() {
	$("div#msgbox").hide();
	$("#addComment").click(function (){
		$.post('index1.php', {
			name:$("#name").val(), //PHP recognize it like POST
			comment:$("#comment").val() //PHP recognize it like POST
		},
		function(response){
			$("div#msgbox #msg").html("<h2>Comment added!</h2>");
			$("div#msgbox").hide().slideDown("normal"); //slideDown or shoe
		}
		);
		return false;
	})
	
	$("div#msgbox").click(function() {
		$(this).slideUp("normal"); //slideUp or hide
	}
	)
});
</script>
<style type="text/css">
body{
margin:0px;
}
#msgbox{
height:50px;
width:100%;
background:#999;
position:fixed;
}
</style>
</head>
<body>
<div id="msgbox">
<span id="msg">
</span>
</div>
<form id="commentForm">
Name: <input type="text" id="name" />
Comment: <input type="text" id="comment" />
<input type="submit" id="addComment" value="Post Comment" />
</form>

It takes name and comment value and sends it as $_POST and $_POST to post.php. I was wondering can somebody write this in raw javascript.

  • 3 Contributors
  • 8 Replies
  • 179 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Member #334542

Dani AI

Generated

Short answer: yes — everything jQuery does here can be done in plain JavaScript. is mistaken when saying “Javascript will not post the value to php”: a normal form submit or an AJAX request from JavaScript both send data to the server. ’s XMLHttpRequest example is a good low-level demonstration; below is a concise, modern alternative using fetch and FormData that does the same job without a library.

document.addEventListener('DOMContentLoaded', function () {
  const form = document.getElementById('commentForm');
  const msgbox = document.getElementById('msgbox');
  const msg = document.getElementById('msg');

  form.addEventListener('submit', function (e) {
    e.preventDefault();
    const data = new FormData(form); // reads inputs by name

    fetch('index1.php', { method: 'POST', body: data })
      .then(res => res.text())
      .then(() => {
        msg.innerHTML = '<h2>Comment posted</h2>';
        msgbox.style.display = 'block'; // use CSS transitions for sliding
      })
      .catch(() => {
        msg.innerHTML = '<h2>Error sending comment</h2>';
        msgbox.style.display = 'block';
      });
  });

  msgbox.addEventListener('click', () => { msgbox.style.display = 'none'; });
});

If you prefer GET (as you asked later), build a query string and fetch it:

const qs = new URLSearchParams({ name: form.name.value, comment: form.comment.value });
fetch('index1.php?' + qs.toString()).then(...);

Practical tips: use URLSearchParams for URL encoding or FormData for POST. If you set headers manually for URL-encoded bodies, use Content-Type: application/x-www-form-urlencoded;charset=UTF-8. Always validate and escape input server-side (never trust client JS), consider CSRF protection, and remember same-origin/CORS rules. For very old browsers follow ’s XHR approach or include a fetch polyfill. Use CSS-based animations for smooth show/hide effects rather than heavy JS animation loops.

Recommended Answers

All 8 Replies

Member Avatar for Member #334542

Javascript will not post the value to php

Member Avatar for web3

But jQuery is coded in Javascript. How is it then possible in jQuery?

Member Avatar for Member #334542

You comment on code shows that php will recognize that

Member Avatar for Member #334542

In java Script you can use like this: (HTML)

<form name="frm1" method="post" action="post.php">
Name: <input type="text" id="name" name="txtvalue"/>
<input type="submit" id="addComment" value="Post Comment" />
</form>

The submit button will post the element values to the php page thats it. you can receive value by specifiying the below code in post.php

$value=$_POST['txtvalue'];

you got it. Simple.

Edited by Member #334542 because: n/a
Member Avatar for web3

Is there a way to this but not to post values to post.php but to send it with get method?

Edited by web3 because: n/a
Member Avatar for scrappedcola

You want to make an ajax call like this:

var req;
var url = "location.php?name="+valueHere;
if(window.XMLHttpRequest)//this is to determin if IE or other
{
   req = new XMLHttpRequest(); 
}else if(window.ActiveXObject) //this is the IE branch
{
 req = new ActiveXObject("Microsoft.XMLHTTP");
}
req.open("GET",url,true); //could have been POST
req.onreadystatechange = callback; //this is the state change event of the http request
req.send(null);
function callback(){
  if(req.readyState == 4){
     if(req.status == 200){
        //do something with req.responseText which is the stuff 
        // this is the data that your php sends back
     }
   }
   clear();
}

Now this isn't exactly the answer to your question but it is how ajax is done without the framework in javascript. You may want to check out some basic ajax tutorials such as these:
http://www.ibm.com/developerworks/web/library/wa-ajaxintro1.html

Member Avatar for Member #334542

Is there a way to this but not to post values to post.php but to send it with get method?

Yes you can, instead of method=POST use GET. and receive thru your url.

$id=$_GET['id'];
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.