How to post textbox array name value using xmlhttp - javascript

I am a newbie programmer. Is their a way I can post the array name in php file using xmlhttp.I have seen same question like this but it was totally advance with my basic information.
Here's my sample code problem:
HTML
<body>
<input type="text" id="department" name="department[]" />
<br />
<input type="text" id="department1" name="department[]" />
<br />
<input type="text" id="output" name="output" style="width:100%; height:200px;" />
<br />
<input type="button" id="btn" name="btn" value="submit" onClick="showvalue()" />
</body>
JS
function showvalue() {
var dept=document.getElementsByName("department[]").value;
var xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
document.getElementById("output").value=xmlhttp.responseText;
}
}
xmlhttp.open("POST","processbranch.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("&dept1="+dept);
}
PHP
$dept = $_POST['dept1'];
foreach($dept as $key => $deptval)
{
echo $deptval;
}
Please give me some sample like my code. Please sir/mam. Thanks in advance :D

hey #shiro Jacinto just change the name of your input department[dept] & department[dept1] in both the input. But I tell you its not a proper way. you can follow the steps
1) create a simple form with different name.
2) call js function on submit.
3) create json object and add your fields into it.
4) post your data to desired php file using jQuery post or ajax post.
Try using this link. Hope this will help you

Related

POST FormData to php using javascript and XMLHTTPRequest

At the moment I have two files, index.htm and accessdata.php.
This is what I have in index.htm:
<html>
<head>
<script>
function postData() {
var xmlhttp=new XMLHttpRequest();
var url = "accessdata.php";
var checkBoxes_formData = new FormData(document.getElementById("checkBoxes"));
xmlhttp.open("POST",url,true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send(checkBoxes_formData);
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById("result").innerHTML=xmlhttp.responseText;
}
}
}
</script>
</head>
<body>
<button type="button" onclick="postData()">POST</button>
<form id=checkBoxes>
<table>
<tr><input type="checkbox" name="opt1" value="blue" checked> Blue</td>
<tr><input type="checkbox" name="opt2" value="yellow"> Yellow</td>
</table>
</form>
<p id="result"></p>
</body>
</html>
and this is what I have in accessdata.php:
<?php
$opt1=$_POST['opt1'];
echo $opt1;
echo "bla";
?>
Now, on
<p id="result"></p>
"bla" shows up, but not "blue", or "yellow".
What am I doing wrong?
THE CORRECT HTML CODE BELOW!!
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>POST PHP XMLHTTPRequest</title>
<script>
function postData() {
var xmlhttp=new XMLHttpRequest();
var url = "accessdata.php";
var checkBoxes_formData = new FormData(document.getElementById("checkBoxes"));
xmlhttp.open("POST",url,true);
xmlhttp.send(checkBoxes_formData);
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById("result").innerHTML=xmlhttp.responseText;
}
}
}
</script>
</head>
<body>
<button type="button" onclick="postData()">POST</button>
<form id="checkBoxes">
<input type="checkbox" name="opt1" value="blue"> Blue
<input type="checkbox" name="opt2" value="yellow" checked> Yellow
</form>
<p id="result"></p>
</body>
</html>
blue doesn't show up because you are claiming:
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
But FormData objects encode data as multipart/form-data.
Remove the code that explicitly sets the content-type and let the browser generate it for you. (Don't try to explicitly set it to multipart/form-data, you have to specify what the boundary marker is going to be in the header too).
yellow doesn't show up for the same reason, but also because:
You are only looking at opt1 and it is associated with the name opt2 and
Checkbox controls are only successful (i.e. will be in the data that gets submitted) if they are checked (which the yellow one is not by default).
Complicating matters further, your HTML is invalid. Use a validator. You can't have an input as a child of a table row, you need to create a table data cell between them. (Note that it looks like you are trying to use a table for layout, you should probably get rid of the table entirely).
Tap to create a note
You should try this…
<form method=post action=accessdata.php>
<input type=checkbox value=blue name=opt1>blue
<input type=submit value=submit name=send>
</form>
In accessdata. PHP
if❨isset❨$_POST[`send']❩❩ {
$color=$_POST[`opt1'];
echo $color."bala";
}

Redirecting users after they submit a form

I'm trying to make a basic form that redirects users to any given web page I choose after they submit their response. Although the action element is located on a site that I can not manipulate.
How would I go about doing this?
<form method="POST" action="https://docs.google.com/forms/d/1dAp52ALtiu8tEt8UY-Rs7WcKn36pI1vBItmGl0sV0Ik/formResponse">
<input type="text" name="entry.139518212" value="">
<input type="submit" name="submit" value="Submit">
</form>
Ajax may be helpful for you. you can submit your form through Ajax, get the response and do whatever you want.
you have to create an ajax function and call it on a click event
<input id="text" type="text" name="entry.139518212" value="">
<input type="submit" name="submit" value="Submit" onclick="sendData();">
and then create a js function:
function sendData(){
///getting text from input
text=document.getElementById('text').value;
var xmlhttp;
///browser compatibility
if (window.XMLHttpRequest){
xmlhttp=new XMLHttpRequest();
}else{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
///if response was retrieved and no errors occured
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
///you can access the response
///put your redirection code here
}
}
xmlhttp.open("POST","https://docs.google.com/forms/d/1dAp52ALtiu8tEt8UY-Rs7WcKn36pI1vBItmGl0sV0Ik/formResponse",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("entry.139518212="+text);
}
Try this. You will need to have jQuery for it to work.
<script type="text/javascript">
$(function() {
$('form').submit(function(){
$.post('https://docs.google.com/forms/d/1dAp52ALtiu8tEt8UY-Rs7WcKn36pI1vBItmGl0sV0Ik/formResponse', function() {
window.location = 'http://www.whereveryouwanttogo.com';
});
return false;
});
});
</script>
From HTML Form Redirect

Javascript: unable to submit form

I'm trying to use javascript (used within another program) to automate the submission of a form with the appropriate textboxes filled in. Using the simple page below, I can successfully fill out the text box using:
javascript:document.getElementsByName('UserIDValue')[0].value = "12345";
but can't seem to get anything to work that will actually submit the form. None of these attempts at solving it work: (By 'work' I mean have the same effect as if I clicked the Log In button.)
document.forms["MFALogInForm"].submit();
document.getElementsByName("LoginButton")[0].submit();
document.getElementById("MFALogInForm").submit();
document.forms[0].submit();
the code for the page I'm working with is below: The link to it is here: https://ppcplus.121fcu.org/Mobile/Features/Auth/MFA/MFALogin.aspx
<html><body>
<form id="MFALogInForm" name="MFALogInForm" method="post" action="MFALogin.aspx?__ufps=981699">
<input type="hidden" name="__EVENTTARGET" value="">
<input type="hidden" name="__EVENTARGUMENT" value="">
<script language=javascript><!--
function __doPostBack(target, argument){
var theform = document.MFALogInForm
theform.__EVENTTARGET.value = target
theform.__EVENTARGUMENT.value = argument
theform.submit()
}
// -->
</script>
<img id="RoofImage" src="/Mobile/Images/Current_HandheldDevice/Universal/1Pixel.gif" alt="Private PC" /><br />
<img id="LogoHeader_LogoImage" src="/Mobile/Images/Current_HandheldDevice/Universal/Logo.gif" /><br />
<font size="+1" color="#006D9B"><b>LOGIN</b></font><br>
<font size="-1"><b>USER ID</b></font><br>
<input name="UserIDValue"/><br>
<input name="LoginButton" type="submit" value="Log In"/><input name="ResetButton" type="submit" value="Reset"/><br>
</form></body></html>
document.forms[0].elements["LoginButton"].click();
worked for me.

TextField value when tried to get in javascript using jQuery is empty

I am trying to get a value from a textField onclick of submit button to a javascript function and trying to alert the same to the user. I am using JSP and Jquery(in javascript) for this.
JSP -
<input id="employeeName" type="text" name="empName" value=ben/>
<input type="button" value="search employee" onclick="abc();" />
JAVASCRIPT -
function abc() {
var typedEmployee = $('#employeeName').val();
alert(typedEmployee );
}
Problem - when i execute this, i get typedEmployee value "" and the alert is empty.
I have also tried using -
var typedEmployee = document.getElementById('employeeName').value;
Still the same issue.
I have used this method before and that works fine.
Could someone help me out with this please???
This little bit of jQuery works.
<input id="employeeName" type="text" name="empName" value="ben" />
<input type="button" id="getName" value="search employee" />
Remove the onClick from before and add an id="getName" to the button
Place the following in the head section of your page.
<script type="text/Javascript">
$(document).ready(function(){
$('#getName').click(function(){
var typedEmployee = $('#employeeName').val();
alert(typedEmployee);
});
});
</script>
EDIT - Code above changed to show how to place on the page
http://jsfiddle.net/jasongennaro/dkQFq/
Just remove the single quote from the beginning of both input type ans see if it works.
You need to put value ben under quotes & remove the single quote.
Your jquery works just fine in my FF 5.0
Try this:
<input id="employeeName" type="text" name="empName" value="ben" />
<input type="button" value="search employee" onclick="abc();" />
<script type="text/javascript">
function abc() {
var typedEmployee = $('#employeeName').val();
alert(typedEmployee );
typedEmployee = document.getElementById('employeeName').value;
alert('employee = ' + typedEmployee);
}

javascript form submission to modify action

I'm trying to modify the post url of a form depending on the name of the file being posted. Any suggestions very much appreciated. Here is the code (which doesn't work):
<script type="text/javascript">
function submit_form()
{
document.uploadform.action = "upload?name=" + document.uploadform.codejar.value;
return 1;
}
</script>
<form name="uploadform" method="post" onsubmit="return submit_form();">
<table>
<tr><td>Select your jar to upload</td></tr>
<tr><td> <input type="file" name="codejar" style="width: 400"></td></tr>
<tr><td><input type="submit" name="send" value="Upload jar"></td></tr>
</table>
</form>
"I'm trying to get it to do a plain http post of the file, to a url with the filename as a parameter"
Just do this then:
function submit_form() {
document.uploadform.action = document.uploadform.codejar.value;
document.uploadform.submit();
}
...and think about changing your "send" button to
<button type="button" onclick='submit_form()'>Upload jar</button>
Why would you need to do that?
You should be able to access that once the form is POSTed.
Also, browsers can send different things when getting the value from file inputs.

Categories

Resources