When I try to post this textarea, it sends nothing and obviously returns nothing for that field.
All other input fields are fine.
I've read and everyone says to make sure .value is added after getelementid, which I was doing anyhow, so I'm not sure what is wrong.
I'm using Bootstrap 3, in case that matters.
Update: I just did a test and hard-coded text into the textarea field. That successfully passed. But any text that I type into the form does NOT get passed. I think this might be a Bootstrap 3 bug, perhaps.
Does anyone else know?
Javascript:
var http_request = false;
function show_hint(p_hint_text, p_span) {
document.getElementById(p_span).innerHTML = p_hint_text;
}
function makePOSTRequest(url, parameters, SpanName) {
http_request = false;
if (window.XMLHttpRequest) { // Mozilla, Safari,...
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {
http_request.overrideMimeType('text/xml');
}
} else if (window.ActiveXObject) { // IE
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
if (!http_request) {
alert('Cannot create XMLHTTP instance');
return false;
}
http_request.onreadystatechange = function () {
if (http_request.readyState == 4) {
if (http_request.status == 200) {
//alert(http_request.responseText);
result = http_request.responseText;
document.getElementById(SpanName).innerHTML = result;
document.getElementById(StatusName).innerHTML = 'Ready';
} else {
alert('There was a problem with the request.');
}
}
};
http_request.open('POST', url, true);
http_request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
alert(parameters);
http_request.send(parameters);
}
function Contact(obj, SpanName, StatusName) {
var curDateTime = new Date(); //For IE
var poststr = "gid=" + encodeURI(document.getElementById("gid").value) +
"&tid=" + encodeURI(document.getElementById("tid").value) +
"&cid=" + encodeURI(document.getElementById("cid").value) +
"&recid=" + encodeURI(document.getElementById("recid").value) +
"&item_ip=" + encodeURI(document.getElementById("item_ip").value) +
"&item_userid=" + encodeURI(document.getElementById("item_userid").value) +
"&item_author=" + encodeURI(document.getElementById("item_author").value) +
"&fromajax=" + encodeURI(document.getElementById("fromajax").value) +
"&action=" + encodeURI(document.getElementById("action").value) +
"&active=" + encodeURI(document.getElementById("active").value) +
"&message=" + encodeURI(document.getElementById("message").value);
var SpanName = SpanName;
var StatusName = StatusName;
//alert (SpanName);
alert(poststr);
makePOSTRequest('http://fakedomain.com', poststr, SpanName);
}
HTML
<span id="ContactFormSpanQXBIAHOBEU25">
<span id="statusQXBIAHOBEU25">
<form role="form" action="javascript:Contact(document.getElementById('ContactForm'),'ContactFormSpanQXBIAHOBEU25','statusQXBIAHOBEU25'); show_hint('Sending Data, Please Wait...', 'statusQXBIAHOBEU25');" method="post" name="ContactForm" id="ContactForm">
<input name="gid" id="gid" type="hidden" value="SDZOAYLTDV26">
<input name="tid" id="tid" type="hidden" value="ZBSAGNSCFM55">
<input name="cid" id="cid" type="hidden" value="2">
<input name="recid" id="recid" type="hidden" value="QXBIAHOBEU25">
<input name="item_IP" id="item_ip" type="hidden" value="555.555.555.555">
<input name="item_userid" id="item_userid" type="hidden" value="YCGLNBFZPD13">
<input name="item_author" id="item_author" type="hidden" value="YCGLNBFZPD13">
<input name="fromajax" id="fromajax" type="hidden" value="1">
<input name="action" id="action" type="hidden" value="add">
<input name="active" id="active" type="hidden" value="1">
<div class="form-group">
<textarea class="form-control" name="message" id="message" rows="5"></textarea>
</div>
<input name="Submit2" type="submit" class="btn btn-success btn-flat" value="Submit" />
</form>
</span>
</span>
Related
//i write a code to send message from form to my gmail but i get the following error failed to load resource the server responded with a status of 405
//(method not allowed)
HTML
<form class="contact-form">
<input type="text" name="" id="name" /> <br />
<input type="email" name="" id="email" /> <br />
<input type="text" name="" id="subject" /> <br />
<textarea name="" id="message" cols="30" rows="10"></textarea> <br />
<input type="submit" class="submit" value="Submit" />
</form>
JS
const contactForm = document.querySelector(".contact-form");
let fullName = document.getElementById("name");
let email = document.getElementById("email");
let subject = document.getElementById("subject");
let message = document.getElementById("message");
contactForm.addEventListener("submit", (e) => {
e.preventDefault();
let formData = {
name: fullName.value,
email: email.value,
subject: subject.value,
message: message.value,
};
let xhr = new XMLHttpRequest();
xhr.open("POST", "/");
xhr.setRequestHeader("content-type", "application/json");
xhr.onload = function () {
// error happens here
console.log(xhr.responseText);
if (xhr.responseText == "success") {
alert("email sent");
fullName.value = "";
email.value = "";
subject.value = "";
message.value = "";
} else {
alert("Something went wrong!");
}
};
xhr.send(JSON.stringify(formData));
});
I am trying to send form data as json to my device (with XMLHttpRequest).
My form have multiple required fields, and should not submit if mandatory fields are empty. But form data sends even field empty!
I searched, and add event.preventDefault(); but it's not work.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>first assignment</title>
<script>
function curlcheck() {
event.preventDefault();
event.stopImmediatePropagation();
var user_id = document.getElementById("user_id").value;
var pass = document.getElementById("password").value;
var xmlhttp = new XMLHttpRequest(); // new HttpRequest instance
var theUrl = "/submit_test";
xmlhttp.open("POST", theUrl);
xmlhttp.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
xmlhttp.send(JSON.stringify({ "ProgMode": user_id, "pass": pass }));
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
//document.getElementById("ajax_res").innerHTML = this.responseText;
console.log("success");
}
}
}
</script>
</head>
<body>
<div class="somebox"></div>
<ul>
<h3>Team 1 Online Exam System</h3>
</ul>
<form action="" method="POST">
<div name="form header" class="formhead">
<h1>Welcome</h1>
<p><span id="loginerr" class="err_alert"></span></p>
</div>
<div class="login_box">
<lable for="user_id">User ID</lable>
<input type="text" placeholder="Enter User ID" id="user_id" required>
<label for="password">Password</label>
<input type="password" placeholder="Enter Password" id="password" required>
<button id="but" type="submit" onclick="curlcheck(); return false">Login</button>
</div>
</form>
<div class="footer">
</div>
</body>
</html>
In HTML5, you do not need to check it by yourself, you can call the reportValidity() method to do the validation.
function curlcheck(form){
var user_id = document.getElementById("user_id");
var pass = document.getElementById("password");
if (user_id.reportValidity() && pass.reportValidity()){
var xmlhttp = new XMLHttpRequest(); // new HttpRequest instance
var theUrl = "/submit_test";
xmlhttp.open("POST", theUrl);
xmlhttp.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
xmlhttp.send(JSON.stringify({ "ProgMode": user_id.value, "pass": pass.value }));
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
//document.getElementById("ajax_res").innerHTML = this.responseText;
console.log("success");
}
}
}
return false;
}
<form action="" method="POST" onclick="return curlcheck(this);">
<div name="form header" class="formhead">
<h1>Welcome</h1>
<p><span id="loginerr" class="err_alert"></span></p>
</div>
<div class="login_box">
<lable for="user_id">User ID</lable>
<input type="text" placeholder="Enter User ID" id="user_id" required>
<label for="password">Password</label>
<input type="password" placeholder="Enter Password" id="password" required>
<button>Login</button>
</div>
</form>
If required data empty then return false from curlcheck function.
<script>
function curlcheck(event) {
event.preventDefault();
event.stopImmediatePropagation();
var user_id = document.getElementById("user_id").value;
var pass = document.getElementById("password").value;
if (user_id === "" || pass === "") {
return false; //or show required message
}
var xmlhttp = new XMLHttpRequest(); // new HttpRequest instance
var theUrl = "/submit_test";
xmlhttp.open("POST", theUrl);
xmlhttp.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
xmlhttp.send(JSON.stringify({ "ProgMode": user_id, "pass": pass }));
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
//document.getElementById("ajax_res").innerHTML = this.responseText;
console.log("success");
}
}
}
</script>
I have following Code. But the String in the Database is empty. Why does it not work to get the string from the input field?
HTML
<div id="todo">
<h2>Todo Liste</h2>
<form method="get">
<input type="text" name="username" placeholder="name" required>
<input type="text" class="inputField" name="inputData" id="myInput" placeholder="title" required><br><br>
<span onclick="newElement(); sendData(this.value)" class="addBtn">Add</span><br><br>
</form>
JavaScript
function sendData(str) {
const xmlhttp = new XMLHttpRequest();
xmlhttp.onload = function() {
document.getElementById("txtHint").innerHTML = this.responseText;
}
xmlhttp.open("GET", "saveData.php?q=" + str);
xmlhttp.send();
}
To get the Value on the html page:
<p>Response from PHP <span id="txtHint"></span></p>
to bring the data in the html
function newElement() {
var li = document.createElement("li");
var inputValue = document.getElementById("myInput").value;
var t = document.createTextNode(inputValue);
li.appendChild(t);
document.getElementById("myUL").appendChild(li);
}
and i want to get the data of the text, a user typed in. this is where i fail.
My idea was
console.log(document.getElementsByClassName("inputField"));
How can I get the element?
i tried few days to make this code working but today i got the idea to ask some help. Here is the problem: when i try to send the value of my input fields to my params variable, i just get nothing, an empty value. However when i remove my validation function,
$(document).input.hasAttribute('required').each(function () {
if ($(this).val() == "") {
alert('Please fill all the fields');
}
});
all the parameters are in my url : ?rpt=123456&etc...etc...
Do you know why i loose my variable value on the way? If yes how to solve this?
Thanks for the help
jQuery(document).ready(function() {
jQuery("#vb_report_date").datepicker({
format: 'dd/mm/yyyy',
autoHide: true
});
jQuery("#vb_verify_button").click(function() {
check_required_inputs(true);
});
});
function check_required_inputs(hasbeenSubmited) {
var params = "";
if (hasbeenSubmited) {
$(document).input.hasAttribute('required').each(function() {
if ($(this).val() == "") {
alert('Please fill all the fields');
}
});
params = "?rpt=" + jQuery("#vb_report_no").val() + "&d=" + jQuery("#vb_report_date").val() + "&pin=" + jQuery("#vb_verif_pin").val();
}
window.location.href = "verify-reports.php" + params;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<body>
<form id="requiredform" class="verify-box">
<input type="text" id="vb_report_no" placeholder="Report Number" size="22" data-error="This field is required." class="" required>
<input type="text" id="vb_report_date" placeholder="Date of Issue" size="12" class="hasDatepicker" data-error="This field is required." required>
<input type="text" id="vb_verif_pin" placeholder="Verification PIN" size="22">
<input type="submit" value="Verify" id="vb_verify_button">
</form>
</body>
</html>
To select all required inputs in the document, use $(document).find('input[required]').
Your function should look like:
function check_required_inputs(hasbeenSubmited) {
// do the check only when hasBeenSubmited
if (hasbeenSubmited) {
// assume inputs are filled
var isValid = true;
// check required inputs
$(document).find('input[required]').each(function () {
// input value is missing
if ($(this).val() == "") {
alert('Please fill all the fields');
isValid = false;
}
});
// do the redirect if isValid
if (isValid) {
// make query string
var params = "?rpt=" + $("#vb_report_no").val() + "&d=" + $("#vb_report_date").val() + "&pin=" + $("#vb_verif_pin").val();
// do the redirect
window.location.href = "verify-reports.php" + params;
}
}
}
You can use onsubmit method.
<form id="requiredform" class="verify-box" onsubmit="return getdata()" >
<input type="text" id="vb_report_no" placeholder="Report Number" size="22" data-error="This field is required." class="" required>
<input type="text" id="vb_report_date" placeholder="Date of Issue" size="12" class="hasDatepicker" data-error="This field is required." required>
<input type="text" id="vb_verif_pin" placeholder="Verification PIN" size="22">
<input type="submit" value="Verify" id="vb_verify_button">
</form>
function getdata() {
check_required_inputs(true);
}
Try querySelectorAll with an attribute selector to get all required inputs in the document.
document.getElementById('requiredform').querySelectorAll("[required]")
Now function will be like this,
function check_required_inputs(hasbeenSubmited) {
var params = "";
console.log(hasbeenSubmited)
if (hasbeenSubmited) {
document.getElementById('requiredform').querySelectorAll("[required]").forEach(function (element) {
if ($(element).val() == "") {
alert('Please fill all the fields');
}
});
params = "?rpt=" + jQuery("#vb_report_no").val() + "&d=" + jQuery("#vb_report_date").val() + "&pin=" + jQuery("#vb_verif_pin").val();
}
window.location.href = "verify-reports.php" + params;
}
For more details: how to get value from a form before submit
Check the working snippet here..
function check_required_inputs(hasbeenSubmited) {
var params = "";
console.log(hasbeenSubmited)
if (hasbeenSubmited) {
document.getElementById('requiredform').querySelectorAll("[required]").forEach(function (element) {
if ($(element).val()== "") {
alert('Please fill all the fields');
}
});
params = "?rpt=" + jQuery("#vb_report_no").val() + "&d=" + jQuery("#vb_report_date").val() + "&pin=" + jQuery("#vb_verif_pin").val();
}
console.log(params);
window.location.href = "verify-reports.php" + params;
}
function getdata() {
check_required_inputs(true);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="requiredform" class="verify-box" onsubmit="return getdata()" >
<input type="text" id="vb_report_no" placeholder="Report Number" size="22" data-error="This field is required." class="" required>
<input type="text" id="vb_report_date" placeholder="Date of Issue" size="12" class="hasDatepicker" data-error="This field is required." required>
<input type="text" id="vb_verif_pin" placeholder="Verification PIN" size="22">
<input type="submit" value="Verify" id="vb_verify_button">
</form>
I am trying to submit a form without doing a hard refresh but my page is refreshing. I tried putting action=“javascript:void(0);" in the form tag but that didn't work. I also cannot use jquery.
Work Flow that causes error:
Submitting a form that is supposed to send some information to a php file.
Page gets directed to another page that doesn't exist.
function toggle_visibility(id){
var e = document.getElementById(id);
if(e.style.visibility == 'hidden'){
e.style.visibility = 'visible';
}
else{
e.style.visibility = 'hidden';
}
}
function createAjaxRequestObject() {
var httpRequest;
if (window.XMLHttpRequest) { // Mozilla, Safari, ...
httpRequest = new XMLHttpRequest();
if (httpRequest.overrideMimeType) {
httpRequest.overrideMimeType('text/xml');
}
}
else if (window.ActiveXObject) { // IE
try {
httpRequest = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e) {
try {
httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e) {}
}
}
if (!httpRequest) {
alert('Giving up :( Cannot create an XMLHTTP instance');
return false;
}
// Create the object
return httpRequest;
}
function sendTicket() {
var firstName = document.getElementById("firstName").value;
var lastName = document.getElementById("lastName").value;
var email = document.getElementById("email").value;
var subject = document.getElementById("subject").value;
var msg = document.getElementById("msg").value;
var encFirst = encodeURIComponent(firstName);
var encLast = encodeURIComponent(lastName);
var encEmail = encodeURIComponent(email);
var encsubject = encodeURIComponent(subject);
var encmsg = encodeURIComponent(msg);
var info = "firstName="+encFirst+"&lastName="+encLast+"&email="+encEmail+"&subject="+encsubject+"&msg="+encmsg;
var http3 = createAjaxRequestObject();
if (http3.readyState == 4) {
if (http3.status == 200){
var result = JSON.parse(http3.responseText);
console.log(result);
}
}
http3.open("POST", "send_mail.php", true);
http3.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
http3.send(info);
}
</script>
Welcome!
View My Tickets
Submit Ticket
Change my Password
Full Name
Email
Subject
Your Message *
You should change the type of you input from submit to button so the sendTicket() will be triggered, else the form will be submited before reached your sendTicket() function so it should be :
<input type="button" value="Submit" onclick="sendTicket();" />
Instead of :
<input type="submit" value="Submit" onclick="sendTicket();" />
Hope this helps.
function sendTicket() {
var firstName = document.getElementById("firstName").value;
var lastName = document.getElementById("lastName").value;
var email = document.getElementById("email").value;
var subject = document.getElementById("subject").value;
var msg = document.getElementById("msg").value;
var encFirst = encodeURIComponent(firstName);
var encLast = encodeURIComponent(lastName);
var encEmail = encodeURIComponent(email);
var encsubject = encodeURIComponent(subject);
var encmsg = encodeURIComponent(msg);
var info = "firstName="+encFirst+"&lastName="+encLast+"&email="+encEmail+"&subject="+encsubject+"&msg="+encmsg;
console.log(info);
}
<h1>Welcome! </h1>
<div id="buttons">
<button class="myButton" onclick="showTickets(); toggle_visibility('table');">View My Tickets</button>
<button class="myButton" onclick="toggle_visibility('Submit');">Submit Ticket</button>
<button class="myButton" onclick="toggle_visibility('changePassword');">Change my Password</button>
</div>
<div id = "table"> </div>
<div id = "Submit">
<form id = "emailForm" action="javascript:void(0);">
<ul class="form-style-1">
<li><label>Full Name <span class="required">*</span></label><input type="text" name="firstName" class="field-divided" placeholder="First" id="firstName" /> <input type="text" name="field2" class="field-divided" placeholder="lastName" id = "lastName" /></li>
<li>
<label>Email <span class="required">*</span></label>
<input type="email" name="email" class="field-long" id= "email" />
</li>
<li>
<label>Subject</label>
<input type="text" name="subject" class="field-divided" placeholder="Subject" id="subject" />
</li>
<li>
<label>Your Message <span class="required">*</span></label>
<textarea name="msg" id="msg" class="field-long field-textarea"></textarea>
</li>
<li>
<input type="button" value="Submit" onclick="sendTicket();" />
</li>
</ul>
</form>
</div>
<br><br><br><br><br><br><br><br>