JavaScript onSubmit обработка формы

Question

Так что я пытаюсь сделать расширение Chrome, которое принимает пользовательский ввод в виде запроса, сбрасывает API Flickr для изображений, связанных с этим запросом (эффективно ищет его для запроса), а затем помещает их, а также ссылки на их местоположения на странице. Я украл его с учебного сайта, пример расширения которого сделал это без ввода пользователя и ссылок. Я попытался сделать сами ссылки, в которых я потерпел неудачу, и поэтому мне пришлось получить помощь здесь. Теперь я неудачно ухожу при настройке пользовательского ввода. Я сначала попробовал PHP, который разбил мой хром, так как он, по-видимому, не работает в расширениях, так что теперь я пытаюсь перейти на JS полностью. Я попытался сделать событие onsubmit для своей формы поиска, а затем понял, что должен иметь весь мой код в {} моей функции onsubmit. К сожалению, из-за того, как переменные объявлены в JavaScript, это не работает, поскольку, если все внутри функции, тогда все объявленные переменные отображаются private. Поэтому другие функции внутри основного не могут их использовать, что делает скрипт бесполезным. Идеальное решение для этого было бы способом объявить общедоступные переменные внутри функции, к сожалению, после поиска полчаса я не мог найти никаких способов, которые работают/я понимаю. Может кто-нибудь, пожалуйста, помогите мне? Я буду полностью доволен любым другим методом, как и буду, если вы скажете мне, что все мои прогнозы ошибочны и почему - я совершенно нуб в этом.

Мой код до сих пор:

var req = new XMLHttpRequest(); 
req.open(
"GET", 
"http://api.flickr.com/services/rest/?" + 
    "method=flickr.photos.search&" + 
    "api_key=90485e931f687a9b9c2a66bf58a3861a&" + 
    "text=cake&" + 
    "safe_search=1&" + 
    "content_type=1&" + 
    "sort=relevance&" + 
    "per_page=24", 
true); 
req.onload = showPhotos; 
req.send(null); 


function showPhotos() { 
    var photos = req.responseXML.getElementsByTagName("photo"); 

    for (var i = 0, photo; photo = photos[i]; i++) { 
    var photos = req.responseXML.getElementsByTagName("photo"); 
    var a = document.createElement("a"); 
    a.setAttribute("href",constructImageURL(photo)); 
    a.setAttribute("target","_blank"); 

    var img = document.createElement("img"); 
    img.setAttribute("src",constructImageURL(photo)); 

    a.appendChild(img); 
    document.getElementById("images").appendChild(a); 
    } 
} 

function constructImageURL(photo) { 
    return "http://farm" + photo.getAttribute("farm") + 
    ".static.flickr.com/" + photo.getAttribute("server") + 
    "/" + photo.getAttribute("id") + 
    "_" + photo.getAttribute("secret") + 
    "_s.jpg"; 
} 

Это без моего неудачного onsubmit кода. HTML страница сам состоит только из тега импортируемого выше сценарий, в DIV для изображений и форму:

<div id="images"> 
</div> 
<form name="queryForm" onsubmit="javascript: querySubmit()"> 
Search: <input type='text' name='query'> 
<input type="submit" /> 
</form> 

Может кто-то пожалуйста, помогите?

Answer 1

Вот почему я ненавижу JQuery .. видеть мои HTML 5 примеры форм ...

http://netjs.codeplex.com/SourceControl/changeset/view/91818#1775033

http://netjs.codeplex.com/SourceControl/changeset/view/91818#1775035

Вам нужно добавить событие в форме, например,

myform.addEvent('submit', myFunction);

Затем оттуда обрабатывать то, что вам нужно сделать ...

Предоставленный JQuery имеет мало, чтобы с этим и его более likley, потому что вы не; понимать JavaScript, который облегчает JQuery, потому что получается все в DOM, как дерьмо. Вы используете только плохие практики, и вам нужно отделить свою логику от различных функций для поддержания работоспособности.