How to add dynamic data in source of html using Javascript - javascript

I am using a simple Javascript toggle function with the following code.
<script>
function add_more(){
if (document.form.more[0].checked==true)
{
document.getElementById('moreTxt').style.display="block";
}
else if (document.form.more[1].checked==true)
{
document.getElementById('moreTxt').style.display="none";
}
}
</script>
do want to enter something more ?
<form name="form">
<input type="radio" value="yes" name="more" onclick="add_more()" /> Yes
<input type="radio" value="No" name="more" onclick="add_more()" /> No
<div id="moreTxt" style="display:none">
hi you can enter more here
<textarea rows="3" cols="4">
</textarea>
</div>
</form>
The Problem is if I click on 'yes', and for some reason I refresh the page, then the 'yes' radio button remains checked but moreTxt div hides (i.e. its default visiblity mode).
How should I tackle this problem?

Check the value of the control on document ready and adjust the div visibility accordingly.

This will reset all your input on load:
<script>
function resetChkBox() {
var e=document.getElementsByTagName('input');
var i=0;
while(i<e.length) {
if(e[i++].type=='radio') {
e[i].checked=false;
}
}
}
</script>
<body onload="resetChkBox()">

you should perform you add_more function onDucomentReady
Assuming you're using jquery:
$(document).ready(function() {
add_more();
}
)
or use plain javascript equivalent of document.ready()

If this is to be performed without jquery which should be the case since including jquery for such small thing will be overkill :
document.attachEvent("onDOMContentLoaded", function(){
ready()
});
In ready function check the value of the radio button.

Related

Is there a way to force the user inside a html text input?

Id like to know if anyone has a suggestion for forcing a user to select a text box with Javascript/Jquery?
Example: user clicks X object on web page. User is forced into a text box in which they should enter information first.
Thanks in advance :)
Yes, what you are looking for is called focus.
Here the examples using jquery and plain js:
function setFocusjquery() {
$('#text-1').focus();
}
function setFocus() {
document.querySelector('#text-2').focus();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button onclick="setFocusjquery()">FOCUS jquery</button>
<input type="text" id="text-1" />
<br />
<button onclick="setFocus()">FOCUS JS</button>
<input type="text" id="text-2" />
Use JavaScript focus() method.
HTML:
<button type="button" onclick="focusField()">Click me</button>
...
<input type="text" id="myInput">
JavaScript:
function focusField() {
document.getElementById('myInput').focus();
}
You need to add an event listener to your event trigger object with,
Native JavaScript
let myXObject = document.getElementById('#xObject');
let myTextbox = document.getElementById('#myTextbox');
myXObject.addEventListener('click', function() {
myTextbox.Focus();
});
JQuery
let myXObject = $('#xObject');
let myTextbox = $('#myTextbox');
myXObject.click(function() {
myTextbox.focus();
});

javascript add button with two input

I'm trying to write this in javascript without using jquery. It basically has two input field: author and quote, and on click should be added to the page.
I'm also trying to save it on the page in case I leave the page. The added quote disappears when i execute the method:
function radd() {
if((document.getElementById("q").value!="") && (document.getElementById("a").value!="")) {
$("#mid-wraper" ).append("<p class='left-bullet'>"+document.getElementById("q").value+"-<span class='yellow-heading'>"+ document.getElementById("a").value+"</span></p>");
document.getElementById("q").value="";
document.getElementById("a").value="";
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="but" onClick="radd()">Add</button>
<label for="q">Add ur Quote!</label><input id="q" name="q" />
<label for="a">The author name</label><input id="a" name="a" />
Try this
function radd()
{
if((document.getElementById("q").value!="")&& (document.getElementById("a").value!=""))
document.getElementById("mid-wraper").innerHTML += "<p class='left-bullet'>"+document.getElementById("q").value+"-<span class='yellow-heading'>"+ document.getElementById("a").value+"</span></p>";
document.getElementById("q").value="";
document.getElementById("a").value="";
}
function add(){
//create a new elem
var el=document.createElement("p");
//you can assign id, class , etc
el.id="yourcustomid";
el.textContent="yourcontent";
//then add to the wrapper
var wrapper=document.getElementById("mid-wrapper");
wrapper.appendChild(el);
}
This code shows you how to create a new paragraph and add it to your wrapper js...
You could also do something like this; far more easier in my opinion. Simply create both inputs, but set their attributes to hidden. And using javascript, delete the "hidden" attribute.
<button id="but" onClick="radd()">Add</button>
<input id="q" hidden="hidden" >Add ur Quote!</input>
<input id="a" hidden="hidden">The author name</input>
The JS part:
function radd(){
document.getElementById("q").removeAttribute("hidden");
document.getElementById("a").removeAttribute("hidden");
}

how to bind onclick method with keydown method

I have an onclick method like this:
onClick: function() {
xx.setValue('i want this to be a button but triggered on keyup');
}
And a keyup method like this:
var that=this;
this.something().on( 'keyup', function() {
xx.setValue('hello'+that.something().getvalue());
} );
this is a preview mode. So i want the text from the onclick button to behave like the text i write with the keyboard
Is this the sort of thing you are wanting to achieve here?
$('#button').click(function() {
$('#output').val('You wanted to type:\n' + $('#textBox').val());
});
$('#textBox').on('keyup', function() {
$('#output').val($('#textBox').val());
});
Check out my fiddle to get a better idea of what I'm suggesting http://jsfiddle.net/ozrevulsion/jssL1xwq/
If this isn't what you wanted then please can you provide your own fiddle of your code failing to do what you want it to do so we can get some more context on what you are asking.
Cheers
Zac
[Edit]
I don't know why I didn't notice you were using native JS for your solution earlier. If you wanted to stick with your native JS and not have to use jQuery here is a solution that does the same as what I did above but in native JS.
function changeTextArea(newValue) {
document.getElementById('output').value = newValue;
}
function printToTextArea() {
changeTextArea('You wanted to type:\n' + document.getElementById('textBox').value);
}
And I guess the HTML is relevant for this native JS solution too so here it is
<input id="textBox" type="text" value="Type Here" onkeyup="changeTextArea(this.value)" />
<br />
<input id="button" type="button" value="Tell me what I typed" onclick="printToTextArea()"/>
<br />
<textArea id="output"></textArea>
And here is the updated fiddle http://jsfiddle.net/ozrevulsion/jssL1xwq/1/
wouldn't this work ?
Html:
<input type=button id=btn value='Submit' onclick=otherFunction(); />
<input type=button id=button value='Submit' onclick=myFunction(); />
<div id="other">
Trigger the handler
</div>
and this:
function myFunction(){
$(#btn).click();
}
function otherFunction(){
alert('this');
}
Note that with jquery you have the keup event :
https://api.jquery.com/keyup/
in this case you could have :
$( "#other" ).click(function() {
$(#btn).click();
});

submit my form through ajax using javascript

Just wanted to ask, how will i submit my form through ajax using javascript.
Here's my code:
<script>
function show_edit(bugid,device)
{
document.getElementById('updateform').style.visibility='visible';
document.getElementById('U_bugid').value=bugid;
document.getElementById('U_device').value=device;
}
function hide()
{
document.getElementById('updateform').style.visibility='hidden';
}
</script>
Here's my hidden form
<div id"update_form" >
<form onsubmit="ajax_submit();">
<fieldset>
<label for="maskset">MASKSET</label><input type='text' name='bugid' id='U_bugid' readonly >
<label for="device">DEVICE</label><input type='text' name='device' id='U_device' readonly>
<label for="reason">Comments</label><textarea rows=10 cols=40 name='reason'></textarea>
<input id="S_update" class='S_update' value="Update Data" type="submit" >
</form>
</fieldset>
</div>
Can i put it this way below, when i click submit it will immediately submit through ajax code together with my new comment(from textarea):
function show_edit(bugid,device)
{
var maskset;
document.getElementById('updateform').style.visibility='visible';
document.getElementById('U_bugid').value=bugid;
document.getElementById('U_device').value=device;
function ajax_submit()
{ //code in submitting ajax i already know; }
}
Will this work?
It seems that what you want to do is to stop the submition of your code you need to add onsubmit="return ajax_submit()" to your HTML and make sure the function return false.
function ajax_submit()
{
return false;
}
By the looks of your code you would greatly benefit from getting with jQuery in order to select DOM elements as it will simplify your life greatly.
On that note it would make your life a hell of a lot easier using jQuery Ajax. Specially if you read up on jQuery AJAX functions .
$.post("test.php", { bugid: $('#U_bugid').val(), device: $('#U_device').val() } );

Javascript Logic Problem

I know only what I need but I do not know how to get that done.
This is the logic of the code, I really hope some of you has the solution.
How can I create in javascript or jQuery a function that will do the following?
If that checkbox is selected, when the button is clicked redirect the user to another page by passing the value of the textarea in the URL.
So that is the logic.
We have three elements.
1)The checkbox
2)The input type button
3) The textarea.
The checkbox is selected, the user clicks on the button and the user goes to another page , and the URL will include the value found in the textarea.
i.e.
http://mydomainname/page.php?ValueThatWasinTextArea=Hello World
Can you help me.
I think it is something simple for a javascript coder.
Thank you so much
$(function(){
$(':button').click(function(){
if($('input[type="checkbox"]').is(":checked")){
window.location.href = "http://mydomainname/page.php?ValueThatWasinTextArea="+ $('textarea').val();
}
});
});
**Of course if there's more than these three elements on the page, you're going to want some more specific selectors
You could subscribe to the submit event of the form and inside test if the checkbox was checked and if yes use window.location.href to redirect to the desired url:
$('#id_of_the_form').submit(function() {
var value = encodeURIComponent($('#id_of_textarea').val());
if ($('#id_of_checkbox').is(':checked')) {
window.location.href = '/page.php?ValueThatWasinTextArea=' + value;
return false;
}
});
If the button is not a submit button you can subscribe for the click event of this button and perform the same logic.
Might be some syntax problem because I code this on top of my head
<input id="myCheckbox" type="checkbox" />
<button id="myButton" onClick="buttonClick" />
<input id="myTextArea" type="textarea" />
<script>
function buttonClick()
{
var checkBox = document.getElementById('myCheckbox');
var textArea = document.getElementById('myTextArea');
if(checkBox.checked)
{
window.location = 'http://mydomainname/page.php?ValueThatWasinTextArea=' + textArea.value;
}
}
</script>
$(document).ready(function() {
$('#btnSubmit').click(function() {
if($('#chkBox').is(':checked')) {
window.location = '/page.php?passedValue=' + $('#txtField').val();
}
});
};
...
<form>
<p>
<input type="checkbox" id="chkBox"> Checkbox</input>
</p>
<p>
<input type="text" id="txtField" value="" />
</p>
<p>
<input type="submit" id="btnSubmit" value="Submit" />
</p>
</form>

Categories

Resources