Level 55
Am I missing something or is this what you're asking for? It seems too easy?
<input type="text" name="to" id="to" class="form-control" value="{{ $client->mobile }}" disabled>
May 26, 2015
49
Level 51
JS Question
Another JS question...
I have this:
<button type="button" class="btn btn-link" title="Click to send SMS" id="mobile" data-toggle="modal" data-target=".bs-example-modal-lg">{!! $client->mobile !!}</button>
This returns in HTML as
<button type="button" class="btn btn-link" title="Click to send SMS" id="mobile" data-toggle="modal" data-target=".bs-example-modal-lg">07123456789</button>
That opens up in a Bootstrap modal window, I want to get the value {!! $client->mobile !!} then add it to this input:
<input type="text" name="to" id="to" class="form-control" value="" disabled>
How can this be done?
Level 51
Cant do that as not in foreach...
Level 55
Where is the foreach?
Level 65
Your topics have like 10% of the code and you expect us to know what you have and how to do it... think for yourself or post everything so we can help properly? No wonder your threads get like 40 replies.
Level 55
Oh crap, a civil war is going to break out ;)
Level 51
@bashy no need to be like that, thought this was a friendly forum :)
I did try:
$(document).ready(function () {
$('#mobile').click(function(){
var number = document.getElementById('mobile').text;
$("#to").val(number);
});
});
Just forgot to paste it on.
Level 55
Where is the code for the modal window? If you have access to that (which you most likely will) then you will be able to add the mobile number directly to it.
Level 51
Its just under the foreach loop.
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Tel</th>
<th>Mobile</th>
<th></th>
</tr>
</thead>
<tbody>
@foreach($customers as $client)
<tr>
<td>{!! $client->first_name !!} {!! $client->surname !!}</td>
<td>{!! $client->email !!}</td>
<td>{!! $client->tel !!}</td>
<td>
<button type="button" class="btn btn-link" title="Click to send SMS" id="mobile" data-toggle="modal" data-target=".bs-example-modal-lg">{!! $client->mobile !!}</button>
</td>
<td>
<a href="/customers/{!! $client->id !!}/edit" class="btn btn-sm btn-warning">Notes</a>
@if (Auth::user()->type == 'Admin')
<a href="/customers/{!! $client->id !!}/destroy" class="btn btn-sm btn-danger" onclick="return confirm('Are you sure you want to remove this?')">Delete</a>
@endif
</td>
</tr>
@endforeach
</tbody>
</table>
{!! $customers->render() !!}
</div>
@else
<p>No records present.</p>
@endif
<!-- Modal -->
<div class="modal fade bs-example-modal-lg" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Send SMS</h4>
</div>
<div class="modal-body">
{!! Form::open(['url' => 'account/sendSMS', 'class' => 'form-horizontal']) !!}
<div class="form-group {!! $errors->has('from') ? 'has-error' : '' !!}">
<div class="col-sm-2">From</div>
<div class="col-lg-6">
<input type="text" name="from" class="form-control" value="{!! Auth::user()->company()->first()->name !!}">
<div class="help-block">This is pre-populated with your company name, but it can not exceed 11 characters, so please check before sending.</div>
</div>
<div class="col-lg-3">{!! $errors->first('from', '<span class="help-block">This can not be more than 11 characters.</span>') !!}</div>
</div>
<div class="form-group">
<div class="col-sm-2">To</div>
<div class="col-lg-6">
<input type="text" name="to" id="to" class="form-control" value="" disabled>
<div class="help-block">Comma separated list of up to 50 mobile numbers (e.g 07712345678, 07712345679, 07712345670)</div>
</div>
</div>
<div class="form-group {!! $errors->has('to') ? 'has-error' : '' !!}">
<div class="col-sm-2">Message</div>
<div class="col-lg-7">
<textarea name="message" class="form-control" rows="10" id="sms" placeholder="Your message"></textarea>
<div class="help-block"><small>Characters Left:</small> <small id="chars"></small></div>
</div>
<div class="col-ls-3">{!! $errors->first('message', '<span class="help-block">:message</span>') !!}</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-primary">Send</button>
</div>
{!! Form::close() !!}
</div>
</div>
</div>
Level 55
Check out https://github.com/laracasts/PHP-Vars-To-Js-Transformer and the accompanying lesson https://laracasts.com/lessons/pass-data-to-your-javascript
Or you could just move the modal to inside the foreach loop. But that would mean duplicating the code drastically depending on how many iterations you have.
Level 51
Basically from this small video http://cl.ly/3b182m361W3q i want to click the link/number then the 'to' field be populated with that number you click on.
Level 53
One way to do this is to save the number as a data-something="{!! $client->mobile !!}" value, get it with jquery and add it to the input.
Level 65
Ruffles, exactly. He's done it before but hasn't learnt :(
Level 51
@bashy yes done it before but didn't think think it was the same thing, my bad and sorry I'll not post any more rubbish.
Level 65
:) You can use that method for a lot of things. Passing data from buttons to JS and manipulating the DOM with that data.
I never said it was rubbish, just needed more info on how your code is structured!
Level 51
Right ok, think I've done it in a fashion.
I have this JS:
$('#mobile').click(function(){
var number = $(this).data('mobile');
var appendString = '<input type="text" name="to" class="form-control" disabled value="' + number + '" />';
$('#toField').append(appendString);
});
But it's only doing it for the first one in the table, if I click on the second one it doesn't pre-populate it.
Which gets passed to this in the modal:
<div class="form-group">
<div class="col-sm-2">To</div>
<div class="col-lg-6" id="toField">
</div>
</div>
Level 55
There can only be one ID.
<div class="form-group">
<div class="col-sm-2">To</div>
<div class="col-lg-6" id="toField"></div> <!-- problem is here -->
</div>
You'd need to access the element by a class
<div class="form-group">
<div class="col-sm-2">To</div>
<div class="col-lg-6" class="toField"></div> <!-- or something like this -->
</div>
Level 51
Mmm, so how would one get around this?
Level 53
Get the element by class.
Level 55
You both were too quick, I was updating my reply. See above.
Level 51
Lol, thought that was going to be the answer but not sure why, whats the difference and why would that be?
Level 55
Well IDs have to be unique, while multiple elements can share the same class. In your previous code example, only the first element with the ID ** toField** would be selected.
Level 51
Then update to this $('.toField').append(appendString);
Level 55
This sounds like something for Vue.js
Level 51
So all in all I have:
$('#mobile').click(function(){
var number = $(this).data('mobile');
var appendString = '<input type="text" name="to" class="form-control" disabled value="' + number + '" />';
$(".toField").append(appendString);
});
But now that doesnt show anything
Level 55
Do you get any errors in the console?
Level 51
Nothing in console no.
Level 53
You are still selecting the button in the foreach by ID instead of a class.
$('.mobile').click(function(){ // it's #mobile in your example.
var number = $(this).data('mobile');
var appendString = '<input type="text" name="to" class="form-control" disabled value="' + number + '" />';
$(".toField").append(appendString);
});
Level 51
so the button needs to be a class as well does it?
Level 53
Yeah, if you want to select all buttons with that class and add the click event.
Level 51
Still doesn't pre-populate :(
Please or to participate in this conversation.