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.

Answers


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!


Need Your Help

Half pixel in border width size it is not showing

css

can i have half pixel in border width like this , I tried it but it is not working

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.