Develop Reference

cant read post request response using javscript

I have an html form. The form sends login request to server. The html response from server is put in an iframe.
$(document).ready(function(){
$("#submit").click(function(event){
$("#dummyframe").on('load',function() {
var myiframe = $("#dummyframe").val();
var iframedocument = myiframe.contentDocument;
var response = iframedocument.queryselector("pre");
var errormessage = '{"code":500,"message":"入力項目に誤りがあります","data":{}}';
if (response == errormessage ){
alert('wrong password');
}
else {
alert('password is ok');
}
});
});
});
<iframe name="dummyframe" id="dummyframe" style="display: none;"></iframe>
<form method="post" target="dummyframe" action="https://kintai.jinjer.biz/v1/sign_in">
<input name="company_code" type="hidden" value="1234" />
<input name="email" type="hidden" value="1234" />
<input name="password" type="hidden" value="1234" />
<input type="submit" value= "submit" id= "submit" />
</form>
I want to read response from the server to validate password. If I get error message from server, I want to alert "wrong password" in my html page. Am I missing something? It doesn't work. The code doesn't seem incorrect. Your help is greatly appreciated.

You need to change your script to below:
$(document).ready(function(){
$("#submit").click(function(event){
$("#dummyframe").on('load',function() {
var myiframe = $("#dummyframe");
var iframedocument = myiframe.contentDocument;
if (iframedocument.document) iframedocument = iframedocument.document;
var response = iframedocument.queryselector("pre").innerHTML;
var errormessage = '{"code":500,"message":"入力項目に誤りがあります","data":{}}';
if (response == errormessage ){
alert('wrong password');
}
else {
alert('password is ok');
}
});
});
});

stop page from redirecting to php file after form submit

I have a php file that retrieves information entered in an html form and saves it into a mysql db. The problem I am facing is that I cannot figure out how to stop the page from redirecting to insertinfo.php. I want the user to stay on the same index.html page where a modal will appear on form submission. Below is my index.html and insertinfo.php
The index.html file:
<div class="form ">
<form class="container" action="insertinfo.php">
<input type="text" id="firstname" class="form_input" placeholder="First Name" name="firstname" required>
<input type="text" id="lastname" class="form_input" placeholder="Last Name" name="lastname" required>
<input type="text" id="email" class="form_input" placeholder="Email Address" name="email" required>
<input type="submit" id="myBtn" class="submit" value="Download eBook">
</form>
</div>
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<div class="icon-box">
<i class="material-icons">check</i>
</div>
</div>
<div class="modal-body">
<h4>An email with a download link towards the eBook has been sent to you.</h4>
<p>Please check your inbox and your spam/bulk messages.</p>
Continue
</div>
</div>
</div>
<script type="text/javascript">
var modal = document.getElementById("myModal");
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// When the user clicks the button, open the modal
btn.onclick = function(event) {
var fnameInput = document.getElementById("firstname").value;
var lnameInput = document.getElementById("lastname").value;
var emailInput = document.getElementById("email").value;
if(fnameInput.length == 0 || lnameInput.length == 0 || emailInput.length == 0){
event.preventDefault();
alert("You must complete all existing fields");
} else {
modal.style.display = "block";
}
}
</script>
The insertinfo.php:
if (isset($_POST["submit"])){
// Escape user inputs for security
$first_name = $conn->real_escape_string($_REQUEST['firstname']);
$last_name = $conn->real_escape_string($_REQUEST['lastname']);
$email = $conn->real_escape_string($_REQUEST['email']);
$date_added = 'NOW()';
$sql = "INSERT INTO userinfo (firstname, lastname, email, date_added) "
. "VALUES ('$first_name', '$last_name', '$email', $date_added )";
if ($conn->query($sql) === TRUE) {
echo 'not working';
} else {
echo "Error: " . $sql . "<br>" . $conn->error;
}
}

If you want your user to be index.html and submit the form to other php file then you will need to use ajax post request to the insertinfo.php. Ajax can post form data and retrieve PHP processed response
This is a example how you can submit the form with ajax
$(document).ready(function() {
// process the form
$('form').submit(function(event) {
// get the form data
// there are many ways to get this data using jQuery (you can use the class or id also)
var formData = {
'name' : $('input[name=name]').val(),
'email' : $('input[name=email]').val(),
'superheroAlias' : $('input[name=superheroAlias]').val()
};
// process the form
$.ajax({
type : 'POST', // define the type of HTTP verb we want to use (POST for our form)
url : 'process.php', // the url where we want to POST
data : formData, // our data object
dataType : 'json', // what type of data do we expect back from the server
encode : true
})
// using the done promise callback
.done(function(data) {
// log data to the console so we can see
console.log(data);
// here we will handle errors and validation messages
});
// stop the form from submitting the normal way and refreshing the page
event.preventDefault();
});
});

The action form attribute describes where the <form> is going to be submitted to.
If you remove it, the form will submit to the current page.
So deleting this part: action="insertinfo.php" will stop the <form> from redirecting you to insertinfo.php
If you still want to submit your data to insertinfo.php without reloading, use an ajax library or check out: How to use XMLHttpRequest.

Javascript form not working as should

I'm currently trying to create a contact form which I have used on other websites I have developed before, however, I'm having a problem with this one.
If the required fields are not filled in, an error message should fade in near the submit button and say "... is required."
Once all necessary fields are filled in, and the "Send message" button is clicked, the form is supposed to fade away and the success message is supposed to fade in, but at the minute, the form does nothing when you click the button.
Here is the HTML I am using;
<form id="contactForm" action="#" method="post">
<fieldset>
<div><input name="name" type="text" id="name" title="Name" value="Name •" /></div>
<div><input name="email" type="text" id="email" title="Email" value="Email •" /></div>
<div><input name="number" type="text" id="number" title="Contact Number" value="Contact number" /></div>
<div><input name="datepicker" type="text" id="datepicker" title="Date required" value="Date required"><div id="datepicker"></div></div>
<div><textarea name="message" class="form-poshytip" id="message" title="Message">Enter your message below; •</textarea></div>
The send mail configuration;
<!-- send mail configuration -->
<input type="hidden" value="my#email.co.uk" name="to" id="to" />
<input type="hidden" value="You have mail" name="subject" id="subject" />
<input type="hidden" value="send-mail.php" name="sendMailUrl" id="sendMailUrl" />
<!-- ENDS send mail configuration -->
<p><input type="button" value="Send message" name="Button" id="submit" span id="error" class="warning"></span></p>
</fieldset>
</form>
I have tried changing the input type of the button from
<input type="button" to <input type="submit"
and all that does is reload the page without sending the form.
This is the Javascript code I have;
// hide messages
$("#error").hide();
$("#sent-form-msg").hide();
// on submit...
$("#contactForm #submit").click(function() {
$("#error").hide();
// number
var number = $("input#number").val();
//datepicker
var name = $("input#datepicker").val();
//required:
//name
var name = $("input#name").val();
if(name == ""){
$("#error").fadeIn().text("Name required.");
$("input#name").focus();
return false;
}
// email
var email = $("input#email").val();
if(email == ""){
$("#error").fadeIn().text("Email required.");
$("input#email").focus();
return false;
}
// message
var message = $("#message").val();
if(message == ""){
$("#message").fadeIn().text("Message required.");
$("input#message").focus();
return false;
}
// send mail php
var sendMailUrl = $("#sendMailUrl").val();
//to, from & subject
var to = $("#to").val();
var from = $("#from").val();
var subject = $("#subject").val();
// data string
var dataString = 'name='+ name
+ '&email=' + email
+ '&message=' + message
+ '&to=' + to
+ '&from=' + from
+ '&subject=' + subject;
// ajax
$.ajax({
type:"POST",
url: sendMailUrl,
data: dataString,
success: success()
});
});
// on success...
function success(){
$("#sent-form-msg").fadeIn();
$("#contactForm").fadeOut();
}
return false;
I have tried over and over again to get this to work but it doesn't... And it doesn't make any sense why it doesn't on this webpage I'm developing but does on others...
Is there SOMETHING I'm missing that I just can't see or is this code completely chuffed?

Try to include this
$(document).ready(function(){
//your code here
});

Your function in javascript capture click button but your form is current working if you doesn't capture it.. try this code I hope it help
Change your code to
$("#contactForm").submit(function(e) {
$("#error").hide();
// number
var number = $("input#number").val();
//datepicker
var name = $("input#datepicker").val();
//required:
//name
var name = $("input#name").val();
if(name == ""){
$("#error").fadeIn().text("Name required.");
$("input#name").focus();
return false;
}
// email
var email = $("input#email").val();
if(email == ""){
$("#error").fadeIn().text("Email required.");
$("input#email").focus();
return false;
}
// message
var message = $("#message").val();
if(message == ""){
$("#message").fadeIn().text("Message required.");
$("input#message").focus();
return false;
}
// send mail php
var sendMailUrl = $("#sendMailUrl").val();
//to, from & subject
var to = $("#to").val();
var from = $("#from").val();
var subject = $("#subject").val();
// data string
var dataString = 'name='+ name
+ '&email=' + email
+ '&message=' + message
+ '&to=' + to
+ '&from=' + from
+ '&subject=' + subject;
// ajax
$.ajax({
type:"POST",
url: sendMailUrl,
data: dataString,
success: success()
});
return false;
});

ajax request function does not work when its called

<script type="text/javascript"src="prototype.js"></script>
<script type="text/javascript">
//<![CDATA[
document.observe("dom:loaded", function() {
function sendRequest() {
var oform = document.forms[0];
var sBody = getRequestBody(oform);
var oOptions = {
method: "post",
parameters: sBody,
onSuccess: function (oXHR, oJson) {
saveResult(oXHR.responseText);
},
onFailure: function (oXHR, oJson) {
saveResult("An error occurred: " + oXHR.statusText);
}
};
var oRequest = new Ajax.Request("edit_status.php", oOptions);
}
function saveResult(sMessage) {
var divStatus = document.getElementById("divStatus");
divStatus.innerHTML = "Request completed: " + sMessage;
}
});
//]]>
</script>
I am new to ajax. i have a project at hand that really need a lot of ajax functionality. I am following this above code from a book i bought. when i copy this code on my local server, the ajax.request function is not working when i click the submit button. It takes me straight to the php page. Please can someone help me look at this?
**
<form method="post" action="SaveCustomer.php"
onsubmit="sendRequest(); return false">
<p>Enter customer information to be saved:</p>
<p>Customer Name: <input type="text" name="txtName" value="" /><br />
Address: <input type="text" name="txtAddress" value="" /><br />
City: <input type="text" name="txtCity" value="" /><br />
State: <input type="text" name="txtState" value="" /><br />
Zip Code: <input type="text" name="txtZipCode" value="" /><br />
Phone: <input type="text" name="txtPhone" value="" /><br />
E-mail: <input type="text" name="txtEmail" value="" /></p>
</form>
<div id="divStatus"></div>
**
**
header("Content-Type: text/plain");
//get information
$sName = $_POST["txtName"];
$sAddress = $_POST["txtAddress"];
$sCity = $_POST["txtCity"];
$sState = $_POST["txtState"];
$sZipCode = $_POST["txtZipCode"];
$sPhone = $_POST["txtPhone"];
$sEmail = $_POST["txtEmail"];
//status message
$sStatus = "";
//database information
$sDBServer = "localhost";
$sDBName = "ajax";
$sDBUsername = "root";
$sDBPassword = "";
//create the SQL query string
$sSQL = "Insert into Customers(Name,Address,City,State,Zip,Phone,`Email`) ".
" values ('$sName','$sAddress','$sCity','$sState', '$sZipCode'".
", '$sPhone', '$sEmail')";
$oLink = mysql_connect($sDBServer,$sDBUsername,$sDBPassword);
#mysql_select_db($sDBName) or $sStatus = "Unable to open database";
if ($sStatus == "") {
if(mysql_query($sSQL)) {
$sStatus = "Added customer; customer ID is ".mysql_insert_id();
} else {
$sStatus = "An error occurred while inserting; customer not saved.";
}
}
mysql_close($oLink);
echo $sStatus;
?>
**

you arent firing the ajax i see you define the options but thats it try
using jquery u can wait for form submission
$('your form').on('submit', function(event){
event.preventDefault();
$.ajax({
url:'your url',
type:'post',
data:'your data',
success:function(data, jxhr){
//your success function
},
error:function(){}
});
});
the e.preventDefault() prevents the synchronous submission from firing default methods
looking at your code the sendRequest() can be changed to sendRequest(event) then add the event.preventDefault. I always have issues with return false

Why is my newsletter form not working on Amazon CloudFront?

I am using HTML and using amazon EC2 (Linux free tier). I would like to use CloudFront, but my newsletter won't work. I am not an AWS expert, and I don't have a clue as to why it won't work on CloudFront.
My newsletter form looks like this:
<form id="subscribe" class="form" action="<?=$_SERVER['PHP_SELF']; ?>" method="post">
<div class="form-group form-inline">
<input size="15" type="text" class="form-control required" id="NewsletterName" name="NewsletterName" placeholder="Your name" />
<input size="25" type="email" class="form-control required" id="NewsletterEmail" name="NewsletterEmail" placeholder="your#email.com" />
<input type="submit" class="btn btn-default" value="SUBSCRIBE" />
<span id="response">
<? require_once('assets/mailchimp/inc/store-address.php'); if($_GET['submit']){ echo storeAddress(); } ?>
</span>
</div>
</form>
and my js file looks like this:
jQuery(document).ready(function() {
jQuery('#subscribe').submit(function() {
// update user interface
jQuery('#response').html('<span class="notice_message">Adding email address...</span>');
var name = jQuery('#NewsletterName').val().split(' ');
var fname = name[0];
var lname = name[1];
if ( fname == '' ) { fname=""; }
if ( lname == '' || lname === undefined) { lname=""; }
// Prepare query string and send AJAX request
jQuery.ajax({
url: 'assets/mailchimp/inc/store-address.php',
data: 'ajax=true&email=' + escape(jQuery('#NewsletterEmail').val()),
success: function(msg) {
if (msg.indexOf("Success") !=-1) {
jQuery('#response').html('<span class="success_message">Success! You are now
subscribed to our newsletter!</span>');
} else {
jQuery('#response').html('<span class="error_message">' + msg + '</span>');
}
}
});
return false;
});
});
and my php file looks like this:
<?php
function storeAddress(){
require_once('MCAPI.class.php'); // same directory as store-address.php
// grab an API Key from http://admin.mailchimp.com/account/api/
$api = new MCAPI('mymailchimpapi');
$merge_vars = Array(
'EMAIL' => $_GET['email'],
'FNAME' => $_GET['fname'],
'LNAME' => $_GET['lname']
);
// grab your List's Unique Id by going to http://admin.mailchimp.com/lists/
// Click the "settings" link for the list - the Unique Id is at the bottom of that page.
$list_id = "myuniqueid";
if($api->listSubscribe($list_id, $_GET['email'], $merge_vars , $_GET['emailtype']) === true) {
// It worked!
return 'Success! Check your inbox or spam folder for a message containing a
confirmation link.';
}else{
// An error ocurred, return error message
return '<b>Error:</b> ' . $api->errorMessage;
}
}
// If being called via ajax, autorun the function
if($_GET['ajax']){ echo storeAddress(); }
?>
The form works when I access it without using CloudFront, but I am worried of the server bandwidth that's why I want to use CloudFront. What happens is that when you click the submit button, the "adding email address" message will just appear for 1 second, and the email address entered is ignored.

Please make sure your CloudFront distribution is actually configured to handle POST/PUT requests. Take a look here for details: http://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/distribution-web-values-specify.html#DownloadDistValuesAllowedHTTPMethods