简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Maison > interface Web > js tutoriel > le corps du texte

Comment mettre en œuvre le transfert de données entre plusieurs formulaires en Javascript ?

伊谢尔伦
Libérer： 2017-07-18 15:13:24
original
1569 Les gens l'ont consulté

Premièrement, le plus simple est de transférer les données d'un formulaire dans la même page Web.

Par exemple, il y a deux formulaires sur une page Web, chacun avec une zone de texte et un bouton. Cliquez sur les boutons pour modifier la valeur de la zone de texte de chacun. L'exemple que nous avons donné est de transférer une zone de texte vers une autre zone de texte. Le code HTML spécifique est le suivant : 

<html> 
<head> 
<title>Untitled Document</title> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
</head> 
<body> 
<form name="form1" method="post" action=""> 
<input type="text" name="textfield"> 
<input type="button" name="Submit" value="1--------->2" onClick="ok()"> 
</form> 
<form name="form2" method="post" action=""> 
<input type="text" name="textfield2"> 
<input type="button" name="Submit" value="2----->1" onClick="ok1()"> 
</form> 
</body> 
</html>
Copier après la connexion

Ce qui précède est le code HTML Vous avez peut-être remarqué le code onclik. Il y a ensuite le code JAVASCRIPT. 🎜>Deuxièmement, le second est le transfert de données entre les zones de texte du formulaire entre les deux fenêtres. En fait, cela peut être étendu sur la base originale. Concernant la façon de créer une fenêtre pop-up et le code du formulaire dans le formulaire, je n'entrerai pas dans les détails ici. Parlons maintenant de la façon d'exploiter les données de la zone de texte sous la forme de la fenêtre parent. Le code spécifique est le suivant : 

<script language="JavaScript"> 
function ok() 
{ 
document.form2.textfield2.value=document.form1.textfield.value; 
} 
function ok1() 
{ 
document.form1.textfield.value=document.form2.textfield2.value; 
} 
</script>
Copier après la connexion

Troisièmement, la troisième méthode consiste à transférer des données entre les zones de texte du formulaire entre les pages Web du cadre

La chose à noter est la manière dont le cadre est utilisé. s'écrit : 
<script language="JavaScript"> 
function ok() 
{ 
opener.document.form2.textfield2.value=document.form1.textfield.value 
} 
</script>
Copier après la connexion


Le code d'implémentation spécifique est le suivant : 

<frameset cols="505,505"> 
<frame src="test.htm" name="leftr" id="leftr">//定义框架的名称 
<frame src="test2.htm" id="right" name="right"> 
</frameset> 
<noframes><body> 
</body></noframes>
Copier après la connexion

Une méthode simple pour interopérer les valeurs des zones de texte entre ces trois types de fenêtres a été implémentée. L’autre chose à laquelle il faut prêter attention est la relation entre eux. 

<script language="JavaScript"> 
function ok() 
{ 
parent.leftr.document.form2.textfield2.value 
=document.form1.textfield.value 
} 
</script>
Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées：
javascript js 表单
source：php.cn
Article précédent：Parlons de l'utilisation de diverses instructions de branche complexes en JavaScript Article suivant：Explication détaillée de la façon dont JavaScript ajoute et supprime des éléments au HTML
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Derniers numéros
Méthode CSS uniquement pour modifier dynamiquement le src de l'image au clic sans utiliser JavaScript Je dois changer le src d'une image en cliquant sur la souris en utilisant uniquement du CS...
Depuis 2024-04-06 19:25:49
0
1
505
Les points de nuage de points ne conservent pas leurs valeurs lors du zoom dans d3.js C'est la première fois que j'utilise d3.js, alors soyez indulgents avec moi. Je l'ai implé...
Depuis 2024-04-06 18:16:26
0
1
403
Événements de survol JavaScript sur des pseudo-éléments spécifiques au fournisseur Il s'agit de HTMLinput.$("input[type='range']::-webkit-slider-thumb").on('hover'...
Depuis 2024-04-06 15:35:24
0
1
274
Soumettre le formulaire sans bouton en utilisant Javascript/Jquery J'essaie de soumettre un formulaire sans bouton en appelant une fonction JavaScript et en ...
Depuis 2024-04-06 14:54:03
0
2
421
Personnalisez l'apparence des en-têtes accordéon Bootstrap à l'aide de la classe CollapseDisplay Je souhaite styliser le titre de la carte d'un panneau avec la classeeffondrementshow. Dan...
Depuis 2024-04-06 12:53:11
0
1
376
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！