I have an html form with radio buttons. Each button has the following onclick command.
onclick='position(); this.form.submit();'
position is a function that is defined in a js functions sheet included via php at the top of the page.
function position(){
var p = $(document).scrollTop();
var hidden = document.createElement("input");
hidden.type = "hidden";
hidden.name = "scroll";
hidden.value = p;
var f = document.getElementById("quiz");
f.appendChild(hidden);
}
The position function passes along the scroll position to a page that process the form and then returns the user to the part of the page they last visited.
The first time the page loads the position function does not get written. (looking at source code through browser).
onclick='this.form.submit();'
After the form has been submitted once the function does show up, and each time afterwards.
onclick='position(); this.form.submit();'
The input radio buttons are being written with php if that makes any impact.
echo "<div class='ans'><input type ='radio' onclick='position(); this.form.submit();' class='radio' name = 'question" . $num . "' value = 'A' checked> " . $row['op1'] . "</input></div>";
Any help would be appreciated!!
Thanks
Ditch the onlick='position(); this.form.submit()' and do this on page load:
$(function() {
$('.ans .radio').click(function() {
position();
$(this).closest('form').submit();
});
});
That should work. You might want to be a bit more specific on the selectors as this will bind a click event to all radio buttons with class='radio' in a div with cöass='ans'
Related
I was wondering how it would be possible to attach an HTML form's text box value to a link. For instance, I have 3 links and each link goes to a different PHP file, however, I need to pass a variable. Because of the design of my page, I cannot use buttons. So, I created a form with a text field. How do I send that Text Fields value with the links?
EG:
<form>
<input type="text" name="test1" id="test1"></input></form>
Link 1
Link 2
Link 3
I hope this makes sense as to what I am trying to do.
EDIT:
I tried to do this dynamically, but:
OK, I made a function like this:
<script>
function awardcode()
{ var awamount = document.getElementById("awardamount");
document.write('<?php $awardvar = ' + awamount.value + '; ?>');
};
</script>
Then, I made the link via PHP that looks like this:
echo '<a id=awlink3 name=awlink3 href="index.php?siteid=gmaward&type=xp&post=' . $posts_row['posts_id'] . '&handle=' . $posts_row['handle'] . '&varamount=' . $awardvar . '">Award XP</a>';
However, that didn't work. This is my input box code:
<form><input type=text name='awardamount' id='awardamount' onchange='awardcode()' style:'width:10px;'></form>
When I put the number and then tab, it loads an empty page.
How can I adjust that?
You'll need to dynamically change the link using JavaScript. Here's one approach:
$('a').on('click',function(e) {
e.preventDefault();
var url = $(this).attr('href').split('$')[0];
window.location = url + $('#test1').val();
});
But it might be better to add an onchange event to the textbox itself, so that the HREF changes instantly and the user can see the intended destination on mouseover:
$('#test1').on('change', function () {
var val = $(this).val();
$('a[href*=\\?id\\=]').each(function (i, el) {
$(el).attr('href', function (j, str) {
return str.split('?')[0] + "?id=" + val;
});
});
});
Usually with PHP and editing you click on a link that goes to a separate PHP page that has the "ID" of the entry you want to edit, you get the ID and populate your form base on this.
I would like to know how to do this if I am using a modal form? How do I get the ID get the records associated with it then populate the modal form.
sort of like this
//dropdown behavior for resp task and sub_task
$('#r_task_id').change(function() {
var selected_task_id = $('#r_task_id').val();
$.post("Assignment/populateSubTaskDropDown", { 'selected_task_id' : selected_task_id },//$_POST['selected_task_id']
function(data){
$('#r_sub_task_id').empty();
$.each(data, function(val, text) {
$('#r_sub_task_id').append(
$('<option></option>').val(val).html(text)
);
});}, "json");
});//task
PHP code is:
$this->session->set_userdata('selected_sub_task_id', $this->input->post('selected_sub_task_id'));
$json_resp_user = $this->assignmentModel->getResponsibleUsers($this->session->userdata('selected_sub_task_id'));
$json = array();
$json[0] = "-Select-";
if( count($json_resp_user) >= 1 ){ //if there is more in the result than the -Select-
foreach($json_resp_user as $detail){
//$json[$detail->user_id] = $detail->first_name." ".$detail->middle_name." ".$detail->last_name;
$json[$detail->user_id] = $detail->first_name." ".$detail->last_name;
}
}
echo json_encode($json);
but for the whole form not just a dropdown.
When you open the modal window set the id of the record in a public javascript variable, and on submit of the modal form pass the id parameter through url.
Another way is to have a hidden variable inside the form in the modal window and set it with the while opening the modal window. So it will be get passed the update form on the modal window is submitted.
<script>
id ='' //Set this when opening the modal window
function appendId(myform)
{
myform.action = myform.action + "/" + id;
return true;
}
</script>
<div id='modalWindow'>
<form onsubmit='return appendId(this)'>
//other elements
</form>
</div>
I had a quick read of $.post() of jQuery and apparently that was what I meant =p
the part on your script with
id ='' //Set this when opening the modal window
was where I was stuck on how to read that.
http://api.jquery.com/jQuery.post/
sorry if I wasn't clear but thank you for taking the time and trouble to answer me.
I have a function below where the if statement works when it comes to adding content into a single textarea when clicking the "Add" button:
function addwindow(questionText) {
if(window.console) console.log();
if($(plusbutton_clicked).attr('id')=='mainPlusbutton') {
$('#mainTextarea').val(questionText);
} else {
$(plusbutton_clicked).parent('td').next('td.question').find('textarea.textAreaQuestion').val(questionText);
}
$.modal.close();
return false;
}
The problem is the else statement is not working when it comes to adding content within one of the appended textareas. What I want is that if a user clicks on a Plus button and adds a content by clicking on the "Add" button, the textarea which belongs in the same row as the plus button which was clicked on will add the content. What do I need to change in order to do this?
Below is the code whch shows the textareas and plus buttons which are appended:
var plusbutton_clicked;
function insertQuestion(form) {
var $tbody = $('#qandatbl > tbody');
var $tr = $("<tr class='optionAndAnswer' align='center'></tr>");
var $plusrow = $("<td class='plusrow'></td>");
var $question = $("<td class='question'></td>");
$('.questionTextArea').each( function() {
var $this = $(this);
var $questionText = $("<textarea class='textAreaQuestion'></textarea>").attr('name',$this.attr('name')+"[]")
.attr('value',$this.val());
$question.append($questionText);
});
$('.plusimage').each( function() {
var $this = $(this);
var $plusimagerow = $("<a onclick='return plusbutton();'><img src='Images/plussign.jpg' width='30' height='30' alt='Look Up Previous Question' class='imageplus'/></a>").attr('name',$this.attr('name')+"[]")
.attr('value',$this.val());
$plusrow.append($plusimagerow);
});
$tr.append($plusrow);
$tr.append($question);
$tbody.append($tr);
}
Below is the php code where it displays the "QuestionContent" and "Add" button for each row. When user clicks on the "Add" button it adds the "QuestionContent" into the single textarea on top but not in the multiple textareas which are appended.
<?php
$output = "";
while ($questionrow = mysql_fetch_assoc($questionresult)) {
$output .= "
<table>
<tr>
<td class='addtd'><button type='button' class='add' onclick='parent.addwindow();'>Add</button></td>
</tr>";
}
$output .= " </table>";
echo $output;
?>
You can view application here. Please follow the steps to use the application:
Click on "Add Question" button, then will add a textarea within a new row.
Click on the "Green Plus" button within the table row you just added, a modal window will appear.
In modal window it displays a search bar, in search bar type in "AAA" and click on "Search" button
Results will appear of your search, click on "Add" button to add a row. You will find out modal window is closed but the content from the "Question" field is not added in the textarea within the row you clicked on the green plus button
If you did the steps in the top textarea (the one above the horizontal line), then it does work, it just doesn't work for textarea which you have just added
One of your errors:
$('.plusimage').live('click', function() {
plusbutton($(this));
});
You're using jQuery 1.7 in your page, the .live method has been deprecated since jQuery 1.7. You should use .on instead.
You're also triggering your plusbutton function in your generated links:
<a value="" name="plusbuttonrow[]" onclick="return plusbutton();">
Which isn't passing any element as parameter to your plusbutton function be stored in your global var plusbutton_clicked which you are expecting. There's no reference to the clicked element then, therefore it doesn't find any element when you use the plusbutton_clicked var in the addwindow function.
Either keep the .on method or the onclick calls above to prevent the function from being fired twice.
There might be other errors as well (e.g. You're checking for id attributes which do not exist for the dynamically generated elements), but this is the main one. Also, I wonder if you don't have any deadline to finish this, it's the 10th time I see this question in the previous 3 weeks.. At least you made some progress, congratz.
Using some code to create a form dynamically which I got here: http://www.trans4mind.com/personal_development/JavaScript2/createSelectDynamically.htm
This works great. However I have a regular html table I generate with html/php to get data out of a DB. I want to replace that data with a form so when users click the edit button the original entry is replaced with a form (either textbox or pull down menu). The user makes a selection and the new table comes back with the appropriate edit.
So for example one part of the data has this in the table:
<td><?php echo $result[0] ?></td>
Using the link about to create a form dynamically I change this to:
<td id="paraID"><form id="form1" name="form1" method="post" action enctype="text/plain" alt=""><?php echo $result[0] ?></form></td>
Also note the onclick event for the edit button:
This is hard to explain but hoping someone can help me with this interaction. I need some way to say:
if (user clicks edit button)
then
replace html table with form for each entry (for example, the table returns a name called foo and a textbox will appear with foo in it but now they can edit to change the name).
If you can start out with an id for the td then it will make things easier. Then you will need an edit button somewhere. Notice: It might be nice to replace "result_0" with the name for the value/field:
<td id="result_0_parent"><?php echo $result[0] ?><input type="button" onClick="editField('result_0','select')" value="Edit" /></td>
Then in your javascript you will have the editField function defined so that it sets the content of the td to be the dynamic form. Looking at makeForm function in the example javascript, you see this happening with appendChild(myform); The function editField will be like the makeForm function except you will pass in the field_id and field_type as parameters:
function editField(field_id, field_type)
I suggest you change the line that defines mypara to define mytd or better yet, field_parent instead since in your case it will not be a paragraph element, but a td (or possibly some other type of element):
field_parent = document.getElementById(field_id+"_parent");
The example code create a select (dropdown), but I am guessing you want to create other field input types so I recommended having field_type as a second parameter to the function. This means that it would make more sense for your implementation to use myfield instead of myselect and then use the field_type parameter to decide what myfield will be.
Replace the line in the makeForm / editField function:
myselect.setAttribute("id","selectID");
with
myfield.setAttribute("id",field_id);
One more thing: To set the initial value of the input field to be the displayed content, you will need to copy the "innerHTML" of the "parent" element. So place something like this right after defining field_parent:
initial_value = field_parent.innerHTML;
and I think you can figure out the rest. If not, I can elaborate a little more.
This works great. However I have a regular html table I generate with
html/php to get data out of a DB. I want to replace that data with a
form so when users click the edit button the original entry is
replaced with a form (either textbox or pull down menu). The user
makes a selection and the new table comes back with the appropriate
edit.
This is a script that allows with a double click on values to edit them and has a button to send them back. Maybe it would be of some help to use it (or use parts of it).
<?PHP
if(count($_POST)>0)
{
echo 'You gave:<br><per>';
print_r($_POST);
echo '<a href=http://localhost/temp/run.php>Start over</a>';
exit;
}
?>
<html>
<head>
<script type="text/javascript">
/**formEditor Class
*/
function formEditorCls( )
{
/**
Constructor simulator
*/
this.lastFieldEditedId = null;
/** Change span with input box, hide the eddit button and store theses IDS
*/
this.edit=
function (field)
{
//if there was a field edited previously
if(this.lastFieldEditedId != null)
this.save();
//get the inner element of the div, it can be span or input text
var childElem = document.getElementById(field).getElementsByTagName('*')[0];
//then replace the span element with a input element
document.getElementById(field).innerHTML="<input type=text name=n_"+field+
" id=id_"+field+" value="+childElem.innerText+">";
//store what was the last field edited
this.lastFieldEditedId =field;
}//func
this.save=
function ()
{
dbq="\"";sq='\'';
//get the last value
var lastValue = document.getElementById(this.lastFieldEditedId).
getElementsByTagName('*')[0].value;
//store it as span
document.getElementById(this.lastFieldEditedId).innerHTML="<span ondblclick="+dbq+
"formEditor.edit("+sq+this.lastFieldEditedId+sq+");"+dbq+" >"+lastValue+"</span>" ;
//now must reset the class field attribute
this.lastFieldEditedId=null;
}//func
this.submit=
function (path)
{
this.save();//if ay field was edited put new values in span elements
var form = document.createElement("form");//create a new form
form.setAttribute("method", "post");
form.setAttribute("action", path);
var myDiv = document.getElementById( "fieldsDiv" );//get the div that contains the fields
var inputArr = myDiv.getElementsByTagName( "SPAN" );//get all span elements in an array
//for each span element
for (var i = 0; i < inputArr.length; i++)
{
var hiddenField = document.createElement("input");//create an input elemet
hiddenField.setAttribute("type", "hidden");
hiddenField.setAttribute("name", i);
hiddenField.setAttribute("value", inputArr[i].innerText);
form.appendChild(hiddenField);//append the input element
}
document.body.appendChild(form);//append the form
form.submit();//submit the form
}//func
}//class
formEditor = new formEditorCls( );
</script>
</head>
<body onclick="rt();">
Double click any value to change it..<br><br>
<div id="fieldsDiv">
Name:<font id="nameField">
<span ondblclick="formEditor.edit('nameField');" >Mark</span>
</font><br>
Surname:<font id="surnameField" >
<span ondblclick="formEditor.edit('surnameField');">Smith</span>
</font><br>
</div>
<input type=submit name="submit"
onclick="formEditor.submit('http://localhost/temp/run.php');" value="Submit">
</body>
</html>
I need to display a comment button which toggles a div that contains the textbox and submit comment button, but the problem I am facing is that the comments div of the first post toggles properly on click but the rest don't work
My code-
$("#comment").click(function(){
var class = $(this).attr("class");
var count = $("#text").size();
$(".comments"+class).slideToggle(100);
if (count === 0) {
$(".comments").append("<br><input type='text' id='text' class='comment'/><input type='submit' value='Comment' id='login' />");
}
else{
}
});
You can only have one element with the id of comment. Try switching that to a show-comment class.
Because with $("#comment").click(function(){ ... you only pick the first element with the ID 'comment' - but i guess, you have several posts, right? :) So make it a class instead!