Вставить форму на страницу с помощью jquery? - PullRequest
Новая
       10

Вставить форму на страницу с помощью jquery?

2 голосов
/ 05 сентября 2011

Я использую jquery для вставки скрытой формы на страницу (когда страница уже загружена).По какой-то причине код не работает.Вот пример кода: 

$(function(){
    $('body')
        .append('<form id="mySearch"></form>'); //append a new form element with id mySearch to <body>
    $('#mySearch') 
        .attr("action","mySearchPage.cfm") .attr("method","post") //set the form attributes
        //add in all the needed input elements
        .append('<input type="hidden" name="btnSearch" id="btnSearch" value="Search">')
        .append('<input type="hidden" name="txtField1" id="txtField1" value="">')
        .append('<input type="hidden" name="txtField2" id="txtField2" value="">')
        .append('<input type="hidden" name="selType" id="selType" value="0">')
        .append('<input type="hidden" name="selType2" id="selType2" value="2">')
});

Форма не вставляется в тело страницы.Что я делаю не так?

Обновление: я обнаружил, что когда я использую код на отдельной странице, он работает правильно.Когда я пытаюсь интегрировать его в большую, уже существующую страницу, он больше не работает.Любые идеи о том, что может привести к сбою точно такой же код?

Ответы [ 3 ]

6 голосов
/ 05 сентября 2011

попробуйте это: 

$(document).ready(function(){
    $('body')
        .append('<form id="mySearch"></form>'); //append a new form element with id mySearch to <body>
    $('#mySearch') 
        .attr("action","mySearchPage.cfm") .attr("method","post") //set the form attributes
        //add in all the needed input elements
        .append('<input type="hidden" name="btnSearch" id="btnSearch" value="Search">')
        .append('<input type="hidden" name="txtField1" id="txtField1" value="">')
        .append('<input type="hidden" name="txtField2" id="txtField2" value="">')
        .append('<input type="hidden" name="selType" id="selType" value="0">')
        .append('<input type="hidden" name="selType2" id="selType2" value="2">')
});

В любом случае, вы должны абсолютно избегать такого подхода для добавления динамического контента в DOM.Лучшая техника - создать одну строку, содержащую всю необходимую разметку, и добавить ее за один выстрел!Что-то вроде: 

var HTML = '<form attributes><input><input>...</form>';
$("#container").html(HTML);
1 голос
/ 06 сентября 2011

В конце концов, это была просто проблема синтаксиса с дополнительным тегом в файле, который включал JavaScript: P Код работает сейчас!

1 голос
/ 05 сентября 2011

Это работает для меня, возможно, вам не нужны скрытые поля формы?

http://jsfiddle.net/M5vWR/

См. Этот с видимыми элементами формы.

http://jsfiddle.net/M5vWR/2/

...