my objective was to have a code to insert formatted rows into a table (clone the table I designed) I have a code which works but will not accept the select field.
This code works but will not accept the select field with the preset information in the code.
$(document).ready(function(){
$("button").click(function(){
$("form").append("Field Name:Field Name:Field Name:");
});
});
So I searched and found this dose which looks better but I can not get to work.
c.append(
$('<form>', {
method : 'POST',
action : ''
}).append(
$('<select />', {
name : 'retour'
}).append(
$('<option />', {text : 'option1'}),
$('<option />', {text : 'option2'}),
$('<option />', {text : 'option3'}),
$('<option />', {text : 'option4'}),
$('<option />', {text : 'option5'})
)
)
);
which i modified to:
<body>
<p>Click the button below to dynamically add more fields</p>
<form>
<form id="Test" name="Test" method="post">
<table>
<tr>
<td>Number:</td>
<td><input type="number"></td>
<td>Field Name:</td>
<td><input type="text"></td>
<td>Field Name:</td>
<td><input type="text"></td>
</tr>
<tr>
<td><label for="select">Select:</label></td>
<td><select name="select" id="select">
<option value="50" selected>50</option>
<option value="100">100</option>
</select></td>
<td>Field Name:</td>
<td><input type="text"></td>
<td>Field Name:</td>
<td><input type="text"></td>
</tr>
</table>
</form>
<button>Add Fields</button>
<script>
$("button").click(function(){
$('<form>',{
method : 'POST',
id : 'Test'
}).append(
$('table'),
$('<tr>'),
$('<td>Number:</td>'),
$('<td><input type="number"></td>'),
$('<td>Field Name:</td>'),
$('<td><input type="text"></td>'),
$('<td>Field Name:</td>'),
$('<td><input type="text"></td></tr>'),
$('<tr>'),
$('<td><label for="select">Select:</label></td>'),
$('<td><select name="select" id="select">'),
$('<option value="50" selected>50</option>'),
$('<option value="100">100</option>'),
$('</select></td>'),
$('<td>Field Name:</td>'),
$('<td><input type="text"></td>'),
$('<td>Field Name:</td>'),
$('<td><input type="text"></td>'),
$('</tr>')
)
});
</script>
</body>
</html>.
and I just keep hitting a wall.
any assistance would be appreciated.
EDIT :
use this code i tried it and it works :
$("#button").click(function(){ $("body:last").after('<form id="Test" name="Test" method="post"><select name="select" id="select"><option value="50" selected>50</option><option value="100">100</option></select></form>');
});
Related
I'm learning java and I'm practicing with thymeleaf. I made an little app where I have a list of persons (arraylist). I can add a person through a form but also edit a person from the list to update the person's firstname, lastname or birthdate through a form. Here is my problem I want when I edit a person to have its default values(firstname, lastname, bithdate) on the update form so that we can then change only the fields of interest. I have this code:
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8" />
<title>Update Person</title>
<link rel="stylesheet" type="text/css" th:href="#{/css/style.css}"/>
</head>
<body>
<h1>Update a Person:</h1>
<!-- some tests I made to test if the value appears in the field -->
<!-- <input type="text" name="id" th:value="${person.id}" /> -->
<!-- <input type = "text" name = "firstName" th:value = "${person.firstName}" /> -->
<!-- <input type = "text" name = "sometext" th:value = "hello world" /> -->
<form th:action="#{/updatePerson/{id}(id=${person.id})}"
th:object="${person}" method="POST">
First Name:
<input type="text" th:field="*{firstName}"/>
<br/>
Last Name:
<input type="text" th:field="*{lastName}" />
<br/>
Date of Birth (DD/MM/YYYY):
<input type="date" th:field="*{birthDate}" />
<br/>
ID:
<input type="text" th:field="*{id}" />
<br/>
<input type="submit" value="Update" />
</form>
<br/>
<!-- Check if errorMessage is not null and not empty -->
<div th:if="${errorMessage}" th:utext="${errorMessage}"
style="color:red;font-style:italic;">
...
</div>
</body>
</html>
None of my default values appears in the fields except for the id. Whether I use th:field="{id}" or name="id" th:value="${person.id}". Both synthax work but the others (ie: th:field="{firstName}" or name = "firstName" th:value = "${person.firstName}" same goes for lastname and birthdate), nothing works. I even tried th:value = "hello world" (commented in the above code), it does appear! So why my person firstname, lastname, bithdate don't appear? What is wrong? My person.list html works though:
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8" />
<title>Person List</title>
<link rel="stylesheet" type="text/css" th:href="#{/css/style.css}"/>
</head>
<body>
<h1>Person List</h1>
Add Person
<br/><br/>
<div>
<table border="1">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Date of Birth</th>
<th>Edit</th>
<th>Delete Name</th>
</tr>
<tr th:each ="person : ${list}">
<td th:utext="${person.firstName}">...</td>
<td th:utext="${person.lastName}">...</td>
<td th:text="${#temporals.format(person.birthDate,'dd-MM-yyyy')}">...</td>
<td><a th:href="#{/updatePerson/{id}(id=${person.id})}">
<span>
<img src="https://img.icons8.com/clouds/40/000000/edit.png">
</span>
</a></td>
<td>
<form th:action="#{/deletePerson}" th:method="POST">
<input type = "hidden" name = "firstName" th:value = "${person.firstName}" />
<input type = "hidden" name = "lastName" th:value = "${person.lastName}" />
<input type = "hidden" name = "id" th:value = "${person.id}" />
<input type = "hidden" name = "birthDate" th:value = "${person.birthDate}" />
<button type = "submit" >
<span>
<img src="https://img.icons8.com/metro/26/000000/delete.png" />
</span>
</button>
</form>
</td>
</tr>
</table>
</div>
<div>
<form th:action="#{/changeDao}" th:method="POST">
<select name="daoChoice">
<option th:value="none" disabled>Choisissez votre Dao</option>
<option id="jdbc" th:value="JDBC">Jdbc</option>
<option id="memory" th:value="MEMORY" th:selected="${isMemory}">Memory</option>
</select>
<button type="submit">Valider</button>
</form>
</div>
<div>
<form th:action="#{/excelLoad}" th:method="GET">
<button type="submit">Local Load</button>
</form>
</div>
<div>
<form th:action="#{/UploadFile}" method="POST" enctype="multipart/form-data">
<table>
<tr>
<td><label>Upload and Add to the table</label></td>
<td><input type="file" th:value = "file" th:name="file" /></td>
</tr>
<tr>
<td><input type="submit" value="Upload" /></td>
</tr>
</table>
</form>
</div>
<div>
<form th:action="#{/exportToExcel}" th:method="POST">
<button type="submit">Export to Excel</button>
</form>
</div>
</body>
</html>
Above my personList.html, person's firstName lastName and birthdate is printed correctly with this code:
<tr th:each ="person : ${list}">
<td th:utext="${person.firstName}">...</td>
<td th:utext="${person.lastName}">...</td>
<td th:text="${#temporals.format(person.birthDate,'dd-MM-yyyy')}">...</td>
but why in my update form this is not working ?
I'm a newbie in java programming and also in thymeleaf (also newbie), so I'd really appreciate some explanations along some tips! thanks a lot!
I found it with another post where there was a simple explanation about the key/value pair in modelAddAttribute:
You can access variables value by ${key}.
Example
model.addAttribute("key", value);
Understanding that I found my mistake in my controller:
#RequestMapping(value = { "/updatePerson/{id}" }, method = RequestMethod.GET)
public String showUpdatePersonPage(#PathVariable("id") int id, Person person, Model model) {
person = personDao.findPerson(id);
model.addAttribute("person", person);
return "updatePerson";
}
Before it was:
#RequestMapping(value = { "/updatePerson/{id}" }, method = RequestMethod.GET)
public String showUpdatePersonPage(#PathVariable("id") int id, Person person, Model model) {
person = personDao.findPerson(id);
model.addAttribute("personToModify", person);
return "updatePerson";
}
And in my html the code was:
<form th:action="#{/updatePerson/{id}(id=${person.id})}"
th:object="${person}" method="POST">
First Name:
<input type="text" th:field="*{firstName}"/>
<br/>
Last Name:
<input type="text" th:field="*{lastName}" />
<br/>
Date of Birth (DD/MM/YYYY):
<input type="date" th:field="*{birthDate}" />
<br/>
ID:
<input type="text" th:field="*{id}" />
<br/>
<input type="submit" value="Update" />
</form>
So that was because the key name used "personToModify" couldn't be found in the html as the object name used wasn't properly named:
th:object="${person}"
I can't see your Person class or controller but, for example, keeping it clean, you can create PersonForm class which can look like (might need to change Date)
import java.util.Date;
public class PersonForm {
private String firstName;
private String lastName;
private Date birthDate;
public PersonForm() {
}
public PersonForm(Person person) {
this.firstName = person.getFirstName();
this.lastName = person.getLastName();
this.birthDate = person.getBirthDate();
}
As you can see, it has fields which needs to populated and you set them in constructor, you can also apply validation annotations here if needed.
In your controller you would need to retrieve Person and using it, create and add PersonForm as model attribute. i.e.
#GetMapping("/person/edit/{id}") // you might not use id, might be username
public String editPerson(#PathVariable Long id, Model model) {
Person person = personRepository.getOne(id); // or service
PersonForm personForm = new PersonForm(person);
model.addAttribute("personForm", personForm);
// other stuff
// return html
}
and then change th:object="${person}" to th:object="${personForm}"
Now all th:field="*{firstName}" and others should be populated.
In the following JSP , i have a list which i am iterating and printing with an additional button
JSP
<form action="servlet">
<table border="2">
<th>Req no</th>
<th>username</th>
<th>Leave Type</th>
<th>No of Days Requested</th>
<th>Status</th>
<th>Approve</th>
<c:forEach var="pro" items="${userRequest}">
<tr>
<td><c:out value="${pro.reqno}"></c:out></td>
<td><c:out value="${pro.user_name}"></c:out></td>
<td><c:out value="${pro.leave_Type}"></c:out></td>
<td><c:out value="${pro.no_of_days}"></c:out></td>
<td><c:out value="${pro.status}"></c:out></td>
<td><input type="submit" value="approve"></td>
<td><input type="hidden" name="approve" value="yes"></td>
<td><input type="hidden" name="reqno" value="${pro.reqno}"></td>
</tr>
</c:forEach>
</table>
</form>
If i click on the approve button in my form , the hidden fields takes the value of all the rows . I need to post reqno from individual row alone (i.e) the row which i click the button. Please suggest me an idea .
Thanks in advance !
You need to change Approve button from 'submit' type to 'button' type.
You remove 'hidden' input in TR.
Sample codes:
<tr>
<td><c:out value="${pro.reqno}"></c:out></td>
<td><c:out value="${pro.user_name}"></c:out></td>
<td><c:out value="${pro.leave_Type}"></c:out></td>
<td><c:out value="${pro.no_of_days}"></c:out></td>
<td><c:out value="${pro.status}"></c:out></td>
<td><input type="button" class="btnApproveReq" data-reqno="${pro.reqno}" value="approve"></td>
</tr>
use jQuery to handle onclick:
<script type="text/javascript">
$(document).ready(function () {
$(".btnApproveReq").click(
function() {
var selectedReqNo = $(this).attr("data-reqno");
var urlToApprove = "/yourApp/req/approve?reqno=" + selectedReqNo;
// CALL AJAX to urlToApprove
// Call this If you want to remove TR after AJAX success
// $(this).parent() --> TD
// $(this).parent().parent() --> TR
$(this).parent().parent().remove();
}
);
});
</script>
I have a custom module 'banner' and in which I have added a button in its second tab(only two tabs for the module). when click on that button, it is submitting my banner automatically and then go to the grid page(i e it acts as just another save button). But the function of this button is to add an uploading image field.ie whenever the button is clicked, it should add an image form field to my tab file. This is my tab file.
<?php
class Karaokeshop_Banner_Block_Adminhtml_Banner_Edit_Tab_Image extends Mage_Adminhtml_Block_Widget_Form
{
protected function _prepareForm()
{
$form = new Varien_Data_Form();
$this->setForm($form);
$fieldset = $form->addFieldset('banner_image', array('legend'=>Mage::helper('banner')->__('Banner Image')));
//declaring a new custom form field and adding
$fieldset->addType('add_button', 'Karaokeshop_Banner_Block_Adminhtml_Banner_Edit_Tab_Field_Custom');
$fieldset->addField('banner_img_add_button', 'add_button', array(
'title' => Mage::helper('banner')->__('Add Banner Image'),
'id' => 'add_banner_img_button',
'class' => 'scalable save',
'style' => '',
'onclick' => 'banner.add(this)',
'type' => 'button',
));
return parent::_prepareForm();
}
}
this is my button defining file
<?php
class Karaokeshop_Banner_Block_Adminhtml_Banner_Edit_Tab_Field_Custom extends Varien_Data_Form_Element_Abstract
{
public function __construct($attributes=array())
{
parent::__construct($attributes);
}
public function getElementHtml()
{
$value = $this->getTitle();
$onclick=$this->getOnclick();
$class=$this->getClass();
$id=$this->getId();
$style=$this->getStyle();
$type=$this->getType();
$html='<button id="'.$id.'" class="'.$class.'" style="'.$style.'" onclick="'.$onclick.'" type="'.$type.'" title="'.$value.'">'.$value.' </button>';
$html .= '<p id="' . $this->getHtmlId() . '"'. $this->serialize($this->getHtmlAttributes()) .'>
<script type="text/javascript">
//<![CDATA[
var banner =
{
add : function(obj)
{
},
};
//]]>
</script>
</p>';
return $html;
}
}
what should i do to change my button to an add button? what should I do to avoid this submitting functionality of the button. Please help me. Thanks in advance
First you need to call your phtml from block like this :
class My_Moudles_Block_Adminhtml_Image_Edit_Tab_Form extends Mage_Adminhtml_Block_Widget_Form
{
public function __construct()
{
parent::__construct();
$this->setTemplate('modules/imageupload.phtml');
$this->setFormAction(Mage::getUrl('*/*/imageupload'));
}
then create file in adminhtml/default/default/template/yourmodule/imageupload.phtml and put this code there.
<div class="entry-edit">
<div class="entry-edit-head">
<h4 class="icon-head head-edit-form fieldset-legend"><?php echo $this->__('General')?></h4>
<div class="form-buttons"></div>
</div>
<form id="imageform" method="post" action="<? echo $this->getFormAction(); ?>">
<div id="rules_form" class="fieldset ">
<div class="hor-scroll">
<table cellspacing="0" class="form-list">
<tbody>
<tr>
<td class="label"><?php echo $this->__('Add Image')?></td>
<td class="grid tier" colspan="10">
<table cellspacing="0" id="chain_tiers" class="chain border" style=" width:465px; ">
<thead>
<tr class="headings">
<th><?php echo $this->__('Image')?></th>
<th class="last"><?php echo $this->__('Action')?></th>
</tr>
<tr class="template no-display" id="email_chain_add_template">
<td class="nobr">
<input type="file" id="chain_Image" value="0" name="imageg" class="requried-entry input-text">
</td>
<td class="last"><input type="hidden" value="" disabled="no-template" class="delete" name="email_chain[__index__][delete]"><button onclick="emailsControl.deleteItem(event);return false" class="scalable delete icon-btn delete-product-option" title="Delete Image"><span><?php echo $this->__('Delete')?></span></button></td>
</tr>
</thead>
<tfoot>
<tr>
<td></td>
<td class="a-right" colspan="6">
<button style="" onclick="emailsControl.addItem()" class="scalable add" type="button" title="Add email" id="id"><span><span><span><?php echo $this->__('Add Image')?></span></span></span></button></td>
</tr>
</tfoot>
<tbody id="email_chain_container">
<tr>
<td class="nobr">
<input type="file" id="chain_Image" value="" name="Image[]" class="input-text">
</td>
<td class="last"><input type="hidden" value="" class="delete" name="email_chain[delete][]"><button onclick="emailsControl.deleteItem(event);return false" class="scalable delete icon-btn delete-product-option" title="Delete Image"><span><?php echo $this->__('Delete')?></span></button></td>
</tr>
</tbody>
</table>
<script type="text/javascript">
//<![Cchain[
var emailsControl = {
itemsCount : 0,
deleteButton : false,
addItem : function () {
var chain = {};
chain.TEMPLATE_ID = 0;
chain.index = this.itemsCount++;
if (arguments.length == 1) {
chain.TEMPLATE_ID = arguments[0];
}
var s = '<tr>' + $('email_chain_add_template').innerHTML.replace(/__index__/g, '#{index}').replace(/\sdisabled="?no-template"?/g, ' ').replace(/disabled/g, ' ').replace(/="'([^']*)'"/g, '="$1"') + '</tr>';
var template = new Template(s);
Element.insert($('email_chain_container'), {'bottom': template.evaluate(chain)});
$('chain_row_'+chain.index+'_TEMPLATE').value = chain.TEMPLATE_ID;
maxItemsCount++;
},
deleteItem : function(event) {
var tr = Event.findElement(event, 'tr');
if (tr) {
jQuery(tr).remove();
}
}
}
var maxItemsCount = 2;
//]]>
</script>
</td>
</tr>
</tbody>
</table>
</div></form>
</div>
</div>
Hopes this will solve your issue.
For edit you can do it like this :
<tbody id="email_chain_container">
<?php foreach($images as $row){ ?><tr>
<td class="nobr">
your image code
</td></tr>
I'm having some strange behaviour when using the datepicker. When I load the page, and directly click on the datepicker input, nothing happens. When I click again, nothing happens. But when I click on another input field and then try again the datepicker field, it'll show up.
The issue showed up, after I put the datepicker trigger into a live function, because I have input which will be dynamically generated.
This is my code:
$(".date").on('click', function() {
$(this).datepicker({
dateFormat: "dd.mm.yy",
altField: $(this).closest("td").find(".dateFormated"),
altFormat: "yy-mm-dd"
})
})
Edit: I have seen that live() is deprecated as of 1.7. I therefore switched live() for on(). Didn't solve the issue though.
Whole Html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html" />
<meta name="author" content="gencyolcu" />
<title>Untitled 1</title>
<link rel="stylesheet" href="http://localhost:8082/ivy/page/designer/ZWM$1/css/cupertino/jquery-ui-1.9.2.custom.css" />
<script type="text/javascript" src="http://localhost:8082/ivy/page/designer/ZWM$1/jquery.min.js"></script>
<script type="text/javascript" src="http://localhost:8082/ivy/page/designer/ZWM$1/js/jquery-ui-1.9.2.custom.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
counter = 0;
$("#addRow").click(function() {
counter++;
rowHtml = '\
<tr class="datarow" id="row' + counter + '">\
<td><input type="text" class="date" /><input type="text" class="dateFormated" /></td>\
<td><input type="text" class="from" /></td>\
<td><input type="text" class="to" /></td>\
<td>\
<select class="type">\
<option value="1">Typ 1</option>\
<option value="2">Typ 2</option>\
</select>\
</td>\
<td class="removeRow" id=' + counter + '>X</td>\
</tr>';
$('#submitButton').before(rowHtml);
})
$(".removeRow").live("click", function() {
id = $(this).attr("id");
$("#row" + id).remove();
})
$("[name=formZeitdaten]").submit(function(i) {
values = "";
$(".datarow").each(function(j) {
tr = $(this);
date = tr.find('td').find('.date').val();
from = tr.find('td').find('.from').val();
to = tr.find('td').find('.to').val();
type = tr.find('td').find('.type').val();
values = values + date + ',' + from + ',' + to + ',' + type + ';';
})
console.log(values);
$("[name=dataset]").val(values);
})
$("#slider").slider({
range: true,
min: 0,
max: 1440,
step: 15,
values: [30, 210],
slide: function(event, ui) {
$(".date").val(ui.values[0] + ":" + ui.values[1]);
}
});
$(".date").on('click', function() {
$(this).datepicker({
dateFormat: "dd.mm.yy",
altField: $(this).closest("td").find(".dateFormated"),
altFormat: "yy-mm-dd"
})
})
});
</script>
</head>
<body>
<span id="test"></span>
<form name="formZeitdaten" method="post">
<table id="zeitdaten">
<tr>
<td>Datum</td>
<td>Von</td>
<td>Bis</td>
<td>Typ</td>
<td id="addRow"><input type="button" value="Hinzufügen" /></td>
</tr>
<tr class="datarow">
<td><input type="text" class="date" /><input type="text" class="dateFormated" /></td>
<td><input type="text" class="from" /></td>
<td><input type="text" class="to" /></td>
<td>
<select class="type">
<option value="1">Typ 1</option>
<option value="2">Typ 2</option>
</select>
</td>
<td></td>
</tr>
<tr id="submitButton">
<td><input type="submit" /></td>
</tr>
</table>
</form>
<div id="slider"></div>
</body>
</html>
In your addRow function, add:
$("#row"+counter+" .date").datepicker({
dateFormat: 'dd-mm-yy',
minDate: 0,
showButtonPanel: true,
showAnim: 'show'
});
after you add the element to the DOM. You can then get rid of the $(".date").on('click',...) statement later.
This should work for you
$('.date').datepicker({
dateFormat: 'dd-mm-yy',
minDate: 0,
showButtonPanel: true,
showAnim: 'show'
});
I'm going to do my best to describe what I'm attempting to do, and what I've done, but, please let me know if you need more information to provide help.
What I'm trying to do is create an html table that has 5 columns and any number of rows. It's a very basic order form that will list literature that we have for sale. The first 4 columns provide information about the item, and the 5th column is a simply text input "qty" field that allows a user to enter the "qty" of the item they wish to purchase. You can see what this looks like here: http://web.go-spi.com/cgl/literature/.
It's important to note that the table is generated dynamically, via a custom loop that I've created in Wordpress. I did it this way to allow us to dynamically add or remove literature items from the table.
The code:
<div class='gf_browser_chrome gform_wrapper' id='gform_wrapper_6' >
<a id='gf_6' name='gf_6' class='gform_anchor' ></a>
<form method='post' enctype='multipart/form-data' target='gform_ajax_frame_6' id='gform_6' action='/cgl/literature/#gf_6'>
<div class='gform_body'>
<div id='gform_fields_6' class='gform_fields top_label description_below'>
<?php $literature_query = new WP_Query( array( 'post_type' => 'literature', 'showposts' => '50', 'orderby' => 'meta_value', 'meta_key' => 'ecpt_brochurerow', 'order' => 'ASC'));
if( $literature_query->have_posts() ):?>
<table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered" id="data">
<thead>
<tr>
<th>Brochure Type</th>
<th><label class='gfield_label' for='input_6_1'>Description</label></th>
<th>Cost</th>
<th>Qty/Pack</th>
<th><label class='gfield_label' for='input_6_2'>Qty</label></th>
</tr>
</thead>
<tbody>
<?php while( $literature_query->have_posts() ): $literature_query->the_post();?>
<tr>
<td><?php echo get_post_meta($post->ID, 'ecpt_brochuregroup', true); ?></td>
<td><?php echo get_post_meta($post->ID, 'ecpt_brochuredescription', true); ?><input type='hidden' class='gform_hidden' name='input_1' id='input_6_1' value="<?php echo get_post_meta($post->ID, 'ecpt_brochuredescription', true); ?>"/></td>
<td><?php echo get_post_meta($post->ID, 'ecpt_brochurecost', true); ?></td>
<td><?php echo get_post_meta($post->ID, 'ecpt_brochureqtyperpack', true); ?></td>
<td><input name='input_2' id='input_6_2' type='text' value='' class='medium'/></td>
</tr>
<?php endwhile;
wp_reset_postdata();
?>
</tbody>
</table>
<?php else: ?>
<div class="alert alert-block">
<p>Sorry, there is currently no literature available. Please check back later.</p>
</div>
<?php endif; ?>
</div>
</div>
<div class='gform_footer top_label'>
<input type='submit' id='gform_submit_button_6' class='button gform_button' value='Submit' tabindex='1' /><input type='hidden' name='gform_ajax' value='form_id=6&title=&description=' />
<input type='hidden' class='gform_hidden' name='is_submit_6' value='1' />
<input type='hidden' class='gform_hidden' name='gform_submit' value='6' />
<input type='hidden' class='gform_hidden' name='gform_unique_id' value='5077469db6b44' />
<input type='hidden' class='gform_hidden' name='state_6' value='YToyOntpOjA7czo2OiJhOjA6e30iO2k6MTtzOjMyOiJjMDlmZjFlZmU1MjMzN2M3M2FkODliMmVjY2Y5YzIxMyI7fQ==' />
<input type='hidden' class='gform_hidden' name='gform_target_page_number_6' id='gform_target_page_number_6' value='0' />
<input type='hidden' class='gform_hidden' name='gform_source_page_number_6' id='gform_source_page_number_6' value='1' />
<input type='hidden' name='gform_field_values' value='' />
</div>
</form>
</div>
<iframe style='display:none;width:0px; height:0px;' src='about:blank' name='gform_ajax_frame_6' id='gform_ajax_frame_6'></iframe>
<script type='text/javascript'>function gformInitSpinner_6(){jQuery('#gform_6').submit(function(){if(jQuery('#gform_ajax_spinner_6').length == 0){jQuery('#gform_submit_button_6').attr('disabled', true).after('<' + 'img id="gform_ajax_spinner_6" class="gform_ajax_spinner" src="/cgl/wp-content/plugins/gravityforms/images/spinner.gif" alt="" />');jQuery('#gform_wrapper_6 .gform_previous_button').attr('disabled', true); jQuery('#gform_wrapper_6 .gform_next_button, #gform_wrapper_6 .gform_image_button').attr('disabled', true).after('<' + 'img id="gform_ajax_spinner_6" class="gform_ajax_spinner" src="/cgl/wp-content/plugins/gravityforms/images/spinner.gif" alt="" />');}} );}jQuery(document).ready(function($){gformInitSpinner_6();jQuery('#gform_ajax_frame_6').load( function(){var contents = jQuery(this).contents().find('*').html();var is_postback = contents.indexOf('GF_AJAX_POSTBACK') >= 0;if(!is_postback){return;}var form_content = jQuery(this).contents().find('#gform_wrapper_6');var is_redirect = contents.indexOf('gformRedirect(){') >= 0;jQuery('#gform_submit_button_6').removeAttr('disabled');var is_form = !(form_content.length <= 0 || is_redirect);if(is_form){jQuery('#gform_wrapper_6').html(form_content.html());jQuery(document).scrollTop(jQuery('#gform_wrapper_6').offset().top);if(window['gformInitDatepicker']) {gformInitDatepicker();}if(window['gformInitPriceFields']) {gformInitPriceFields();}var current_page = jQuery('#gform_source_page_number_6').val();gformInitSpinner_6();jQuery(document).trigger('gform_page_loaded', [6, current_page]);}else if(!is_redirect){var confirmation_content = jQuery(this).contents().find('#gforms_confirmation_message').html();if(!confirmation_content){confirmation_content = contents;}setTimeout(function(){jQuery('#gform_wrapper_6').replaceWith('<' + 'div id=\'gforms_confirmation_message\' class=\'gform_confirmation_message_6\'' + '>' + confirmation_content + '<' + '/div' + '>');jQuery(document).scrollTop(jQuery('#gforms_confirmation_message').offset().top);jQuery(document).trigger('gform_confirmation_loaded', [6]);}, 50);}else{jQuery('#gform_6').append(contents);if(window['gformRedirect']) {gformRedirect();}}jQuery(document).trigger('gform_post_render', [6, current_page]);} );} );</script><script type='text/javascript'> jQuery(document).ready(function(){jQuery(document).trigger('gform_post_render', [6, 1]) } ); </script>
The problem:
1) I'm not sure how to dynamically set the input name and id so that they are sequential as you go down the form. Currently, as the code is set up, I'll only receive the submitted value of the first input no matter how many inputs are filled in.
I appreciate any help you can provide. Thanks!