Conversion from jQuery into JavaScript

Question

I've a script:

<form id="myform">
    <input type="text" value="" id="input1">
    <input type="text" value="" id="input2">
    <input type="submit" value="submit">
</form>
<img id="image" src="http://mydomain.com/empty.gif" />
<script>
$(document).ready(function () {
    $("#myform").submit(function (ev) {
        ev.preventDefault();
        var val1 = $("#input1").val();
        var val1 = $("#input2").val();
        $("#image").attr("src", "http://mydomain.com/image?val1="+val1+"&val2="+val2);
    });
});
</script>

How would it look like if written in JavaScript?

I'm being somewhat pedantic, but...jQuery is Javascript, what you have written is perfectly valid Javascript it just happens to depend on jQuery. What you're asking for is a non-jQuery dependant version. — roryf
– roryf, Commented May 11, 2011 at 12:40
It is Javascript (using some functions brought into scope by the jQuery library). jQuery is not a language. — Lightness Races in Orbit
– Lightness Races in Orbit, Commented May 11, 2011 at 12:49

gblazex · Accepted Answer · 2011-05-11 13:00:58Z

3

<img id="image" src="http://mydomain.com/empty.gif" />
<script>
window.onload = function() { // Not all browsers support DOMContentLoaded
  document.getElementById("myform").onsubmit = function() {
     var val1 = document.getElementById("input1").value;
     var val2 = document.getElementById("input2").value;
     document.getElementById("image").src="http://mydomain.com/image?val1="+val1+"&val2="+val2;
     return false;
   };
};
</script>

If you NAME the fields you can use

window.onload = function() {
  document.getElementById("myform").onsubmit = function() {
     document.getElementById("image").src="http://mydomain.com/image?val1="+this.input1.value+"&val2="+this.input2.value;
     return false;
   };
};

You MAY want to escape the two values

edited May 11, 2011 at 13:00

gblazex

50.3k12 gold badges100 silver badges92 bronze badges

answered May 11, 2011 at 12:40

mplungjan

180k29 gold badges183 silver badges246 bronze badges

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

9 Comments

Marcel Korpel Over a year ago

You miss return false;. Moreover, you're waiting for onload, not DOMContentLoaded, etc. ;-)

mplungjan Over a year ago

@Marcel: I already fixed the return false and DCL is not supported by a lot of browsers

Marcel Korpel Over a year ago

I know, but I just wanted to nit-pick a bit about this code not being exactly equivalent to the OP's (and to make him aware of the uses of frameworks).

mplungjan Over a year ago

But in IE8, jQuery would convert DOMContentLoaded to onload, no?

Lightness Races in Orbit Over a year ago

+1 for the de-jQueryizing. -1 for not fixing the OP's misconception.

|

Collectives™ on Stack Overflow

Conversion from jQuery into JavaScript

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related