Ajax + Javascript dynamic text input box

Source: Internet
Author: User

Html file code

Copy to ClipboardReference: [www.bkjia.com] <Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> </title>
<! --
JAVASCRIPT code the <script> elements that require web pages, as shown below.
<Script> the language attribute of the element is used to set the language in which the script is implemented. For example, you need to set the src attribute when using external JAVASCRIPT.
-->
<Script language = "javascript" src = "test. js">
</Script>
</Head>

<Body>
<Div id = "tardiv">
</Div>
<Form>
<Input id = "txtNumber" type = "text" value = "1" size = "5"/>
<Input id = "btnNumber" name = "Submit" type = "button" value = "submit" onclick = "showmessage (txtNumber. value, 'tardiv ')">
</Form>
</Body>
</Html>

Code for test. js:

Copy to ClipboardReference: [www.bkjia.com] // JavaScript Document

//
// Use JAVASCRIPT to dynamically generate text input boxes to the page,

// The amount parameter indicates the number of text input boxes generated, and the target parameter indicates the Control ID name of the text input box to be displayed.
Function showmessage (amount, target)
{
Var strContent;
// Generate a text input box in a loop and save it to strContent.

For (I = 0; I <amount; I ++)
{
StrContent + = '<input id = "txt' + I + '" type = "text" value = "' + I + '" size = "5"/> <br/> ';
}

// Use the innerHTML attribute in the getElementById () method of the JAVASCRIPT document object to define the content of the target control.

Document. getElementById (target). innerHTML = strContent;
}

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.