so far I have this jsfiddle
<p>Click the button to remove http:// and www. from input box belove below:</p>
<textarea id="demo" name="comments" cols="25" rows="5">
http://www.google.com
</textarea><br>
<input type="submit" value="Submit" button onclick="myFunction(),myFunction2()" />
</form>
<script>
function myFunction()
{
var str=document.getElementById("demo").innerHTML;
var n=str.replace("http://","");
document.getElementById("demo").innerHTML=n;
}
function myFunction2()
{
var str=document.getElementById("demo").innerHTML;
var m=str.replace("www.","");
document.getElementById("demo").innerHTML=m;
}
</script>
It works fine with the text pre input but it will not change submitted text.
I'm sure there's a simple answer, I'm just new to this and cannot work it out or find an answer.
You need to use .value of the textarea, not .innerHTML.
.innerHTML only looks at the generated HTML in an element. If the user types in something new, the source doesn't change.
But, the value does:
document.getElementById("demo").value = ...
Fixed in your fiddle:
http://jsfiddle.net/AbSh2/12/
A couple other pointers:
You don't need two functions to do that operation, as you can see it can be done in one.
You could use type='button' instead of a submit, since Javascript doesn't care about form submits (that only matters on the server, which receives POST and GET data. Javascript can't)
You can streamline your function even further without saving strings all over the place:
function myFunction() {
var str=document.getElementById("demo").value;
var n=str.replace("http://","");
var m=n.replace("www.","");
document.getElementById("demo").value=m;
}
works fine. You could even do
function myFunction() {
document.getElementById("demo").value =
document.getElementById("demo").value.replace("http://","").replace("www.","");
}
but that gets a little jumbled IMO, so should be for learning purposes only :)
Related
I need your helpful for writing a javascript function to replace a specific words with other words in a textarea.
I want find and replace in textarea the blank spaces among the word(s) placed on input text:
For example:
<html>
<head>
<title>Replace Specific words in textarea</title>
</head>
<body>
<Form name="frm" method="post" id="frm">
<TextArea name="txtArea1" cols="85" rows="10" ID="Textarea1">
While it was clear that forwarding the material was naughty (and the "culprits" had their wrists smacked), there.
This is one of the#main#ways of using link events. If you have not seen rollover images before, they are images
</TextArea><br>
Input keywords: <Input type="text" name="findwords" value="the main ways" id="text1">
<Input type="submit" name="btnSubmit" value="Submit" id="submit">
</form>
</body>
</html>
Any help will be much appreciated
Bob
Not sure to really understand, but try this :
// Execute instructions when the button with ID "submit" is clicked.
document.getElementById('submit').addEventListener('click', function()
{
// Get user inputs.
var search = document.getElementById('text1').value;
// Replace spaces and tabs with a regular expression.
var alteredSearch = search.replace(/\s/g, '#');
// Get the textarea content.
var look = document.getElementById('Textarea1').value;
// Finally, replace the textarea content.
document.getElementById('Textarea1').value = look.replace(new RegExp(search, 'g'), alteredSearch);
});
I see you have a form. Currently, if you hit the submit button, your page will reload, and nothing will be done. Set the type attribute of your input to button if you want your javascript to work.
I came across something weird that is making me realize I do not know JS stuff as well as i should. And so I thought I would ask a question about what is going on to see if that will help. I have a simple form with three "textarea" inputs and i have a "save" button. the save button triggers a js function that gathers the what is on the inputs and the does an alert showing them...
very simple application but what I was not expecting was that when you "close" the alert box; all the data entered on the form is erased...
here is my code:
<form>
<strong>Make</strong><br/>
<textarea id="make_notes" rows="4" cols="50">
</textarea><br/><br/>
<strong>Model</strong><br/>
<textarea id="model_notes" rows="4" cols="50">
</textarea><br/><br/>
<strong>Features</strong><br/>
<textarea id="features_notes" rows="4" cols="50">
</textarea>
<br/><br/>
<button onclick="side_form_js2()">Save2</button>
</form>
<script>
function side_form_js2() {
var element1 = document.getElementById("make_notes");
var make_notes_var = element1.value;
var element2 = document.getElementById("model_notes");
var model_notes_var = element2.value;
var element3 = document.getElementById("features_notes");
var features_notes_var = element3.value;
alert(make_notes_var + "I am an alert box!22222" + model_notes_var + features_notes_var);
}
</script>
So I am really uncertain what is making the form input be erased. It is almost like the page is being reloaded but I dont think that is the case. Can anyone shed any light on this? Thanks...
P.S. dont know if this makes any difference but just running this locally using Xampp on my PC...
the default is reload, change your code to this and it should work
<button onclick="return side_form_js2()">Save2</button>
and then in your function add return false after the alert like this:
alert(make_notes_var + "I am an alert box!22222" + model_notes_var + features_notes_var);
return false;
A button element with no type attribute specified represents the same thing as a button element with its type attribute set to "submit".
If you want to use a button in a form without it submitting use type="button".
Hello Guys i was trying dynamic addition of text box and other controls in Classic ASP through JavaScript but encountered some problem up there.
Though i was able to add new textboxes but was no able to retain their data.
Eg : If i have a button and on click i want to add textboxes to the html page on first click a textbox is added and i enter data in that textbox like STACKOVERFLOW but when again i hit button new textbox2 is also added but textbox1 data goes away.
I changed my ASP code for simple HTML so that it will be easy. Here is the code.
<!DOCTYPE html>
<html>
<body>
<div id ='div1' style="margin-bottom:6px;"></div>
<button onclick="myFunction()">Change link</button>
<script>
function myFunction() {
var p_strContents = '<input name="cust_name_0" id="cust_name_0" value="" type="text" size="0" class="FormTextField" maxlength="6" title="">';
document.getElementById('div1').innerHTML = document.getElementById('div1').innerHTML + p_strContents ;
//document.getElementById('div1').appendChild(p_strContents);
}
</script>
</body>
</html>
I tried using even appendchild but it will throw some error.
If you want to try it directly online use this link and just paste my code will be easy for u guys to check.
http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_elmnt_innerhtml
I am using JavaScript.
Could you guys help me. Regards...
Please check with this:
function myFunction() {
var textBx = document.createElement('input');
textBx.setAttribute('type', 'textbox');
textBx.setAttribute('class', 'FormTextField');
textBx.setAttribute('maxlength', '6');
document.getElementById('div1').appendChild(textBx);
textBx = null;
}
Please check working code here
I am inexperienced so sorry if this is a dumb question but I'm looking around and I haven't found an answer that works for me. I am using JavaScript and I have an html form with one text input. When someone enters a value for that input and submits the form I want to return to the same HTML page but with what they entered displayed elsewhere on the page. Here is my form:
<form name="chatInput" action="index.html" method="get">
chat:<input type="text" name="chat"/>
</form>
I saw something about having:
var chatText = document.forms[0].elements[0];
But when I try to use this I get [object HTMLInputElement]
Also I would only want to create that variable if the form has been entered once already but not initially. How would I check for this?
Thanks for any info.
var chatText = document.forms[0]['chat'].value;
http://jsfiddle.net/XLeAn/
If you don't want to re-update the html, I'd recommend not using the form tag.
Instead, I'd create a button with the onclick attribute.
<input type="button" value="Update" onclick="someFunction()">
Then in the JS portion, have something like this.
var someFunction = function(){
var chatText = document.getElementById("this-is-the-element-I-want").value;
}
Of course, make sure that the element you are trying to retrieve info from has an id.
<input type="text" name="chat" id="this-is-the-element-I-want">
EDIT: Code indents and clarity
Try this:
var chatText = document.forms[0].elements[0].value;
I am trying to duplicate a form after it has been filled out. So the user fills out the form then hits submit. then a new window opens with the full html form, images, and styling included AND the values so they can print the filled out version. i tried .html() and .clone(). but neither seem to work.
any help is much apperciated. and please don't hesitate to ask questions.
Edit: Post your code for creating the popup.
You may need to use val() to copy the values over.
http://jsfiddle.net/Na6GN/2/
$('#myForm :input').each(function() {
$(this).clone().appendTo('#newForm').val($(this).val());
});
Its working fine:
JS:
$('btnclone').click(function() {
var mywindow = window.open();
$(mywindow.document.body).append($('form').eq(0).clone());
});
Html Code
<form>
<input name='test' />
</form>
<input type="button" value="Clone" name="btnclone" id="btnclone" />