CODEWITHSUNDEEP
javascripthtmlajaxgoogle-chrome
Álvaro José Niño
Álvaro José Niño

Reputation: 21

Getting this error: XMLHttpRequest cannot load javascript:newDoc()

I'm using this script to open custom subdomains that already exist. Since I started using ajax for the contact form it wont work.

ERROR:(jquery.js:4 XMLHttpRequest cannot load javascript:newDoc(). Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.)

Can anybody help me out with this please?

SCRIPT 

<script>
    function newDoc() {
    window.location.href = "http://" + $("#domain").val() + ".mywebsite.com";
}</script>

HTML

<form action="JavaScript:newDoc()" method="post" role="form" id="login-form" class="cd-form">
  <div class="row">
   <div class="col-xs-12 text-center sign-in-text">
    <p>Enter your company's <span>MyWebsite domain.</span></p>
  </div>
 <div class="user-box-1 col-xs-8">
  <input type="text" name="domain" id="domain" class="form-control" placeholder="Domain" value="" required="">
 </div>
 <div class="text-domain col-xs-4">
  .mywebsite.com
 </div>
 </div>
 <p class="fieldset">
 <button class="full-width" type="submit">Continue</button>
 </p>
</form>

Upvotes: 2

Views: 719

Answers (2)

Todd Christensen
Todd Christensen

Reputation: 1327

The reason this is happening is because you're using a "javascript:" URI, and the AJAX handling is using this as the target.

Here's an example:

https://jsfiddle.net/L4z0Le4f/

function foo() {
   return 'https://api.ipify.org/';
}

var xhr = new XMLHttpRequest();
xhr.open('GET', 'javascript:foo()');
xhr.onload = function () {
  console.log('Loaded');
}
xhr.onerror = function () {
  console.log('Failed');
}
xhr.send();

This will also fail. It looks like the behavior your form really wants is to execute the JavaScript function on submit, without using AJAX at all.

This would be better handled by a 'submit' event handler, for example (using jQuery):

$('#login-form').on('submit', function () {
  newDoc();
  return false;
};

If you do actually want to post to that URL when they click submit, you can change the action value in a submit handler. Here's an example:

https://jsfiddle.net/bu1j00Le/

<form action="javascript:alert(1);" method="post">
  <input type="text" name="testing" id="q" />
  <button type="submit">Make it happen</button>
</form>

$('form').on('submit', function () {
  this.action = '/echo/js/?js=' + encodeURIComponent(JSON.stringify($('#q').val()));
});

Of course, it depends on what order the events fire in - if the AJAX code is listening on submit events, it may intercept it before this new handler does. To avoid this, you can also use a 'change' event handler on the field to mutate the form action in a very similar way:

$('#domain').on('change', function () {
  $('#login-form').prop('action', 'http://' + $("#domain").val() + '.mywebsite.com');
});

Upvotes: 1

Keyur Sakaria
Keyur Sakaria

Reputation: 700

use this 

function newDoc() {
    return "http://" + $("#domain").val() + ".mywebsite.com";
}

Upvotes: 0

Related Questions