CODEWITHSUNDEEP
javascripthtmlformstags
Start0101End
Start0101End

Reputation: 108

Javascript within HTML form tag in the javascript function

Is it possible to put a JavaScript code within the HTML Form tags. I am trying to achieve something like this:

function abc(abcd) {
    document.getElementById("context").innerHTML += "<br> 1:";
    document.getElementById("context").innerHTML += "***<form METHOD=POST ACTION=\"/InformationRetrieval/home\">***<input type=\"checkbox\" name=\" GoogleRelevance\" value=\"1\"> Relevant <br><br>";

    document.getElementById("context").innerHTML += "<br> 2:";
    document.getElementById("context").innerHTML += "<input type=\"checkbox\" name=\" GoogleRelevance1\" value=\"1\"> Relevant <br><br>";

    document.getElementById("context").innerHTML += "<br> 3:";
    document.getElementById("context").innerHTML += "<input type=\"checkbox\" name=\" GoogleRelevance3\" value=\"1\"> Relevant <br>***<input type=\"submit\" value=\"Submit\"></form>***<br><br>";
}

Here what I am trying to ask in this example is: I have started the tag initially in my starting 2-3 lines, but I am not closing it there and rather inserting some more javascript lines and in the end I am closing the tag with another <input type="submit">, but when I click this button it does not work.

I tried using the OnClick property too but that didn't work either.

I am badly stuck with it. Any help will be greatly appreciated.

Upvotes: 0

Views: 1284

Answers (1)

mfeineis
mfeineis

Reputation: 2657

I think you really should use some good ajax library (jQuery, YUI, dojo, goog, ...) for something like this, stuffing all the code into form attributes doesn't feel right. As nickf pointed out modifying a dom property in this way is really not a good idea. As I'm used to jQuery here is a snippet to what I understand from your post is the problem:

// Caching the stuff that you used to += on the innerHTML
var newStuff = ' /* your form code here */ '; 

jQuery
.ajax({
    url: /* your request to google */,
    context: jQuery('#context') // Caching the context dom node
})
.done(function() { 
    // The request was successful
    jQuery(this) // The cached context node is the context of this callback
    .append(newStuff); // You only have to append new stuff here, if you want something
                       // more dynamic insert the logic in this function
})
.fail(function() { /* alert("error"); */ })
.always(function() { /* alert("complete"); */ });

I didn't test this one though, it's only a recommendation. To me it is cleaner and it has the advantage if you get it to work in one browser this way you can count on jQuery to make sure it's working in most other browsers too.

And by the way: you can use single ' around the whole html string so that you don't need to escape the " thingys.

Hope this helps, good luck!

Upvotes: 2

Related Questions