In my jQuery code, I want to be able to get the child element within a <tr> element. I have created a jQuery object and named the variable $trElement. However, for some reason calling $trElement.children(".sequence-edit") returns undefined so any further action done on that statement throws an error (since you are invoking a method on an undefined object). I have checked the HTML code of the parent element and it clearly contains a child element with the indicated class name. So why does it not work?
Here is the code I used to debug the issue.
console.log($trElement.html());
console.log($trElement.children(".sequence-edit"));
The first line console.log($trElement.html()); logs:
<td class="sequence-number">#1</td>
<td class="sequence-data">
<form action="editSequence.do" method="POST">
<textarea cols="50" rows="10" name="sequence" class="sequence-data-textarea"></textarea>
<input type="hidden" name="index" value="0">
</form>
</td>
<td class="button-first">
<!-- Element targeting through ".sequence-class" -->
<button type="button" class="btn btn-info sequence-edit center-block display-true">EDIT</button>
<button class="btn btn-info center-block edit-submit display-false" style="display: none;">SUBMIT</button>
</td>
<td class="button-second">
<button type="button" class="btn btn-danger delete-modal-appearance center-block display-true" data-toggle="modal" data-target="#modal-delete-confirmation">DELETE</button>
<button class="btn btn-warning center-block edit-cancel display-false" style="display: none;">CANCEL</button>
</td>
<td>
<input type="checkbox" class="checkbox-delete-selection center-block">
</td>
The second line console.log($trElement.children(".sequence-edit")); logs: undefined
.children() only travels one step into your selector's (trElement) DOM tree, (and those are your <TD>'s, not your <button>).
instead, use .find(".sequence-edit")
https://api.jquery.com/children/
https://api.jquery.com/find/
var $trElement = $("tr");
console.log( $trElement.find(".sequence-edit").html() ); // "EDIT"
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td class="sequence-number">#1</td>
<td class="sequence-data">
<form action="editSequence.do" method="POST">
<textarea cols="50" rows="10" name="sequence" class="sequence-data-textarea"></textarea>
<input type="hidden" name="index" value="0">
</form>
</td>
<td class="button-first">
<!-- Element targeting through ".sequence-class" -->
<button type="button" class="btn btn-info sequence-edit center-block display-true">EDIT</button>
<button class="btn btn-info center-block edit-submit display-false" style="display: none;">SUBMIT</button>
</td>
<td class="button-second">
<button type="button" class="btn btn-danger delete-modal-appearance center-block display-true" data-toggle="modal" data-target="#modal-delete-confirmation">DELETE</button>
<button class="btn btn-warning center-block edit-cancel display-false" style="display: none;">CANCEL</button>
</td>
<td>
<input type="checkbox" class="checkbox-delete-selection center-block">
</td>
</tr>
</table>
Related
I have 10 buttons with different values I need to enter the value of the button when is clicked into a text field and after this to send the full text to php file with post How can I do that.
<form class="row" action="Pin.php" method='post'>
<div class="col-xs-8 text-center" style="border-right:solid 3px #CCC">
<h1 class="demo-section-title text-uppercase text-center">Input Your Pin Number</h1>
<input type="text" id="userPinInput" class="form-control" />
<!-- TABLE -->
<div id="pinPad">
<table>
<tr>
<td><input type="button" id="btn1" name="name[]" value="1" class="btn btn-block btn-lg btn-inverse"></input ></td>
<td><input type="button" id="btn2" name="name[]" value="2" class="btn btn-block btn-lg btn-inverse"></input ></td>
<td><input type="button" id="btn3" name="name[]" value="3" class="btn btn-block btn-lg btn-inverse"></input ></td>
</tr>
<tr>
Here is a screenshot
The reason I can't use check boxes is it must look like in the screenshot.
Second I need to send the clicked value to the text area in the screenshot.And I think is more easy to send the value of the check box to php file after I click the numbers
What you have shown in your HTML is lots of textboxes which seemed have been styled to look like buttons using CSS. I don't think this is necessary. You can use regular buttons, which can still have values assigned to them. The markup of your "buttons" is also invalid.
You need to
a) create some valid HTML buttons
b) listen for each button being clicked on
c) when it's clicked, add that the value of the clicked button to the textbox
d) since it's a PIN number, use a "password" field for the textbox
e) get rid of the "name" on the buttons so those values won't be sent to the server
f) give the pin number textbox a name so that value will be sent to the server
Demo:
document.addEventListener('DOMContentLoaded', function() {
var textbox = document.querySelector("#userPinInput");
var pinButtons = document.querySelectorAll(".pinNum");
pinButtons.forEach(function(btn) {
btn.addEventListener("click", function(e) {
textbox.value += this.value;
});
});
});
<link href="https://cdn.jsdelivr.net/npm/bootstrap#3.4.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<form class="row" action="Pin.php" method='post'>
<div class="col-xs-8 text-center" style="border-right:solid 3px #CCC">
<h1 class="demo-section-title text-uppercase text-center">Input Your Pin Number</h1>
<input type="password" name="pin" id="userPinInput" class="form-control" />
<!-- TABLE -->
<div id="pinPad">
<table>
<tr>
<td><button type="button" id="btn1" value="1" class="pinNum btn btn-block btn-lg btn-inverse">1</button></td>
<td><button type="button" id="btn2" value="2" class="pinNum btn btn-block btn-lg btn-inverse">2</button></td>
<td><button type="button" id="btn3" value="3" class="pinNum btn btn-block btn-lg btn-inverse">3</button></td>
</tr>
<tr>
<td><button type="button" id="btn1" value="4" class="pinNum btn btn-block btn-lg btn-inverse">4</button></td>
<td><button type="button" id="btn2" value="5" class="pinNum btn btn-block btn-lg btn-inverse">5</button></td>
<td><button type="button" id="btn3" value="6" class="pinNum btn btn-block btn-lg btn-inverse">6</button></td>
</tr>
<tr>
<td><button type="button" id="btn1" value="7" class="pinNum btn btn-block btn-lg btn-inverse">7</button></td>
<td><button type="button" id="btn2" value="8" class="pinNum btn btn-block btn-lg btn-inverse">8</button></td>
<td><button type="button" id="btn3" value="9" class="pinNum btn btn-block btn-lg btn-inverse">9</button></td>
</tr>
</table>
</div>
</div>
</form>
The full pin number from the textbox would then be available in the server when the form is submitted, by accessing $_POST["pin"].
I have a html form with two buttons on it:-
[1] One button is used to upload an image file (.jpg)
[2] and the second one is to submit the form.
The problem is that the upload image button seems to be refreshing the page after the method for uploading the image has completed. Below is my html:-
<div class="m-b-18px">
<div class="col-m-12">
<a (click)="readRecipes()" class="btn btn-primary pull-right">
<span class="glyphicon glyphicon-plus"></span>Read Recipes
</a>
</div>
</div>
<div class="row">
<div class="col-md-12">
<form [formGroup]="create_recipe_form" (ngSubmit)="createRecipe()">
<table class="table table-hover table-responsive table-bordered">
<tr>
<td>
Name
</td>
<td>
<input name="name" formControlName="name" type="text" class="form-control" required />
<div *ngIf="create_recipe_form.get('name').touched && create_recipe_form.get('name').hasError('required')"
class="alert alert-danger">Name is required
</div>
</td>
</tr>
<tr>
<td>
Description
</td>
<td>
<textarea name="description" formControlName="description" class="form-control" required>
</textarea>
<div *ngIf="create_recipe_form.get('description').touched && create_recipe_form.get('description').hasError('required')"
class="alert alert-danger">
Description is required
</div>
</td>
</tr>
<tr>
<td>
Image
</td>
<td>
<input name="selectFile" id="selectFile" type="file" class="form-control btn btn-success" />
<button type="button" class="btn btn-primary" (click)="uploadImage($event)" value="Upload Image">Upload Image</button>
<input type='hidden' id='image_id' name='img_id' value="6" formControlName="image_id" />
</td>
</tr>
<tr>
<td></td>
<td>
<button class="btn btn-primary" type="submit" [disabled]="!create_recipe_form.valid">
<span class="glyphicon glyphicon-plus"></span> Create
</button>
</td>
</tr>
</table>
</form>
</div>
</div>
My code for the uploadImage method is below:-
uploadImage(e) {
let files = this.elem.nativeElement.querySelector('#selectFile').files;
let formData = new FormData();
let file = files[0];
formData.append('selectFile', file, file.name);
this._imageService.uploadImage(formData)
.subscribe(
image => {
console.log(image);
this.addImageIdToHtml(image)
e.preventDefault();
e.stopPropagation();
},
error => console.log(error)
);
}
As soon as the above method has finished running the page appears to refreshing causing my app to go back to the land page. This is not the behaviour I want. What I actually want is the form page to be retained until the Submit form button is pressed. Can anyone help me please?
Use div tags instead of form tag.
Change the button type as button.
<button type="button">Upload Image</button>
Modify the code as follows.
<div class="m-b-18px">
<div class="col-m-12">
<a (click)="readRecipes()" class="btn btn-primary pull-right">
<span class="glyphicon glyphicon-plus"></span>Read Recipes
</a>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div [formGroup]="create_recipe_form" (ngSubmit)="createRecipe()">
<table class="table table-hover table-responsive table-bordered">
<tr>
<td>
Name
</td>
<td>
<input name="name" formControlName="name" type="text" class="form-control" required />
<div *ngIf="create_recipe_form.get('name').touched && create_recipe_form.get('name').hasError('required')"
class="alert alert-danger">Name is required
</div>
</td>
</tr>
<tr>
<td>
Description
</td>
<td>
<textarea name="description" formControlName="description" class="form-control" required>
</textarea>
<div *ngIf="create_recipe_form.get('description').touched && create_recipe_form.get('description').hasError('required')"
class="alert alert-danger">
Description is required
</div>
</td>
</tr>
<tr>
<td>
Image
</td>
<td>
<input name="selectFile" id="selectFile" type="file" class="form-control btn btn-success" />
<button type="button" class="btn btn-primary" (click)="uploadImage($event)" value="Upload Image">Upload Image</button>
<input type='hidden' id='image_id' name='img_id' value="6" formControlName="image_id" />
</td>
</tr>
<tr>
<td></td>
<td>
<button class="btn btn-primary" type="button" [disabled]="!create_recipe_form.valid">
<span class="glyphicon glyphicon-plus"></span> Create
</button>
</td>
</tr>
</table>
</div>
</div>
</div>
You should not upload files on Angular folders like (Assets) , cuz it will recompile every time new file added to Angular environment and that will cause you the page refreshment you didn't want.
If you are using button tag inside the form tag, add type="button" inside the button tag.
<button type="button"></button>
This will work perfectly
I have a button Update in One td I want to fetch value of both textarea of td from same tr.
There are lots of tr so I have to use closest() method to find element. I have tried to find element but it's not working.
HTML :-
<tr>
<td>
<div class="agenda-date">
<div class="dayofmonth color_font_date">2017-05-31</div>
<div class="dayofweek">
Wednesday
</div>
</div>
</td>
<td>
<div class="row margin_two_planner">
<button type="button" class="btn btn-sm btn-primary">AM </button>
<a data-toggle="modal" href="#add_apt_status" class=""><input type="number" value="3" name="" class="number_planner"></a>
<label class="control-label"> 6 </label>
</div>
<div class="row margin_two_planner">
<button type="button" class="btn btn-sm btn-primary">PM </button>
<a data-toggle="modal" href="#add_apt_status" class=""><input type="number" value="4" name="" class="number_planner"></a>
<label class="control-label"> 2 </label>
</div>
</td>
<td style="width: 20%;">
<textarea id="" class="form-control initial_cap appointment_note" required="required" rows="3" name="appointment_note" cols="50" aria-required="true" disabled=""> APT -1 </textarea>
</td>
<td style="width: 20%;">
<textarea id="" class="form-control initial_cap holiday_note" required="required" rows="3" name="holiday_note" cols="50" aria-required="true" disabled=""> Holiday - 1 </textarea>
</td>
<td>
<div class="text-right">
<button type="button" id="" class="btn btn-primary appointment_edit_button">Edit </button>
<button type="button" id="" onclick="planner_note_edit(1)" class="btn btn-md btn-primary appointment_update_button" style="display:none"> Update </button>
<button type="button" id="" class="btn btn-md btn-cancel appointment_cancel_button" style="display:none">Cancel </button>
</div>
</td>
</tr>
Jquery :-
function planner_note_edit(planner_note_id)
{
appointment_note = $(this).closest('td').find(".holiday_note").val();
alert(appointment_note);
}
But I'm not able to fetch value of textarea from closest td.
You should get the textarea from current row.
So, please use .closest('tr')
appointment_note = $(this).closest('tr').find(".holiday_note").val();
Also, you have to pass the clicked button object. this in your function is a reference to the window object.
function planner_note_edit(planner_note_id,event)
{
appointment_note = $(event.target).closest('td').find(".holiday_note").val();
alert(appointment_note);
}
HTML
<button type="button" id="" onclick="planner_note_edit(1,event)" class="btn btn-md btn-primary appointment_update_button" style="display:none"> Update </button>
I've created a modal window, containing a table with rows of input boxes and buttons:
<table class="datatable tablesort selectable paginate full" width="100%">
<tbody>
<tr id="row_1">
<td><strong><input type="text" value="120040965" id="icpcode">
<button type="button" id="btnSave" class="btn btn-primary">Insert</button></strong>
<p>GRAND VOYAGER WIPER MOTOR REAR 04-08 £35.00</p>
</td>
</tr> <tr id="row_2">
<td><strong><input type="text" value="120040966" id="icpcode">
<button type="button" id="btnSave" class="btn btn-primary">Insert</button></strong>
<p>CHRYSLER GRAND VOYAGER WIPER MOTOR FRONT 01-08 £30.00</p>
</td>
</tr> <tr id="row_3">
<td><strong><input type="text" value="120040964" id="icpcode">
<button type="button" id="btnSave" class="btn btn-primary">Insert</button></strong>
<p>CHRYSLER GRAND VOYAGER MK2 01-08 2.8 CRD GEARBOX AUTOMATIC £500.00</p>
</td>
</tr> <tr id="row_4">
<td><strong><input type="text" value="120040963" id="icpcode">
<button type="button" id="btnSave" class="btn btn-primary">Insert</button></strong>
<p>CHRYSLER GRAND VOYAGER MK2 STOW £80.00</p>
</td>
</tr> <tr id="row_5">
<td><strong><input type="text" value="120040962" id="icpcode">
<button type="button" id="btnSave" class="btn btn-primary">Insert</button></strong>
<p>CHRYSLER GRAND VOYAGER MK2 01-08 WISHBONE DRIVER SIDE £15.00</p>
</td>
</tr> </tbody>
</table>
I then use jQuery to insert the value of the inputbox (icpcode) into the last row of another table and close the open modal and focus on that inputbox:
$('#btnSave').click(function() {
var value = $('#icpcode').val();
$('#tablemain tbody tr:last #itemlookup').val(value);
$('#tablemain tbody tr:last #itemlookup').focus();
$('#productlookup').modal('hide');
});
My problem is that only the first button works, so I need a solution that enables the selected row's value to pass back. I have incremented the tr id, but I'm not sure what I need to do... but I'm presuming it needs something involving $.(this) and also incrementing the inputbox/button. It might be easier to do away with the button and have the row itself to have an onclick? Either way I appreciate any help!
It is because your input boxes all share the same ID and all of your buttons share the same ID. Every element on your page must have a unique ID.
<input type="text" id="input1">
<input type="text" id="input2">
<input type="text" id="input3">
This is the reason only the first button works because it's only finding one element with that ID, and it's the first button, the rest are ignored.
So, to fix the problem, you can either add btnSave as a class to your buttons, like this:
<button type="button" class="btn btn-primary btnSave">
and change your JS to:
$('.btnSave').click(function() {
// do something
});
Or you could change your ID's very slightly, like this:
<button type="button" id="btnSave1" class="btn btn-primary">
<button type="button" id="btnSave2" class="btn btn-primary">
<button type="button" id="btnSave3" class="btn btn-primary">
and your JS would be:
$('button[id^="btnSave"]').click(function() {
// do something
});
What you can do id give them all unique ids and then give them all the same class:
<button type="button" id="row 1" class="btnSave btn btn-primary">Insert</button>
<button type="button" id="row 2" class="btnSave btn btn-primary">Insert</button>
<button type="button" id="row 3" class="btnSave btn btn-primary">Insert</button>
Then use the class as reference and the id for the value;
$('.btnSave').click(function() {
var value = this.id; // this equals 'row 1' | 'row 2' | 'row 3'
// your remaining code here
});
and to get the value of the selected row's text edit, you can reference it by using the button's id to grab the value as shown below and also be ablt to create your table rows using a loop easily and fast.
<table class="datatable tablesort selectable paginate full" width="100%">
<tbody>
<tr>
<td>
<strong>
<input type="text" value="120040965" id="data_1">
<button type="button" id="1" class="btnSave btn btn-primary">Insert</button>
</strong>
<p>GRAND VOYAGER WIPER MOTOR REAR 04-08 £35.00</p>
</td>
</tr>
<tr>
<td>
<strong>
<input type="text" value="120040965" id="data_2">
<button type="button" id="2" class="btnSave btn btn-primary">Insert</button>
</strong>
<p>GRAND VOYAGER WIPER MOTOR REAR 04-08 £35.00</p>
</td>
</tr>
<tr>
<td>
<strong>
<input type="text" value="120040965" id="data_3">
<button type="button" id="3" class="btnSave btn btn-primary">Insert</button>
</strong>
<p>GRAND VOYAGER WIPER MOTOR REAR 04-08 £35.00</p>
</td>
</tr>
</tbody>
</table>
<script>
$('.btnSave').click(function() {
var row = this.id;
var value = $( '#data_' + row ).val();
alert( value );
});
</script>
I have html code with form:
<tr>
<form action="/some_action/" method="POST" id="send_form" class="test-form">
{% csrf_token %}
</div>
<button type="button" class="btn-add btn btn-info" aria-label="Left Align">
add <span class="glyphicon glyphicon-plus-sign"/>
</button>
</td>
<td>
<div class="courier-date-from-data">
</div>
</td>
<td>
<div class="courier-date-to-data">
</div>
</td>
<td>
<div class="start-km-data">
</div>
</td>
<td>
<div class="end-km-data">
</div>
</td>
<td>
<div class="btn-group">
<button type="button" class="btn btn-options btn-default dropdown-toggle" data-toggle="dropdown"></button>
<ul class="dropdown-menu" role="menu">
<li type="submit" class="btn-options-save"><a onclick="">save</a></li>
<li class="btn-options-cancel"><a onclick="">cancel</a></li>
</ul>
</div>
</td>
</form>
and input templates on the bottom:
<input type="number" class="form-control start-km-template" style="display: none;" name="" id="">
<input type="number" class="form-control end-km-template" style="display: none;" name="" id="">
JavaScript:
var selector2 = "start-km-0";
$( ".start-km-template" )
.clone()
.removeClass("start-km-template")
.css("display","block")
.addClass(selector2)
.attr("id", selector2)
.attr("name", selector2)
.appendTo(".start-km-data");
When I want to submit request (using just input with type="submit"), form don't recognize new input field in form tag.
How to fix this ?