We Keep Coding

How to concatenate url with a variable everytime a login is made

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

How can I make a search bar with an <input> button open a domain if entered?

I currently have this code for a custom DuckDuckGo search bar:
<form action="https://duckduckgo.com/" method="get" id="ddg-search">
<div class="div-block-4">
<input autofocus="true" class="text-field-3 hero-search-bar w-input" data-name="q" id="field-3" maxlength="256" name="q" placeholder="Search DuckDuckGo" type="text">
</div>
</form>
It automatically opens the URL https://duckduckgo.com/?q={{SEARCH}} when you enter text in the box and press the enter key.
How could I make this bar go to a domain if one is entered? Optimally, it wouldn't validate the domain, just if it sees a string in the pattern xxxx.* with no spaces, it would open that page in a new tab.
Thank you for any help!

One way to solve it is by capturing the submit event of the form, analyze the input value and when it is a domain, open a new window with the domain and cancel the submit by returning false. In case of not being a valid domain, let the form proceed as usual by returning true.
Your html:
<form action="https://duckduckgo.com/" method="get" onsubmit="return decideWhatToDo()" id="ddg-search">
<div class="div-block-4">
<input autofocus="true" class="text-field-3 hero-search-bar w-input" data-name="q" id="field-3" maxlength="256" name="q" placeholder="Search DuckDuckGo" type="text">
</div>
<input type="submit" />
</form>
Your javascript:
function decideWhatToDo() {
let inputValue = document.getElementById('field-3').value;
if (isDomain(inputValue)) {
// the form won't be sent and a new window will open requesting the domain
if (!startsWithProtocol(inputValue)) {
inputValue = 'http://' + inputValue;
}
window.open(inputValue, '_blank');
return false;
}
// Proceed to send the form as usual
return true;
}
function startsWithProtocol(value) {
return /^((https?|ftp|smtp):\/\/)/.test(value);
}
function isDomain(value) {
return /^((https?|ftp|smtp):\/\/)?(www.)?[a-z0-9]+\.[a-z]+(\/[a-zA-Z0-9#]+\/?)*$/.test(value);
}

So one way to handle it is to use an if condition and check the string against a RegExp that recognizes domain names.
Here's a nifty one you can use:
/[a-zA-Z0-9][a-zA-Z0-9-]{1,61}[a-zA-Z0-9](?:\.[a-zA-Z]{2,})+/
I assume you don't need help getting the value from your text field or the actual redirection. However, if you needed more help, comment below and I'll post a more complete answer. The code below should help you get to where you want:
var domainRegExp = /[a-zA-Z0-9][a-zA-Z0-9-]{1,61}[a-zA-Z0-9](?:\.[a-zA-Z]{2,})+/
var pass = domainRegExp.test('test.com')
var fail = domainRegExp.test('test')
console.log(pass, 'pass')
console.log(fail, 'fail')
So as you can see the value inside the 'pass' variable is true, and 'fail' is false.

How to redirect users based on what they type in an input?

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;
}
});

POST Form without a redirect

I would like to post a form's data to the page where the database-query will be made.
But I don't want like in normal cases where a new page opens up, or the site gets redirected. It should be something like a "hidden" post.
I tried to use a xmlhttp-request (GET) with a URL, but since there are a lot of form-fields where you can enter a few sentences of text, the URL gets super long.
I also heard about the "POST" xmlhttp-request, but I haven't found a good tutorial with a working example.
I don't want to use jQuery or anything like that.
Does anybody know how to do this, or how xmlhttp post works?
Here is the code I used for GET: (BUT I would like to not do the var ID1 = ... part. I want to just get the values by $_POST like a regular submit.
function doGET() {
var ID1 = document.getElementByID("Textfield1").value;
var ID2 = document.getElementByID("Textfield2").value;
var ID3 = document.getElementByID("Checkbox1").value;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystate = function() { alert(msg); }
xmlhttp.open("GET", "insert.php?ID1=" + ID1 + "&ID2" + ID2 + "&ID3=" + ID3, true);
xmlhttp.send();
}
HTML
<div>
<p> TEXT1 </p>
<Input type="TextBox" id="Textfiel1">
<br>
<p> TEXT2 </p>
<Input type="TextBox" id="Textfield2">
<br>
<p> Checkbox 1</p>
<Input type="Checkbox" id="checkbox1">
<br>
<Label onclick="doGET()"> Click </Label>
</div>

Sending a POST request is not much different than sending a GET. There are two key differences, though, that I will point out below:
Since you didn't supply an HTML form to work with, I made the following below:
<form id="myForm">
<input type="text" id="Textfield1" name="Textfield1" />
<input type="text" id="Textfield2" name="Textfield2" />
<input type="checkbox" id="Checkbox1" name="Checkbox1" />
<select id="Select1" name="Select1">
<option value="1">Option 1</option>
<option value="2" selected>Option 2</option>
</select>
</form>
I also refactored your doGET method, renaming it postForm which accepts a form element as an argument.
function postForm(form) {
var xmlhttp = null,
data = '';
for (var i = 0; i < form.elements.length; i++) {
data += '&' + encodeURIComponent(form.elements[i].id) + '=' + encodeURIComponent(form.elements[i].value);
}
data = data.substr(1); //Get rid of the first character.
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystate = function() { alert(msg); }
xmlhttp.open("POST", "insert.php", true);
xmlhttp.send(data); //Send your data in the send method.
}
postForm(document.getElementById('myForm'));
We use POST instead of GET in the xmlhttp.open method.
We send the parameters just like you did in the GET, but I have automated the serialization of the form with a loop.

This is actually quite easy, you simply need an iframe in the document with a name attribute, and then you can set the target on your form to the same value.
When you submit the form, it will then target the iframe.
If you want the form to return something, it can return javascript that accesses the parent using parent.doSomething (as long as these are on the same domain).

Javascript: redirect to new page based on radio button choice

What I am trying to do is redirect to a new page if the "yes" button is clicked. I already have a prompt set up if they click "no". However, there is a form (name and email) that needs to be filled out for this to work. If they do not fill out these details, I want a prompt to arise telling the user that they need to fill them out before they can proceed.
I am fairly new to javascript so any tips or explanations would be greatly appreciated.
Below is the html code
<input type="radio" name="radio" id="yes"><strong>Yes, I agree.</strong>
<br>
<input type="radio" name="radio" id="no" checked="checked"><strong>No, I do not agree. </strong><br>
<br>
If you agree, please enter your full name and email address in the spaces below and press submit.
<br>
<form> Full Name:<input type="text" name="fullname"></form>
<br>
<form> Email Address:<input type="text" name="email"></form>
<br>
<br>
<form action="endPage.jsp" id="form">
<input type="submit" id="submit" value="Submit" name="submit" />
</form>
And the javascript code
var submitBtn = document.getElementById("submit");
var termsChk = document.getElementById("yes");
var formFrm = document.getElementById("emailField");
var formFrm = document.getElementById("nameField");
submitBtn.addEventListener("click", function() {
if (termsChk.checked === true && formFrm)
{
alert("Checked!");
formFrm.submit();
} else {
alert("Please Contact Spearhead Mining Corporation: projects#spearheadmining.com to discuss your options for project submittal!");
}
return false;
});

Use window.confirm() with the spcific message to user and use window.location() to redirect to the new url.
result = window.confirm("Message to user");
if(result) {
window.location = "new url";
} else {
//do the rest of logic
}

For a more specific answer it might help if you posted the code for yes and no buttons, as well as the HTML code for the form. That being said the way you would generally handle this is in the code for the yes button you run whatever client side validations you need to run, in this case checking if the name and email fields aren't empty, then displaying your error message instead of redirecting if everything is not valid.
For instance in your yes handler
if(document.getElementById('emailField').value == null || document.getElementById('namefield') == null){
/*error handling code goes here*/
return
}
else{
/*redirection code goes here*/
}