Laravel Form run JS function onsubmit

Laravel Form run JS function onsubmit - javascript

I have a function that I want called on submission of my Laravel Form for Ajax purposes. How can I go about this where the page does not submit and reload?
This works: (but the Enter btn does not execute)
<?php echo Form::open(); ?>
<?php echo Form::button('Search', array('id'=>'searchbtn', 'class'=>'button radius right', 'onclick'=>'myFunction(this.form)')); ?>
<?php echo Form::close(); ?>
This does not:
<?php echo Form::open(array('onsubmit' => 'myFunction(this)')); ?>
<?php echo Form::submit('Search', null, array('id'=>'searchbtn', 'class'=>'button radius right')); ?>
<?php echo Form::close(); ?>

<?php echo Form::open(array(null, null, 'onsubmit' => 'myFunction(this); return false;')); ?>
<?php echo Form::submit('Search', null, array('id'=>'searchbtn', 'class'=>'button radius right')); ?>
<?php echo Form::close(); ?>
Yayy. Now I could use my Enter button!

Related

Enable javascript within multiple if's?

I have a few if conditions in the following PHP.
I can't enable the Javascript section which needs to hide the class when the cart "quantity" is more than the balance.
jimport( 'joomla.user.helper' );
$user = JFactory::getUser();
$groups = $user->get('groups');
if(in_array(15, $groups)) {
$carts= VirtueMartCart::getCart();
foreach($carts->cartProductsData as $cartItem)
{
if($cartItem['virtuemart_product_id'] == $product->virtuemart_product_id){
echo "<br /> ".$cartItem['quantity']." already added to cart";
}
if($cartItem['quantity'] == $max_balance) <?php { ?>
<script type="text/javascript">
$('.addtocart-button').attr('disabled', 'disabled');
</script>
<?php } ?>
} }
I don't know how to close the first php instance. It refuses.

You cannot use <?php ... ?> in side <?php ... ?>, this is incorrect syntax.
Use the following:
<?php
jimport('joomla.user.helper');
$user = JFactory::getUser();
$groups = $user->get('groups');
if (in_array(15, $groups)):
$carts = VirtueMartCart::getCart();
foreach ($carts->cartProductsData as $cartItem):
if ($cartItem['virtuemart_product_id'] == $product->virtuemart_product_id)
{
echo "<br /> " . $cartItem['quantity'] . " already added to cart";
}
if ($cartItem['quantity'] == $max_balance):
?>
<script type="text/javascript">
$('.addtocart-button').attr('disabled', 'disabled');
</script>
<?php
endif;
endforeach;
endif;
This uses Alternative Syntax which is a preferred method when nesting PHP code in HTML blocks.

You have a bit of a mess inside your php code.
I find using the if () : endif; notation is more readable when dealing with php+html
<?php
jimport( 'joomla.user.helper' );
$user = JFactory::getUser();
$groups = $user->get('groups');
?>
<?php if(in_array(15, $groups)): ?>
<?php foreach(VirtueMartCart::getCart()->cartProductsData as $cartItem): ?>
<?php if($cartItem['virtuemart_product_id'] == $product->virtuemart_product_id): ?>
<br /><?php echo $cartItem['quantity']; ?> already added to cart";
<?php endif; ?>
<?php if($cartItem['quantity'] == $max_balance): ?>
<script type="text/javascript">
$('.addtocart-button').attr('disabled', 'disabled');
</script>
<?php endif; ?>
<?php endforeach; ?>
<?php endif; ?>

Lighbox only showing data of the current post in Wordpress

I wanted to show some lightbox funtionality with the use of shortcodes. The code is working fine except for the data shown in the ligthbox. It only shows the data from the latest post in the loop. How can i manage to get lightbox showing the data belonging to the post?
<?php
// Posts are found
if ( $posts->have_posts() ) {
while ( $posts->have_posts() ) :
$posts->the_post();
global $post;
?>
<center>
<div id="su-post-<?php the_ID(); ?>" class="su-post">
<?php if ( has_post_thumbnail() ) : ?>
<a class="su-post-thumbnail" href="<?php the_permalink(); ?>"><?php the_post_thumbnail(); ?></a>
<?php endif; ?>
<div class="su-post-excerpt">
<!-- Shows the button and the hidden lightbox -->
<?php echo do_shortcode ('[su_lightbox type="inline" src="#showInfo"][su_button] Info[/su_button][/su_lightbox]'); ?>
<!-- Shows the lightbox if button is clicked with the data -->
<?php echo do_shortcode ('[su_lightbox_content id="showInfo"][su_meta key="info" default="Geen tekst"][/su_lightbox_content]'); ?>
<?php echo do_shortcode ('[su_lightbox type="inline" src="#showVideo"][su_button] Video[/su_button][/su_lightbox]'); ?>
<?php echo do_shortcode ('[su_lightbox_content id="showVideo"][su_video url="{su_meta key=video}"][/su_lightbox_content]'); ?>
<?php echo do_shortcode ('[su_lightbox type="inline" src="#showFoto"][su_button] Foto[/su_button][/su_lightbox]'); ?>
<?php echo do_shortcode ('[su_lightbox_content id="showFoto"][su_meta key="fotos" default="Geen fotos"][/su_lightbox_content]'); ?>
</div>
</div>
</center>
<?php
endwhile; echo do_shortcode ('[su_lightbox_content id="showInfo"][su_meta key="info" default="Geen tekst"][/su_lightbox_content]');
}
// Posts not found
else {
echo '<h4>' . __( 'Posts not found', 'shortcodes-ultimate' ) . '</h4>';
}
?>

By adding a counter in the while loop and using the variable in the shortcode SRC and ID fields. I needed unique ID's for each post.
$n = 0; /* Outside While Loop */
echo do_shortcode( '[su_lightbox type="inline" src="#showInfo'.$n.'"][su_button] Info[/su_button][/su_lightbox] ');
echo do_shortcode( '[su_lightbox_content id="showInfo'.$n.'"][su_meta key="info" default="Geen tekst"][/su_lightbox_content]' );
$n++; /* Inside While Loop */

JavaScript on change function working not well

I have a JavaScript code which works with HTML select tag.
$(function() {
$('#to_name').on('change',function() {
if( $(this).val()=="<?php echo $ceo_chunks[0];?> <?php echo $ceo_chunks[1];?> <?php echo $ceo_chunks[2]?>") {
$('#to_designation').val('<?php echo $ceo_chunks[3];?>');
$('#dear_sir').val('<?php echo $ceo_chunks[0]?> <?php echo $ceo_last_name;?>') ;
if( $(this).val()=="<?php echo $liaison_one_chunks[0];?> <?php echo $liaison_one_chunks[1];?> <?php echo $liaison_one_chunks[2]?>") {
$('#to_designation').val('<?php echo $liaison_one_chunks[3]?>')
$('#dear_sir').val('<?php echo $liaison_one_chunks[0]?> <?php echo $liaison_one_last_name;?>')
$("#liaison_one").show()
$("#dear_liaison_one").show()
} else {
$("#ceo").hide()
$("#liaison_two").hide()
$("#dear_ceo").hide()
$("#dear_liaison_two").hide()
}
if( $(this).val()=="<?php echo $liaison_two_chunks[0];?> <?php echo $liaison_two_chunks[1];?> <?php echo $liaison_two_chunks[2]?>") {
$('#to_designation').val('<?php echo $liaison_two_chunks[3]?>')
$('#dear_sir').val('<?php echo $liaison_two_chunks[0]?> <?php echo $liaison_two_last_name;?>')
$("#liaison_two").show()
$("#dear_liaison_two").show()
} else {
$("#ceo").hide()
$("#liaison_one").hide()
$("#dear_ceo").hide()
$("#dear_liaison_one").hide()
}
};
});
});
and here is html code
<select name="to_name" id="to_name">
<option value="<?php echo $ceo_chunks[0];?> <?php echo $ceo_chunks[1];?> <?php echo $ceo_chunks[2]?>"><?php echo $ceo_chunks[0];?> <?php echo $ceo_chunks[1];?> <?php echo $ceo_chunks[2]?></option>
<option value="<?php echo $liaison_one_chunks[0];?> <?php echo $liaison_one_chunks[1];?> <?php echo $liaison_one_chunks[2]?>"><?php echo $liaison_one_chunks[0];?> <?php echo $liaison_one_chunks[1];?> <?php echo $liaison_one_chunks[2]?></option>
<option value="<?php echo $liaison_two_chunks[0];?> <?php echo $liaison_two_chunks[1];?> <?php echo $liaison_two_chunks[2]?>"><?php echo $liaison_two_chunks[0];?> <?php echo $liaison_two_chunks[1];?> <?php echo $liaison_two_chunks[2]?></option>
</select>
<br>
<select name="to_designation" id="to_designation">
<option value="<?php echo $ceo_chunks[3]?>" id="ceo"><?php echo $ceo_chunks[3]?></option>
<option value="<?php echo $liaison_one_chunks[3]?>" id="liaison_one"><?php echo $liaison_one_chunks[3]?></option>
<option value="<?php echo $liaison_two_chunks[3]?>"id="liaison_two"><?php echo $liaison_two_chunks[3]?></option>
</select>
<div id="dear_ceo" style="margin-top:10px; width:auto">
<input type="text" name="dear_sir" id="dear_ceo" value="Dear <?php echo $ceo_chunks[0]?> <?php echo $ceo_last_name;
?>"/>
</div>
<div id="dear_liaison_one" style="margin-top:10px; width:auto; display:none">
<input type="text" name="dear_sir" id="dear_liaison_one" value="Dear <?php echo $liaison_one_chunks[0]?> <?php echo $liaison_one_last_name;?>"/>
</div>
<div id="dear_liaison_two" style="margin-top:10px; width:auto; display:none">
<input type="text" name="dear_sir" id="dear_liaison_two" value="Dear <?php echo $liaison_two_chunks[0]?> <?php echo $liaison_two_last_name;?>"/>
</div>
My function works very well for select tag but it's not working with input type text.
How can I fix that?

There is a closing bracket clearly missing for your first if statement.
Please close the bracket. There is no logical error in your code.
$(function() {
$('#to_name').on('change',function(){
if( $(this).val()=="<?php echo $ceo_chunks[0];?> <?php echo $ceo_chunks[1];?> <?php echo $ceo_chunks[2]?>"){
$('#to_designation').val('<?php echo $ceo_chunks[3];?>')
$('#dear_sir').val('<?php echo $ceo_chunks[0]?> <?php echo $ceo_last_name;?>')
/*$("#ceo").show()
$("#dear_ceo").show()*/
//} ---uncomment this ---
also include a terminating semi-colon everytime you are calling a function. For example
if( $(this).val()=="<?php echo $ceo_chunks[0];?> <?php echo $ceo_chunks[1];?> <?php echo $ceo_chunks[2]?>"){
$('#to_designation').val('<?php echo $ceo_chunks[3];?>');
$('#dear_sir').val('<?php echo $ceo_chunks[0]?> <?php echo $ceo_last_name;?>');
}

I suggest you use semicolons at the end of line (when appropriate). I know they are not mandatory but consider them as a good practice.
You also have a semicolon at the end of if-clause at the end. It's probably not braking anything but just in case...
Try replacing spaces with underscores (_).
For example:
<?php echo $ceo_chunks[0];?> <?php echo $ceo_chunks[1];?> <?php echo $ceo_chunks[2]?>
would become
<?php echo $ceo_chunks[0];?>_<?php echo $ceo_chunks[1];?>_<?php echo $ceo_chunks[2]?>
And check if you can alert the value of the changed input correctly.

clearing and changing content of div

I'm trying to replace the content of comments div with the new comments by loading it again and replacing the old comments. When i change the content of the div, it replaces the first comment only and repeat the whole comment:
here is the comments div :
<?php
$comment_qry = mysqli_query($conn, "SELECT * FROM comments WHERE post_id='$post_row[id]' ORDER BY id DESC");
while($comment_row = mysqli_fetch_array($comment_qry)){
?>
<div id="comments_div">
<div style="background:#aaaaaa; margin:5px;">
<p onclick="report_var(<?php echo $post_row['id']; ?>, <?php echo $comment_row['user_id']; ?>);">report</p>
<p>user: <?php echo $comment_row['user_id']; ?></p>
<p>date: <?php echo date("Y-m-d", $comment_row['date']); ?></p>
<p>content: <?php echo $comment_row['content']; ?></p>
<?php if($post_row['user_id'] == $my_id or $comment_row['user_id'] == $my_id or $admin == 1){ ?>
<p><span onclick="comment_remove(<?php echo $comment_row['id']; ?>, <?php echo $comment_row['user_id']; ?>);">delete</span></p>
<?php } ?>
</div>
</div>
<?php } ?>
ajax code :
/////////////////////////comment function
function comment(post_id, poster_id)
{
loadXMLDoc("php/comment.php?post_id="+post_id+" content="+document.getElementById("content").value+"&poster_id="+poster_id,function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("comments_div").innerHTML = xmlhttp.responseText;
}
});
}
comment.php :
<?php
$comment_qry = mysqli_query($conn, "SELECT * FROM comments WHERE post_id='$_GET[post_id]' ORDER BY id DESC");
while($comment_row = mysqli_fetch_array($comment_qry)){
?>
<div style="background:#aaaaaa; margin:5px;" class="comment">
<p onclick="report_var(<?php echo $post_row['id']; ?>, <?php echo $comment_row['user_id']; ?>);">report</p>
<p>user: <?php echo $comment_row['user_id']; ?></p>
<p>date: <?php echo date("Y-m-d", $comment_row['date']); ?></p>
<p>content: <?php echo $comment_row['content']; ?></p>
<?php if($_GET['poster_id'] == $my_id or $comment_row['user_id'] == $my_id or $admin == 1){ ?>
<p><span onclick="comment_remove(<?php echo $comment_row['id']; ?>, <?php echo $comment_row['user_id']; ?>);">delete</span></p>
<?php } ?>
</div>
<?php } ?>

Your first code snippet is creating a separate comments_div for each comment. Then your JavaScript code snippet is just replacing the content of the first one.
You can fix it by putting the comments_div outside the the PHP while loop, and then using the same HTML output code inside that loop as you are in your third example (a div.comment per comment).
So, something like this in place of that first code snippet:
<div id="comments_div">
<?php
$comment_qry = mysqli_query($conn, "SELECT * FROM comments WHERE post_id='$post_row[id]' ORDER BY id DESC");
while($comment_row = mysqli_fetch_array($comment_qry)){
?>
<div style="background:#aaaaaa; margin:5px;" class="comment">
<p onclick="report_var(<?php echo $post_row['id']; ?>, <?php echo $comment_row['user_id']; ?>);">report</p>
<p>user: <?php echo $comment_row['user_id']; ?></p>
<p>date: <?php echo date("Y-m-d", $comment_row['date']); ?></p>
<p>content: <?php echo $comment_row['content']; ?></p>
<?php if($_GET['poster_id'] == $my_id or $comment_row['user_id'] == $my_id or $admin == 1){ ?>
<p><span onclick="comment_remove(<?php echo $comment_row['id']; ?>, <?php echo $comment_row['user_id']; ?>);">delete</span></p>
<?php } ?>
</div>
<?php } ?>
</div>

AJAX validation not firing on tabular input fields

The validation works for the first model on my form, but doesn't work for the Items array of models that are looped through. - this is incorrect now as validation is occuring, but not firing when editing any of the BookingRoom input fields.
I have found that when I re-enter data into a Booking field that has just had data removed(displaying a green background in the input box after putting it back in) ajax validation is fired, but it isn't fired when I click on one of the BookingRoom input fields and edit one of those. I have debugged in Firebug the AJAX response for editing a Booking field and the error messages are sent for any of the BookingRoom fields which are invalid.
Here is my performAjaxValidation function:
protected function performAjaxValidation($model, $items)
{
if(isset($_POST['ajax']) && $_POST['ajax']==='booking-form')
{
//echo CActiveForm::validate($model);
$model = CJSON::decode(CActiveForm::validate($model));
$items = CJSON::decode(CActiveForm::validateTabular($items));
var_dump(CJSON::encode(CMap::mergeArray($model, $items)));
Yii::App()->end();
}
}
Update.php
<?php //Yii::app()->clientScript->registerCoreScript('jquery'); ?>
<?php
/* #var $this BookingController */
/* #var $model Booking */
/* #var $bookingRoom BookingRoom */
$this->breadcrumbs=array(
'Bookings'=>array('index'),
$model->id=>array('view','id'=>$model->id),
'Update'
);
$this->menu=array(
array('label'=>'List Booking', 'url'=>array('index')),
array('label'=>'Create Booking', 'url'=>array('create')),
array('label'=>'View Booking', 'url'=>array('view', 'id'=>$model->id)),
array('label'=>'Manage Booking', 'url'=>array('admin'))
);
?>
<h1>Update Booking <?php echo $model->id; ?></h1>
<?php //$this->renderPartial('_form', array('model'=>$model)); ?>
<div class="form">
<button id="btnAdd" type='btnAdd'>Add</button>
<?php $form=$this->beginWidget('CActiveForm', array(
'id'=>'booking-form',
// Please note: When you enable ajax validation, make sure the corresponding
// controller action is handling ajax validation correctly.
// There is a call to performAjaxValidation() commented in generated controller code.
// See class documentation of CActiveForm for details on this.
'enableAjaxValidation'=>true, 'enableClientValidation' => true, 'errorMessageCssClass' => 'error'
)); ?>
<p class="note">Fields with <span class="required">*</span> are required.</p>
<?php echo $form->errorSummary(array($model)); ?>
<div class="row">
<?php echo $form->labelEx($model,'customerId'); ?>
<?php echo $form->textField($model,'customerId'); ?>
<?php echo $form->error($model,'customerId'); ?>
</div>
<div class="row">
<?php echo $form->labelEx($model,'date'); ?>
<?php echo $form->textField($model,'date'); ?>
<?php echo $form->error($model,'date'); ?>
</div>
<table id="tblData">
<tbody>
<?php foreach($items as $i=>$item): ?>
<tr>
<td>
<div>
<?php echo $form->labelEx($item,'Room No'); ?>
<?php echo $form->dropDownList($item, "[$i]roomId", CHtml::listData(
Room::model()->findAll(), 'id', 'id'), array('single'=>'single', 'size'=>1)
); ?>
</div>
</td><td>
<div>
<?php echo $form->labelEx($item,'startDate'); ?>
<?php echo $form->textField($item,"[$i]startDate"); ?>
<?php echo $form->error($item,'startDate'); ?>
</div>
</td><td>
<div>
<?php echo $form->labelEx($item,'endDate'); ?>
<?php echo $form->textField($item,"[$i]endDate"); ?>
<?php echo $form->error($item,'endDate'); ?>
</div>
</td><td>
<div>
<?php echo $form->labelEx($item,'adults'); ?>
<?php echo $form->dropDownList($item, "[$i]adults", array('1'=>'1',
'2'=>'2',
'3'=>'3',
'4'=>'4',
'5'=>'5'), array('single'=>'single', 'size'=>1)
); ?>
</div>
</td><td>
<div>
<?php echo $form->labelEx($item,'children'); ?>
<?php echo $form->dropDownList($item, "[$i]children", array('1'=>'1',
'2'=>'2',
'3'=>'3',
'4'=>'4',
'5'=>'5'), array('single'=>'single', 'size'=>1)
); ?>
</div>
</td>
<td>
<button type='button'>Delete</button>
</td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
<div class="row buttons">
<?php echo CHtml::submitButton($model->isNewRecord ? 'Create' : 'Save'); ?>
</div>
<?php $this->endWidget(); ?>
</div><!-- form -->

In your Yii view form, declare beginWidget as mentioned below,
<?php
$form = $this->beginWidget('CActiveForm', array(
'id'=>'booking-form', //form-id
'enableAjaxValidation'=>true,
'clientOptions'=>array(
'validateOnSubmit'=>true,
),
));
?>
Make sure your model has at least one validation rule for that scenario
public function rules()
{
return array(
array('attribute, attribute1', 'required'),
);
}
For detail information visit below the link
http://knackforge.com/blog/vishnu/yii-how-enable-ajax-form-validation

We Keep Coding

JavaScript is the programming language of the Web.

Laravel Form run JS function onsubmit - javascript

<?php echo Form::open(array(null, null, 'onsubmit' => 'myFunction(this); return false;')); ?> <?php echo Form::submit('Search', null, array('id'=>'searchbtn', 'class'=>'button radius right')); ?> <?php echo Form::close(); ?> Yayy. Now I could use my Enter button!

Related

Enable javascript within multiple if's?

Lighbox only showing data of the current post in Wordpress

JavaScript on change function working not well

clearing and changing content of div

AJAX validation not firing on tabular input fields

Categories

Resources