The issue here is trying with my limited experience to create a section where a user can dynamically edit data already stored. The approach I am using is to create POSTs input in a variable number and initialize them with the already stored values... here is the code
<html>
<input type="button" id="more_fields" onclick="add_fields();" value="Add another Skill" />
<?php
$cars = ["Volvo", "BMW", "Toyota"];
echo $cars[0];
?>
<div id="data_fileds">
<div>
<div class="content">
<span>Skill: <input type="text" style="Skill:48px;" name="Skill[]" value= "<?php echo $cars[0];?>" />
</div>
</div>
</div>
<script>
function add_fields() {
var objTo = document.getElementById('data_fileds')
var divtest = document.createElement("div");
divtest.innerHTML = '<div class="content"><span>Skill: <input type="text" style="Skill:48px;" name="Skill[]" value="<?php echo $cars[2];?>" />';
objTo.appendChild(divtest)
}
</script>
</html>
I managed in a non-elegant way to initialize the first POST according the first input item... what I am missing is the dynamic allocation of the number of post according the data already stored (in this case the creation of 3 POSTs as per cars array) and the initialization of the POSTs with the car[...i] values...
Anyone can support?
Thanks!!!
EDIT
I will try to be more clear, what I would like to obtain is the creation o three "Skill" input filed initialized with the following values
Skill[0] --> Volvo
Skill[1] --> BMW
Skill[2] --> Toyota
At the moment the program cannot automatically create three "Skill" field but I believe there may be a way forward. So far what I managed to do is to initialize the first field
Skill[0] --> Volvo
and input a initialization value for any trigged extra Skill input. There is no connection though between the array cars containing the initialization values and the number of input filed "Skills"
Hope this explains.
To get an input field for every value stored in the $cars-array you could use a simple loop:
<?php for($i = 0; $i < count($cars); $i++): ?>
<div class="content">
<span>Skill:
<input type="text" style="Skill:48px;" name="Skill[]" value="<?php echo $cars[$i];?>" />
</span>
</div>
<?php endfor; ?>
Related
I'm really struggling with an RSVP form I'm trying to set-up and any help would be great!
I have this form so far http://adrianandemma.com/ which I am trying to get to send me a simple email once submitted.
The form has a 'Name' field and a radio button for 'Attending - Yes/No'.
I then have some JS whereby you can clone these fields to RSVP for more than one guest at a time.
The 'Name' fields are passing through fine as an array and coming through by email, as I can just set the name attribute of the input to name="name[]", but I'm having trouble with the radio buttons.
I can't leave the 'name' attribute the same for the cloned radio buttons, because if I do I can only select yes/no for one cloned row, as all the cloned radios have the same name, so I have added a bit of JS to try to amend the name of any cloned radios to 'coming[1], coming[2], etc'.
I can't quite get this to work though, as every time I submit the form the radio button values appear to come through blank.
Can anybody advise the best approach to setting up radio buttons as an array and to carry them through via $_POST and ultimately an email script?
Here's my HTML form:
<?php
if(#$_REQUEST['submit'] == '1') {
include('assets/forms/rsvp.php');
}
?>
<form action="?" method="post">
<?php if(#$errors) :?>
<p class="errors"><?php echo $errors; ?></p>
<?php endif; ?>
<input type="hidden" name="submit" value="1" />
<div class="form-row">
<div class="field-l">
<p>Name</p>
</div>
<div class="field-r">
<p>Attending?</p>
</div>
</div>
<div class="form-row guest">
<div class="field-l">
<input type="text" name="name[]" id="name" value="<?php echo htmlspecialchars(#$_REQUEST['name']); ?>" tabindex="1" />
</div>
<div class="field-r">
<input type="radio" name="coming" id="coming-yes" class="coming-yes" value="Yes"><label for="coming-yes">Yes</label><input type="radio" name="coming" id="coming-no" class="coming-no" value="No"><label for="coming-no">No</label>
</div>
</div>
<a class="addguest" href="#">Add further guest</a>
<div class="form-row">
<button type="submit" id="rsvp-submit" tabindex="2">Submit RSVP</button>
</div>
</form>
Hers My Form Process code:
<?php
$name = $_POST['name'];
$coming = $_POST['coming'];
$errors = "";
if(!#$_POST['name']) { $errors .= "Please enter your name.<br/>\n"; }
if(!#$_POST['coming']) { $errors .= "Please enter yes or no for attending.<br/>\n"; }
if(#$_POST['emailaddress'] != '') { $spam = '1'; }
if (!$errors && #$spam != '1')
{
$to = "xxx#example.com";
$subject = "Wedding RSVP";
$headers = "From: noreply#adrianandemma.com";
$body = "The following RSVP has been sent via the website.\n\n";
for($i=0; $i < count($_POST['name']); $i++) {
$body .= "
Name ".($i+1)." : " . $_POST['name'][$i] . "\n
Coming ".($i+1)." : " . $_POST['coming'][$i] ."\n\n";
}
$body .= "\n\nDate Received: " . date("j F Y, g:i a") . "\n";
mail($to,$subject,$body,$headers);
}
?>
Here's my JS:
$(document).ready(function() {
$('.addguest').on('click', function(e) {
e.preventDefault();
//
// get the current number of ele and increment it
//
var i = $('.guest').length + 1;
$('.guest').first().clone().find("input").attr('id', function(idx, attrVal) {
return attrVal + i; // change the id
});
$('.guest').first().clone().find("input[type=radio]").attr('id', function(idx, attrVal) {
return attrVal + i; // change the id
}).attr('name', function(idx, attrVal) {
return attrVal+'['+i+']'; // change the name
}).val('').end().find('label').attr('for', function(idx, attrVal) {
return attrVal + i; // change the for
}).end().insertBefore(this);
});
});
Here's an example of what I'm receiving by email currently, names come through fine, but radio values for 'Coming Yes/No" are all blank:
The following RSVP has been sent via the website.
Name 1 : John Doe
Coming 1 :
Name 2 : Ann Doe
Coming 2 :
Name 3 : Fred Doe
Coming 3 :
Date Received: 19 April 2017, 1:04 am
Honestly, my best guess is that in the original row, the names of your radio inputs are simply "coming", without the brackets. I think that because there are no brackets on that name, it is clobbering the other ones of the same name that should behave as an array. In other words, PHP is getting two conflicting types for an input of the same name, and taking the string over the array.
Hard to say without testing it directly, and the fact that the input is referenced as an array in your PHP form handler and doesn't throw an error would tend to suggest to me I'm not quite right, but it may be worth a try.
Here's the change to the HTML I would try:
<div class="field-l">
<input type="text" name="name[0]" id="name" value="<?php echo htmlspecialchars(#$_REQUEST['name']); ?>" tabindex="1" />
</div>
<div class="field-r">
<input type="radio" name="coming[0]" id="coming-yes" class="coming-yes" value="Yes">
<label for="coming-yes">Yes</label>
<input type="radio" name="coming[0]" id="coming-no" class="coming-no" value="No">
<label for="coming-no">No</label>
</div>
Notice I specifically marked the first row as row zero, as PHP uses zero-indexed arrays.
This would then require some changes to your javascript. I've found it was easier to create an actual template for your row HTML and use that than to try and clone the first row each time and reset all the inputs and adjust the names. The way this works is you define your template HTML inside a script tag with an ID and a type that is non-standard. The browser ignores it, but JavaScript can access it just like any other element and we can pull the content out with jQuery's html() method.
Here's what I've come up with (including a fix of your indexing):
<!-- A script with a non-standard type is ignored by the browser -->
<!-- We can reference it by ID in our JS though, and pull out the HTML -->
<script id="guest-row-template" type="text/template">
<div class="form-row guest">
<div class="field-l">
<input type="text" name="" id="name" class="name-ipt" />
</div>
<div class="field-r">
<input type="radio" name="" id="" class="coming-yes coming-yes-ipt" value="Yes" />
<label for="" class="coming-yes coming-yes-label">Yes</label>
<input type="radio" name="" id="" class="coming-no coming-no-ipt" value="No" />
<label for="" class="coming-no coming-no-label">No</label>
</div>
</div>
</script>
<script type="text/javascript">
$(document).ready(function() {
$('.addguest').on('click', function(e) {
e.preventDefault();
//Get the number of rows we have already - this is the index of the *next* row
//If we have 1 row, the first row's index is 0 and so our next row's index should be
//1, which is also our length, no need to increment
var i = $('.guest').length;
//Get HTML template content for a single row
var row = $('#guest-row-template').html();
//Update the name attribute of the name input
row.find('.name-ipt').attr('name', 'name[' + i + ']');
//Update the name and id attributes of the yes radio button
row.find('.coming-yes-ipt').attr('name', 'coming[' + i + ']');
row.find('.coming-yes-ipt').attr('id', 'coming-yes-' + i);
//Update the name and id attributes of the no radio button
row.find('.coming-no-ipt').attr('name', 'coming[' + i + ']');
row.find('.coming-no-ipt').attr('id', 'coming-no-' + i);
//Update the for attribute of the yes label
row.find('.coming-yes-label').attr('for', 'coming-yes-' + i);
//Update the for attribute of the no label
row.find('.coming-no-label').attr('for', 'coming-no-' + i);
row.insertBefore(this);
});
});
</script>
Please note this is untested code. Of course I've gone through a few times to make sure I caught all my obvious bugs, but others may persist. Since I can't actively test it, I can't say it's entirely bug free. But, hopefully as pseudo-code it helps you resolve the issue.
EDIT 1
Just to clarify, you don't ordinarily have to manually provide the index values within the brackets of input names for PHP to interpret the input as an array and to automatically index the input in the appropriate order. I specifically set the first inputs to have use [0] because all the inputs after them will also need to specify index values in order for your radio buttons to work (I personally appreciate consistency), and because we need to be absolutely sure that the correct names are matched to the correct RSVP value (just trying to be thorough).
I am creating a webpage with from-controls (2 in this exemple).
My code is the following :
<body>
<div class="option_choice_global">
Select your options
<div class="col-xs-2">
<label> Application </label>
<select class="form-control" id="application">
<?php
$applications = get_apps();
foreach ($applications as $key => $value) { echo '<option value='.$key.'>'.$value.'</option>'; }
?>
</select>
</div>
<div class="col-xs-1">
<label> Version </label>
<select class="form-control" id="version">
<?php
$versions = get_versions();
foreach ($versions as $key => $value) { echo '<option value='.$key.'>'.$value.'</option>'; }
?>
</select>
</div>
<div class="col-xs-12">
<button type="submit" class="btn btn-default" onclick="fonction_submit_graph(this)"> <b> Submit </b> </button>
</div>
</div>
</body>
But I would like the second one (the version) to appear only when a value on the first controller (the application) is chosen. And my function get_versions() will then depend on the selected application : get_versions(application_number).
How can I do to show the second controller only when a value on the first one is selected ? And to get the selected value ?
Thank you!
If I understand you right, you want to show the second select dropdown after a value is chosen from the first.
This can easily be done with JavaScript and CSS:
In the second select tag, add these attributes: style="{display: none;}". This will hide the dropdown. Also give it id="select2" for easy identification.
In the first select tag, add this attribute: onchange=showHiddenSelect(); This causes a function to be called when the value changes ie an option is selected. Also give it an id="select1".
Somewhere in your document, define the showHiddenSelect function like this:
function showHiddenSelect() {
document.getElementById("select2").style.display="block";
}
If you also wish to get the selected value, you'd just add this in that function: var select1value = document.getElementById("select1").value; and do what you want with it.
If you need the selected option from select1 to be sent to a backend and then used to calculate the options for select2, then your best bet would be to use AJAX to send and receive data from a script and then populate the select with JavaScript.
The code below consists of invoice-lines that contain some input fields that the user can fill out. The initial number of input lines is 20. Users will often need to add more lines to the invoice by clicking the "Add lines" button. Every click of this button uses Javascript to append more lines to the invoice.
The problem is when the form gets submitted only the first 20 lines seem to get submitted. All the javascript appended invoice lines are ignored and never POSTed.
I have been trying to work out this problem for quite a while now, I was wondering if someone can guide me as to how to go about implementing this correctly?
Many thanks in advance.
Markup / PHP
<?php
for($i=0; $i < 20; $i++){
echo '
<div class="invoice-line">
<div class="prod-id-cell"><input name="rows['.$i.'][id]" type="text" class="prod-id-input">
<div class="smart-suggestions">
<!-- RESULT SUGGESTIONS WILL POPULATE HERE --> </div>
</div>
<div class="prod-name-cell">
<input type="text" name="rows['.$i.'][name]" class="prod-name-input"/> <div class="smart-suggestions">
<!-- RESULT SUGGESTIONS WILL POPULATE HERE -->
</div>
</div>
<div class="price-cell"><input name="rows['.$i.'][price]" class="price-input" type="text" /></div>
<div class="quantity-cell"><input name="rows['.$i.'][quantity]" type="text" class="quantity-input"></div>
<div class="unit-price-cell"><input name="rows['.$i.'][unit-price]" class="unit-price-input" type="text" /></div>
<div class="num-kits-cell"><input name="rows['.$i.'][num-kits]" class="num-kits-input" type="text" /></div>
<div class="amount-cell"><input name="rows['.$i.'][amount]" class="amount-input" type="text" readonly="readonly" /></div>
</div>';
}
?>
Javascript
//**ADD 5 LINES**//
$('.invoice-links div').on("click", ".add-five-trigger", function(){
for(var i=0; i < 5; i++){
var invoiceLine = $(".invoice-line").first().clone( true, true );
$(invoiceLine).insertAfter(".invoice-line:last");
$(".invoice-line:last").find('input').val('').attr('disabled','disabled');
}
});
You forgot to change the name attributes of the cloned inputs. They would overwrite previous fields.
Use this:
var invoiceLine = $(".invoice-line").last();
var newLine = invoiceLine.clone( true, true );
invoiceLine.after(newLine);
newLine.find('input').each(function() {
if (this.type == "text")
this.value = "";
this.name = this.name.replace(/rows\[(\d+)\]/, function(m, num) {
return "rows["+(+num+1)+"]";
});
this.disabled = true;
});
The values are not being posted because you are disabling them. Input elements with disabled attribute don't get posted.
Also, always make sure that elements have unique ids and names. Elements without names don't get posted.
You are not giving new names to the elements you create. You are also disabling them.
$(".invoice-line:last").find('input').val('').attr('disabled','disabled');
Disabled form inputs will never be submitted with the form.
I have a button on a page that when a user pushes it, it creates another "Contact" field on the page. The Contact field allows them to add a new contact to their profile. Also, they can click the button as many times as they want, and it will create that many "Contact" fields.
The problem though is that I am having a hard time figuring how many "Contact" fileds have been added. Here is some HTML that is generated when the button is clicked:
<div class="item">
<label for="in-1v">First Name <span>*</span></label>
<div class="text">
<input type="text" id="in-1-0" name="member[0][fname]" value="" />
</div>
</div>
<div class="item">
<label for="in-2-0">Last Name <span>*</span></label>
<div class="text">
<input type="text" id="in-2-0" name="member[0][lname]" value="" />
</div>
</div>
Each time the button is clicked, name="member[0][lname]" will become name="member[1][lname]" and will continue to increment each time the button is clicked. As stated earlier, the user can do this as many times as they want on the page.
I am using PHP to loop through the multidimensional array:
$array = $_POST['member'] ;
foreach($array as $array_element) {
$fname = $array_element['fname'];
$lname = $array_element['lname'];
}
How can I use PHP to determine how many fileds have been added so I can loop through them?
Any help is greatly appreciated!
You can simply get a count like so:
$count = count($_POST['member']);
You could also then modify your loop to look like this:
// First check to see if member is set and is a valid array
if (!empty($_POST['member']) && is_array($_POST['member'])) {
$count = count($_POST['member']);
for ($i = 0; $i < $count; $i++) {
$fname = $_POST['member'][$i]['fname'];
$lname = $_POST['member'][$i]['lname'];
}
}
I'm using the http://www.advancedcustomfields.com plugin to create custom fields in Wordpress. I'm specifically using the repeater field functionality.
On a page I have a repeater that has an unlimited amount of rows. The usual way of echoing out all the data is the following:
<?php $counter = 1; if(get_field('step_by_step_training')): ?>
<?php while(the_repeater_field('step_by_step_training')): ?>
<p class="training-<?php echo $counter; ?>"><?php the_sub_field('introduction'); ?></p>
<?php $counter++; endwhile; ?>
<?php endif; ?>
Is it possible to show one row of data at a time with a next button that when pressed will show the next row of data? I only want one row of data showing at a time so if row 1 is originally showing, when next is clicked it hides row 1 and shows row 2. Essentially creating a step by step process.
Eventually I'd like to include a form so the user can submit data.
UPDATE:
<form class="form" method="POST" action="<?php the_permalink(); ?>">
<?php $counter = 1; if(get_field('step_by_step_training')): ?>
<?php while(the_repeater_field('step_by_step_training')): ?>
<div class="form-row">
<p class="training"><?php echo the_sub_field('introduction'); ?></p>
<button class="next">Next Form Element</button>
</div>
<?php $counter++; endwhile; ?>
<?php endif; ?>
</form>
<script type="text/javascript">
jQuery(function($) {
$(document).ready(function() {
// hide all form-rows, but not the first one
$('.form-row').not(':first').hide();
$('button.next').click(function(e) {
// prevent the next buttons from submitting the form
e.preventDefault();
// hide this form-row, and show the next one
$(this).parent('div.form-row').hide().next('div.form-row').show();
});
});
});
</script>
You could do something simple like this using jQuery (I think this is what you wanted?):
$(document).ready(function() {
// prepend a 'previous' button to all form-rows except the first
$('<button>').addClass('previous').text('Previous').prependTo($('.form-row').not(':first'));
// hide all form-rows, but not the first one
$('.form-row').not(':first').hide();
// add the submit button to the last form-row
$('<input>').prop('type', 'submit').val('Submit Form').appendTo($('.form-row:last'));
// handle the previous button, we need to use 'on' here as the
// previous buttons don't exist in the dom at page load
$('.form-row').on('click', 'button.previous', function(e) {
e.preventDefault();
$(this).parent('div.form-row').hide().prev('div.form-row').show();
});
$('button.next').click(function(e) {
// prevent the next buttons from submitting the form
e.preventDefault();
// hide this form-row, and show the next one
$(this).parent('div.form-row').hide().next('div.form-row').show();
});
});
some example markup:
<form action="index.php" method="post">
<div class="form-row">
<label for="forename">Forename</label>
<input type="text" name="forename" />
<button class="next">Next Form Element</button>
</div>
<div class="form-row">
<label for="forename">Surname</label>
<input type="text" name="surname" />
<div style="clear: both;"></div>
<label for="another">Another</label>
<input type="text" name="another" />
<button class="next">Next Form Element</button>
</div>
<div class="form-row">
<label for="last">Last Form Element</label>
<input type="text" name="last" />
</div>
</form>
You can add as many form elements to each form-row as you want, here's a fiddle to play with
edit
Things to note here are that the previous buttons are injected to the DOM dynamically, and so is the forms submit button (notice how I've removed it from the last form-row in the markup)
Here's an updated fiddle
You could start with a jQuery accordion menu. Some CSS will allow you to minimize the real estate occupied by the deselected rows. If you want to actually discard and retrieve certain rows based on some identifiable characteristic (for instance, ID number), you'll need to go with AJAX.
You could write your own custom method with something like JQuery.
Assign a class to each row, and keep track of which one is selected, when viewing another row simply .hide() the one that was showing and .show() the one you wish to display.
If you want to keep your HTML cleaner, you could use the JQuery .data() functionality to assign identifiers to each element and refer to them that way as well.
Most of this all depends on your constraints with wordpress, how it looks & your actual HTML layout
After it's all written to the screen, can't you just hide everything but the first row? And then each time you click the button, have it hide everything and show the next row. Try using jquery's next() function. jquery - next()
Ah, looks like deifwud beat me to it with a better explanation.