Basic Form - Javascript Code Not working

Question

I'm having trouble getting this code to work. I am trying to create a URL from any text put into the form. For instance, if you submit "Hello" in the text field, it will result in "http://www.Hello.com." Any indicators as to why this isn't working would be appreciated.

Code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">

<html>
<head></head>
<body>

<form name="search" action="jsTest.html" onsubmit="return URL()" method="post">
Query: <input type="text" id="query" name="query"/><br>
Submit: <input type="submit" value="Submit"/>
</form>

<script type="text/javascript">
function URL()
{
var x = document.search.query.val();
document.write("http://www.");
document.write(x);
document.write(".com/");
return false;
}
</script>

</body>
</html>

You define a variable "x", but don't use it. You use a variable "query", but don't define it. I get the feeling that you're not really showing us your real code. — Ernest Friedman-Hill
– Ernest Friedman-Hill, Commented Jul 8, 2013 at 0:38
You and Joe are both right, I'm not using the x variable. However, upon pressing submit, no action persists. — mkayen
– mkayen, Commented Jul 8, 2013 at 0:41

Singular1ty · Accepted Answer · 2013-07-08 02:11:36Z

1

Answer:

<form>
Query: <input type="text" id="query" name="query"/><br>
Submit: <input type="submit" value="Submit" onclick="getURL()"/>
</form>

<script type="text/javascript">
   function getURL()
    {
    var x = document.getElementById("query").value;
    alert(x); //Debug statement
    }
</script>

Righteo. No idea what's happening here, so I rewrote it from scratch. This works, I tested it, at the very least, to use the alert box.

What may have been happening:

I think that javascript functions might need to start with a lowercase letter.

From w3schools:

JavaScript is case sensitive. The function keyword must be written in lowercase letters, and the function must be called with the same capitals as used in the function name.

I removed the action from the form, because it was most likely trying to find that file and activate the javascript code in that file. I removed post because that was screwing up on my computer, probably because it was running in offline browser mode (ie, not actually using HTTP requests like POST wants)

onclick is all lowercase, not camelcase, which might have been causing some issues too. I always use onclick rather than using form onsubmit because generally your form will want to link to a .PHP file, whereas using the button's onclick allows for extra flexibility.

edited Jul 8, 2013 at 2:11

answered Jul 8, 2013 at 0:41

Singular1ty

2,6151 gold badge25 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

mkayen Over a year ago

So I tried using val here, and have matched up my variables to make more sense. However, I'm still finding that the query goes directly to the end of the URL, without displaying a result.

Singular1ty Over a year ago

@mkayen I've fixed up the errors, I think that might work but I haven't tried it myself. My answer's in pure javascript (no jquery), and I have included a debug statement that will use a pop-up box to tell you what the value of the query field is.

mkayen Over a year ago

I'm still running into some issues here. In fact, the alert(x) isn't happening. Thanks for your help here, I really do appreciate it

mkayen Over a year ago

When I click submit on the page, the alert does not occur, and no result appears either. There has to be something wrong with how I am writing the function.

Singular1ty Over a year ago

@mkayen aha. That's why we do debugging. I figured something wonky was happening here.

|

000 · Accepted Answer · 2013-07-08 00:37:23Z

1

You set the x variable but refer to the undefined query variable. Keep your names consistent.

answered Jul 8, 2013 at 0:37

000

27.3k10 gold badges74 silver badges103 bronze badges

6 Comments

mkayen Over a year ago

You are correct Joe, thanks for that. When I press submit, it only adds ".../jsTest.html?query=INPUT", without changing the actual content of the page. Do you know why this would happen here?

000 Over a year ago

Add return false; to the end of your function. Sorry I am on my phone and can't edit my answer.

mkayen Over a year ago

I'm still finding that the query goes directly to the end of the URL, and not displaying the expected result. I appreciate your help here!

000 Over a year ago

You'll need to change the function call too. onsubmit="return URL()" along with the URL function returning false.

mkayen Over a year ago

Nope. I'm wondering if this has anything to do with the form action. Should I have the submission flow to another page?

|

Aldi Unanto · Accepted Answer · 2013-07-08 00:40:38Z

0

You can modify your javascript. I suggest you to using jQuery.

function modify_url(){
        var q = $('input[name="query"]');

        q.val('http://www.' + q.val() + '.com');
        return true;
    }

answered Jul 8, 2013 at 0:40

Aldi Unanto

3,6821 gold badge25 silver badges31 bronze badges

1 Comment

000 Over a year ago

Let them understand what is underlying first, before taking off the training wheels.

Jon P · Accepted Answer · 2013-07-08 01:50:26Z

0

Use .value not val(), which is jQuery.

See: http://jsfiddle.net/wCS9d/

answered Jul 8, 2013 at 1:50

Jon P

19.9k8 gold badges52 silver badges76 bronze badges

4 Comments

mkayen Over a year ago

This is fantastic, thank you! Is there any reason why you used getURL() rather than URL() ? Is URL() a built in JS function?

mkayen Over a year ago

Also, what is the purpose of line 6 in your JS?

Jon P Over a year ago

I will admit I had trouble with URL so went with getURL instead. Line 6 sets the content of the div tag with id of result to the url. This is considered better practice than document.write

Jon P Over a year ago

Also console.log(res); is a debug statement, just one that is less intrusive than an alert. Feel free to remove it.

Collectives™ on Stack Overflow

Basic Form - Javascript Code Not working

4 Answers 4

10 Comments

6 Comments

1 Comment

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

10 Comments

6 Comments

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related