I have a table that I need to make focusable by tabbing. Right now as I tab through my page it will jump over the table entirely. I have added a href="#" and that allows tab focus on the element I put that on, but that breaks my onclick Javascript that I have. Is there any other way to do this other then doing tab indexing?
I didn't understand your questions entirely but if you are talkinf about form fill ups then use this method, and tab the input fields with a tab.. You can also change tab numbers accordingly,
<form>
<table>
<tr>
<td><input tabindex="1" name=""/></td>
<td><input tabindex="3" name=""/></td>
</tr>
<tr>
<td><input tabindex="2" name=""/></td>
<td><input tabindex="4" name=""/></td>
</tr>
</table>
Related
My table is composed of DAYS - Monday, Tuesday .... and rows to each day.
Each day in table has ADD button
By clicking on ADD button, JS add new row to particular day (monday, tuesday etc...).
Currently, JS add new row directly inside <tr> element where ADD button is stored.
I would like that by click ADD button, new row is added BEFORE next <tr class="day"> element
I have already tried: .append(), .appendTo(), .before(), .insertBefore(), any of them did not work for me.
Any ideas how to do that? --> adding new rows to the end of part of the table (or before next part of the table).
$this element:
`<a class="add_fields btn btn-primary workingday-row" data-id="70358063118960" data-fields="<tr> <td><input label="false" type="time" name="teacher[working_days_attributes][0][working_hours_attributes][70358063118960][from]" id="teacher_working_days_attributes_0_working_hours_attributes_70358063118960_from" /></td> <td><input label="false" type="time" name="teacher[working_days_attributes][0][working_hours_attributes][70358063118960][to]" id="teacher_working_days_attributes_0_working_hours_attributes_70358063118960_to" /></td> <td> <input type="hidden" value="false" name="teacher[working_days_attributes][0][working_hours_attributes][70358063118960][_destroy]" id="teacher_wor`king_days_attributes_0_working_hours_attributes_70358063118960__destroy" /> <a class="remove_record" href="#">Remove wokring Hour</a> </td></tr" href="#">Add Working Hour</a>
Jquery part of code:
$(this).closest('tr').append($(this).data('fields').replace('booking_booking_working_days_working_day_id', time));
HTML:
<tr class="day">
<td>
Monday
</td>
</tr>
<tr>
<td>HERE IS MY ADD BUTTON</td>
<tr>
HERE ARE NEWLY ADDED FIELDS
</tr>
</tr>
HERE I WOULD LIKE TO HAVE NEWLY ADDED FIELDS (probably inside another <tr></tr>)
<tr class="day">
<td>
Tuesday
</td>
</tr>
.append(html) inserts the html inside the element it's called on. Instead you can use .insertAdjacentElement('afterend', html). The key here is 'after end which tells the html be inserted after the targetElement itself.
<body>
<form method="post">
<table>
<tr>
<td>Name</td>
<td><input type="text" name="txtName" placeholder="Enter Your Name Please" /></td>
</tr>
<tr>
<td>Address</td>
<td><input type="text" name="txtAdd" placeholder="Enter Your Address Please" /></td>
</tr>
<tr>
<td colspan="2"><input type="submit" name="btnSave" value="Click to Save Me...." /></td>
</tr>
</table>
</form>
When I Click Submit Button Data are Saved in Database.
But I want When i submit data data will save and print window should be open
Try with this one
For saving data and open print window in one click you have to use AJAX and on success of AJAX you can open print window. For this change your submit button to simple button and call ajax on button click.
OR
After submitting form you can add script tag instead of header function.
<script>
window.open(URL)
</script>
Usually I see people use form to create input :
<form action="">
<table>
<tr>
<td><label for="Fname">First Name</label></td>
<td><input type="text" name="Fname" class="form-control" id="fname"></td>
</tr>
<tr>
<td><label for="Lname">Last Name</label></td>
<td><input type="text" name="Lname" class="form-control" id="lname"></td>
</tr>
<tr>
<td><label for="address">address</label></td>
<td><input type="text" name="address" class="form-control" id="address"></td>
</tr>
<tr>
<td><label for="phone">phone</label></td>
<td><input type="text" name="phone" class="form-control" id="phone"></td>
</tr>
<tr>
<td><input type="submit" value="submit" onclick="submit();"></td>
</tr>
</table>
</form>
It's make my submit button didn't work, but as soon as I remove the form tag it's work :
<table>
<tr>
<td><label for="Fname">First Name</label></td>
<td><input type="text" name="Fname" class="form-control" id="fname"></td>
</tr>
<tr>
<td><label for="Lname">Last Name</label></td>
<td><input type="text" name="Lname" class="form-control" id="lname"></td>
</tr>
<tr>
<td><label for="address">address</label></td>
<td><input type="text" name="address" class="form-control" id="address"></td>
</tr>
<tr>
<td><label for="phone">phone</label></td>
<td><input type="text" name="phone" class="form-control" id="phone"></td>
</tr>
<tr>
<td><input type="submit" value="submit" onclick="submit();"></td>
</tr>
</table>
My js only like this :
var Fname= document.getElementById("fname");
var Lname= document.getElementById("lname");
var Address= document.getElementById("address");
var Phone= document.getElementById("phone");
var Result= document.getElementById("result");
function submit(){
var valueFname=Fname.value;
var valueLname=Lname.value;
var valueAddress=Address.value;
var valuePhone=Phone.value;
Result.innerHTML="hello, "+valueFname+" "+valueLname+" good to see you. Your contact number is "+valuePhone+" , and your address "+valueAddress;
}
Why cant I wrap all my input inside form? does it need additional code?
its make my submit button didnt work
No, your submit button is working fine. Therein lies the problem you're seeing, in fact. Your JavaScript code is executing, but the time between showing any output and reloading the page because you've submitted a form is nearly instantaneous.
So your JavaScript works. And your form works. Everything works.
but as soon as i remove the form tag its work
Not quite. When you remove the form tag the form submission no longer works. All you've done is prevent the form from submitting, because you no longer have a form.
why cant i wrap all my input inside form?
You can. But it really depends on what you're trying to do. If you have a form and you want to submit it, use a form element. If you don't want to submit anything as a form, you can leave it out. That's its only purpose.
You can have inputs on the page anywhere you like, they don't need to be in forms. If you just want to interact with them via JavaScript then you can do that without a form element.
Forms are made to make HTTP methods (such as POST or PUT).
So, if you need that input's information take part in a http method, you NEED TO use form.
If your Submit button is made just for internal stuff, don't use form.
A little more information: enter link description here
Form will send the data to the file specified in action and this event is triggered by <input type="submit"/> inside a form.
You can use a <button> tag inside form to achieve what you want.
You need to set the action for your form, it is empty.
Or you can use jQuery
I have the following html:
<span style="display:none" id="progressBar">HELLO</span>
<span id="statusPremium">NULL</span>
<span id="statusLink">NULL</span>
<table>
<tr>
<td>
<input type="text" value="12345" onchange="document.getElementById('statusPremium').innerHTML='ONCHANGE';document.getElementById('progressBar').style.display='block';"/>
</td>
</tr>
<tr>
<td>
CLICK
</td>
</tr>
</table>
I enter input item then editing it and then click link. I expect both text ie. ONCHANGE ONCLICK appears. However I can see only ONCHANGE.
If I remove:
document.getElementById('progressBar').style.display='block';
the behaviour is as I expected. But if then I remove all table, tr and td tags there is again only ONCHANGE.
Could please some enlighten me why it works that way?
I have a table with 3 x 3 cells. Each cell contains a button in 1-9, when clicking on any button, the value will be appended to an input textbox.
I tried to trigger the onmouseout event in the table but that did not work. I also tried to add a div outside the table, to capture the onmouseout event.
How can I use JavaScript to trigger whether the client cursor is still over the table?
What I want is after the user clicks something in the buttons and the mouse leaves the table, I need to validate what the client clicked.
If you set the OnMouseout event on the table it will be triggered when you move the cursor over an object within the table since the cursor is no longer over the table directly.
I'm not sure what you want to do here. Do you want to raise an event when you click a button or do you want to raise an event when the cursor moves outside the table?
Edit:
The following code will raise an event every time a button is clicked.
The myClickEvent function will know which button was clicked:
<html>
<head>
<script>
function myClickEvent(obj) {
document.getElementById("myTextBox").value += obj.value;
}
</script>
</head>
<body>
<table>
<tr>
<td><input type="button" value="1" onClick="myClickEvent(this);"></input></td>
<td><input type="button" value="2" onClick="myClickEvent(this);"></input></td>
<td><input type="button" value="3" onClick="myClickEvent(this);"></input></td>
</tr>
<tr>
<td><input type="button" value="4" onClick="myClickEvent(this);"></input></td>
<td><input type="button" value="5" onClick="myClickEvent(this);"></input></td>
<td><input type="button" value="6" onClick="myClickEvent(this);"></input></td>
</tr>
<tr>
<td><input type="button" value="7" onClick="myClickEvent(this);"></input></td>
<td><input type="button" value="8" onClick="myClickEvent(this);"></input></td>
<td><input type="button" value="9" onClick="myClickEvent(this);"></input></td>
</tr>
</table>
<input type="text" id="myTextBox"></input>
</body>
</html>
try to add onmouseout event for the control that you want to validate and also you can use hover css style to solve that.