|
JavaScript - Post Form Input On A <li>
Allright, so i got index html, and on the head of the document i got jquery already, and what i got is a form, and what i want it to do is that once the input is sumbmited, to post it on a list. BUt something is missing here or maybe im doing it wrong, i need some guidance plz.
here is my table: Code: <form name="postbar_add_post" id="postbar_add_post" method="post">
<fieldset>
<legend>Write text here ...</legend>
<input type="text" name="addcontentbox" id="addcontentbox" />
<input type="button" name="addpost" value="Submit" class="submit" />
</fieldset>
</form>
and heres is the function that i have on the head, where what i try is to make it post on the list: Code: <script type="text/javascript">
$(document).ready(function(){
$("form#postbar_add_post").submit(function() {
var message_wall = $('#addcontentbox').attr('value');
$.ajax({
type: "POST",
data:"addcontentbox="+ addcontentbox,
success: function(){
$("ul#wall").prepend("<li>"+addcontentbox+"</li>");
$("ul#wall li:first").fadeIn();
}
});
return false;
});
});
</script>
But is just not working :S .... any ideas/guidance? xD . Btw, on the body, theres only that table above, and a " <ul id="wall"></ul> " , wich is where im trying the content to be posted on. Any ideas where the flaw is ? =\ Similar TutorialsI am thinking this should be fairly easy but yet I am not getting far. I want to have a form with a single text imput field for a zip code. Depending on which zip code the user enters will determine which url they will be sent to. If they enter a zip code which is not in the script, they would be sent to a default url. I am also assuming this can be accomplished with javascript. Any help is greatly appreciated. I have some basic HTML knowledge but rely pretty heavily on WYSIWYG editors (dreamweaver). I think this might be more of a PHP question and not necessarily require a js, but here it is. What I am trying to do is learn how to build a directory in a site that allows any visitor to the site to add A) the company's name, B) the site URL, and C) possibly a brief description. Ideally, the site would also have a drop down menu to select the category in which to post it. Is this too big an undertaking? Any help is greatly appreciated. And if anyone knows a good list of PHP actions that would be very helpful. Hi to all, I have a dynamic form, when a button is clicked 3 more fields appear, the function is to colect for example from date [02/02/2010] to date [10/02/2010] equals price [250$] per week and if you want another period just click the button and 3 more fields appear. How do I get all this data to PHP? Code: <script type="text/javascript">
var counter = 3;
function addNew() {
// Get the main Div in which all the other divs will be added
var mainContainer = document.getElementById('mainContainer');
// Create a new div for holding text and button input elements
var newDiv = document.createElement('div');
// Create a new text input
var newText = document.createElement('input');
newText.type = "text";
newText.value = "DD/MM/AAAA";
newText.name = counter++;
var newText1 = document.createElement('input');
newText1.type = "text";
newText1.value = "DD/MM/AAAA";
newText1.name = counter++;
var newText2 = document.createElement('input');
newText2.type = "text";
newText2.value = "0";
newText2.name = counter++;
// Create a new button input
var newDelButton = document.createElement('input');
newDelButton.type = "button";
newDelButton.value = "Delete";
// Append new text input to the newDiv
newDiv.appendChild(newText);
newDiv.appendChild(newText1);
newDiv.appendChild(newText2);
// Append new button input to the newDiv
newDiv.appendChild(newDelButton);
// Append newDiv input to the mainContainer div
mainContainer.appendChild(newDiv);
counter++;
// Add a handler to button for deleting the newDiv from the mainContainer
newDelButton.onclick = function() {
mainContainer.removeChild(newDiv);
}
}
</script>
<table style="margin-left:200px" border="0">
<tr><!-- Row 1 -->
<td width="140"><b>Start Date</b></td><!-- Col 1 -->
<td width="142"><b>End Date</b></td><!-- Col 2 -->
<td width="140"><b>Price per week</b></td><!-- Col 3 -->
</tr>
</table>
<div style="margin-left:200px" id="mainContainer"><div><input value="DD/MM/AAAA" name="0" type="text" ><input value="DD/MM/AAAA" name="1" type="text" ><input value="0" name="2" type="text" ><input type="button" value="New price" onClick="addNew()"></div>
Hi, i want to set an input value to the same value as the input selected from another input on the same form so when the user selects input 1 i want the hidden input2 to get the same value im guessing i use onsubmit because its hidden so there wont be a focus or blur this would be part of the input Code: onsubmit="(this.value = this.othervalue)" othervalue being the other input name="othervalue" is that the correct syntax allright, so with this funtion what happens is that the content of the input gets posted on div with a "ul" in it . the only thing is that is actually posting everything, even when it has nothing, it posts the blank value. How could i make it NOT post anything if the input value is blank ? ... I tried to add an iff , but its not working... =[ any Guidance pls? Code: <script type="text/javascript">
$(document).ready(function(){
$("form#postbar_add_post").submit(function() {
var addcontentbox = $('#addcontentbox').attr('value');
$.ajax({
type: "POST",
url: "postear.php",
data:"addcontentbox="+ addcontentbox,
success: function(){
$("ul#wall").prepend("<li>"+addcontentbox+"</li>");
$("ul#wall li:first").fadeIn();
document.postbar_add_post.addcontentbox.value='';
}
});
return false;
});
});
</script>
postbar_add_post = form name addcontentbox = text input name or ... should I try from the php file ? ... Any sugestions/helps/guidance/ideas are kindly appretiated Given 2 iframes named leftbox and rightbox The asp file in the "leftbox" lists the "title" field from a SQL table. Each record is listed in an HTML table and each record includes an edit button. When the edit button is clicked, the sql record's text field is opened for editing in an asp file in the "rightbox". When I click "Update" in "rightbox", the updates are posted to the SQL table. I then want both the "leftbox" and "rightbox" to update to reflect the changes. In the asp file that posts the updates, the function Code: function addPost (u)
{
parent.leftbox.location.replace ("displayposts.asp");
parent.rightbox.location.replace ("changepost.asp?u="+u);
}
is called after the updating is completed Code: ...... cn.open cn.execute sql %> <script language="javascript" type="text/javascript" > addPost(<%=uniq%>); </script> With Firefox this does exactly what I want. However, the code seems to be ignored by IE7 and IE8. When I click "Update" in IE, the "leftbox" doesn't change and the "rightbox" disappears. I can find no IE error. I would appreciate any help. Mac Hi guys, hoping you can help me out again, with this new problem. I've got a form which is acting as a calculator. Once the calculation is complete I want it so when the user presses a 'print' button it takes certain parts of the form data and displays them in a new window which would be designed for printing. how can i go about this using only javascript? thanks Hope someone can help. i have this script I found that i think does what i am looking for but i cant seem to get it to work.I think I am just overlooking something. I have a group of radio buttons in a form on a page and i am trying to get the value and image attached to the chosen radio button to pass to another form on another page.here is what i have so far. form 1 page named - giftcards.html Code: <form action="GIFTCERTIFICATES.html" name="giftcardstyle"> <input name="giftcardstocknumber" type="radio" value="BBA - 006"/> <img src="GIFTCARDS/004 BASIC4.jpg" alt="bba-006" style="width: 150px; height: 100px"> form 2 new page named - giftcertificates.html Code: <SCRIPT LANGUAGE="JavaScript" type="text/javascript"><!--
function getParm(string,parm) {
// returns value of parm from string
var startPos = string.indexOf(parm + "=");
if (startPos > -1) {
startPos = startPos + parm.length + 1;
var endPos = string.indexOf("&",startPos);
if (endPos == -1)
endPos = string.length;
return unescape(string.substring(startPos,endPos));
}
return '';
}
var passed = location.search.substring(1);
document.f1.giftcardstocknumber.value = getParm(passed,'giftcardstocknumber');
document.formname.otherfield.value = getParm(passed,'otherfield');
//--></SCRIPT>
<input type="text" name="giftcardstocknumber"/>
<img src="" style="width: 150px; height: 100px"/>
Hi, Having worked out how to send one input data using ajax, I then needed to send a form with multiple inputs. I believe I can't do this with AJAX so have tried to implement it using JQuery. The problems I am having is that my page is refreshing when I click on submit and the data is not being sent. I am more than happy to look at other ways to do this if JQuery is not the answer. All I want is a page that doesn't refresh or redirect but does submit a form. My form is: Code:
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".submit.contents").click(function(){
var para1 = $('#para1').val();
var para2 = $('#para2').val();
var para3 = $('#para3').val();
var para4 = $('#para4').val();
var para5 = $('#para5').val();
var para6 = $('#para6').val();
var dataString = ('para1='+ para1)+('para2='+ para2)+('para3='+ para3)+('para4='+ para4)+('para5='+ para5)+('para6='+ para6);
var data = 'datastring='+encodeURI(document.getElementById('datastring').value);
$.ajax ('insertcontents.php',data,function(data){
$('.result').html(data);}
});
});
</script>
</head>
<body>
<form action="" name="contents" id="contents" method="post"/>
<div class="standard">
<div class="scroll">
<textarea rows="6" cols="60" class="input" name="para1" id="para1" >
Insert Paragraph 1
</textarea>
</div>
<br />
<br />
<div class="scroll">
<textarea rows="6" cols="60" class="input" name="para2" id="para2" >
Insert Paragraph 2
</textarea>
</div>
<br />
<br />
<div class="scroll">
<textarea rows="6" cols="60" class="input" name="para3" id="para3" >
Insert Paragraph 3
</textarea>
</div>
<br />
<br />
<div class="scroll">
<textarea rows="6" cols="60" class="input" name="para4" id="para4" >
Insert Paragraph 4
</textarea>
</div>
<br />
<br />
<div class="scroll">
<textarea rows="6" cols="60" class="input" name="para5" id="para5" >
Insert Paragraph 5
</textarea>
</div>
<br />
<br />
<div class="scroll">
<textarea rows="6" cols="60" class="input" name="para6" id="para6" >
Insert Paragraph 6
</textarea>
<br />
</div>
<br />
</div>
<br />
<br />
<input type="submit" value="Submit" id="contents" name="contents" />
</form>
My insertcontents.php is: PHP Code: <?php $con = mysql_connect("localhost","user","password"); if (!$con) { die('Could not connect ' . mysql_error()); } mysql_select_db("mydb", $con); //mysql_real_escape $sql="INSERT INTO content (PId,para1,para2,para3,para4,para5,para6,date) VALUES ('{$_SESSION['Id']}','{$_POST['para1']}','{$_POST['para2']}','{$_POST['para3']}','{$_POST['para4']}','{$_POST['para5']}','{$_POST['para6']}',NOW())"; $result=mysql_query($sql) or die('Error: ' . mysql_error()); echo "Thank you for your post"; mysql_close($con); ?> Hey guys, have a bit of an issue/question... Not sure what I am doing wrong...i do not know javascript at all lol I have a URL stucture which needs to be changed according to the input fields https://sls.example.com/Spc/viewUserProfile.do?source=search&UserId=J-DOE123&vgroupName1=Dealer-jcode-USA-P4038P0122&adminflag=Y This part stays the same at all times https://sls.example.com/Spc/viewUserProfile.do?source=search&UserId= after the "=" sign, I want it to input text from a input box "J-JOE123", so if I put J-DOE123 in the first input box and run the search, I want it to pull up https://sls.example.com/Spc/viewUserProfile.do?source=search&UserId= J-DOE123 after the "J-DOE123", the next part "&vgroupName1=Dealer-" remains the same at all times https://sls.example.com/Spc/viewUserProfile.do?source=search&UserId=J-DOE123 &vgroupName1=Dealer- the next input box would have a drop down with 2 selections (jcode and lcode) so depending on which one is chosen, that is how it would populate the URL https://sls.example.com/Spc/viewUserProfile.do?source=search&UserId=J-DOE123&vgroupName1=Dealer- jcode next, i would need for it to put a "-" after the chosen jcode or lcode in the URL, which will also be there at all times https://sls.example.com/Spc/viewUserProfile.do?source=search&UserId=J-DOE123&vgroupName1=Dealer-jcode - the next input box would have a drop down with 2 selections (USA or CAN) so depending on which one is chosen, that is how it would populate the URL https://sls.example.com/Spc/viewUserProfile.do?source=search&UserId=J-DOE123&vgroupName1=Dealer-jcode- USA next, i would need for it to put a "-" after the chosen jcode or lcode in the URL, which will also be there at all times https://sls.example.com/Spc/viewUserProfile.do?source=search&UserId=J-DOE123&vgroupName1=Dealer-jcode-USA - next, i will have a drop down box containing several hundred codes such as "P0122" and many more. for this, I would need for the display value to be "P0122" but when the URL gets populated, it would have to be "P4038P0122" https://sls.example.com/Spc/viewUserProfile.do?source=search&UserId=J-DOE123&vgroupName1=Dealer-jcode-USA- P4038P0122 The reason why the entire code must change is because P0122 would be P4038P0122, but if it is P0165, it would be N1534P0165, so each code would have its own first part and second part, but in the drop down box, i want it to only display the 2nd part P0122/P0165/etc.. because that is what I go by, but the system only reads full codes. I do have a spreadsheet with the entire list of FULL codes and can do an extract from each cell in order to get the SHORT code. and finally, the URL would have to end with "&adminflag=Y" and will remain the same at all times. https://sls.example.com/Spc/viewUserProfile.do?source=search&UserId=J-DOE123&vgroupName1=Dealer-jcode-USA-P4038P0122 &adminflag=Y So, all together I would have 4 input fields in the form. UserID, jcode/lcode, USA/CAN, and Code. Please help who ever can. If you need more info, please let me know and I shall try my best to explain further. Thanks in advance guys Not sure how to describe this. I've been tasked with the responsibility of creating a web form. That's not the problem and I can do that. The trick is, each field needs to be incased in it's own box that flies in from the left. So, the first box that flies in from the left would be email address, when you click enter, it flies off to the right and the next box flies in from the left asking for the persons name. Is it possible to do this and where might I go to learn more about doing this type of coding. Hi, I've devised a javascript to guess what a user is typing in. That all works, but I'm stuck on how to take that value the user has submitted and put it back into the form. At the moment my form is: <form method="post" action="/bin/openathenssp_isapi.dll?type=ukfed&dir=req&requestURL=index.php" onsubmit="send_sso('login_form', 'loading', '<?=SITE_URL?>'); return false;"> <input type='text' name='uni_name' id='uni_name' value='' autocomplete="off"> <input type="hidden" name="entityID" id="entityID" /> //Where the name is guessed <script>actb(document.getElementById("uni_name"),customarray);</script> <input type='submit' name='submit' value='submit'> </form> So basically I'm trying to put uni_name into the entityID. Here's my javascript: function send_sso(ajax_div, loading_div, site_url) { replace_this_div = ajax_div; replace_loading_div = loading_div; var entityID = document.getElementById("entityID").value; if (uni_name == "Bournemouth University"){ document.getElementById('entityID').value = "https://idp.bournemouth.ac.uk/shibboleth"; ...MORE INSTITUTIONS GO HERE... } else { alert("Sorry, the institution '" +uni_name+ "' was not recognised or does not have access to this service."); } } But this does not seem to be working - any ideas? Hi friends, i'm using greybox on my website, and using survey. i want when click submit button then post form data to opened greybox window.. but can't.... my form actions <form action="anket.php?islem=ok" method="post" onSubmit="javascript:return GB_showCenter('Anket',this.action, 280, 350)" > greybox window open, but can't show post data.. can anyone help me ? sorry for may bad english Hi, I have a problem with sending data from a form to a php script with AJAX. To test if it works, I try to send data from the form, print it in the php with "echo", and then put it back in the initial html file. My Javascript code is: Code: function registerPrivateUser()
{
xmlhttp=GetXmlHttpObject();
if (xmlhttp==null)
{
alert ("Your browser does not support AJAX!");
return;
}
var postData="firstName="+ document.getElementById("txtFirstName").value;
var url="classes/users/checkRegistration.php";
xmlhttp.onreadystatechange=stateChanged;
xmlhttp.open("POST",url,true);
//xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8");
xmlhttp.send(postData);
}
The function stateChanged, basically says: Code: if (xmlhttp.readyState==4)
{
var strResponse;
strResponse=xmlhttp.responseText;
alert('Response:' + xmlhttp.responseText);
}
checkRegistration.php looks like this: PHP Code: <? session_start(); $firstName=$_POST['firstName']; echo($firstName); ?> The problem is that the response is empty, but I don't know why. I have checked the input data and the postData variable says "firstName="+input (e.g. "firstName=Robert"), so that's not the error. I have read several forum posts here, but still haven't figured out what I'm doing wrong. If anyone could please tell me, I would appreciate it alot. Hi, I have a registration form with the following input field: textbox -name textbox -surname textbox -phone listbox - country listbox - state Am populating my country & state listbox from my database, state depends on the country. However when i select my country&state the page refreshes & all my other values i.e name, surname, phone & others disappears i have to retype all again, any suggestion? thanks this is my javascript used to validate form.having problem when one selection is made and submit button is clicked.the checked button becomes unchecked. i've to check all the radio button in order to proceed with submission. here is the code...anyone pls help how to solve this..tq <script type = "text/javascript"> function validate_form ( ) { valid = true; if ( ( document.myform.gender[0].checked == false ) && ( document.myform.gender[1].checked == false ) ) { alert ( "Please choose your Gender: Male or Female" ); gender.focus(); valid = false; } if ( ( document.myform.nationality[0].checked == false ) && ( document.myform.nationality[1].checked == false ) ) { alert ( "Please choose your Nationality" ); nationality.focus(); valid = false; } if ( document.myform.age.selectedIndex == 0 ) { alert ( "Please select your Age." ); age.focus(); valid = false; } return valid; } </script> Using .htaccess i have a password protected folder online containing 7 files with one single user/pass combination. User is not allowed to see that 7 files are available. User enters 1 of 7 "Access Keys" in a simple HTML Form text input which is then processed (script?) User is then redirected automatically to the related file (for download) e.g. Access Key #1 redirects user to Protected File #1 Access Key #4 redirects user to Protected File #4 etc. What's the best way to implement this? Perl/CGI? PHP? Javascript? I'm trying to figure out how to add a length paramater to this function. Not quite sure how to do it. here's what I tried: Code:
var phone = document.getElementById('phone');
if(isNumericdashes(phone, "Please enter a valid phone number")){
return true;
}
function isNumericdashes(elem, helperMsg){
var numericExpression = /^[0-9\(\)-]+$/;
if(elem.value.match(numericExpression) &&(elem.length > 9)){
return true;
}else{
alert(helperMsg);
elem.focus();
return false;
}
}
Hi guys, I am new to Javascript and I'm trying to set up a form to make simple calculation based on user inputs. I have set up the form and am unable to get the calculation to work despite what I try (this is based on an online tutorial I found though). Is there any where I am going wrong? Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script type="text/javascript" language="javascript">
function kanban()
{
//variables
A = document.frmone.annualdemand.value;
B = document.frmone.demandVariability.value;
C = document.frmone.weeksHold.value;
D = document.frmone.ContainerSize.value;
E = document.frmone.totalStock.value;
//calculation
F = A/240;
double G = (b/100)+1;
H = g*F;
c = c*5;
i = c*H;
j = i/d;
document.frmone.totalStock.value = i;
document.frmone.noKanBans.value = j;
}
</script>
<title>Insert Title Here</title>
</head>
<body>
<form name="kanban" id="frmone">
Annual Demand: <input type="text" name="annualDemand" value=""/> </br>
Demand Variation: <input type="text" name="demandVariability" value=""/> </br>
Stock to Hold (weeks): <input type="text" name="weeksHold" value=""/> </br>
Size of Container: <input type="text" name="containerSize" value=""/> </br>
</br>
<input type="button" name="calculate" value="Calculate"
onclick="kanban()"/> </br>
</br>
Total Stock: <input type="text" name="totalStock" value=""/> </br>
Qty of Kan Bans: <input type="text" name="noKanBans" value=""/> </br>
</form>
</body>
</html>
Thanks guys. Hey all, I have a simple form that looks something like this: Code: <div id="responses"> <input class="checkbox" type="checkbox" name="group1" value="1" id="option1"/><label class="label" for="option1">Option one text</label> <input class="checkbox" type="checkbox" name="group1" value="0" id="option2"/><label class="label" for="option2">Option two text</label> <input class="checkbox" type="checkbox" name="group1" value="1" id="option3"/><label class="label" for="option3">Option three text</label> </div> I am trying to figure out a way to use javascript to take these and randomize the order of them. For example, if you were looking at it and clicked a randomize button it would shuffle around the options. I am fairly new to javascript and don't really know where to start with something like this. I would greatly appreciate it if someone could get me started or point me in the right direction. Thanks! |
|||||||