I want to set a group of post button that can send each value with ajax. How to modify the js part?
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="javascript">
function saveUserInfo()
{
var msg = document.getElementById("msg");
var f = document.user_info;
var userName = f.user_name.value;
var url = "value.php";
var postStr = "user_name="+ userName;
var ajax = false;
if(window.XMLHttpRequest) {
ajax = new XMLHttpRequest();
if (ajax.overrideMimeType) {
ajax.overrideMimeType("text/xml");
}
}
else if (window.ActiveXObject) {
try {
ajax = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
ajax = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
if (!ajax) {
window.alert("wrong");
return false;
}
ajax.open("POST", url, true);
ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
ajax.send(postStr);
ajax.onreadystatechange = function() {
if (ajax.readyState == 4 && ajax.status == 200) {
msg.innerHTML = ajax.responseText;
}
}
}
</script>
</head>
<body >
<div id="msg"></div>
<form name="user_info" id="user_info" method="post">
<input name="user_name" type="hidden" value="abc" /><br />
<input type="button" value="abc" onClick="saveUserInfo()">
<input name="user_name1" type="hidden" value="def" /><br />
<input type="button" value="def" onClick="saveUserInfo()">
<input name="user_name2" type="hidden" value="ghi" /><br />
<input type="button" value="ghi" onClick="saveUserInfo()">
</form>
</body>
Try
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="javascript">
function saveUserInfo(custom_value)
{
var msg = document.getElementById("msg");
var f = document.user_info;
var userName = f.user_name.value;
var url = "value.php";
var postStr = "user_name="+ userName + "&custom_value=" + custom_value;
var ajax = false;
if(window.XMLHttpRequest) {
ajax = new XMLHttpRequest();
if (ajax.overrideMimeType) {
ajax.overrideMimeType("text/xml");
}
}
else if (window.ActiveXObject) {
try {
ajax = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
ajax = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
if (!ajax) {
window.alert("wrong");
return false;
}
ajax.open("POST", url, true);
ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
ajax.send(postStr);
ajax.onreadystatechange = function() {
if (ajax.readyState == 4 && ajax.status == 200) {
msg.innerHTML = ajax.responseText;
}
}
}
</script>
</head>
<body >
<div id="msg"></div>
<form name="user_info" id="user_info" method="post">
<input name="user_name" type="hidden" value="abc" /><br />
<input type="button" value="abc" onClick="saveUserInfo('abc')">
<input name="user_name1" type="hidden" value="def" /><br />
<input type="button" value="def" onClick="saveUserInfo('def')">
<input name="user_name2" type="hidden" value="ghi" /><br />
<input type="button" value="ghi" onClick="saveUserInfo('ghi')">
</form>
</body>
What i have done is i have added a parameter to the saveUserInfo function and sent it with the post request.