I have a form where the user submits info (name, address, phone, etc.) and on submit, the data will be inserted into the API url, sent to the API, data is returned and put into hidden fields then posted. Is it possible to hide the AJAX URL inside a php file so I can hide the API KEY so it's not public? Like:
$.ajax({
url: whitepages.php
Inside whitepages.php
Here is my existing code:
var wpfname = $('#customer_person_name_f input').val();
var wplname = $('#customer_person_name_l input').val();
var wpfullname = wpfname + " " + wplname;
var wpaddress = $('#customer_address_street input').val();
var wpcity = $('#customer_address_city input').val();
var wpstate = $('#address_state_abbr input').val();
var wpzip = $('#customer_address_zipcode input').val();
var wpphone = $('#customer_phone_number input').val();
var wpemail = $('#customer_email_address input').val();
$.ajax({
url: "https://proapi.whitepages.com/3.3/lead_verify.json?name=" + wpfullname +"&phone=" + wpphone + "&address.street_line_1=" + wpaddress + "&api_key=" + KEYGOESHERE + "&address.city=" + wpcity + "&address.postal_code=" + wpzip + "&address.state_code=" + wpstate + "&email_address=" + wpemail,
dataType: "text",
method: "GET",
crossDomain: "true",
success: function(data) {
var json = $.parseJSON(data);
console.log(json);
$('#wp_phone_contact_score').val(json.phone_checks.phone_contact_score);
$('#wp_subscriber_name').val(json.phone_checks.subscriber_name);
$('#wp_subscriber_age_range').val(json.phone_checks.subscriber_age_range);
$('#wp_subscriber_address').val(json.phone_checks.subscriber_address.street_line_1 +', ' + json.phone_checks.subscriber_address.city +', ' + json.phone_checks.subscriber_address.state_code + ' ' + json.phone_checks.subscriber_address.postal_code);
$('#wp_line_type').val(json.phone_checks.line_type);
$('#wp_is_commercial').val(json.phone_checks.is_commercial);
$('#wp_address_contact_score').val(json.address_checks.address_contact_score);
$('#wp_is_active').val(json.address_checks.is_active);
$('#wp_address_to_name').val(json.address_checks.address_to_name);
$('#wp_resident_age_range').val(json.address_checks.resident_age_range);
$('#wp_resident_phone').val(json.address_checks.resident_phone);
$('#wp_type').val(json.address_checks.type);
}
<form>
<input id="wp_phone_contact_score" type="hidden" name="customer_wp_phone_contact_score" value="">
<input id="wp_subscriber_name" type="hidden" name="customer_wp_subscriber_name" value="">
<input id="wp_subscriber_age_range" type="hidden" name="customer_wp_subscriber_age_range" value="">
<input id="wp_subscriber_address" type="hidden" name="customer_wp_subscriber_address" value="">
<input id="wp_line_type" type="hidden" name="customer_wp_line_type" value="">
<input id="wp_is_commercial" type="hidden" name="customer_wp_is_commercial" value="">
<input id="wp_address_contact_score" type="hidden" name="customer_wp_address_contact_score" value="">
<input id="wp_is_active" type="hidden" name="customer_wp_is_active" value="">
<input id="wp_address_to_name" type="hidden" name="customer_wp_address_to_name" value="">
<input id="wp_resident_age_range" type="hidden" name="customer_wp_resident_age_range" value="">
<input id="wp_resident_phone" type="hidden" name="customer_wp_resident_phone" value="">
<input id="wp_type" type="hidden" name="customer_wp_type" value="">
<input type="text" name="customer_person_name_f">
<input type="text" name="customer_person_name_l">
<input type="text" name="customer_phone_number">
<input type="text" name="customer_address_street">
<input type="text" name="customer_address_city">
<input type="text" name="customer_address_state_abbr">
<input type="text" name="customer_address_zipcode">
<input type="submit" id="submitBtn" class="btn btn-primary btn-large" value="Submit"/>
</form>
No.
You can't have the browser make an HTTP request with some data in the URL without giving the data to the browser.
You would have to make the HTTP request to the whitepages.com from the server instead of the browser.
Yes, but your user can't directly call whitepages like you are doing in your script.
You will have to write your own script that the user will call using ajax and to use your server to make the request to whitepage.
Either using CURL or file_get_contents() Call a REST API in PHP
All the user will know is that he is sending you his (name, address, phone, etc.).
Related
Given is:
<input type='text' name='firstname' id='firstname'>
<input type='text' name='lastname' id='lastname'>
<input type='text' name='username' id='username'>
<input id='pw' name='pw' type='password'>
I try to submit the data with an ajax-post-request like this:
var myData = "firstname="+ $('#firstname').val() + "&lastname="+ $('#lastname').val() + "&username="+ $('#username').val() + "&pw="+ $('#pw').val();
$.ajax({
type: "POST",
url: "php/register.php",
dataType:"text",
data:myData, //Form variables
success:function(response){
$("#responds").append(response);
}
How to submit this data in a kind of this way correctly tho the php-file which corresponds to the database? Is a <form> needed for submitting with a button?
There are many solutions to this problem as many have mentioned. Easiest from my point of view is to wrap the fields in a form.
Bind a submit event which fires a callback when your form is submitted.
Serialize the form using .serialize() creating a text string in standard URL-encoded notation of all valid input fields and their values (so you don't have to build this query string yourself)
Post your data using $.post and handle the response using the success callback
Below is a fully functional snippet. You can see the data sent to PostBin here.
// PostBin CORS
$.ajaxSetup({crossDomain:true})
// Submit handler
$('form').on('submit', function(event) {
event.preventDefault();
var $form = $(this)
$.post(
'http://postb.in/ADC3a3Vm',// replace with php/register.php
$(this).serialize(),
function(response){
$("#response").append(response);
$form[0].reset()
}
);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input type="text" name="firstname" placeholder="First Name">
<input type="text" name="lastname" placeholder="Last Name">
<input type="text" name="username" placeholder="Username">
<input type="password" name="pw" placeholder="Password">
<button type="submit">Submit</button>
</form>
<div id="response"></div>
you can use serialize() jQuery function
var myData = $("form").serialize();
in this case <form> is required
Read here
Following the examples on this page: http://www.formget.com/submit-form-using-ajax-php-and-jquery/
I am converting the forms on one of my sites to use ajax for submission, that way uses can use the forward and back buttons, and their info isn't showing up in the address bar.
It's worked so far, on pages that have a single form. But one page has multiple forms on it.
Form from campers.php
<form id="retro1457806069">
<input type="hidden" id="class" name="classa" value="retro">
<input type="hidden" id="type" name="type" value="1">
<input type="submit" id="submit" value="Rent This Camper"></form>
<form id="two1457806069">
<input type="hidden" id="class" name="classa" value="classtwo">
<input type="hidden" id="type" name="type" value="1">
<input type="submit" id="submit" value="Rent This Camper"></form>
<form id="three1457806069">
<input type="hidden" id="class" name="classa" value="classthree">
<input type="hidden" id="type" name="type" value="1">
<input type="submit" id="submit" value="Rent This Camper"></form>
Those are the actual form codes generated by my script (with all the excess text and such removed around them.
script.js:
$(document).ready(function() {
$("#submit").click(function() {
var classa = $("#classa").val();
var type = $("#type").val();
// Returns successful data submission message when the entered information is stored in database.
var dataString = 'class=' + classa + '&type=' + type;
if (classa == '' || type == '') {
alert("Please Fill All Fields");
} else {
// AJAX Code To Submit Form.
$.ajax({
type: "POST",
url: "campersub.php",
data: dataString,
cache: false,
success: function(result) {
window.location.assign("gear.php")
}
});
}
return false;
});
});
campersub.php
<?php
session_start();
$_SESSION["class"]=$_POST["class"];
$_SESSION["type"]=$_POST["type"];
echo "Success.";
?>
The problem is, instead of adding the form information to the $_SESSION array and redirecting the browser to gear.php when I click on the first submit button, absolutely nothing happens. But when I click on the second or third submit buttons it redirects the page to campers.php?classa=classone&type=1 for example.
I have modified some things, having in mind mainly: 'Id attributes must be unique in the document'
(Even, If there are not other references in the code to the form elements by id then the id attribute can be removed)
So I have renamed ids as they have an unique value, then I fetch the click event for catch any input submit
NOTE: I have accessed to the other elements from the parent (its form) which contains the last clicked element because I'm not sure if it is the entire HTML you have.
campers.php
<form id="retro1457806069">
<input type="hidden" id="class1" name="classa" value="retro">
<input type="hidden" id="type1" name="type" value="1">
<input type="submit" id="submit1" value="Rent This Camper"></form>
<form id="two1457806069">
<input type="hidden" id="class2" name="classa" value="classtwo">
<input type="hidden" id="type2" name="type" value="1">
<input type="submit" id="submit2" value="Rent This Camper"></form>
<form id="three1457806069">
<input type="hidden" id="class3" name="classa" value="classthree">
<input type="hidden" id="type3" name="type" value="1">
<input type="submit" id="submit3" value="Rent This Camper"></form>
script.js
$(document).ready(function() {
$("input[type=submit]").click(function(e) {
// **Accesing by proximty of the last clicked element, and by its name.
e.preventDefault();
var classa = $(this).parent('form').find('input[name="classa"]').val();
var type = $(this).parent('form').find('input[name="type"]').val();
// Returns successful data submission message when the entered information is stored in database.
var dataString = 'class=' + classa + '&type=' + type;
if (classa == '' || type == '') {
alert("Please Fill All Fields");
} else {
// AJAX Code To Submit Form.
$.ajax({
type: "POST",
url: "campersub.php",
data: dataString,
cache: false,
success: function(result) {
window.location.assign("gear.php")
}
});
}
return false;
});
});
I think it must run with these changes...
I'm developing a WordPress theme and I have a PHP function that is supposed to handle and asynchronous request that gives the server both JSON and an image. My form (for readability, stripped of a bunch of inner HTML) looks like
<form method="POST" action="member-update" enctype="multipart/form-data" id="member-form">
9">
<input type="text" name="fullname" value="">
<input type="text" name="title" value="">
<textarea rows="4" name="bio" form="member-form"></textarea>
<input type="text" name="sord" value="">
<input type="file" name="pic">
<input type="hidden" name="memberAction" value="" />
</form>
and my JavaScript for making the AJAX request is
jQuery('.member-update-button').click( function() {
var parentForm = jQuery(this).closest('form');
var postData = parentForm.serializeArray();
jQuery.post( ajaxurl,
{'action': 'member_update', 'formStuff' : postData},
function(response) { alert('Got this from the server: ' + response); }
);
});
and my PHP function that, through a WordPress hook, handles the request starts out like
function member_update ( )
{
// there must be a more elegant way of getting those values out ....
$name = $_POST['formStuff'][0]['value'];
$title = $_POST['formStuff'][1]['value'];
$bio = $_POST['formStuff'][2]['value'];
$sord = $_POST['formStuff'][3]['value'];
$targetFileName = basename($_FILES['pic']['name']);
$targetFileNameAndPath = 'assets/' . $targetFileName;
I'm getting values out of the $_POST['formStuff'] array, but I am getting nothing for the $_FILES['pic']['name']. Any idea what I'm doing wrong?
You need to use an instance of FormData.
Make following changes in your code.
Add id attribute in your html
<input type="file" name="pic" id="pic">
Changes in js code
jQuery('.member-update-button').click( function() {
formdata = new FormData();
formdata.append( 'action', 'member_update' );
jQuery.each(jQuery('#pic')[0].files, function(i, file) {
formdata.append('file_to_upload', file);
});
jQuery.post( ajaxurl, formdata,function(response) {
alert('Got this from the server: ' + response);
});
});
Finally changes in php function
function member_update()
{
$file = $_FILES['file_to_upload']['tmp_name'];
}
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Convert form data to JS object with jQuery
I need to login my users to external website, but there's a problem, this website processes only json-data POST values, ex. {"username":"user","password":"12345"}
<form action="https://external.com/login" method="POST">
<input name="username" value="user" />
<input name="password" value="12345" />
<input type="submit" />
</form>
This above only sends average key=value data, how can I use to POST json-data to external https?
Here is a simple jquery example using jQuery.ajax()
HTML:
<form action="https://external.com/login" method="POST" onsubmit="return postJson(this)">
<input name="username" value="user" />
<input name="password" value="12345" />
<input type="submit" />
</form>
JQ:
function postJson(form) {
var action = $(form).attr('action');
var user = $('[name="username"]', form).val();
var pass = $('[name="password"]', form).val();
console.log('action=' + action + ', user=' + user + ', pass=' + pass);
$.ajax({
url: action,
type: 'POST',
data: JSON.stringify({ username: user, password: pass }),
success: function(data, status) {
// do something after login
console.log('success');
},
error: function() {
console.log('error');
}
});
return false;
}
JSFiddle
I have a form and I need to add some data from database before submiting it.
My html code is:
<form action="https://91.199.226.106/services/authorize.php" id="arca" method="POST">
<input type="hidden" name="hostID" id="hostID"/>
<input type="hidden" name="mid" id="mid" />
<input type="hidden" name="tid" id="tid" />
<input type="hidden" name="additionalURL" id="additionalURL" />
<input type="hidden" name="orderID" id="orderID" />
<input type="hidden" name="currency" id="currency" />
<input type="hidden" name="opaque" />
amount<input type="text" name="amount" id="amount" value="" /><br>
<input type="submit" value="submit" />
</form>
<div id="script_area"></div>
<div id="error_area"></div>
And I have an event handler for form submit. Here is the code:
$("#arca").submit(function(e){
e.preventDefault();
var data="amount="+$("#amount").val()+"&&lang=eng";
$.ajax({
url: "ajax/get_arca_submit_params.php",
type: "POST",
data: data,
cache: false,
success: function (html) {
var splited=html.split("|",2);
if(splited[0]=="0")
{
$("#error_area").html(splited[1]);
}
else
{
$("#script_area").html(splited[1]);
$("#arca").submit();
//alert("aaaaa");
}
}
});
});
The PHP returns
"0|error message" or "1|script that sets fields values" that I place
in the div with id="script_area"
. The problem is that $("#arca").submit(); line ceeps on submiting the form on and on. How can I solve this problem? Thanks for help.
Replace $("#arca").submit(); with $("#arca")[0].submit();. This way you are calling the submit event on the underlying DOM element which won't trigger your callback and avoid the infinite loop.
You could change to bind a click event to submit button instead.
$("#arca").find('input[type="submit"]').click(function (e) {
e.preventDefault();
var data = "amount=" + $("#amount").val() + "&&lang=eng";
$.ajax({
url: "ajax/get_arca_submit_params.php",
type: "POST",
data: data,
cache: false,
success: function (html) {
var splited = html.split("|", 2);
if (splited[0] == "0") {
$("#error_area").html(splited[1]);
} else {
$("#script_area").html(splited[1]);
$("#arca").submit();
//alert("aaaaa");
}
}
});
});