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.
Related
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
Have this form:
<form action="<?= $_SERVER['PHP_SELF'] ?>" method="POST" id="form_pesquisa" data-toggle="validator" role="form">
<div class="radio"> <label> <input type="radio" name="cliente" id="73" value="ss"> "ss" </label> </div>
<div class="radio"> <label> <input type="radio" name="cliente" id="74" value="aa"> "aa" </label> </div>
<button type="submit" class="btn btn-warning" name="hchoose">Choose client</button>
How can I get the id of the radio when the button is pressed? $_POST['id'] does not work. Tks all.
The id doesn't get passes to the server for processing, only the input name and value get passed. PHP uses name to process the user input & $_POST['anything'] is used to get the user input of <input type="radio" name="anything" id="73"> & not the id="73". JavaScript can be used to get the id but not PHP actually.
If you really want to get whatever is in the id you can put it in value like value="ssId-73"
You have to set name for the button eg. <input type="radio" name="myRadioButton"/> then in PHP $_POST['myRadioButton']
There's no way to receive id in PHP, you can only set same name as id.
If you don't want to edit your form (which will be the easiest way), you'll have to use jQuery, because using native Javascript will make it even more difficult.
Below your form:
<script src="jQuery_url">
</script>
<script>
jQuery("#form_pesquisa").on("submit", function() {
var id = jQuery("input[name='cliente']:checked").attr("id");
jQuery(this).append("<input type='hidden' name='id' value='"+id+"'>");
});
</script>
Having done this, in your form handler file, $_POST['id'] will contain the value you want to catch.
The scenario is - I have a form with multiple input fields and text areas and whenever I post this form all these values will get posted. However, I also have a dropdown that I create from my database. This dropdown value shows up properly when I get the values. I have a second submit button, which should take this selected value and post to other page.
I have tried the $_POST='name of select option' but it did not help.
I have a onlick for directing the form to other page for updating the db.
I'm fairly new to php, so it could be the use of _POST that could be incorrect.
<form name="f1" class="formoid-solid-blue" method="GET">
<div class="title">
<h2></h2>
<h2>Tracking & Receiving</h2>
</div>
<div class="element-input">
<label class="title"></label>
<div class="item-cont">
<input class="small" type="text" name="store" placeholder="Store #"/>
<span class="icon-place"></span>
</div>
</div>
<div class="element-input">
<label class="title"></label>
<div class="item-cont">
<input class="medium" type="text" name="userid" placeholder="UserId"/>
<span class="icon-place"></span>
</div>
</div>
<div class="element-input">
<label class="title"></label>
<div class="item-cont">
<input class="large" type="text" name="order" placeholder="Order Number"/>
<span class="icon-place"></span>
</div>
</div>
<div class="submit">
<input type="submit" name="Send" value="Send"/>
</div>
<div class="element-separator">
<hr>
<h3 class="section-break-title">Tracking Numbers</h3>
</div>
<div class="element-multiple">
<label class="title"></label>
<div class="item-cont">
<div class="large">
<select data-no-selected="Nothing selected" name="updTR" multiple="multiple">
<option name="op" value="<?php require 'connection.php'; ?>"> //getting value form db
<?php
echo $trackID; //DB value
$trackID = $_GET['updTR']; //getting the variable from the form
?></option>
</select>
<span class="icon-place"></span>
</div>
</div>
</div>
<div class="submit">
<input type="submit" onclick="f1.action='UpdateTR.php'; return true;" name="UpdateTR" value`enter code here`="Submit"/>
</div>
</form>
Well, looking at the form, you said you are using POST, and tested with other POST related method, but your form is using GET, as seen on your code above.
Since you are new to PHP, as an example, if you are using post, and a variable is waiting on the other page to collect this information from your form then you do it like this:
This is the form field example:
<input type="text" name="XYZ">
Then on the page that will collect this info, it would be
$someVariable = $_POST[ 'XYZ' ];
now, if you want to use GET, then its the same thing but you use this
$someVariable = $_GET[ 'XYZ' ];
hope this clears the confusion.
-- EDIT 2 --
Ok after reading your comment, and since i haven't seen how you are iterating through your DB for the options that go in that "option" list/menu, I'm going to say you cant put "connection" as the value on this part:
<option name="op" value="<?php require 'connection.php'; ?>">
because assuming that "connection.php" is connecting to the DB, then that wont help you, that goes elsewhere. Instead, once you've made that connection(elsewhere, preferably above it in the header somewhere), you then have to have code that loops through the DB, and "WHILE" its looping, spit out results into that options field. Let me give you an example with PSEUDO code.
If a normal select/option code looks like this
<select>
<option> option 1 </option>
<option> option 2 </option>
</select>
etc, then you need php that loops through your DB results, and puts the results into the "options" in that select,
here is some pseudo code:
<select>
<?php
while($row = your fetch code here){
echo "<option>your line items here</option>";
}
?>
</select>
OR.....
if "$row" has a specific value you want to use from the database that you visually want to add in that list, then you could do similar to above but with something like:
<select>
<?php
while($row = your fetch code here){
echo "<option>your line items here "' . $row['some value from DB here'] . '"</option>";
}
?>
</select>
etc.
Essentially, you want your "while loop" to iterate through your database and WHILE its doing it, to input its data into your options html.
ALSO, if you wanted a particular value from your DB, put into a GET variable, to use for the processing page (as i mentioned all the way above), then again, similarly, you can do something like this:
<?php
while($row = your fetch code here){
echo "<a href='linkHere.php?yourVariableToTrackWithGetHere='".$row['yourDBresutlToTrack']."'> Your text here </a>"; }
?>
This way, when you click the link, the database value gets added to that variable that you can call later in the processing page.
Kinda long winded but, this should set you 100% straight.
Hope this helps.
I'm working on a form for a home building company - users can specify the options that they'd like in their home. I store the general information from the form (formID, name, address, phone, etc.) in a table called 'designForm'.
I have another table called 'designOptions' that holds every option that is available for the homes (optionID, optionLocation, optionName, optionDescription).
There is also a table called 'FormOptions' that will hold a record for each option that is selected on the form (formID, optionID)
On the form, each option is represented by a checkbox with it's value set to the optionID. Some of the option checkboxes show additional input or select fields when they're checked. The additional info will not always be the same. Sometimes it's Ceiling Height, other times it could be Shower Size or something else. Below are some examples.
<span class="additional-info-wrap">
<label class="checkbox-inline">
<input type="checkbox" name="options[]" value="38">Whirlpool Tub
</label>
<div class="additional-info hide">
<select class="form-control" name="masterBathWhirlpoolSize">
<option value="None Specified">None Specified</option>
<option value="3'x5'">3'x5'</option>
<option value="3'x6'">3'x6'</option>
<option value="4'x6'">4'x6'</option>
<option value="5'x5' Corner Unit">5'x5' Corner Unit</option>
</select>
</div>
</span>
<span class="additional-info-wrap">
<label class="checkbox-inline">
<input type="checkbox" name="options[]" value="39">Shower / Tub
</label>
<div class="additional-info hide">
<select class="form-control" name="masterBathTubSize">
<option value="None Specified">None Specified</option>
<option value="3'x5'">3'x5'</option>
<option value="3'x6'">3'x6'</option>
</select>
</div>
</span>
<span class="additional-info-wrap">
<label class="checkbox-inline">
<input type="checkbox" name="options[]" value="46">Dining Room
</label>
<div class="additional-info hide">
<input type="number" name="roomsDiningHeight" placeholder="Ceiling Height" class="form-control" disabled="">
</div>
</span>
<span class="additional-info-wrap">
<label class="checkbox-inline">
<input type="checkbox" name="options[]" value="47">Family Room / Great Room
</label>
<div class="additional-info hide">
<input type="number" name="roomsFamilyHeight" placeholder="Ceiling Height" class="form-control" disabled="">
</div>
</span>
Using CodeIgniter, I insert the basic form data into the 'designForm' field, grab the formID and then process the options array with the following:
$options = $this->input->post('options');
foreach ($options as $option ){
$option_data = array(
'optionID' =>($option),
'formID' =>($form_id)
);
}
My question is: what is the best way to process that additional information which is exposed when a user checks the checkbox? I'm asking for the best way to name the fields in the HTML (multi-dimensional array?), process the fields in PHP/CodeIgniter and then store them in the MySQL DB.
I'd like to be able to store the additional info field's name and value in the 'FormOptions' table, but I'm not sure if that makes sense, or how I would go about doing it. The information in those fields really applies to the specific option, so I don't believe it makes sense to store them in the 'designForm' table.
i solved a problem near this like your problem this way:
My form was N fields... and i never know what of they i need to send...
I made my options and checkboxes as multidimensional array.
And later i get the data from form using:
$formData = $this->input->post();
The result will be and array with all POSTED data from the form. Then you can manage in a controller or object the way you need to send, to database, or for email.
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);
});
});