Je veux avoir deux formulaires sur la même page, un pour l'enregistrement de l'utilisateur et un pour modifier le nom d'une entreprise. Voilà comment je suis arrivé jusqu'ici ...

test001.js:


$(document).ready(function() {
    $(function() {
        $("#dialog").dialog({
            autoOpen: false
        });
        $("#button").on("click", function() {
            $("#dialog").dialog("open");
        });
    });
    // Validating Form Fields.....
    $("#submit").click(function(e) {
    var email = $("#email").val();
    var comnpanyname = $("#companyname").val();
    var lastname = $("#lastname").val();
    var password = $("#password").val();
    var emailReg = /^(([^<>()\[\]\.,;:\s@\"]+(\.[^<>()\[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i;
    if (firstname === '' || lastname === '' || password === '' || email === '') {
        alert("Please fill all fields!");
        e.preventDefault();
    } else if (!(email).match(emailReg)) {
        alert("Invalid Email!");
        e.preventDefault();
    } else {
        alert("Form Submitted Successfully.");
    }
});
});

test001.css

@import "http://fonts.googleapis.com/css?family=Droid+Serif";
/* Above line is used for online google font */
h2 {
text-align:center;
font-size:24px
}
hr {
margin-bottom:30px
}
p {
color:#000;
font-size:16px;
font-weight:700
}
#button,#button2 {
border:1px solid #0c799e;
width:250px;
padding:10px;
font-size:16px;
font-weight:700;
color:#fff;
border-radius:3px;
background:linear-gradient(to bottom,#59d0f8 5%,#49c0e8 100%);
cursor:pointer
}
#button:hover,#button2:hover {
background:linear-gradient(to bottom,#49c0e8 5%,#59d0f8 100%)
}
input[type=text] {
margin-top:5px;
margin-bottom:20px;
width:96%;
border-radius:5px;
border:0;
padding:5px 0
}
#firstname,#lastname,#email,#password,#company {
padding-left:10px
}
input[type=submit] {
width:30%;
border:1px solid #59b4d4;
background:#0078a3;
color:#eee;
padding:3px 0;
border-radius:5px;
margin-left:33%;
cursor:pointer
}
input[type=submit]:hover {
border:1px solid #666;
background:#555;
color:#fff
}
.ui-dialog .ui-dialog-content {
padding:2em
}
/* 960x610 */
div.container {
width:500px;
height:300px;
margin:50px auto;
font-family:'Droid Serif',serif;
position:relative
}
div.container2 {
width:960px;
height:610px;
margin:50px auto;
font-family:'Droid Serif',serif;
position:relative
}
div.main {
width:320px;
margin-top:35px;
float:left;
padding:10px 55px 25px;
background-color:rgba(204,204,191,0.51);
border:15px solid #fff;
box-shadow:0 0 10px;
border-radius:2px;
font-size:13px;
text-align:center
}
div.main2 {
width:320px;
margin-top:35px;
float:left;
padding:10px 55px 25px;
background-color:rgba(204,204,191,0.51);
border:15px solid #fff;
box-shadow:0 0 10px;
border-radius:2px;
font-size:13px;
text-align:center
}
<!DOCTYPE html>
<html>
<head>
<title>jQuery Dialog Form Example</title>
<link href="http://enersen.no/development/eds/css/test001.css" rel="stylesheet">
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/ui-darkness/jquery-ui.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<script src="http://enersen.no/development/eds/js/user.js" type="text/javascript"></script>
<!-- script src="http://enersen.no/development/eds/js/company.js" type="text/javascript"></script -->
</head>
<body>


<div class="container">
<div class="main">
<div id="dialog" title="Dialog Form">
<form action="" method="post">
<label>First name:</label>
<input id="firstname" name="firstname" type="text">
<label>Last name:</label>
<input id="lastname" name="lastname" type="text">
<label>Email:</label>
<input id="email" name="email" type="text">
<label>Password:</label>
<input id="password" name="password" type="password">
<input id="submit" type="submit" value="Submit">
</form>
</div>
<h2>jQuery Dialog Form Example</h2>
<p>Click below button to see jQuery dialog form.</p>
<input id="button" type="button" value="Open Dialog Form">
</div>
</div>


<div class="container2">
<div class="main2">
<div id="dialog2" title="Dialog Form 2">
<form action="" method="post">
<label>New comany name:</label>
<input id="company" name="company" type="text">
<input id="submit" type="submit" value="Submit">
</form>
</div>
<h2>jQuery Dialog Form Example</h2>
<p>Click below button to see jQuery dialog form.</p>
<input id="button2" type="button" value="Open Company Dialog Form">
</div>
</div>


</body>
</html>

Je m'attends à ce que le formulaire que j'active soit celui évalué. Maintenant, c'est le formulaire pour l'adresse- / login-info qui est évalué. Je suppose que j'ai besoin d'un extrait de code qui permet à med de traiter les formulaires en tant que différents documents en Javascript?

1
Nesrene 8 nov. 2019 à 11:54

2 réponses

Merci, Jamiec, tu m'as pointé dans la bonne direction et je l'ai résolu :-) Voici le résultat:

$(document).ready(function() {
    $(function() {
        $("#userDialog").dialog({
            autoOpen: false
        });
        $("#companyDialog").dialog({
            autoOpen: false
        });
        $("#userButton").on("click", function() {
            $("#userDialog").dialog("open");
        });
        $("#companyButton").on("click", function() {
            $("#companyDialog").dialog("open");
        });
    });
    // Validating Form Fields.....
    $("#userSubmit").click(function(e) {
        var email = $("#email").val();
        var comnpanyname = $("#companyname").val();
        var lastname = $("#lastname").val();
        var password = $("#password").val();
        var emailReg = /^(([^<>()\[\]\.,;:\s@\"]+(\.[^<>()\[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i;
        if (firstname === '' || lastname === '' || password === '' || email === '') {
            alert("Please fill all fields!");
            e.preventDefault();
        } else if (!(email).match(emailReg)) {
            alert("Invalid Email!");
            e.preventDefault();
        } else {
            alert("Form Submitted Successfully.");
        }
    });
});
0
Nesrene 8 nov. 2019 à 10:01

Vous disposez de plusieurs boutons d'envoi avec l'ID submit - modifiez-les simplement pour qu'ils soient uniques - lorsque vous utilisez un attribut id, ils doivent toujours être uniques pour la page.

Par exemple, utilisez userRegistrationSubmit pour l'un, puis changez ceci:

$("#submit").click(function(e) {

à

$("#userRegistrationSubmit").click(function(e) {

Vous pouvez appeler l'autre companyNameChangeSubmit.

0
Jamiec 8 nov. 2019 à 09:07