Jquery with many buttons call a function with sending different parameters - javascript

I have a simple code but cant get the values of my input text. Is there any way to do this?
<?php
for ($i=0;$i<3;$i++){
echo ('<input type="text" class="form-control" name="vec" id="vec'.$i.'" value="'.$listOfData0[$i].'">');
echo ('<input type="text" class="form-control" name="drv" id="drv'.$i.'" value="'.$listOfData1[$i].'">');
echo ('<button type="button" name="updateVecButton" id="updateVecButton" value="'.$vec[$i].','.$vell[$i].'" onclick="refreshVec("'.$i.'","'.$vell[$i].'");"></button>');
}
?>
<script>
function refreshVec(i,vell){
alert (i + " "+ vell);
var value0 = $("#vec"+i).val();
var value1 = $("#drv"+i).val();
alert (value0 + " " + value1);
}
</script>

You garbled the HTML by also using double quotes in the onclick attribute. You should see it in the generated HTML.
Try
echo ('<button type="button" name="updateVecButton" id="updateVecButton" value="'.$vec[$i].','.$vell[$i].'" onclick="refreshVec(\''.$i.'\',\''.$vell[$i].'\');"></button>');
instead of
echo ('<button type="button" name="updateVecButton" id="updateVecButton" value="'.$vec[$i].','.$vell[$i].'" onclick="refreshVec("'.$i.'","'.$vell[$i].'");"></button>');

I don't know why but there is space present between refreshVec(" 2","2").
This makes string like " 2" and not "2"
That's why ID selector is selecting wrong id containing that space and you are not getting expected output
I corrected it and it is working now:
echo '<button onclick="refreshVec(\''.$i.'\',\''.$vell[$i].'\');">'.$vec[$i].','.$vell[$i].'</button>';
Note: buttons don't have attribute like value. You should put text inside <button> tag

You should call as an array of inputs. Like,
echo('<input type="text" class="form-control" name="vec[]" id="vec'.$i.'" value="'.$listOfData0[$i].'">');
echo('<input type="text" class="form-control" name="drv[]" id="drv'.$i.'" value="'.$listOfData1[$i].'">');
echo('<button type="button" name="updateVecButton[]" id="updateVecButton" onclick="refreshVec("'.$i.'","'.$vell[$i].'");"/>'.$vec[$i].','.$vell[$i].'</button>');
Change name="vec" and name="drv" As name="vec[]" and name="drv[]"
In your (
onclick="refreshVec("'.$i.'","'.$vell[$i].'");
you should change as
onclick="refreshVec(\''.$i.'\',\''.$vell[$i].'\');
As I think, the reason is you passing parameters with string values.

My solution is
$(this).prop("value");
The .val() is another thing. Thanks for your support.

Related

How to handle inputs with the same name in php to add/update them in the database?

I have an HTML input form which is have an unknown number of inputs in some stages, like when the user wants to enter more than one document he click on an add button so a new field appears to him (using JavaScript for sure).
I make the names of the inputs just the same but in an array like <input name="something[]"/> .. the problem is I don't know if what I am doing gonna work or not ..
HTML PART
<input name="uat[]" type="date"/>
</td>
<td>
<input name="uatedate[]" type="date"/>
</td>
<td>
<input name="pgldate[]" type="date"/>
PHP PART
$j=0;
while(j<100){
$sql[j]= "insert into project scope values ('$uat[j]','$uatedate[j]' , '$pgldate[j]' ;)";
$j++;
}
^^ Just before the "try"
Replace your PHP PART code with this code:
$j = 0;
while ($j < count($_POST['uat'])) {
$sql[$j] = "insert into project scope values (" . $_POST['uat'][$j] . "," . $_POST['uatedate'][$j] . "," . $_POST['pgldate'][$j] . ")";
$j++;
}

I am efforting to send a radio value of input tag in div tag to javascript

I wonder why getElementById doesn't work in radio type.
My HTML code for PHP parsing.
echo "<div id='poll".$i."'>
...
<input type='radio' name='vote' value='0' onclick='getVote".$i."(this.value)'>
...
<input type='radio' name='vote' value='1'onclick='getVote".$i."(this.value)'>
</form>
</div>";
...
<input type='text' name='txtfile' id='txt".$i."' value=".$item_link4." hidden>
$i is number given by for loop in PHP. My js code is something wrong with html code. I show you just 1 sample js code and, please see the detail.
function getVote23(str) {
...
document.getElementById("poll23").innerHTML=this.responseText;
}
}
var vote = document.getElementById("poll23").value+" "+document.getElementById("txt23").value+" "+getCookie("username");
xmlhttp.open("GET","poll_vote.php?vote="+vote,true);
xmlhttp.send();
}
And I have tested the result if the vote value is sent to poll_vote.php.
Next is the first part of poll_vote.php code.
$vote = $_GET['vote'];
echo $vote;
I received the next result.
undefined www.doctorsnews.co.kr-news-articleView.html-idxno=123372 Ohjho
Why null show up? Where does the value of onclick function go out?
Please help me.
Change radio name by name='vote'.$i and pass $i on click of radio button to get vote function and no need to generate repeated code for each block so that you can get value of related radio by
<form >
<img src='./imoticon/good.png' style='width:29px;height:29px;'>좋아요:
<input type='radio' name='vote'.$i value='0' onclick='getVote($i)'>
<img src='./imoticon/bad.png' style='width:29px;height:29px;'>싫어요:
<input type='radio' name='vote'.$i value='1'onclick='getVote($i)'>
</form>
function getVote(index) {
var vote = document.querySelectorAll('input[name="vote'+index+'"]:checked')[0].value+" "+document.getElementById("txt"+index).value+" "+getCookie("username");
xmlhttp.open("GET","poll_vote.php?vote="+vote,true);
xmlhttp.send();
}
The Right code is below.
var vote = str +" "+document.getElementById("txt23").value+" "+getCookie("username");
I appreciate Syscall's brief and right answer.
I didn't cast any downvote ever. But I realized many developers cast that easily and they didn't give any advice nor any answer.
I don't understand that action.
In oriental proverb,
見指忘月
Every developer will search that meaning easily.

Can't get value using id

I can't get the value using id. In my code I put like this
view
<input type="text" value="<?php echo $add->class;?>" name="cls_<?php echo $add->id;?>" id="cls_<?php echo $add->id;?>"/>
Here I got A
But I can't get the value using this
script
function Add(id){
var cls = document.getElementById('cls_'+id).value;
alert(cls);
}
First step you must making sure for this variable $add->id;, you can check it in inspect element of your browser. Then as I know the value function of jQuery is .val(). so try this document.getElementById('cls_'+id).val();. Hope it helps you :)
Please try as below, if even then not working then please check - $add varaible data using var_dump($add) or print_r($add).
Please check fiddle - https://jsfiddle.net/sashant9/tm7ukbqe/
php -->
<input type="text" value="<?php echo $add->class;?>" name="<?php echo "cls_".$add->id;?>" id="<?php echo "cls_".$add->id;?>"/>
jquery -->
function Add(id){
var cls = document.getElementById('cls_'+id).value;
alert(cls);
}

Cancel a form to be submitted, do not change the data of the entity

I have a div
<div id="updateChoice%s" class="text-center"></div>
which shows a the following upon a "updateText" button is clicked
function updateText(urlsafe) {
document.getElementById("updateChoice"+urlsafe).innerHTML +=
'<br><br><form id="dynForm" action="/updateText" method="post" >' +
'<textarea name="newContent" rows="5" cols="80"></textarea>' +
'<input type="hidden" name="update" value=' + urlsafe + '>' + '<br><br>' +
'<input class="choice" type="submit" value="Submit"></input> <button class="choice" onclick="cancelUpdate('+ urlsafe +')">Cancel</button>' +
'</form>';
}
I want to cancel the updating of the text but it doesn't work unless "newContent" is empty, here is /updateText file and cancelUpdate(urlsafe)
/updateText:
class UpdateText(webapp2.RequestHandler):
def post(self):
greeting_key = ndb.Key(urlsafe=self.request.get('update'))
event = greeting_key.get();
if(self.request.get('newContent') != ''):
event.content = self.request.get('newContent');
event.put();
self.redirect('/events');
cancelUpdate(urlsafe):
function cancelUpdate(urlsafe) {
document.getElementByName("newContent").innerHTML="";
document.getElementById("dynForm").submit();
}
any ideas?
The /updateText handler remains on not updating the text if upon submission it is empty, so do not change anything:
In the cancelUpdate(urlsafe) function, use this aproach:
function cancelUpdate(urlsafe) {
document.getElementById("updateChoice"+urlsafe).innerHTML = "";
}
Add \' to the parameter urlsafe as you pass it and not ". So here is correct javascript function call to div#updateChoice%s is:
function updateText(urlsafe) {
document.getElementById("updateChoice"+urlsafe).innerHTML =
'<br><br><form id="dynForm" action="/updateText" method="post" >' +
'<textarea name="newContent" rows="5" cols="80"></textarea>' +
'<input type="hidden" name="update" value=' + urlsafe + '>' + '<br><br>' +
'<input class="choice" type="submit" value="Submit"></input><button type="button" class="choice" onClick="cancelUpdate(\''+ urlsafe +'\')">Cancel</button>' +
'</form>';
}
Your question is very difficult to understand (What do you mean by "cancel the updating of the text"? What did you expect to happen? What exactly "doesn't work"?).
Also, there are multiple issues with the code you provided (none of which have to do anything with GAE, Python or webapp2), here are a few that might be helpful to resolve your issue:
1) Your cancelUpdate function accepts a urlsafe parameter but is not using it.
2) In your cancelUpdate function you're using a non-existing function getElementByName, you probably meant to use its plural version getElementsByName()
3)
On the same document.getElementByName("newContent").innerHTML=""; line you are retreiving an element with the name newContent which is a <textarea> element and are attempting to empty its innerHTML property, but a <textarea> doesn't have one. If you want to empty a <textarea>'s contents - you need to do document.getElementByName("newContent").value=""; instead.
Since your cancelUpdate function has an unused parameter urlsafe and although it's not clear what your issue is but since in your updateText function you are creating an element with id="updateChoice"+urlsafe and assuming that when you hit cancel - you also want to destroy that form, then your cancelUpdate would look as simple as this:
function cancelUpdate(urlsafe) {
document.getElementById("updateChoice"+urlsafe).innerHTML = "";
}
4)
Your "Cancel" button doesn't have a type specified which means it will default to submit even when you don't want to submit the form so you need to add type="button" to prevent the submission.
You are calling document.getElementById("dynForm").submit(); in your cancelUpdate function which in the combination with the previous issue will submit your form twice.

JQuery - Disable form unless value isn't NULL?

Not too familiar with JQuery, but I'm basically trying to do the same thing that asked here:
Inputs disabled until previous input filled in
.. And that question was answered successfully, with this being the most suitable answer: http://jsfiddle.net/WYhNm/ (The code I'm using as well)
...In my case, however, there's an exception: If the field already has a value, and if that value is not null, then it shouldn't be disabled. The reason for this is because I'm working with a PHP/HTML5 form that allows previewing before submission - So the field's value is passed through the form, and put back into the the field as it's value all on the same page.
Example:
//PHP
$tag1 = $_POST["Tag1"];
$tag2 = $_POST["Tag2"];
$tag3 = $_POST["Tag3"];
$output ='<form method="post" name="post_form"
action="process_post.php">
<input type="text" class="tag" name="Tag1" value="' . $tag1 . '">
<input type="text" class="tag" name="Tag2" value="' . $tag2 . '" disabled>
<input type="text" class="tag" name="Tag3" value="' . $tag3 . '" disabled>
<button type="submit" name="submit" value="publish_post">Publish Post</button>
<button type="submit" name="submit" value="preview_post">Preview Post</button>
</form>';
I've tried running comparisons in jQuery using my PHP knowledge - That didn't go so well as I have no idea what I'm really doing:
var next_step = $(this).next('.tag');
var input = $(this).val('.tag');
if ($(this).val()) {
next_step.attr('disabled', false);
}
elseif ( input == "" ) { //Is elseif even valid here?
next_step.attr('disabled', true);
}
tl;dr - Using this JSFiddle, how can I enable the "disabled" fields if their value = anything non-null?
I hope I understand your question correctly.
$('.step').change(function() {
var next_step = $(this).next('.step');
// If the element *has* a value
if ($(this).val()) {
next_step.attr('disabled', false);
}
// If the element doesn't have a value
else {
if(!next_step.val()) next_step.attr('disabled', true); // <--
}
});
Only disable if your element's value evaluates to false.
if(!next_step.val()) next_step.attr('disabled', true); // <--
Hope this helps!

Categories