Is it possible, for example, if I choose more than 1 checkbox it will submite multiple forms with the other camps that I have but the only thing that will change is the value of the checkbox.
I will give a more detailed example.
I have 2 camps, 1 with the name and the other with the email and the other is those checkbox. And If I choose 2 checkbox it will submit the forum 2 times with the same name and the same email but one will be with 1 value and the other will be with the other value that I selected.
<div class="form-group">
<label>Test</label>
<div class="custom-control custom-radio">
<input type="checkbox" id="0" name="server" class="custom-control-input">
<label class="custom-control-label" for="0">Everywhere</label>
</div>
<div class="custom-control custom-radio">
<input value="1" type="checkbox" name="server" id="test" class="custom-control-input">
<label class="custom-control-label" for="teste" value="1">test</label>
</div>
<div class="custom-control custom-radio">
<input value="2" type="checkbox" name="server" id="test2" class="custom-control-input">
<label class="custom-control-label" for="test2" value="2">test2</label>
</div>
</div>
Thanks U all for your time, sorry if I wasn't detailed enough but just say it and I will improve it! Feel free to send me any link do study and implement in the code ;)
When using a checkbox, as long as they all share the Same name then they will be submitted as ONE value. Example:
A checkbox named Hobbies will submit an array of values checked when the form is submitted with a result that looks like [Cooking, Running, Jumping, Gaming]. All of that is 1 value, and not 4.
The input element is how many different results you want back.
The name attribute tag is identifies which response the answer belongs to.
The value attribute tag is what will be sent inside of the value, i.e. [1,2,3] or [A, B, C].
Please rephrase your question if you felt i did not meet the answer you were looking for. It was difficult to understand.
Edit after reading comment.
Your issue seem to be on your understanding of the form element, and not that on the checkbox attribute.
Please consider wrapping your inputs and form data inside a form tag. All inputs inside will be submitted as one, rather than as separate or individual. Your html structure seems to be what is causing your issue.
<form action="/action_page.php">
First name:<br>
<input type="text" value="Mickey"><br>
Last name:<br>
<input type="text" name="lastname" value="Mouse"><br><br>
<input type="checkbox" name="vehicle1" value="Bike"> I have a bike<br>
<input type="checkbox" name="vehicle2" value="Car"> I have a car
<input type="submit" value="Submit">
</form>
Everything inside that form element will be submitted as one POST, and from there, you can request the values from the [vehicle1] or [vehicle2] question.
HTML
<form id="form-id">
First name:<br>
<input type="text" value="Mickey"><br>
Last name:<br>
<input type="text" name="lastname" value="Mouse"><br><br>
<input type="checkbox" name="vehicle1" value="Bike"> I have a bike<br>
<input type="checkbox" name="vehicle2" value="Car"> I have a car
<input type="submit" value="Submit">
</form>
JAVASCRIPT
var ele1 = document.getElementById("form-id1"); //Your Form Element
var ele2 = document.getElementById("form-id2"); //Your Form Element
//Detects whenever this particular form is "submitted"
if(ele.addEventListener){ //Modern browsers
ele.addEventListener("submit", function(e){
ele1.action="yourUrl1";
ele1.submit();
ele2.action="yourUrl2";
ele2.submit();
//return false; //stops page from refreshing after submit
});
} else if(ele.attachEvent){ //Old IE
ele.attachEvent('onsubmit', function(e){
ele1.action="yourUrl1";
ele1.submit();
ele2.action="yourUrl2";
ele2.submit();
//return false; //stops page from refreshing after submit
});
}
I modified my response, but you might be better just connecting the two forms together. You can reference a form element from different parts of your html.
form
The form element that the input element is associated with (its form owner). The value of the attribute must be an id of a element in the same document. If this attribute isn't used, the element is associated with its nearest ancestor element, if any. This attribute lets you to place elements anywhere within a document, not just as descendants of form elements. An input can be associated with at most one form.
formaction
The URL that processes the data submitted by the input element, if it is a submit button or image. This attribute overrides the action attribute of the element's form owner.
References
Detect if form is submitted, using javascript
Submitting a form using javascript 1
Submitting a form using javascript 2
Form/Formaction Quote - Mozilla
Form - W3Schools
Formaction - W3Schools
Input Attributes - W3Schools
Related
I have a contact form with a couple of checkboxes.
Whenever i submit the form I would like the selected value's to be printed separated by comma's.
<form method="POST">
<input type="checkbox" id="product1" name="product1" value="12">
<input type="checkbox" id="product2" name="product1" value="13">
<input type="checkbox" id="product3" name="product1" value="14">
<button type="submit">Subscribe</button>
</form>
I'm using this form. Lets say product 1 and 2 are selected. Then it should print 12,13 <
What is the best way to do this? Is it even possible?
Thanks in advance.
USE CASE:
So I thought it was useful to post why I need this.
Later when I'm able to get the values I will do something like this:
header("Location: http://test.com/$myvalues");
So this link can be test.com/12,13 after the user submits the form.
Not working:
So im using this code
<?php
if(isset($_POST['product'])){
$values = implode(',',$_POST['product']);
// header("Location: https://test.com/?add-to-cart=$values");
}
?>
Whenever i click on the submit button, it takes me to a page that doesnt exist. So i get a 404 page. Even with the header location commented off.
The header location doesnt seem to work at all.
<form method="POST" action="upload.php" >
<input type="checkbox" id="product1" name="product[]" value="12">
<input type="checkbox" id="product2" name="product[]" value="13">
<input type="checkbox" id="product3" name="product[]" value="14">
<button type="submit" name="products" >Subscribe</button>
</form>
in upload.php
$a=$_POST['product'];
$prodt=implode(',',$a);
$prodt has the value
To consolidate Alive to Die's answer and the comments about XSS by hanshenrik;
Use the array-like syntax in the input name attribute:
<form method="POST">
<input type="checkbox" id="product1" name="product[]" value="12">
<input type="checkbox" id="product2" name="product[]" value="13">
<input type="checkbox" id="product3" name="product[]" value="14">
<button type="submit">Subscribe</button>
</form>
If you check the first two checkboxes and submit, you should receive:
$POST['product'] == ["12", "13"];
Of course any input needs to be validated and escaped before outputting in the response. For the specific use-case you mention, you would end up with something like this:
$products = [];
if (isset($POST['product'])) {
foreach ($POST['product'] as $product) {
if (!is_numeric($product)) {
die("invalid product value.");
}
$products[] = intval($product);
}
}
if (empty($products)) {
die("no products selected.");
}
header("Location: https://test.com/" . implode(",", $products);
Clarification on input validation:
If you skip the input validation, one could submit the following data:
product[]="admin.php" and get redirected to https://test.com/admin.php. Of course that wasn't what you wanted this script to do, so by that principle alone you should consider restricting the possible behavior of your code. But it could get worse:
If you choose to echo implode(",", $POST['product']) somewhere in your website, someone might submit:
product[]="<script>alert(\"vuln\");</script>" which will add JavaScript to your website. An alert isn't dangerous, but this script could be anything. From submitting your session cookies to running a cryptominer in your browser. In principle, if you can alert(), you can do anything.
If you construct your original form from a database, someone might insert malicious inputs as values into the database. So these attacks are not necessarily limited to a single user playing around with their element inspector.
These are a lot of 'ifs' and for a simple local website or PHP script, you don't need to concern yourself with most of these issues. However, if you choose to make any of your code available to the internet, you should never trust user input.
Since you've given every checkbox the same name attribute, you can't. Give them separate names and you can easily handle this client and/or server side.
I have been searching for a way to add up the total sum of radio buttons and echo it that total on the same page in php. Is there a way to do this? I have included an image of what I am looking at.
Here is code that I have come up with so far:
PHP
<?php
$prod1 = "10";
$prod2 = "20";
$prod3 = "30";
?>
<form action="">
<input type="radio" name="prod1" value="<?=$prod1?>">$10 product 1<br>
<input type="radio" name="prod2" value="<?=$prod2?>">$20 product 2<br>
<input type="radio" name="prod3" value="<?=$prod3?>">$30 product 3
</form>
<!-- This is where the total shows live upon radio check -->
<?php
echo ="$total"
?>
I am new so it will not post an image, here is a link to my image:
Working example
You need an element where the total is going to be, and a way of identifying those inputs. I've used input which isn't very specific; You may want to change this if you have more going on in that form.
I bound change to the form (which I gave the id products) because the change events made on the inputs will bubble up to the form, and we need to search the whole form for all the inputs so it made sense not to have to traverse, which we'd need to do if the function was bound to the input fields.
Then simply, on change of something in the form, add up the values of the checked elements. parseFloat() is used because the values are strings and you'd end up with "102030" where you really wanted "60".
HTML
<form action="" id="products">
<label><input type="radio" name="prod1" value="10" />$10 product 1</label>
<br />
<label><input type="radio" name="prod2" value="20" />$20 product 2</label>
<br />
<label><input type="radio" name="prod3" value="30" />$30 product 3</label>
</form>
<p>Total $<span id="total">0</span></p>
jQuery
$(function(){
$('#products').on('change', function(){
var total = 0;
$(this).find('input:checked').each(function(){
total += parseFloat($(this).val());
});
$('#total').text(total);
});
});
By the way, if the user is supposed to be able to uncheck these options, you need to use <input type="checkbox" ...
This question builds further on the question asked here: How to map dynamic array of input fields .
I have a dynamic set of rows with each it's own input fields. These rows can be dynamically added to the DOM, so I have to use input arrays without an index ( eg fieldname[] instead of fieldname[1] etc).
The problem occurs when I use checkboxes in these rows. Since checkboxes are not submitted when they are not checked, I see no way of knowing which submitted checkbox belongs to which row values.
Example of my form:
<form>
<div class="row">
<input type="text" name="product[]">
<input type="text" name="qty[]">
<input type="checkbox" name="projectline[]">
</div>
<div class="row">
<input type="text" name="product[]">
<input type="text" name="qty[]">
<input type="checkbox" name="projectline[]">
</div>
<div class="row">
<input type="text" name="product[]">
<input type="text" name="qty[]">
<input type="checkbox" name="projectline[]">
</div>
</form>
I found an answer to a similar problem here: php array of checkboxes , but the answer obviously only applies to arrays with an index.
What is the best approach here?
EDIT :
I also check the form for errors server-side and redirect it back if it is faulty, So I need to be able to 'reconstruct' the form based on the submitted values.
One trick I've seen used for this is to put a hidden field before each checkbox that submits the same field with a value of 0. That way, if you check the checkbox it will overwrite the 0 value with the checkbox value, but if you don't, you'll get a 0 for unchecked instead of nothing in your data.
The answer from the comments of keeping a running total of indexes could work, too, but is a bit more complicated depending on how and when the DOM can be modified.
I ended up assigning an index number to each of the rows, generating a new random id each time a row is added. I used jQuery for the clone functions and event binding.
Below is my complete solution.
This is my original form:
<form>
<div class="row">
<input type="text" name="product[0]">
<input type="text" name="qty[0]">
<input type="checkbox" name="projectline[0]">
</div>
</form>
I have a template row that I use to make clones of:
<div id="templaterow">
<input type="text" name="product[%%index%%]">
<input type="text" name="qty[%%index%%]">
<input type="checkbox" name="projectline[%%index%%]">
</div>
A button to clone the row:
<button id="addrow" value="add new row"/>
And a function bound to the button:
$('#addrow').on('click',function()
{
//template row is cloned and given the right attributes:
var clone = $('#templaterow').clone(true, true);
$('.row').last().after(clone);
clone.addClass('row').removeAttr('id');
// the %%index%% placeholder is replaced by a random index number between 100 and 9999999
clone.html(function (index, html) {
var rndIndex = Math.floor((Math.random() * 9999999) + 100);
return html.replace(new RegExp('%%index%%','g'),rndIndex);
});
});
This should be easy, but I am missing something.
I have the following form:
<div id="rsvp">
<form class="form-inline">
<fieldset>
<label class="control-label" for="input01" id="rsvp_label">John Smith</label>
<label class="control-label">Attending?:</label>
<label class="radio"><input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>Yes</label>
<label class="radio"><input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">No</label>
<label class="control-label small" for="select01" id="meal"> Meal Selection:</label>
<select id="selectMeal" class="input-small">
<option>Chicken</option>
<option>Beef</option>
</select>
<button type="submit" class="btn btn-primary" id="btnrsvp">Save / Confirm Changes</button>
</fieldset>
</form>
</div>
I am successfully pulling out records in the database that match my query, and I have 1 -> n records. I'd like to clone this form for each record. So I can loop through the records, but am having trouble figuring out how to go about actually cloning the fieldset and then incrementing the ids so that I can attach a form action to each one. Or perhaps there's a better way to do this... ?
If the whole form uses class instead of ID for elements you can clone and re-use at will without needing to parse ID's. Track the record ID with a data attribute or a hidden input in each form.
If you have event handlers on any of the form field elements that are dependent on other fields in the form, you would simply look them up within the context of the individual form
Event handler example ( select ID changed to class):
<select class="input-small selectMeal">
<option>Chicken</option>
<option>Beef</option>
</select>
JS
$('.selectMeal').change(){
var rsvp_name= $(this).closest('.form-inline').find('.rsvp_label').text();
if( rsvp_name=='John Smith') doSomething();
})
The control would be the form tag - put a data-id="3" where 3 represents the user id for john smith. Then change all your input ids to data-id's as well, and on your form submit handler, just submit said data to whatever record maps to the <form> tag's data-id attribute.
Have a look at SheepIt, a form cloning jQuery plugin.
This question is similar to my previous question but not the same ... please check out....I am using totaly 3 webpages; form elements are distributed among two pages, "eg1.html" and "eg2.html", but all the form elements should be submitted to "eg.php".
Here is the code for eg.php which accepts the form elements from both eg1.html and eg2.html:
$size=$_POST["fontsize"];
$label=$_POST["label"];
$age=$_POST["age"];
$sex =$_POST["sex"];
code for eg1.html
<html>
<body>
<form action="eg.php" method="post">
<input type="radio" name="fontsize" value="3"/>
click here to select other options which includes age and sex
<input type="radio" name="label" value="stacks"/>
<input type="submit" name = "down" value = "down">
</form>
</body>
Now What would be the code for eg2.html? just check out sample partial html code :but needs to be compleated....
<input type="radio" name="age" value="3"/>
<input type="radio" name="sex" value="female"/>
The code should work exactly like this:
First user will open eg1.php he selects only one option that is "fontsize" .. next he clicks on the "link to eg2.html" to select two more options "age" and "sex" after selecting... he will be redirected back to eg1.php where he has to select one more option that is "label" ... then he will submit the form to eg.php. Which will hold all form elements those are 'fontsize' 'age' 'sex' and 'label' .....
I have seen many website using this technique please check out cooltext.com where user will get an option to click on the font image which will redirect him to fonts page after selecting one of the fonts images he will be redirected back to homepage,where he can select some other form elements or form elements and finally submits the form .... i have also seen many websites using this technique , i think this can be done using JQUERY/JavaScript but not sure ...please help me to fix this problem guyz,.,,,
Using js you can have the entire form on one page and divide it in steps like this
<form action="eg.php" method="post">
<div class="step1">
<input type="radio" name="fontsize" value="3"/>
click here to select other options which includes age and sex
<input type="radio" name="label" value="stacks"/>
<input type="submit" name = "down" value = "down">
</div>
<div class="step2">
click here to go back to step1
<input type="radio" name="age" value="3"/>
<input type="radio" name="sex" value="female"/>
<input type="submit" value="Submit"/>
</div>
</form>
js:
$('#step1_submit').click(function(){
$('#step1').hide();
$('#step2').show();
});
$('#step2_back').click(function(){
$('#step1').show();
$('#step2').hide();
});