I want to pass the selected radio button value as a parameter with Laravel route.
My Route is:
Route::resource('/datas','DataController');
From this route, I am aiming to call localhost:8000/datas/{data}
My data.blade.php is:
<form id="dataform" action="{{ route('datas.show')}}" method="GET">
<table class="table">
<tr>
<th>Select bullet</th>
<th>SL NO</th>
<th>Name</th>
<th>Age</th>
</tr>
#foreach ($datas $key => $data)
<tr>
<td><input type="radio" id="data{{$data->id}}" name="data" value={{$data->id}}></option></td>
<td>{{$key}}</td>
<td>{{$data->name}}</td>
<td>{{$data->age}}</td>
</tr>
#endforeach
</table>
<button type="submit" id="edit_submit" class="btn btn-default">Show</button> </form>
My show function will be...
public function show($id)
{
//Code to showing data and redirect to show page
}
I want to get value of this radio button(given below).
<td><input type="radio" id="data{{$data->id}}" name="data" value={{$data->id}}>
and include it as a parameter with the Form action below
<form id="dataform" action="{{ route('datas.show')}}" method="GET">
I have made some changes to this code.
Changed button to anchor tag.
So my blade.php is:-
<table class="table">
<tr>
<th>Select bullet</th>
<th>SL NO</th>
<th>Name</th>
<th>Age</th>
</tr>
#foreach ($datas $key => $data)
<tr>
<td><input type="radio" id="data{{$data->id}}" name="data" value={{$data->id}}></option></td>
<td>{{$key}}</td>
<td>{{$data->name}}</td>
<td>{{$data->age}}</td>
</tr>
#endforeach
</table>
Show
and I added a javascript function too.
<script>
function showfunction(){
var id = document.querySelector('input[name = "data"]:checked').value;
var url = '{{route("admin.questions.show",":id")}}';
url=url.replace(':id',id);
document.location.href=url;
}
</script>
You can't accomplish that with just HTML/Blade. You need javascript (or a javascript framework) for the live changes to work since the parameter in your form's action route depends on the value of the selected radio.
action="{{ route('datas.show', [ 'id' => [insert id here] ])}}"
Related
This is my View :
<a class="mybut btn btn-info" id="check" asp-page-handler="Delete" asp-route-id="" onclick="takeId()"> Delete Person</a>
<table id="datatable" class="table">
<thead>
<tr>
<th>select</th>
<th>id</th>
<th>name</th>
</tr>
</thead>
<tbody>
#foreach (var item in #Model.MyViewModels)
{
<tr>
<td><input type="checkbox" id="box" value="#item.Id" /></td>
<td>#item.Id</td>
<td>#item.FullName</td>
</tr>
}
</tbody>
</table>
and this is my Index Model:
public void OnGetDelete(long id)
{
_customerApplication.Delete(id);
}
and my js codes:
function takeId() {
var id = $("#box").attr('value');
$("#check").attr('asp-route-id',id);
}
when i click on each item, i need to take the item's Id, and pass it to asp-route-id in "a" tag ,it seems that there are some wrongs in my codes, because when i select each item and click on "a" tag, The id returns the value 0
here is a demo to allow only one checkbox checked,and when one checkbox is checked,the id of anchor tag will be changed:
<a class="mybut btn btn-info" id="check" asp-page-handler="Delete" asp-route-id="0"> Delete Person</a>
<table id="datatable" class="table">
<thead>
<tr>
<th>select</th>
<th>id</th>
<th>name</th>
</tr>
</thead>
<tbody>
#foreach (var item in #Model.MyViewModels)
{
<tr>
<td><input type="checkbox" name="box" value="#item.Id" /></td>
<td>#item.Id</td>
<td>#item.FullName</td>
</tr>
}
</tbody>
</table>
js:
$('input[name=box]').change(function(){
$('input:checkbox').not(this).prop('checked', false);
var id=$('input[name=box]:checked').val();
var id1 = id == undefined ? 0 : id;
var href = $("#check").attr('href').split("?");
var href1 = href[0] + "?id=" + id1 + "&" + href[1].split("&")[1];
$("#check").attr('href',href1);
})
result:
The asp-route-id attribute is parsed by the anchor tag helper. Tag helpers are executed server-side to create html output that is sent to the browser. The asp- attributes are not included in the output because they have no meaning for the browser.
For example if you have this in your .cshtml file:
<a asp-page-handler="Delete" asp-route-id="1">Delete Person</a>
The anchor tag helper will parse the asp- attributes and generate the following html output:
Delete Person
The generated element is added to the html response that is sent to the browser. Now that the element is rendered in the browser (client-side), adding the asp- attribute with JavaScript will not have any effect.
https://learn.microsoft.com/en-us/aspnet/core/mvc/views/tag-helpers/intro?view=aspnetcore-6.0
Here's what you could try:
function takeId() {
var id = $('#box').attr('value');
var href = $('#check').attr('href') + '&id=' + id;
$("#check").attr('href', href);
}
I have a table with some values, the last input is a checkbox.
I need to save the id of the input into an array only when is checked.
This is my partial table:
<table id="produtcTable" class="table">
<thead class="thead-dark">
<tr>
<th scope="col">Producto</th>
<th scope="col">Precio de lista</th>
<th scope="col">Agregar</th>
</tr>
</thead>
<tbody>
<tr th:each="stock : ${stockList}">
<td th:text="${stock.productName}"></td>
<td th:text="${stock.price}"></td>
<td class="text-center">
<input class="form-check-input" type="checkbox" th:attr="id=${stock.stockCode}" onclick="myFunction(this)" aria-label="...">
this is my javascript that does not work:
<script >
function myFunction(product) {
var arr= [];
$('input[id='+ product.id +']:checked').each(function () {
arr.push(product.id);
});
alert(arr.toString());
};
</script>
what am I doing wrong?
I can't see a id attribute on you checkbox in you snippets. But there is some code i can not identify (not mentioned in post) setting the id. Please make sure there is an id in your current DOM (Browser Development tools: inspector). According to your snippet you can try the follwing:
<input type="checkbox" id="cb1" onclick="myFunction(this)"/>
<input type="checkbox" id="cb2" onclick="myFunction(this)"/>
and the following JS code would update an global array the the clicked checkbox id:
var arr= [];
function myFunction(inputCB) {
arr.push(inputCB.id);
alert(arr);
}
I am a Laravel Newbie Some how I managed to display DB content in to a select box. What i wanted is that, i need to get data from another table based on the ID selected in the select box. My code is given below
Blade
<h2 class="comment-listings">Subscriber listings</h2><hr>
<table>
<thead>
<tr>
<th>Slelect a List:</th>
<th><select class="form-control input" name="list1s" id="list1s" >
<option selected disabled>Please select one option</option>
#foreach($list1s as $list1)
<option value="{{$list1->id}}">{{$list1->name}}</option>
#endforeach
</select>
</th>
</tr>
</thead>
</table>
<table>
<thead>
<tr>
<th>Device ID</th>
<th>Status</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
#foreach($subscribers as $subscriber)
<tr>
<td>{{{$subscriber->device_id}}}</td>
<td>{{$subscriber->list1->name}}</td>
<td>
{{Form::open(['route'=>['subscriber.update',$subscriber->id]])}}
{{Form::select('status',['approved'=>'Approved','blocked'=>'Blocked'],$subscriber->status,['style'=>'margin-bottom:0','onchange'=>'submit()'])}}
{{Form::close()}}
</td>
<td>{{HTML::linkRoute('subscriber.delete','Delete',$subscriber->id)}}</td>
</tr>
#endforeach
</tbody>
</table>
<script>
$('#list1s').on('change',function(e){
console.log(e);
var list_id = e.target.value;
$.get('/subscriber/get?list_id=' + list_id, function(data){
console.log(data);
})
})
</script>
{{$subscribers->links()}}
Controller for populating select box
public function listList()
{
$list1s = List1::all();
$this->layout->title = 'Subscriber Listings';
$this->layout->main = View::make('dash')->nest('content', 'subscribers.list', compact('list1s'));
$subscribers = Subscriber::orderBy('id', 'desc')->paginate(20);
View::share('subscribers', $subscribers);
}
This shows all the Lists and Subscribers.
Since i need to display subscribers of list selected in select box i have added a script at the bottom of the Blade and added other controller function at route to perform task based on the list_id passed from the script.
Route::get('/subscriber/get', function(){
$list_id = Input::get('list_id');
$subscribers = Subscriber::where('list1_id','=', $list_id)->get();
return Response::eloquent($subscribers);
});
But no changes are taking place, Where am I wrong?
I have Edited my code, and was successful.
Blade
<h2 class="comment-listings">Campaign listings</h2><hr>
<script data-require="jquery#2.1.1" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>Select a List:</th>
<th>
<select class="form-control input" name="list1s" id="list1s" onchange="displayVals(this.value)">
<option selected disabled>Please select a list</option>
#foreach($list1s as $list1)
<option value="{{$list1->id}}">{{$list1->name}}</option>
#endforeach
</select>
</th>
</tr>
</thead>
</table>
<div id="campaign">
</div>
<script>
function displayVals(data)
{
var val = data;
$.ajax({
type: "POST",
url: "get",
data: { id : val },
success:function(campaigns)
{
$("#campaign").html(campaigns);
}
});
}
</script>
Route
Route::any('/campaigns/get', [
'as' => '/campaigns/get',
'uses' => 'CampaignController#getCampaigns'
]);
Controller
public function getCampaigns()
{
$list1 = Input::get('id');
$campaigns = Campaign::orderBy('id', 'desc')
->where('list1_id','=', $list1)
->where('user_id','=',Auth::user()->id)
->paginate(10);
return View::make('campaigns.ajaxShow')->with('campaigns', $campaigns);
}
I have a separate blade now (ajaxShow) to load when option changed in select box.
<table>
<thead>
<tr>
<th>Campaign title</th>
<th>Status</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
#foreach($campaigns as $campaign)
<tr>
<td>{{{$campaign->template->title}}}</td>
<td>
{{Form::open(['route'=>['campaign.update',$campaign->id]])}}
{{Form::select('status',['yes'=>'Running','no'=>'Stoped'],$campaign->running,['style'=>'margin-bottom:0','onchange'=>'submit()'])}}
{{Form::close()}}
</td>
<td>{{HTML::linkRoute('campaign.delete','Delete',$campaign->id)}}</td>
</tr>
#endforeach
</tbody>
</table>
{{$campaigns->links()}}
There is no eloquent method implemented in Illuminate\Http\Response in Laravel 4 and above (I believe that method is only available in Laravel 3). But you can return a json response instead:
Route::get('/subscriber/list', function(){
$list_id = Input::get('list_id');
$subscribers = Subscriber::where('list1_id','=', $list_id)->get();
return Response::json($subscribers);
});
I was wondering if it is possible to 'Checked=true' the checkBox of the ROW when data is entered in textbox inside a table.
here is the code jquery code to do this, but is checking all the checkboxes. I will appreciate any help.
jquery code:
<script>
jQuery('[id$="enteredValue"]').change(function() {
jQuery('[id$="check"]').attr('checked', true);
});
</script>
html code
<table id="table-2">
<thead>
<tr>
<th>Select</th>
<th>Enter Qty</th>
<th> Suggested Units</th>
<th> Cost</th>
<th>Brand</th>
</tr>
<thead>
<tbody>
<tr>
<td><apex:inputCheckbox id="check" value="{!objectRow.selected}"/> </td>
<td><apex:inputText id="enteredValue" value=" {!objectRow.EnteredValue}" /></td>
<td><apex:outputText value="{!objectRow.Reorder_Amount}"/></td>
<td><apex:outputText value="{!objectRow.Reorder_Cost}" /></td>
<td><apex:outputText value="{!objectRow.Brand}" /></td>
</tr>
</tbody>
</table>
Try this..
<script>
jQuery('[id$="enteredValue"]').change(function() {
$(this).closest('tr').find('[id$="check"]').prop('checked', true);
if(this.val()=="")
{
$(this).closest('tr').find('[id$="check"]').prop('checked', false);
}
});
</script>
That's because you are selecting all checkboxes. Only select the one that is in the row of the text input:
$(this).closest('tr').find('[id$="check"]').prop('checked', true);
If you pass a boolean as value, use prop instead. See https://api.jquery.com/attr/ for more info.
I have to code to do both of these functions, however, when I try to integrate them its either one or the other. (either the email is sent with the name / email & lands on server.php, or the email is sent with the data & none of the inputs are sent). I want to be able to send both the html table data as well as the users name & email inputs. The code below will simply echo the html data or the users inputs.
This code sends data to the server:
Jquery / Html
<script language="javascript" type="text/javascript" src="jQuery.js">
</script>
<script language="javascript" type="text/javascript">
$(function(){
var dataArr = [];
$("table").each(function(){
dataArr.push($(this).html());
});
$('#sendServer').click(function(){
$.ajax({
type : "POST",
url : 'server.php',
data : "content="+dataArr,
success: function(data) {
alert(data);// alert the data from the server
},
error : function() {
}
});
});
});
</script>
<table id="table" border=1>
<thead> <tr>
<th>First</th>
<th>Last</th>
<th>Date of birth</th>
<th>City</th>
</tr></thead>
<tbody>
<tr>
<td>TEXT1</td>
<td>TEXT2</td>
<td>TEXT3</td>
<td>TEXT4</td>
</tr>
<tr>
<td>TEXT5</td>
<td>TEXT6</td>
<td>TEXT7</td>
<td>TEXT8</td>
</tr>
<tr>
<td>TEXT9</td>
<td>TEXT10</td>
<td>TEXT11</td>
<td>TEXT12</td>
</tr>
</tbody>
</table>
<input id="sendServer" name="sendServer" type="button" value="Send to Server" />
Server.php
<?php
echo $_REQUEST['content'];
?>
This form send data using ajax
<div style="padding:3px 2px;border-bottom:1px solid #ccc">Ajax Form</div>
<form id="ff" action="test.php" method="post">
<table>
<tr>
<td>Name:</td>
<td><input name="name" type="text"></input></td>
</tr>
<tr>
<td>Email:</td>
<td><input name="email" type="text"></input></td>
</tr>
<tr>
<td>Phone:</td>
<td><input name="phone" type="text"></input></td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="Submit"></input></td>
</tr>
</table>
</form>
The jquery script
$('#ff').form({
success:function(data){
$.messager.alert('Info', data, 'info');
}
});
And the php
$name = $_POST['name'];
$email = $_POST['email'];
$phone = $_POST['phone'];
echo "Your Name: $name <br/> Your Email: $email <br/> Your Phone: $phone";
I'm sure that I'm just missing something small. When I implement these into my code, an email is sent. The email contains either the name & email, or the html table data. The difference in code is putting a button action="submit" on my code. Whenever the email sent displays the name & email, the page also redirects to the blank php page. Hopefully I'm being clear enough.
Cheers.
Just add a e.preventDefault(); to your submission javascript inside #sendServer's click handler. This will prevent the form from submitting traditionally like it's doing now.
You'll also need to add the parameter e to that function:
$('#sendServer').click(function(e){
// ajax call
e.preventDefault();
}
Or return false; in the same place as was commented below.