The Wordpress site I'm working on:
http://www.careersroadmap.com/
After submission of a registration form, I have to redirect to this URL:
http://careertest.edumilestones.com/access-login-api.php?
However, during the redirect, I have to pass this variable to the URL:
category=2123&channel_id=371&cd=89&age=371&access_code=accesscodehere
So the final destination URL will be:
http://careertest.edumilestones.com/access-login-api.php?category=2123&channel_id=371&cd=89&age=371&access_code=accesscodehere
The access_code variable will change for each user that logs in.
I tried an AJAX call using the code below:
<script>
var startButton = document.getElementById("startButton");
startButton.addEventListener("click", getApiFunction());
function getApiFunction(){
var myRequest = new XMLHttpRequest();
myRequest.open('GET', 'http://careertest.edumilestones.com/access-login-api.php?category=2123&channel_id=371&cd=89&age=371&access_code=accesscodehere');
myRequest.onload= function(){
var myData = JSON.parse(this.response);
};
myRequest.send();
};
</script>
After trying the above code, I got the CORS policy error.
How do I accomplish this with Javascript or PHP??
I suppose you could add hidden inputs to the registration form.
Something along those lines:
<form action="http://careertest.edumilestones.com/access-login-api.php" method="GET">
<input type="hidden" name="category" value="2123">
<input type="hidden" name="channel_id" value="371">
<input type="hidden" name="cd" value="89">
<input type="hidden" name="age" value="371">
<input type="hidden" name="access_code" value="democodesjam12474">
</form>
A hidden field lets web developers include data that cannot be seen or modified by users when a form is submitted.
Read more about it here: https://www.w3schools.com/tags/att_input_type_hidden.asp
Related
I have a form that I'm trying to submit and process with javascript using the code outlined below:
Form:
<form id="my_form_id" method="POST" action="my_processor_script.php">
<input type="text" id="form_id_1" name="form_field_1">
<input type="text" id="form_id_2" name="form_field_2">
<input type="text" id="form_id_3" name="form_field_3">
<input class="cbp-mc-submit" type="submit" name="save_settings_button" id="save_settings" value="Save Settings" />
</form>
Script:
<script>
$(document).ready(function(){
var $form = $('form');
$form.submit(function(){
$.post($(this).attr('action'), $(this).serialize(), function(response){
// do something here on success
alert("Form Processed");
},'json');
return false;
});
});
</script>
Processor:
<?php if (isset($post_data['save_settings_button']))
{
$form_field_1 = $_POST['form_field_1'];}
$form_field_2 = $_POST['form_field_2'];}
$form_field_3 = $_POST['form_field_3'];}
}
?>
Once I have the variables I then store them in a database.
The form works great if I just post from the form to the processor script without using the javascript however when I use the javascript nothing happens. I'm obviously doing something very wrong but can work this out at all as I cant see what is being received by the processor. Has anyone got any ideas on how i can get this to work?
It would also be great if I can return the data so that I can see what is being passed to the script as this would help me to debug any issues?
I have a form like this:
<form method="POST">
<input type="url" placeholder="Enter URL Address">
<input type="submit" value="go!">
</form>
And I want users to be redirected to a URL based on what they wrote in the URL input when they click the submit button.Is it possible?
Like this
window.onload=function() {
document.getElementById("form1").onsubmit=function() {
var url = this.url.value;
if (url) location=url;
return false;
}
}
using
<form id="form1">
<input type="url" placeholder="Enter URL Address">
<input type="submit" value="go!">
</form>
You can check out the window.location for this specific case. You can throw any string in there and the browser will redirect to that page.
EDIT:
You do not need a whole form for that. The form is used to send data to the server - the thing you want here is client-sided and does not require a form. You can use a simple input field with a simple button that fires a bit of javascript code.
Yes jane it is possible. You can do that by javascript or php.
example on javascript:
// Put an id on your form and change the id below accordingly
var idForm = 'form';
var form = $('#' + idForm);
form.submit(function(e) {
e.preventDefault();
var redirectTo = form.find('input').val();
switch(redirectTo) {
case "INPUT_VALUE_EXAMPLE":
window.location = 'YOUR URL HERE';
break;
case "google"
window.location = 'http://www.google.com'
break;
}
});
I had a question about trying to append user entered data into a redirect url. I use a online database/fundraising company (Salsa) for supporter sign ups. I want to have a form where people can enter just their email and zip, have that submit to be saved into the database (so onsubmit redirect) and then another form will come up if that person wants to fill out more information they can but they don't have to. The 2nd form should have prefilled their email and zip so they don't have to (to link it back to database)
What I tried to use is Salsa url that autofills the signup page provided it has the field names
example http://wfc2.wiredforchange.com/o/8564/p/salsa/web/common/public/signup?signup_page_KEY=7145&Email=testing#test.tes&Zip=12345
so http://wfc2.wiredforchange.com/o/8564/p/salsa/web/common/public/signup?signup_page_KEY=7145&Email=[email]&Zip=[zip]
The only problem is that I don't know how to pull form the form the user email and zip and append it to the url. I figure I need to use javascript but I am not very good with it.
Any help with this would be great and very appreciated. Even other ideas that I might try.
Edit:
I was able to figure some out on my own but could still use some help.
function URL() {
var email = document.getElementById("email").value;
window.location = "http://wfc2.wiredforchange.com/o/8564/p/salsa/web/common/public/signup?signup_page_KEY=7145&Email=" + email;
}
I used
onsubmit="URL(); return false;" in
So...
<form action="org2.salsalabs.com/save" ; method="POST" name="data" onsubmit="genURL(); false" >
<input type="text" id="user" />
<input type="submit" value="Submit" />
Something like that, except it won't submit the data to the database first, it just redirects me to the 2nd form. I am guessing it has something to do with onsumbit. Is there a way to have the data be submitted to the database first then redirect to the other form?
I would first have an XmlHttpRequest to your database with the information and then do the window.location redirect that you have already figured out when the request is complete. This is what it would look like in code.
HTML:
<form id="myForm">
Email: <input id="email" type="text" name="Email" /><br />
Zip: <input id="zip" type="text" name="Zip" /><br />
<input type="hidden" name="sign_up_page_KEY" value="7145" />
<input type="button" onclick="saveData()" value="Submit" />
</form>
JavaScript:
function saveData() {
var xmlhttp;
if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else { // code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if(xmlhttp.readyState == 4) { // Triggered when the information is done saving to your database
var email = document.getElementById("email").value;
var zip = document.getElementById("zip").value;
window.location = "http://wfc2.wiredforchange.com/o/8564/p/salsa/web/common/public/signup?signup_page_KEY=7145&Email=" + email + "&Zip=" + zip;
}
}
xmlhttp.open("POST", "org2.salsalabs.com/save", false);
xmlhttp.send(new FormData(document.getElementById("myForm"))); // Sends a post request to org2.salsalabs.com/save with all the data from the form with id="myForm"
}
I have a very basic question (I'm sure) - I have an Zoho application and I'm using their REST API to recover a single result from a table.
I want to use that result in a javascript variable - the form request is here:
<form id="Latest" method="POST" action="https://creator.zoho.com/api/xml/my-company-culture/view/PageFeed_Report">
<input type="hidden" name ="authtoken" value="**********************">
<input type="hidden" name ="scope" id="scope" value="creatorapi">
<input type="submit" value="View Records">
</form>
I can auto submit the form using this
<script type="text/javascript">
document.getElementById("Latest").submit();
</script>
Which recovers a the result - but I want to assign this result to a javascript variable and use it in a following piece of code (within the same frame).
I am new to this, so please be gentle! Any help appreciated.
This is easily done with jQuery:
<form id="Latest">
<input type="hidden" name ="authtoken" value="**********************">
<input type="hidden" name ="scope" id="scope" value="creatorapi">
<input type="submit" value="View Records">
</form>
<div id="result"></div>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$('#Latest').submit(function(event) {
// Stop form from submitting normally
event.preventDefault();
var url = "https://creator.zoho.com/api/xml/my-company-culture/view/PageFeed_Report";
// Get some values from elements on the page:
var $form = $( this );
var authtokenData = $('#authtoken').attr('value');
var scopeData = $('#scope').attr('value');
// Send the data using post
var posting = $.post( url,
{
authtoken: authtokenData,
scope: scopeData
}
);
// Put the results in a div
posting.done(function( data ) {
// empty results div
$("#result").empty()
// write POST result to results div
$("#result").append("<p>" + data + "</p>);
});
});
</script>
I'm fairly new to the whole Javascript scene. Followed along with those online javascript tutorial things like code academy offers so I'm going by what I learned off of there and what I have read through other tutorials. Read though a few other posts to try and help me but I can't figure it out
So here's my question,
I am trying to take a form input, send it to a javascript file, then the javascript file returns a string which then I wish to reload the frame with. I'm attempting to make a simple chrome extension for me and my friends.
When I click "View Grade!" I get an error:
No webpage was found for the web address: chrome-extension://gcgddggimojbfgpbdmpfkmiofmpinjgb/location.href=getURL(account)?
and I can't determine if my javascript isn't working right or I just don't know how to send to a URL outside the "chromium" (as I call it) world.
This is my html file:
<form action="location.href=getURL('account')">
PSU Account (i.e. xyz123): <input type:"text" id="account">
<input type="submit" value="View Grade!">
</form>
And this is my javascript file:
function getURL(account) {
var psuAccount = document.getElementById(psuAccount);
// I changed strA to the ***.***.*** for this post
var strA = 'https://***.***.***/section/Gradebook/Student/default.aspx?userId=';
var strB = '&reportMode=true';
var newURL = strA + psuAccount + strB);
return(newURL);
}
I think this is exactly what <form>s are for...no need for Javascript for something like this. Try:
<form action="https://***.***.***/section/Gradebook/Student/default.aspx" method="GET">
PSU Account (i.e. xyz123): <input type="text" name="userId" />
<input type="hidden" name="reportMode" value="true" />
<input type="submit" value="View Grade!" />
</form>
The submit mechanism will automatically use the action attribute of the form. Since the method is "GET", it will also add a querystring of key/value pairs for elements in the <form> with a name attribute. So with your form, it will add a key "userId" with the value as the textbox's current value at time of submission. It will also add a key "reportMode" with the value "true". So the final URL that will be submitted is:
https://***.***.***/section/Gradebook/Student/default.aspx?userMode=true&userId=SOME_INPUT_STRING
If you need to use Javascript, try:
<div>
PSU Account (i.e. xyz123): <input type:"text" id="account" />
<input type="button" value="View Grade!" onclick="getURL();" />
</div>
with:
function getURL() {
var psuAccount = document.getElementById("account").value;
var strA = 'https://***.***.***/section/Gradebook/Student/default.aspx?userId=';
var strB = '&reportMode=true';
var newURL = strA + psuAccount + strB;
window.location.href = newURL;
}