Develop Reference

How can i do my form submit without clicking with class instead of id

I´m doing an e-commerce web and i want to the quantity section changes when you click out of the input, i did it, but the problem is i had used a js function with "getElementById" and it works but if i add more than 1 product the id only works in 1 form (obviusly), but when i use "getElementsByClassName"
nothings happens and chrome console say "Uncaught TypeError: document.getElementsByClassName(...).submit is not a function at CantCartUpdate (cart.php:144:51) at HTMLInputElement.onblur (cart.php:110:139)" and i dont know what to do
part of my code:
<tbody>
<?php
for($i=0;$i<=count($myCart)-1;$i++){
if(isset($myCart[$i])){
if($myCart[$i]!=NULL){?>
<tr>
<td class="product-image">
<img src="<?php echo $myCart[$i]['imagen']?>" alt="<?php echo $myCart[$i]['nombre']?>">
</td>
<td class="product-name">
<h2 class="name"><?php echo $myCart[$i]['nombre']?></h2>
</td>
<td class="product-price"><h2 class="precio">$<?php echo number_format($myCart[$i]['precio'], 0, ',', '.') ; ?></h2></td>
<td class="product-quantity">
<form action="backend/cartActions.php" class="formCant" method="post">
<div class="cantidad">
<div class="cantidad-container">
<input type="hidden" name="id" value="<?php echo $i; ?>">
<input type="number" class="nro updateCant" min="1" name="cantidad" onblur="CantCartUpdate()" value="<?php echo $myCart[$i]['cantidad'];?>">
<input type="submit" class="sbm">
</div>
</div>
</form>
</td>
js (it is in the same file):
<script type="text/javascript">
function CantCartUpdate () {
document.getElementsByClassName("formCant").submit();
}

Before Unload keeps firing

I'm having some trouble dealing with the before unload event, which, for some reason, keeps firing even when I explicitly tell it no to.
So, this is my HTML:
<div class="payment-details-account-top">
<form id="payment-details-form-card" action="<?php echo Mage::getUrl('orderform/index/changedpayment'); ?>" method="POST">
<div class="row all-steps">
<div class="col-md-12">
<input type="radio" name="payment-with-card" value="<?php echo $this->__('Betale med kort') ?>" id="payment-with-card" class="css-checkbox" <?php if ($ba->getMethodCode() == 'payex2'): ?> checked <?php endif; ?> onclick="this.form.submit();">
<label for="payment-with-card" name="payment-with-card" class="css-radio-label"></label>
<input type="submit" name="payment-with-card" id="payment-with-card" value="<?php echo $this->__('Betale med kort') ?>" class="top-payment-buttons" />
</div>
</div>
</form>
</div>
<div class="payment-details-account-bottom">
<div class="row all-steps">
<div class="col-md-12">
<input type="radio" name="payment-with-faktura" value="<?php echo $this->__('Betale med faktura') ?>" id="payment-with-faktura" class="css-checkbox" <?php if ($ba->getMethodCode() != 'payex2'): ?> checked <?php endif; ?> >
<label for="payment-with-faktura" class="css-radio-label"></label>
<input type="button" name="payment-with-faktura" id="payment-with-faktura" value="<?php echo $this->__('Betale med faktura') ?>" class="bottom-payment-buttons" />
<form id="payment-details-form" action="<?php echo Mage::getUrl('orderform/index/changedpayment'); ?>" method="POST">
</form>
</div>
</div>
</div>
In order to change the selected form, I use radio buttons along with labels to style those radios according to needs.
So, here's my jQuery:
$('#payment-with-faktura').on('click', function(){
$('#payment-with-card').removeAttr("checked");
$('#payment-with-faktura').prop("checked", true);
$(window).unbind("beforeunload");
});
$('#payment-with-card').on('click', function(){
$('#payment-with-faktura').removeAttr("checked");
$('#payment-with-card').prop("checked", true);
$(window).unbind("beforeunload");
});
None of this seems to be working, so I went ahead and also added this
$('.css-radio-label').on('click', function () {
$(window).unbind("beforeunload");
});
The result is still the same, whenever I change the selected radio and try, for example, to refresh the page, I'm getting the popup alerting that I'm leaving the page and asking if I wish to stay on the page or leave the page.
So, what am I doing wrong here?
Best Regards

Make another form that will display a list(autocomplete) and will be used as a value for selected fields

I have two forms the first one has a autocomplete field(laborer names//from mysql table),and input field for manually entering date. Another is a form below containing fields to be filled by the user.
<form class="well form-search">
Date of Payment:
<?php if($sf_user->hasCredential('PAYMENT')): ?>
<input type="text" class="field2 required" size="15" name="date_of_payment_<?php echo $l['id'] ?>" value="<?php echo $sf_params->get('date_of_payment_'.$l['id'], date('Y-m-d')) ?>" placeholder="payment date"/>
<?php endif; ?>
Laborer: <input type="hidden" class="laborers" id="laborer_id_<?php echo $l['id'] ?>" name="collector_id_<?php echo $l['id'] ?>" value="<?php echo $sf_params->get('collector_id_'.$l['id']) ?>" />
<input rel="<?php echo $l['id'] ?>" type="text" class="field2 required laborer_autocomplete" size="15" name="laborer_<?php echo $l['id'] ?>" value="<?php echo $sf_params->get('laborer_'.$l['id'])?>" id="laborer_<?php echo $l['id'] ?>" placeholder="laborerr"/>
<?php if(isset($fieldErrors['laborer_id_'.$l['id']])): ?>
<div class="error">
<?php echo $fieldErrors['laborer_id_'.$l['id']] ?>
</div>
<?php endif; ?>
<button type="submit" class="btn">Go</button>
</form>
The second form
<form action="<?php echo //?>" method="post" onsubmit="return confirm('Are you sure? This cannot be undone!')">
<table class="table table-bordered table-striped table-condensed">
<thead>
<tr>
<th class="personid" style="width:5px;">#</th>
<th>Days</th>
<th>Term</th>
<th>Date of Payment</th>//I want this to hide
<th>Laborer</th>//I want this to hide
<th>Amount Received</th>
</tr>
</thead>
<tbody>
<?php foreach($works as $i=>$l): ?>
<tr class="<?php echo ($i%2==0)?'even':'odd' ?>">
<td class="personid"></td>
<td>PHP<?php echo number_format($l['days'], 2) ?></td>
<td><?php echo $l['term'] ?> days</td>
<td>
Date of Payment (YYYY-MM-DD)<br />
<input type="text" class="field2 required" size="15" name="date_of_payment_<?php //echo $l['id'] ?>" value="<?php// echo $sf_params->get('date_of_payment_'.$l['id'], date('Y-m-d')) ?>" placeholder="payment date"/>
</td>
<td>
<input type="hidden" class="laborers" id="laborer_id_<?php //echo $l['id'] ?>" name="laborer_id_<?php echo $l['id'] ?>" value="<?php echo $sf_params->get('laborer_id_'.$l['id']) ?>" />
<input rel="<?php// echo $l['id'] ?>" type="text" class="field2 required collectors_autocomplete" size="15" name="laborer_<?php echo $l['id'] ?>" value="<?php echo $sf_params->get('laborer_'.$l['id'])?>" id="laborer_<?php echo $l['id'] ?>" placeholder="laborerr"/>
<?php if(isset($fieldErrors['laborer_id_'.$l['id']])): ?>
<div class="error">
<?php echo $fieldErrors['laborer_id_'.$l['id']] ?>
</div>
<?php //endif; ?>
</td>
</tr>
<?php endforeach; ?>
</tbody>
</table> <!--end table-->
Instead of manual input for laborer and date of payment fields in the second form, is it possible to automatically populate these fields by filling the first form?

Using the javascript "blur" event, we can copy the data from one field to any other element on the page. The "blur" event means the field no longer has focus. That is, the user tabbed to the next field or clicked some other element on the page.
Not sure what your browser requirements are, so I'm going to suggest jQuery. Here is a simple example:
html:
<!-- form snippet -->
<input type="text" name="field1" id="field1" value="">
<!-- destination -->
<input type="hidden" name="field1b" class="show-field1">
<input type="hidden" name="field1c" class="show-field1">
<p class="show-field1"></p>
javascript:
$("#field1").blur(function(event) {
// jquery sets "this" to the element handling the event; i.e. "field1"
// "value" is a standard property on <input> elements
var value = this.value;
// next, select your targets
var copyTo = $(".show-field1");
// if copying to a form element
copyTo.val(value);
// if copying to a DOM element
copyTo.text(value);
});
I hope that helps. I created a jsfiddle too: http://jsfiddle.net/jbarreiros/o5cuv2nt/.

Using leanModal to show/hide forms that update my db, almost works perfectly

Without posting all of my code, I'm hoping I can figure out the last step to my leanModal PHP implementation of a basic CRUD system attempt.
So, this actually works, except for the last step. When I click submit on the form, somehow, it actually updates the database, but it doesn't reload the page, so the table-data still looks old, but if you manually reload the page, the table-data reflects the most recent update. Somehow, when submitting the form, the script that updates the database runs but the rest of the page doesn't load? I know I'm missing something, and maybe there's a better way of doing this...)
Hopefully, this is enough to give you an ideal what I'm doing. Thank you!
<script>
$(document).ready(function(){
$('a[rel*=leanModal]').leanModal({
closeButton: ".modal_close"
});
});
</script>
<?php
//save
if(isset($_POST['submit'])) {
$record = new Record();
if(isset($_POST['id'])) { $record->id = mysql_prep($_POST['id']); }
$record->name = mysql_prep($_POST['name']);
$record->save();
}
//view
$records = Record::find_all();
?>
<div id="table_data>
<table>
<?php foreach($records as $record): ?>
<tr>
<td><?php echo $record->name; ?></td>
<td>
<a rel="leanModal" href="#admin_form_<?php echo $record->id; ?>">edit</a>
<div id="admin_form_<?php echo $record->id; ?>">
<form action="index.php?id=<?php echo $record->id; ?>" method="post">
<input type="hidden" name="id" id="id" value="<?php echo $admin_nav->id; ?>">
<label for="name">Name</label><input name="name" id="name" type="text" value="<?php echo $record->name; ?>">
<button type="submit" name="submit">Save</button>
<a class="modal_close" href="#"></a>
</form>
</td>
</tr>
<?php endforeach; ?>
</table>
</div>

The best approach i would suggest is create a separate route let's say table.php that will server just the table data.
In your case table.php will contain
<table>
<?php foreach($records as $record): ?>
<tr>
<td><?php echo $record->name; ?></td>
<td>
<a rel="leanModal" href="#admin_form_<?php echo $record->id; ?>">edit</a>
<div id="admin_form_<?php echo $record->id; ?>">
<form action="index.php?id=<?php echo $record->id; ?>" method="post">
<input type="hidden" name="id" id="id" value="<?php echo $admin_nav->id; ?>">
<label for="name">Name</label><input name="name" id="name" type="text" value="<?php echo $record->name; ?>">
<button type="submit" name="submit">Save</button>
<a class="modal_close" href="#"></a>
</form>
</div>
</td>
</tr>
<?php endforeach; ?>
</table>
and load is via ajax in your page in to #table_data div.
And call leanModel script after loading table.
And on submit of form just re-load your table data again. Load table script would look like this.
function load_table(){
$.ajax('table.php', function(data){
$('#table_data').html( data );
// Call Lean Model Now
$('a[rel*=leanModal]').leanModal({
closeButton: ".modal_close"
});
});
}

Javascript list.js to this php code

I love this script list.js from www.listjs.com. It seems to be the perfect fit for searching and filtering the output of a php file below, but I just can get it to work, I only need to add 7 or so lines of code but its not working. Can anyone tell me how come? Thanks
The code that I added is highlighted
<?php
defined('_JEXEC') or die();
?>
**<script type="text/javascript" src="list.js"></script>**
<form action="<?php echo CRoute::getURI(); ?>" method="post" id="jomsForm" name="jomsForm" class="community-form-validate">
<div class="jsProfileType" **id="jsProfileType"**>
**<input class="search" placeholder="Search" />
<button class="sort" data-sort="label">
Sort
</button>**
<ul class="unstyled">
<?php
foreach($profileTypes as $profile)
{
?>
<li class="space-12">
<label for="profile-<?php echo $profile->id;?>" class="radio">
<input id="profile-<?php echo $profile->id;?>" type="radio" value="<?php echo $profile->id;?>" name="profileType" <?php echo $default == $profile->id ? ' disabled CHECKED' :'';?> />
<strong class="bold"><?php echo $profile->name;?></strong>
</label>
<?php if( $profile->approvals ){?>
<span class="help-block"><?php echo JText::_('COM_COMMUNITY_REQUIRE_APPROVAL');?></span>
<?php } ?>
<span class="help-block">
<?php
$profile->description = JHTML::_('content.prepare',$profile->description);
echo $profile->description;?>
</span>
<?php if( $default == $profile->id ){?>
<em><?php echo JText::_('COM_COMMUNITY_ALREADY_USING_THIS_PROFILE_TYPE');?></em>
<?php } ?>
</li>
<?php
}
?>
</ul>
</div>
<?php if( (count($profileTypes) == 1 && $profileTypes[0]->id != $default) || count($profileTypes) > 1 ){?>
<div style="margin-top: 5px;">
<?php if( $showNotice ){ ?>
<span style="color: red;font-weight:700;"><?php echo JText::_('COM_COMMUNITY_NOTE');?>:</span>
<span><?php echo $message;?></span>
<?php } ?>
</div>
**<script>
var options = {
list: "space-12"
};
var userList = new List('jsProfileType', options);
</script>**
<table class="ccontentTable paramlist" cellspacing="1" cellpadding="0">
<tbody>
<tr>
<td class="paramlist_key" style="text-align:left">
<div id="cwin-wait" style="display:none;"></div>
<input class="btn btn-primary validateSubmit" type="submit" id="btnSubmit" value="<?php echo JText::_('COM_COMMUNITY_NEXT'); ?>" name="submit">
</td>
<td class="paramlist_value">
</td>
</tr>
</tbody>
</table>
<?php } ?>
<input type="hidden" name="id" value="0" />
<input type="hidden" name="gid" value="0" />
<input type="hidden" id="authenticate" name="authenticate" value="0" />
<input type="hidden" id="authkey" name="authkey" value="" />
</form>

I don't know PHP, but I have seen this error before when I used list.js in my own project. It turned out I didn't define things properly.
You did set up a div with a proper id, but you seem to be missing a 'list' class. Try changing
<ul class="unstyled">
to
<ul class="list">
Second, I don't think that 'list' is a supported keyword in options (at least not in the most recent list.js version). Try changing your options definition to
var options = {
valueNames: [ 'space-12' ]
};
Third, if you want search to work change
<button class="sort" data-sort="label">
to
<button class="sort" data-sort="space-12">