AGRI-KET/prjtfinal.html at main · Ragulraja47/AGRI-KET · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<!DOCTYPE html>
<html>
<head>
    <title>Upload Image</title>
</head>
<body>
    <form id="imgForm">
        <div class="form-group">
            <label for="name">Name:</label>
            <input type="text" id="name" name="name" required>
        </div>
        <div class="form-group">
            <label for="phone">Phone No:</label>
            <input type="text" id="phone" name="phone" required>
        </div>
        <div class="form-group">
            <label for="address">Address:</label>
            <input type="text" id="address" name="address" required>
        </div>
        <div class="form-group">
            <label for="livestock_type">Livestock Type:</label>
            <select id="livestock_type" name="livestock_type" required onchange="toggleFields()">
                <option value="" selected disabled>Select Livestock Type</option>
                <option value="cow">Cow</option>
                <option value="buffalo">Buffalo</option>
                <option value="goat">Goat</option>
                <option value="horse">Horse</option>
            </select>
        </div>
        <div class="form-group" id="milkPerDayField" style="display: none;">
            <label for="milk_per_day">Milk per Day:</label>
            <input type="number" id="milk_per_day" name="milk_per_day">
        </div>
        <div class="form-group" id="genderField" style="display: none;">
            <label for="gender">Gender:</label>
            <select id="gender" name="gender">
                <option value="" selected disabled>Select Gender</option>
                <option value="male">Male</option>
                <option value="female">Female</option>
            </select>
        </div>
        <div class="form-group">
            <label for="age">Age:</label>
            <input type="number" id="age" name="age" required>
        </div>
        <div class="form-group">
            <label for="amount">Amount:</label>
            <input type="number" id="amount" name="amount" required>
        </div>
        <div class="form-group">
            <label for="description">Description:</label>
            <textarea id="description" name="description" rows="5" required></textarea>
        </div>
        <div class="form-group">
            <label for="image">Image:</label>
            <input type="file" name="image" id="image">
        </div>
        <div class="form-group">
            <label for="health_certificate">Health Certificate:</label>
            <input type="file" name="health_certificate" id="health_certificate">
        </div>
        <input type="submit" value="Upload Images" name="submit">
    </form>
</body>

<script>
    let form = document.getElementById("imgForm");
    form.addEventListener("submit",(e)=>{
        e.preventDefault();
        let formdata = new FormData(e.target);
        console.log(formdata)
        fetch("prjtfinal.php",{
            method:"POST",
            body:formdata
        }).then(async (res)=>{
            const data = await  res.json()
            console.log(data)
            return data
        }).then((data)=>{
            console.log(data);
            document.getElementById("message").innerText = data.msg
        })
    })

    function toggleFields() {
  var livestockType = document.getElementById("livestock_type").value;
  var milkPerDayField = document.getElementById("milkPerDayField");
  var genderField = document.getElementById("genderField");

  if (livestockType === "cow" || livestockType === "buffalo") {
    milkPerDayField.style.display = "block";
    genderField.style.display = "none";
  } else if (livestockType === "goat" || livestockType === "horse") {
    genderField.style.display = "block";
    milkPerDayField.style.display = "none";
  } else {
    milkPerDayField.style.display = "none";
    genderField.style.display = "none";
  }
}
</script>
</html>