I have created this simple form
<html>
<head>
<title>Datatable</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script type="text/javascript" src="../jquery-1.11.3.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../jquery/Jobseeker/EditDatatable.js"></script>
</head>
<body>
<form>
<table id="example">
<tr>
<td>
<label>Ab Va</label>
</td>
<td>
<input type="text" value="99"/>
</td>
</tr>
<tr>
<td>
<label>Sa Va</label>
</td>
<td>
<input type="text" value="9986"/>
</td>
</tr>
</table>
<button id="btn">Edit</button>
</form>
</body>
</html>
The jquery code to edit the input textbox of this table is
$(document).ready(function() {
var table = $('#example').DataTable();
$('button').click( function() {
var data = table.$('input, select').serialize();
alert(
"The following data would have been submitted to the server: \n\n"+
);
return false;
} );
} );
The problem what I am facing is the input textbox field id editable without click of the button "Edit".
But I want it to be editable only when the user clicks on the Edit button.
Please let me know how can i do this
Use this
$(document).ready(function() {
var table = $('#example').DataTable();
$('button').click( function() {
$("input[type=text]").attr("readonly", false);
var data = table.$('input, select').serialize();
alert("The following data would have been submitted to the server: \n\n"+);
return false;
});
});
And change your input type="text" tags with readonly attribute as below
<input type="text" value="99" readonly />
you can add disabled attribute to input and then remove it on btn click.
<input type="text" value="99" disabled/>
<input type="text" value="9986" disabled/>
$(document).ready(function() {
var table = $('#example').DataTable();
$('button').click( function() {
$('input').removeAttr('disabled');
var data = table.$('input, select').serialize();
alert("The following data would have been submitted to the server: \n\n");
return false;
} );
} );
Related
I want to extract the header row of the csv files i upload and display them as checkbox options. Currently, I split based on "\n", then on "," to get the individual column names. However, it does not work for all csv files and some do not get split properly (eg, data cells are returned as column headers). Is there any functions I can use instead? Thanks! My code is shown below.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<!-- jquery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.7.7/xlsx.core.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xls/0.7.4-a/xls.core.min.js"></script>
<script type="text/javascript">
/*---CSV FUNCTION---*/
function getColumns_csv() {
var reader = new FileReader();
reader.onload = function(e){
var data = e.target.result;
var header = data.split("\n")[0] //<--- is there a better way to split columns?
header = header.split(",");
var cnt = 1;
$('#columnCheckbox').empty();
header.forEach(function(y){
$('#columnCheckbox').append('<td><input type="checkbox" name='+y+' id="columnSelect'+cnt+'" class="chkbx">'+y+'</td>');
cnt++;
});
$('.chkbx').on('click',function(){
if($('.chkbx:checked').length == $('.chkbx').length){
$('#checkall').prop('checked',true);
}else{
$('#checkall').prop('checked',false);
}
});
$('.hiddeninputs').show();
$('#submission').show();
}
reader.readAsText($('#datafile')[0].files[0]);
}
/*---//CSV FUNCTION---*/
</script>
<script type="text/javascript">
//select all button
$(document).ready(function(){
$('#checkall').on('click',function(){
if(this.checked){
$('.chkbx').each(function(){
this.checked = true;
});
}else{
$('.chkbx').each(function(){
this.checked = false;
});
}
});
});
</script>
</head>
<body>
<div>
<h3>Upload File</h3>
<!-- form to post file -->
<form method="post" enctype="multipart/form-data" id="fileform">
<input type="file" name="datafile" id="datafile">
<button type="button" class="btn btn-info" name="upload" id="upload" onclick="getColumns_csv()">Upload File</button>
<br></br>
<table class="hiddeninputs" hidden="hidden">
<tr>
<td><input type="checkbox" id="checkall">Select all</td>
</tr>
<tr id="columnCheckbox"></tr>
</table>
<br>
<input type="submit" class="btn btn-info" value="submit" id="submission">
</form>
</div>
</body>
</html>
Try with this:
var header = data.split(/[\r\n]+/)[0];
If your problem is with line splitting, this will cover more possible end of line character.
Here is My code:
HTML Portion
<form id="myform" action="whatever.php">
<lable name="text">enter text</label>
<input id="in" type="text" />
<input id="in2" type="text" />
<input type="submit" id="submit" />
</form>
jquery Code:
(function($){
$('#myform').on('click', '#submit', function(e) {
var val = $(this).find('#in').val();
$('ol.list').append('<li class="text-dark"><p>' + val + '.</p></li>');
e.preventDefault();
});
})(jQuery);
Output:
1.undefined.
2.undefined.
3.undefined.
On your code this inside the callback function points to the button with id #submit not the form itself.
You could just use the submit event, and your code will work fine
(function($){
$('#myform').on('submit', function(e) {
e.preventDefault();
var val = $(this).find('#in').val();
$('ol.list').append('<li class="text-dark"><p>' + val + '.</p></li>');
});
})(jQuery);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
</head>
<body>
<ol class="list"></ol>
<form id="myform" action="whatever.php">
<label name="text">enter text</label>
<input id="in" type="text" />
<input id="in2" type="text" />
<input type="submit" id="submit" />
</form>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</body>
</html>
Then element with id in is child element of form element not the submit button.
You need to do the following by getting to parent form element and then find inside that your element as your input element is not in the submit button :
var val = $(this).closest("form").find('#in').val();
$(this).closest("form") will select the form and then find('#in') will select the element with id in and then val() will get the value of it.
See the working DEMO fiddle
I have a basic table that I am creating from text input and when you click the "addTask" button it adds a tr with an empty text box and clicking the "delTask" button should delete the rows from the table that have checkboxes checked.
Everything works perfectly in JSFiddle (except the line to render last textbox readonly which only works outside of JSFiddle) but when I try to test the code out live the "delTask" button does not work correctly. It will delete all rows except the first one in the table.
I'm fairly new to JQuery so please don't judge if it's something simple but I have really searched for an answer and tried everything I could find. Can anyone help me figure out what is wrong here? Thanks in advance.
EDIT I have fixed the initial issue of the delTask button not working at all by changing $(":checkbox[checked='true']") to $(".checkbox:checked") when testing outside of JSFiddle but still cant get the button to delete the first row on the table in a live test.
JSFiddle link: http://jsfiddle.net/2aLfr794/14/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
</head>
<body>
<table id="tasks" cellpadding="3" cellspacing="3" border="0">
<tr>
<td><input type="checkbox"></td>
<td><input type="text" class="text"></td>
</tr>
</table>
<br>
<input type="button" id="addTask" value="Add Task" />
<input type="button" id="delTask" value="Delete Tasks" />
<script>
$("#addTask").click(function(){
var newTxt = $('<tr><td><input type="checkbox"></td><td><input type="text" class="text"></td></tr>');
$(".text").last().prop("readonly", true);
$("#tasks").append(newTxt);
});
$("#delTask").click(function(){
$(".checkbox:checked").each(function(){
var curTask = $(this).parents('tr');
curTask.remove();
});
});
</script>
</body>
</html>
Your Issues:
1.You are not assigning class checkbox to default checkbox and dynamically created checkboxes.
2.To access a checked element the syntax is $(".checkbox[checked='checked']")
Your Updated Code:
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<body>
<table id="tasks" cellpadding="3" cellspacing="3" border="0">
<tr>
<td>
<input type="checkbox" class="checkbox">
</td>
<td>
<input type="text" class="text">
</td>
</tr>
</table>
<br />
<input type="button" id="addTask" value="Add Task" class="addSubmit" />
<input type="button" id="delTask" value="Delete Selected Tasks" />
<script>
$("#addTask").click(function() {
var newTxt = $('<tr><td><input type="checkbox" class="checkbox"></td><td><input type="text" class="text"></td></tr>');
$(".text").last().prop("readonly", true);
$("#tasks").append(newTxt);
});
$(document).ready(function() {
$("#delTask").click(function() {
console.log($(".checkbox[checked='checked']"))
$(".checkbox:checked").each(function() {
var curTask = $(this).parents('tr');
curTask.remove();
});
});
});
</script>
</body>
if you get "$ is not defined" error, try writing
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> as <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
Note the "http:" before "//cdnjs" which is needed when you are running those from local machine, and not a webserver. At least it was always required for me.
$("input[type=checkbox]:checked")
worked for me
I am working on a history search function.
I have managed to get a working code to save the value from the textbox but I do not know how to load them into a listbox.
I want a listbox with clickable items so that I can click on a previous search value and load that value as I do from the textbox.
Here is my code:
<!doctype html>
<html lang="en">
<head>
<title>Test</title>
<meta charset="utf-8>
<link rel="stylesheet" type="text/css" href="test.css">
<script src="jquery.js"></script>
<script src="j.js"></script>
</head>
<body>
<center>
<table>
<tr>
<td style="text-align: center">
<font size="22">Sök order</font>
</td>
</tr>
<tr>
<td>
<form action="test.php" method="post">
<input style="font-size: 44pt; text-align: center" size="9" type="text" name="txtSearch" id="txtSearch"/>
<input type="submit" id="submit" value="submit">
</form>
</td>
</tr>
</table>
</center>
</body>
</html>
And the j.js that handles the local storage function.
$(function () {
$("#submit").click(function () {
var txtSearch = $("#txtSearch").val();
localStorage.setItem('searchvalue',txtSearch);
});
});
And last my test.php that handles the post search request
<?php
$txtSearch = $_REQUEST['txtSearch'];
header('Location: '.'https://mywebsite.com/se/editor/order_info.php?webshop=23946&ordernr='.$txtSearch);
?>
How can I achieve this?
Thank you.
by js, you can
window.location = "https://mywebsite.com/se/editor/order_info.php?webshop=23946&ordernr="+localStorage.getItem('searchvalue');
to save in listbox or any other
document.getElementById("id").value=localStorage.getItem('searchvalue');
to save in array
var a = [];
a[0]=localStorage.getItem('searchvalue');
I Write This code For Registration of a User. Now I want to Validate this Page Whether all the Fields are Filled by the user or Not. The Same Script Code I Write to Login page It's Showing an alert if any one filed empty in the page. But it is not working for this Page.
The Main Difference is i Used Div in Login Page here I Used Table.
Registration Page Code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="css/Registration.css">
<script>
function validateForm()
{
var a=document.forms["regform"]["user"].value;
var b=document.forms["regform"]["pass"].value;
var c=document.forms["regform"]["copa"].value;
var d=document.forms["regform"]["mono"].value;
if(a==""||b==""||c=""||d="")
{
alert("Please Enter All the Fields");
return false;
}
else
{
window.location="afterregister.html"
//alert("Registered Successfully");
}
}
</script>
</head>
<body>
<h1>Registration</h1>
<form name="regform" onsubmit="return validateForm();" method="post">
<table>
<tr>
<td><label>Username:</label></td>
<td><input type="text" name="user"/></td>
</tr>
<tr>
<td><label>Password:</label></td>
<td><input type="text" name="pass"/></td>
</tr>
<tr>
<td><label>Confirm Password:</label></td>
<td><input type="text" name="copa"/></td>
</tr>
<tr>
<td><label>Mobile Number:</label></td>
<td><input type="text" name="mono"/></td>
</tr>
<tr>
<td></td>
<td><input type="button" onclick = "return validateForm()" value="Register" name="" class="row1" />
<input type="button" name="" value="Cancel" class="row1"></td>
</tr>
<tr>
<td></td>
<td><input type="button" name="" value="Forgot Password" class="row2"></td>
</tr>
</table>
</form>
</body>
</html>
Login Page Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="css/Login.css">
<script>
function myFunction()
{
var x=document.forms["loginform"]["user"].value;
var y=document.forms["loginform"]["pass"].value;
if(x==""||y=="")
{
alert("Please Enter All the Fields");
return false;
}
else
{
window.location="afterLogin.html"
}
}
</script>
</head>
<div></div>
<body>
<h1></h1>
<form name="loginform" onsubmit="return myFunction();" method="post">
<div class="username"><label>Username:</label><input type="text" name="user"/></div>
<div class="password"><label>Password:</label><input type="text" name="pass"/></div>
<div class="buttons"><input type="button" onclick = "return myFunction()" value="Login" name=""/> <input type="button" value="Cancel" name=""/></div>
</form>
</body>
You are already calling the validation function on your form submit onsubmit="return myFunction();". So there isn't any need to call it again on your button click. So please change
<input type="button" onclick = "return validateForm()" value="Register" name="" class="row1" />
to
<input type="submit" value="Register" name="" class="row1" />
And do this in your script
<script>
function validateForm()
{
var a=document.forms["regform"]["user"].value;
var b=document.forms["regform"]["pass"].value;
var c=document.forms["regform"]["copa"].value;
var d=document.forms["regform"]["mono"].value;
if(a===""||b===""||c===""||d==="")
{
alert("Please Enter All the Fields");
return false;
}
else
{
window.location="afterregister.html"
//alert("Registered Successfully");
}
}
</script>
Solution:
Do the following 2 steps:
1- First close your <input> tags as either of the following method:
i. <input type = "textbox" name = "name" /> <!-- This is suggested -->
OR
ii. <input type = "textbox" name = "name"></input>
2- Go through these 2 useful links - it will guide you through what you exactly need:
Form Validation Tutorial - 1
Form Validation Tutorial - 2