[SOLVED] Crazy script

atholon · November 6, 2007

Alright, I have been messing around with trying to get this to work but I am novice when it comes to programming so please bear with me.

I am trying to write a script that is a tutorial page...it will have the follow features:

1. Ajax PHP integration

2. When you click on a link it adds a new text field and picture upload field to add individual steps.

3. When the form is submitted it will show the text in a submitted form but will allow the user that submitted it to click on the text and a text field will appear with the same information so they can edit it.

I have something like it here in the code below but I can`t seem to come up with how I can add various fields (up to 10 steps) anyone have a good idea?

<html>
<head>
<script type="text/javascript" src="prototype.js"></script>

<script type="text/javascript">

/* Create click event listener for both edit and save button 
 * This function is loaded during page load.
 */
var clicked=1;
var step=1;
var count = 1;

  function init()
{
	//call function edit_in_place when user click on teh edit button
	Event.observe("edit", "click", function(e){ edit_in_place() });

	//call function save when user clicks on the save button
	Event.observe("save", "click", function(e){ save() });

	Event.observe("cancel", "click", function(e){ cancel() });
}
        

/* 
 * This function makes the text editable
 */
function edit_in_place()
{
  if (clicked=="1")
  {
    //show the save button
	$("save_settings").style.display = "block";

	//hide the edit button
	$("edit_settings").style.display = "none";

	//replace the article title text with textbox
	var article_title = '<input type="text" name="article_title" id="article_title"';
	article_title += 'size="30" value="'+$('title').innerHTML+'" >';

	$("title").innerHTML = article_title;


	//replace the article body text with textarea


    

    var article_body = '<textarea cols="30" rows="5" name="article_body[]" id="article_body">';
	article_body += $('body').innerHTML+'</textarea>';
    $("body").innerHTML = article_body;
	clicked=2;
	}
	else
	{
	 save()
	}
    
}



/*
 * This function will post the article changes (title and body text) to articles.php
 */
function save()
{
	new Ajax.Request("articles.php", 
		{
			method: "post",
			postBody: "title="+$F("article_title")+
			"&body="+$F("article_body")+"&save="+$F("save"),
			onComplete: show 
		}
	);
}

/*
 * show the new changes made when clicked save
 */
function show(res)
{
	$("title").innerHTML = $("article_title").value;
	$("body").innerHTML = $("article_body").value;
	$("save_settings").style.display = "none";
	$("edit_settings").style.display = "block";
	clicked=clicked-1;
}

/*
 * reset changes. Populate divs with the orignal saved data
 */
function cancel()
{
	$("title").innerHTML = "Edit the article title here...";
	$("body").innerHTML = "Edit the article body text here...";
	$("save_settings").style.display = "none";
	$("edit_settings").style.display = "block";
}

</script>

</head>

<body onload="init()">
<div>Title:</div>
<div id="title" onclick="edit_in_place()">
	Edit the article title here...
</div>

<br>
<div>Body:</div>
<Table border="0"><tr><td onclick="edit_in_place()">
<div id="body">Edit the article body text here...</div>
  </td></tr></table>

  <div id="edit_settings">
	<input type="button" id="edit" name="edit" value="edit" >		
</div>

<div id="save_settings" style="display:none">
	<input type="button" id="save" name="save" value="save"> 
	<input type="button" id="cancel" name="cancel" value="cancel">

</div>

</body>

</html>

atholon · November 6, 2007

Guess what I am asking is too complicated. :|

atholon · November 7, 2007

Well I came up with the script to add text fields but I am not sure how I can remove them now for when someone gets click happy and adds too many.

<script type="text/javascript">
		function AddStep()
	{
        var stepnumber= document.createElement("text");
        stepnumber.innerHTML="Step<br>";
        
        var desc = document.createElement("textarea");
        desc.name = "step[]";
			desc.rows = "15";
			desc.cols = "65";
			desc.value= "Booger";

			var brkln = document.createElement("<br>");
			document.getElementById("puthere").appendChild(stepnumber);
       	document.getElementById("puthere").appendChild(desc);
       	document.getElementById("puthere").appendChild(brkln);
	}
	function RemoveStep()
	{
     var removeprocess = document.getElementById("puthere")
     removeprocess.removeChild(puthere);
	}

</script>


</head>

<body>




<div id=puthere ></div>
<a href=javascript:AddStep();>Add Field</a>
<a href=javascript:RemoveStep();>Remove Field</a>

atholon · November 7, 2007

well for those that are in the same pickle the reason why it wasn`t working was because I was missing an Id tag on the desc variable.

I also needed to pass the variable in the () to the new function.

Very simple

Sign In

[SOLVED] Crazy script

Recommended Posts

atholon

Link to comment

Share on other sites

atholon

Link to comment

Share on other sites

atholon

Link to comment

Share on other sites

atholon

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information