We Keep Coding

javascript function only works on second click

i have a link that will call 3 js functions.
This is how i wrote the link :
echo "<td>
<a href='javascript:void(0)'
onclick=$('#f').window('open');
$(window).scrollTop($('#f').offset().top-60);
checkForMatch();
data-id='$row[0]'data-integ='$row[1]'data-type='$row[2]'
class='edit_conn'
>Edit</a></td>";
the onclick=$('#f').window('open');will open a modal and work just fine.
the $(window).scrollTop($('#e').offset().top-60); will reposition the modal and also work just fine.
however the checkForMatch(); only work on second click (this one will disable input based on textbox value)
Any clue why the checkForMatch(); function only work on second click ?
please pardon my potato english.
Edit :
here is how i wrote the checkForMatch function :
function checkForMatch() {
var input1 = document.getElementById("typeconn_edit");
var input2 = document.getElementById("countryphone_edit");
if (input1.value == 'mobile_Phone') {
input2.disabled = true;
} else {
input2.disabled = false;
}
}
Edit2 :
The "f" is a jqueryUI modal window this is how its written :
<div id="f" class="easyui-window formedit" title="Entry identity
Connectivity" data-options="modal:true,closed:true,iconCls:'icon-save'">
<?php include 'form_edit_conn.php'; ?>
</div>
the "idconn_edit", "integconn_edit", "typeconn_edit" are input textboxes
<input type="text" id="idconn_edit" name="id">
<input type="text" id="integconn_edit" name="integ_conn">
<input type="text" id="typeconn_edit" name="type_conn">
and this is how i pass values to those 3 textboxes :
(document).on("click", ".edit_conn", function () {
var id = $(this).data('id');
var type = $(this).data('type');
var integ = $(this).data('integ');
$(".formedit #idconn_edit").val( id );
$(".formedit #integconn_edit").val( integ );
$(".formedit #typeconn_edit").val( type );
});
and the "countryphone_edit" is a selectbox
<select id="countryphone_edit">
<option value="0">Please Select</option>
<?php
$query = mysql_query("SELECT Country_Name FROM tbl_country");
while ($row = mysql_fetch_array($query)) {
?>
<option value="<?php echo $row['Country_Name']; ?>">
<?php echo $row['Country_Name']; ?>
</option>
<?php
}
?>
</select>
and sorry there's no 'e' i didnt realize that one since 'f' already on a good position.

I solved it,
i added checkForMatch(); function on the passing values code (edit_conn)
(document).on("click", ".edit_conn", function () {
var id = $(this).data('id');
var type = $(this).data('type');
var integ = $(this).data('integ');
$(".formedit #idconn_edit").val( id );
$(".formedit #integconn_edit").val( integ );
$(".formedit #typeconn_edit").val( type );
checkForMatch();
});
i honestly dont understand why adding checkForMatch(); there solved my problem, but i think thats enough. Ty guys

function compare with variable in mysql

<?php $check=$ word[ 'Word'][ 'en_words']; ?>
<form id="" method="post" action="">
<label>
<span id="first"><?= $check; ?></span>
<span>EN:</span>
<input type="text" id="second" />
</label>
<input type="button" class="button" value="Check" onclick="validate()" />
<script>
function validate() {
var first = document.getElementById('first').value;
var second = document.getElementById('second').value;
if (second == first) {
alert('Ok!');
} else {
alert('No!');
}
}
</script>
Why this script doesn't work, could someone see?
I want compare variable with input to $check (mysql record).

You didn't told us what the expected result is.
Anyway, I see that you use a document.getElementById('first').value on a ''. This funcion only works with form elements.
You should use something like: document.getElementById('first').innerHTML. So, your code should look like:
....
<script>
function validate(){
var first = document.getElementById('first').innerHTML;
var second = document.getElementById('second').value;
if (second == first){
alert('Ok!');
}
else {
alert('No!');
}
}
</script>

Ensure that the $check variable is being printed. You may need to echo or print the variable:
<span id="first"><?php print $check; ?></span>
Also, the span element does not contain a value. Instead, try capturing the value with innerHTML:
var first = document.getElementById('first').value;

Since first is html tag so it will have innerHtml and second is input so it will have value
<script>
function validate(){
var first = document.getElementById('first').innerHTML;
var second = document.getElementById('second').value;
if (second == first){
alert('Ok!');
}
else {
alert('No!');
}
}
</script>
<button onclick="validate()">Click</button>

Javascript - Radio Button onChange

Here is my code:
<html>
<head>
<script type="text/javascript">
function Change(radio)
{
if(radio.value)
{
setvalue = "Yes";
radiovalue = radio.value;
value = setvalue;
ChangeValue(radiovalue,value)
}
}
function ChangeValue(radiovalue, value)
{
alert(radiovalue+"=>"+value);
}
</script>
</head>
<body>
<?php
for($i = 1; $i <= 3; $i++)
{
?>
<input type="radio" name="choice" value="<?php echo $i;?>" onchange="Change(this);" /><br />
<?php
}
?>
</body>
</html>
There are 3 radio buttons in the web page.
From the above code, when I click the first radio button, it will show alert message for the radio button that I choosen (i.e 1 => Yes).
Yes means that I choose the radio button.
No means that I didn't choose the radio button.
Now my questions is if I choose the first radio button, it will show alert message for each radio button (i.e. 1 => Yes, 2 => No, 3 => No). How should I modify?

In your example, radio.value will be the string "1", "2", or "3". All of these are truthy, so the if block will always run. You need to compare the actual value using a comparison opperator such as == in your if statement.
Example:
if(radio.value == "1")

I cut and pasted your example into a web app and it worked just the way you'd expect - both IE and chrome - so don't know why you're getting strange results. The if(radio.value) simply checks for the existence of a value (javascript thing) and is coded correctly. You might try onchange="return Change(this)" as some browsers may not like the open call.

Plese try this
<html>
<head>
<script type="text/javascript">
function Change(radio) {
for (var i = 1; i < 4; i++) {
var ele = document.getElementById("choice_"+i);
if(ele.checked) {
setvalue = "Yes";
radiovalue = ele.value;
value = setvalue;
ChangeValue(radiovalue,value)
} else {
setvalue = "No";
radiovalue = ele.value;
value = setvalue;
ChangeValue(radiovalue,value)
}
}
}
function ChangeValue(radiovalue, value) {
alert(radiovalue+"=>"+value);
}
</script>
</head>
<body>
<?php
for($i = 1; $i <= 3; $i++) {
?>
<input type="radio" name="choice" id="choice_<?php echo $i;?>" value="<?php echo $i;?>" onchange="Change(this);" /><br />
<?php
}
?>
</body>
</html>

Edit an entire column in an HTML/PHP table through jquery/javascript/ajax?

I need help!
I have a php page that generates a html table from an array(). This array contains all the lines of a csv (no problem with this):
load_csv.php
<?php
function print_array_of_arrays_to_html_table(&$array_by_reference)
{
echo "<br><table border=1 align=center id=tableID>";
for ($i = 0; $i < count($array_by_reference); $i++)
{
echo "<tr>";
for ($j = 0; $j < count($array_by_reference[$i]); $j++)
{
echo "<td align=right title='f:".$i."\nc:".$j."\nv:".($array_by_reference[$i][$j])."'>".($array_by_reference[$i][$j])."</td>";
}
echo "</tr>";
}
echo "</table>";
}
?>
My intention is to indicate a column number in a text field, change all values ​​of all cells in that column. The value would be the same for all cells in that column. For example, change all to '0' o whatever.
For now, with 'jquery' I can individually change any cell:
same load_csv.php:
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script language="javascript" type="text/javascript">
$('#tableID').click(function(event){
var original = $(event.target).text().toString();
var original_copy = original;
var retValue = prompt("\nChange value? ", original);
//if not empty and OK is pressed
if (retValue !== '' && retValue !== null)
{
//if not the same that 'original'
if (retValue !== original)
{
$(event.target).text(retValue);
}
else
{
alert("has not been modified" + original);
}
}
else
{
//if click Cancel
alert("has not been modified: " + original_copy);
}
})
</script>
But also want to change a whole column at a time. For example, calling the function onclick() of a button:
same load_csv.php:
<form>
<input type='button' value="Go back" onClick="history.go(-1);return true;"/>
<!-- if onclick button all values ​​of all cells in the column are changed -->
<br>Column:
<input type='text'/>
<input type='button' value="Change all column?" onClick="myfunction()"/>
</form>
output example:
enter link description here
Any tips (yes, all code in same php.page. Sorry for my bad english)?
Thanks in advance.
EDIT: Solution:
I created two selectbox, one showing only the columns I intend to change, and one that allows me to choose to add two values ​​(0 or 1). Then with the button I call the function. This includes the selectbox selected values. Next ​​I check single cells (td) having 0 or 1 and "Pum"! success.
<select name="cols_bool" id="cols_bool">
<option value="not_selected" selected="selected">Choose...</option>
<?php
if (count($col_with_bools) > 0)
{
for ($i = 0; $i < count($col_with_bools); $i++)
{
echo "<option value=".$i.">".$col_with_bools[$i]."</option>";
}
}
?>
</select>
<br>New bool values to insert:
<select name="value_to_replace" id="value_to_replace">
<option value="1" selected="selected">1 (TRUE)</option>
<option value="2">0 (FALSE)</option>
</select>
<input type='button' class="change" value="Change all cells?" onClick="replace()"/>
<script language="javascript" type="text/javascript">
function replace()
{
var column_select = $('#cols_bool option:selected').text();
var value_to_insert = $('#value_to_replace option:selected').text();
$("#tableID").find('tr').each(function(){
var $td = $(this).find('td');
var $td_text = $td.eq(column_select).text();
if ($td_text == '1' || $td_text == '0')
{
$td.eq(column_select).text(value_to_insert.substring(0,1));
}
});
}
</script>

you can simply do like this
function replace(value_to_replace)
{
$("#tableID").find('tr').each(function () {
var $td = $(this).find('td');
$td.eq(3).text(value_to_replace);
});
}

client side sorting using javascript

Ive been trying to build a web site that retrieves values from the database and then implements features such as sorting and filtering. I am building the query each time a filter is applied as of now, will definitely change to something more efficient. For the sorting, I want to implement it on the client side itself since the data is already present.
I went through a number posts from this forum and arrived at a piece of code that I included in mine. To give you a heads up on the web page, the sorting options are included as radio buttons. Whenever a user clicks on the "Apply" button, a javascript function is triggered which sorts the html table - which is populated using php.
Here is the code:
<script type="text/javascript">
function SortTable() {
var sortedOn = 1;
var table = document.getElementById('venue_list');
var tbody = table.getElementsByTagName('tbody')[0];
var rows = tbody.getElementsByTagName('tr');
var rowArray = new Array();
for (var i=0, length=rows.length; i<length; i++) {
rowArray[i] = new Object;
rowArray[i].oldIndex = i;
rowArray[i].value = rows[i].getElementsByTagName('td')[sortOn].firstChild.nodeValue;
}
//if (sortOn == sortedOn) { rowArray.reverse(); }
//else { sortedOn = sortOn; }
/*
Decide which function to use from the three:RowCompareNumbers,
RowCompareDollars or RowCompare (default).
For first column, I needed numeric comparison.
*/
if (sortedOn == 1) {
rowArray.sort(RowCompareStrings);
}
else {
rowArray.sort(RowCompare);
}
var newTbody = document.createElement('tbody');
for (var i=0, length=rowArray.length ; i<length; i++) {
newTbody.appendChild(rows[rowArray[i].oldIndex].cloneNode(true));
}
table.replaceChild(newTbody, tbody);
}
function RowCompare(a, b) {
var aVal = a.value;
var bVal = b.value;
return (aVal == bVal ? 0 : (aVal > bVal ? 1 : -1));
}
// Compare Strings
function RowCompareStrings(a, b) {
var index = b.localeCompare(a);
return index;
}
</script>
<div style="float: right;margin-right: -100px;" class="box2">
<h2>Sort by :</h2>
<input type="radio" id="s1" name="sort" value="1" />
<label for="f1"><?php echo 'Name'?></label>
<input type="radio" id="s1" name="sort" value="1" />
<label for="f1"><?php echo 'Location'?></label>
<br><br><br>
<div id="ContactForm" action="#">
<input name="sort_button" value="Apply" type = "button" id="sort_button" class="button" onclick="SortTable();"/>
</div>
</div>
<table>
<tbody>
while($row = mysqli_fetch_array($result))
{
$name = $row['NAME'];
$img = $row['IMAGE_SRC'];
$addr = $row['ADDRESS'];
$location = $row['LOCATION'];
echo "<script type='text/javascript'>map_function('{$addr}','{$name}','{$img}');</script>";
?>
<tr>
<td>
<a href="<?php echo $name?>">
<img src="<?php echo $img.".jpg"?>" height="100" width="100">
</a>
</td>
<td>
<a href="<?php echo $name?>">
<h3><?php echo $name?></h3>
</a>
<td>
</tr>
<?php
}
?>
</tbody>
</table>
For now, I'm fixing the sorting column number, sortedOn to 1 just to check if its working but to my dismay it is not. I have been trying to get it work since quite some time now. I am relatively new to Javascript and this is my first take on web development. Looking forward to a solution.
Thanks.

If what you want is to sort the rows of a table with javascript, you can implement sortable.js.
http://www.kryogenix.org/code/browser/sorttable/
I would recommend you that convert your query result to Json format using PHP json_encode(), this way you can deal with javascript all data in a more simple way.

Well I was able to figure out my mistake. There were multiple errors in the javascript function. Secondly the in the table was missing for the second column. In the javascript function, basically, I was comparing the rowArray objects themselves in the RowCompareStrings function. I should actually be comapring the rowArray.value with each other.