I have a page with a select option
<div class="col-md-7">
<select class="selection" name="selection">
<option value="ab">Form One</option>
<option value="ad">Form Two</option>
<option value="nq">Form Three</option>
</select>
</div>
<div id="content"></div>
For my JQuery, I just listen for the change
$(".selection").on("change", function(e){
if($(this).val() == "ad"){
$("#content").append(data);
}
});
Now where this blade template lives (resources/views/customer), I have created a forms folder. In this folder are form1.blade.php and two more templates for the other forms.
How would I go about added the form template into the div with the id content?
Or is there a better way of handling multiple forms for a single page?
Suppose, you have two forms like this:
View :
<form action="/url" method="post">
<input name="some_field" value="1">
<button type="submit" name="form1">Submit 1</button>
</form>
<form action="/url" method="post">
<input name="some_field" value="1">
<button type="submit" name="form2">Submit 2</button>
</form>
Now in Controller :
if ($request->has('form1')) {
//handle form1
}
if ($request->has('form2')) {
//handle form2
}
Source: https://laracasts.com/discuss/channels/laravel/two-form-on-one-page-both-submit
Assign values to submit and check to see if $request->has() the value. Then use logic inside the controller.
Just add an id to the form you wanna submit.
<script>
$(document).on("click","#formPass",function() {
$(this).parents("form").submit();
});
</script>
Related
I am using vuejs cdn in my laravel blade file. Now, I want to bind v-model on my html input fields like text and select tag. here is my code how i am trying to use v-model on select tag. This process isn't working for me. thanks in advance
#section('script')
<script>
var app = new Vue({
el: '#purchaseApp',
data() {
return {
purchase_items:'',
supplier:'',
}
},
methods: {
},
});
</script>
#endsection
<div class="widget-content widget-content-area">
<div class="form-group row">
<label for="category" class="col-sm-2 col-form-label">Supplier</label>
<div class="col-sm-10">
<select name="supplier" v-model="supplier" class="form-control suppliers" >
<option value="" selected disabled>Select Supplier</option>
<option value="shibbir">shibbir</option>
<option value="ripon">ripon</option>
</select>
</div>
</div>
I have got the solution of problem. There I used select-2 plugin. For that reason, v-model wasn't working.
In my project i have some events, each with a number of tags.
These tags are defined by the administrator user.
Some of these tags may have parameters.
For example, an email tag has two "Sender" and "Receiver" parameters.
Or the transfer tag has 2 parameters "From" and "To". and etc.
Do I have to use the form builder?
How do I implement this using Laravel and Vuejs?
Use Vue JS Component in Laravel like this.
Create Contact.vue component inside resources\assets\js\components then place your Vuejs there.
<template>
<div>
<h1>Contacts</h1>
<form action="#" #submit.prevent="createContact()">
<div class="form-group">
<label>Name</label>
<input v-model="contact.name" type="text" name="name" class="form-control">
</div>
<div class="form-group">
<label>Email</label>
<input v-model="contact.email" type="text" name="email" class="form-control">
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary">New Contact</button>
</div>
</form>
</div>
</template>
<script>
export default {
data: function(){
return {
contact:{
name:'',
email:'',
}
}
},
methods: {
createContact: function(){
//call axios to submit the form values in your Laravel controller method
let self = this
axios.post('/contact/store', params)
.then(function(){
self.contact.name = '';
self.contact.email = '';
})
.catch(function(error){
console.log(error);
});
console.log(this.contact);
return;
}
}
}
</script>
In app.js file inside \resources\assets\js add the component
Vue.component('contacts', require('./components/Contacts.vue'));
Finally, call the contacts component inside your blade file.
<div class="container">
<div id="app">
<contacts></contacts>
</div>
</div>
i have form in my delete modal, and i want to pass hidden input to url method delete/destroy
this is my delete modal :
<form action="{{url('/pages').'/' ... }}" method="POST" enctype="multipart/form-data">
{{ method_field('DELETE') }}
{{csrf_field()}}
<div class="form-group">
<label for="">Are you sure to delete this Page ?</label>
<input type="text" class="form-control" id="page_id" style="display: none;">
</div>
<button type="submit" class="btn btn-danger" id="save">Delete</button>
<button type="button" class="btn btn-link" data-dismiss="modal">{{__('Close')}}</button>
</form>
how to append input value(page_id) to form action ?
so i can use that page_id in form action :
<form action="{{url('/pages').'/'page_id}}" method="POST" enctype="multipart/form-data">
can some one help me ? thanks before :)
You have to add a new attribute on each delete button contains the id.
please check the following code
$('.delete-button').click(function(){
var pageId = $(this).data('page-id');
$('.page_id').html(pageId);
$('#modal-form').attr('action', deleteUrl+pageId);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
page 1
page 2
page 3
<form action="#" id="modal-form" method="POST" enctype="multipart/form-data">
<label for="">Are you sure to delete this Page <span class="page_id"></span>?</label>
</form>
<script>
/* window.deleteUrl = "{{url('/pages').'/'}}"; // save globally */
window.deleteUrl = "http://test.com/"; // temporary
</script>
If you are using boostrap modal then you have to pass data from that button something like this,
<button id="submit-btn" data-action="{{route('test')}}">Submit</button>
In JS,
replace modal's action with data-action.
Something like this,
$('#form-id').val($('#submit-btn').data('action))
And if you are not using modal then just store that id in variable and pass in route directly.
Hope it helps :)
I'm trying to implement the answer from this thread, however I've never used AJAX.
The first form sets a variable required in the second form, once this has been set I'd like it to then redirect as per the second form (so I'm guessing the alert wants to come out of the AJAX?)
After updating with charles babbage's answer the first form Submits.
Thanks for any help, it's greatly appreciated!
<script>
$(document).ready(function() {
$("#subbut").click(function() {
$.post($("#priceselect").attr("action"), $("#priceselect").serialize(),
function() {
$.post($("#globaliris").attr("action"), $("#globaliris").serialize(),
function() {
alert('Both forms submitted');
});
});
});
});
</script>
I've put this in the head with the aim of first submitting
<form name="priceselect" id="priceselect" method="post">
<select name="price" id="mySelect" onchange="document.getElementById('selectedValue').innerHTML = this.value;">
<option value="100">Option 1</option>
<option value="120">Option 2</option>
<option value="115">Option 3</option>
<option value="135">Option 4</option>
<option value="80" >Option 5</option>
</select>
<input value="Continue" id="subbut" type="Submit" />
</form>
which should then
(isset($_POST['price']));
$price = $_POST['price'];
in the same page before redirecting to a 3rd party with the submission of
<form id="globaliris" action="https://redirect.globaliris.com/epage.cgi" method="post" class="select">
<input type=hidden name="MERCHANT_ID" value="<?=$merchantid?>">
<input type=hidden name="ORDER_ID" value="<?=$orderid?>">
<input type=hidden name="CURRENCY" value="<?=$curr?>">
<input type=hidden name="AMOUNT" value="<?=$amount?>">
<input type=hidden name="TIMESTAMP" value="<?=$timestamp?>">
<input type=hidden name="MD5HASH" value="<?=$md5hash?>">
<input type=hidden name="AUTO_SETTLE_FLAG" value="1">
<br />
<br />
</form>
In order to trigger the action that you have specified in the Form tag on click of a button, the button should be of type Submit and also it should be inside your form. The position of Submit button is important.
<input type="submit" value="something" id="something">
Edit(as per your new question)
If you want two form's content to be submitted to one action, just add the serialises as below:
$.post($("#priceselect").attr("action"),$("#priceselect").serialize()+$("#globaliris").serialize() ,
function() {
alert('Both forms submitted');
});
});
I have a function dropdown list. I also have two text boxes related to the dropdown list. I want the populate the the textboxes with data from the selected object when the dropdown list changes and is initialized. Is this possible?
Yes, You can use a jquery function like this:
<form>
<input class="target" type="text" value="Field 1" />
<select class="target">
<option value="option1" selected="selected">Option 1</option>
<option value="option2">Option 2</option>
</select>
</form>
<div id="other">
Trigger the handler
</div>
$('.target').change(function() {
alert('Handler for .change() called.');
});