Am looking for how to send all my data (checkbox, input text, button value..) when user submit a form so the developper backend (php) can get it by his side.
i don't know if adding method="GET" to the form tag was enough
PS: The js is not for the form, it's just a code to increment numbers.
var selectAllItems = "#select-all";
var selectAllItems_perGroup = ".select-per-group :checkbox";
var checkboxItem = ":checkbox";
$(selectAllItems).click(function () {
if (this.checked) {
$(checkboxItem).each(function () {
this.checked = true;
});
} else {
$(checkboxItem).each(function () {
this.checked = false;
});
}
});
$(selectAllItems_perGroup).click(function () {
if (this.checked) {
$(
".checkbox-group__list .cbox-box:not('.select-per-group') :checkbox"
).each(function () {
this.checked = true;
});
} else {
$(
".checkbox-group__list .cbox-box:not('.select-per-group') :checkbox"
).each(function () {
this.checked = false;
});
}
});
// increment num (Voyageurs)
$(".voyageurs-content__item-right :disabled").before(
'<button type="button" ><span>-</span></button>'
);
$(".voyageurs-content__item-right :disabled").after(
'<button type="button" ><span> </span></button>'
);
$(".button-inc-dec").on("click", function () {
var $button = $(this);
var oldValue = $button.parent().find("input").val();
if ($button.text() == " ") {
var newVal = parseFloat(oldValue) 1;
$(".button-inc-dec.dec").removeClass("nb-underZero");
$(".button-inc-dec.dec").removeAttr("disabled");
}
if (newVal > 0) {
} else {
// Don't allow decrementing below zero
if (oldValue > 0) {
var newVal = parseFloat(oldValue) - 1;
}
if (newVal == 0) {
$button.addClass("nb-underZero");
$button.attr("disabled", true);
newVal = 0;
}
}
$button.parent().find("input").val(newVal);
var id = $button.attr("id");
$.ajax({
type: "POST",
url: "dosomething.php?id=" id "&newvalue=" newVal,
success: function () {
$button.parent().find("input").val(newVal);
},
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
<form
method="GET" action="/">
<div >
<p >Destinations</p>
<div >
<div >
<button type="button">
Où allez-vous ?
</button>
<div >
<div >
<label >
Toutes les destinations
<input type="checkbox" id="select-all">
<span ></span>
</label>
</div>
<div >
<div >
<div >
<label >
Alpes
<input type="checkbox">
<span ></span>
</label>
<label >
Select 1
<input type="checkbox">
<span ></span>
</label>
<label >
Select 2
<input type="checkbox">
<span ></span>
</label>
<label >
Select 3
<input type="checkbox">
<span ></span>
</label>
</div>
</div>
</div>
</div>
</div>
<span >ou</span>
<div >
<button type="button">
Vos envies</button>
<div >
<div >
<p>Qu’est-ce qui vous fait envie ?</p>
</div>
<div >
<div >
<label >
Mer
<input type="checkbox">
<span ></span>
<div >
<img src="https://media.azureva-vacances.com/ressources/images/promotions/BONPLAN820X560_16.jpg" alt="">
</div>
</label>
</div>
<div >
<label >
Mer
<input type="checkbox">
<span ></span>
<div >
<img src="https://media.azureva-vacances.com/ressources/images/promotions/BONPLAN820X560_16.jpg" alt="">
</div>
</label>
</div>
<div >
<label >
Mer
<input type="checkbox">
<span ></span>
<div >
<img src="https://media.azureva-vacances.com/ressources/images/promotions/BONPLAN820X560_16.jpg" alt="">
</div>
</label>
</div>
<div >
<label >
Mer
<input type="checkbox">
<span ></span>
<div >
<img src="https://media.azureva-vacances.com/ressources/images/promotions/BONPLAN820X560_16.jpg" alt="">
</div>
</label>
</div>
<div >
<label >
Mer
<input type="checkbox">
<span ></span>
<div >
<img src="https://media.azureva-vacances.com/ressources/images/promotions/BONPLAN820X560_16.jpg" alt="">
</div>
</label>
</div>
</div>
</div>
</div>
</div>
</div>
<div >
<p >Dates</p>
<div >
<div >
<button type="button">
<span>
Arrivée
</span>
<span>
Départ
</span>
</button>
</div>
</div>
</div>
<div >
<p >Nombre de voyageurs</p>
<div >
<button type="button">
Voyageurs
</button>
</div>
<div >
<div >
<div >
<p>Adultes</p>
<span>à partir de 12 ans</span>
</div>
<div >
<input
type="text" disabled name="voyageur-adultes" id="voyageur-adultes" value="0"> {# </div> #}
</div>
</div>
<div >
<div >
<p>Adultes</p>
<span>à partir de 12 ans</span>
</div>
<div >
type="text" disabled name="voyageur-enfants" id="voyageur-enfants" value="0">
</div>
</div>
<div >
<div >
<p>Adultes</p>
<span>à partir de 12 ans</span>
</div>
<div >
<input
type="text" disabled name="voyageur-bebes" id="voyageur-bebes" value="0">
</div>
</div>
</div>
</div>
<div >
<button type="submit">Chercher
</button>
</div>
</form>
</div>CodePudding user response：
If you are using php on the server side, then the key is on action. You should put the PHP file path on form action. When the form is submitted, it will execute the PHP file.
You can retrieve the form values by $_GET["<your_input_name>"] in the PHP file. If you are using get method in this case. But a post method will be more suitable for a form submission. So it will be $_POST["<your_input_name>"]
Within your form, you should also give your inputs a name.
A simple example:
<form method="POST" action="form.php">
<input type="text" name="first-name" />
<button type="submit" name="submit" />
</form>
form.php
<?php
if (isset($_POST["submit"]) {
$first_name = $_POST["first-name"]
...
}
?>