I'm trying to create a simple form where people input in some values and on submit auto generates the code below the form. Which then they can copy to use.
i.e.
Input 1 width(px) - 200
Input 2 height(px) - 300
Input 3 content - Hello world
Submit button
[code to copy]
[div width="200px" height="300px"]Hello world[/div]
[/code to copy]
This can be done in real time, no need to submit.
Here: http://jsfiddle.net/NzFeb/
$("input").keyup(function() {
$("#result").text(
'<div width="' + $("#width").val() +
'px" height="' + $("#height").val() +
'px">' + $("#content").val() +
'</div>');
});
To simplify the code i used the library jQuery.
jQuery site
How to set up jQuery in your site
Try:
Width: <input id="width" type="text" /> <br/><br/>
Height: <input id="height" type="text" /> <br/><br/>
Content: <input id="content" type="text" /><br/><br/>
<button id="go">Go</button><br/><br/>
<textarea id="code" cols="30" rows="10" ></textarea>
document.getElementById("go").onclick = function() {
document.getElementById("code").innerHTML = "<div style='width:" + document.getElementById("width").value+ "; height:" + document.getElementById("height").value + ";'>" + document.getElementById("content").value + "</div>";
};
as seen here: http://jsfiddle.net/69q57/13/
Related
I am creating a JS form where i need 3 inputs from user and after typing the 3 inputs , on clicking 'Add record' button ,it should display them on the same page one after another (line by line) for every button click. With my code, it is writing every new input entry in the same line and not next line. How do i do it ?
My result:
Andrew Arts 2007 Evelyn Computers 2006
Expected result :
Andrew Arts 2007
Evelyn Computers 2006
function doSubmit() {
document.getElementById('f1').innerHTML += document.myform.name.value + " ";
document.getElementById('f1').innerHTML += document.myform.major.value + " ";
document.getElementById('f1').innerHTML += document.myform.year.value + " ";
return false;
}
<body>
<form name="myform">
<p>
Name: <input name="name" size="30" type="text" /> course: <input name="major" size="30" type="text" /> Year : <input name="year" size="4" type="text" />
</p>
<input type="button" value="Add record" onClick='doSubmit(); return false' />
</form>
<p id='f1'></p>
</body>
You use a <br> tag to break the line inside a <p> tag.
You just have to make a small change in your function :
function doSubmit() {
document.getElementById('f1').innerHTML += document.myform.name.value + " ";
document.getElementById('f1').innerHTML += document.myform.major.value + " ";
document.getElementById('f1').innerHTML += document.myform.year.value + " ";
document.getElementById('f1').innerHTML +='<br />'
return false;
}
If you're looking to style your form values , it would be good to append <p>tag for each form value . It will require a small change like below :
function doSubmit() {
document.getElementById('form-value').innerHTML += '<p>'+ document.myform.name.value + " " + document.myform.major.value + " " + document.myform.year.value + " " + "</p>";
return false;
}
Your HTML :
<body>
<form name="myform">
<p>
Name: <input name="name" size="30" type="text" /> course: <input name="major" size="30"
type="text" /> Year : <input name="year" size="4" type="text" />
</p>
<input type="button" value="Add record" onClick='doSubmit(); return false' />
</form>
<div id="form-value">
</div>
I would suggest creating a new p element for every submitted input. You also don't want to store the user input into the innerHTML, because it can lead to cross-site scripting attacks. To prevent this, you can use innerText instead. Here is an example of how you can achieve all that with your code:
function doSubmit() {
const newInputParagraph = document.createElement("p");
newInputParagraph.innerText += document.myform.name.value + " ";
newInputParagraph.innerText += document.myform.major.value + " ";
newInputParagraph.innerText += document.myform.year.value + " ";
document.getElementById("inputs").appendChild(newInputParagraph);
}
And you need to add container for input results (simple div) to your markup, for example like this:
<form name="myform">
<p>
Name: <input name="name" size="30" type="text" /> course: <input name="major" size="30" type="text" /> Year : <input name="year" size="4" type="text" />
</p>
<input type="button" value="Add record" onClick='doSubmit(); return false' />
</form>
<div id="inputs"></div>
I am doing a templating platform and I am using material design for the looks.
I just started coding the part where inputs are injected to the form. The thing is that I just started injecting text inputs and it looks as it should but the onclick css is not working! (The onclick css makes a blue line expand from the center of the text input, telling that the input is in focus)
This is how I am injecting the html:
document.getElementById("smallTextField").onclick = function () {
let div = document.getElementById("formContainer")
div.insertAdjacentHTML("afterbegin", '<div class="col-sm-3">\n' +
' <div class="form-group">\n' +
' <div class="form-line" id="test">\n' +
' <input type="text" class="form-control" placeholder="col-sm-3">\n' +
' </div>\n' +
' </div>\n' +
' </div>');}
I hope you can understand my problem :/
If you are able to use jQuery, one option you have is to utilize the $element.prepend() function after binding to the click event.
$('#smallTextField').on('click', function () {
let $div = $('#formContainer');
$div.prepend(
'<div class="col-sm-3">\n' +
' <div class="form-group">' +
' <div class="form-line" id="test">' +
' <input type="text" class="form-control" placeholder="col-sm-3" />' +
' </div>' +
' </div>' +
'</div>');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="smallTextField" placeholder="smallTextField" />
<div id="formContainer"></div>
I want to add dynamic input.
I have one input already created and if someone write something into it, it will add new input below it and if again some one write something into newly created input, it will call the same jquery and generate another input below and so on. ( same like google's contact form for address and email )
How can I do this.
I have tried this but it is giving me for each keypress new input and also for newly created input it is not working
var counter = 2;
$("input[id^='textbox']").keypress(function () {
if (counter>10){
alert("Only 10 textboxes allow");
return false;
}
var newTextBoxDiv = $(document.createElement('div')).attr("id", 'TextBoxDiv' + counter);
newTextBoxDiv.after().html('<label>Textbox #'+ counter + ' : </label>' +
'<input type="text" name="textbox' + counter +
'" id="textbox' + counter + '" value="" >');
newTextBoxDiv.appendTo("#TextBoxesGroup");
counter++;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='TextBoxesGroup'>
<div id="TextBoxDiv1">
<label>Textbox #1 : </label>
<input type='textbox' id='textbox1' >
</div>
</div>
You should use .on() to attach event handler to new input. Also check if parent of typing text is last-child, then add new row.
$(document).on("keyup change", "input[id^='textbox']", function(){
if ($(this).parent().is(":last-child") && $(this).val() != ""){
var index = $(this).parent().index() + 2;
$("#TextBoxesGroup").append('<div id="TextBoxDiv'+index+'"><label>Textbox #'+index+' : </label><input type="textbox" id="textbox'+index+'" ></div>');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='TextBoxesGroup'>
<div id="TextBoxDiv1">
<label>Textbox #1 : </label>
<input type='textbox' id='textbox1' >
</div>
</div>
I am looking to make a set of 3 form inputs for a phone number that automatically focuses on the next set of digits when the first is full.
My form is this string of HTML:
myLayer.eachLayer(function(layer) {
// here you call `bindPopup` with a string of HTML you create - the feature
// properties declared above are available under `layer.feature.properties`
var content = '<div class="tooltip-header">Store Name<\/div>' +
'<div class="tooltip-address">' + layer.feature.properties.address1 + '<div\/>' +
'<div class="tooltip-address">' + layer.feature.properties.address2 + '<div\/>' +
'<br>'+
'<div class="tooltip-phoneLabel">' + layer.feature.properties.phoneLabel + '<div\/>'+
'<br>'+
'<div class="phone-input">'+
'<input class="phone-input" name="phone-input" type="tel" size="3" maxlength="3" placeholder="555"> '+
'<input class="phone-input" name="phone-input" type="tel" size="3" maxlength="3" placeholder="555"> '+
'<input class="phone-input" name="phone-input" type="tel" size="4" maxlength="4" placeholder="5555">'+
'<\/div>';
layer.bindPopup(content);
});
Use the following example to achieve what you want:
$(document).ready(function(){
$('body').on('keyup', 'input.phone-input', function(){
if($(this).val().length === this.size){
var inputs = $('input.phone-input');
inputs.eq(inputs.index(this) + 1).focus();
}
});
});
DEMO
Why when I add the same html code with javascript jquery I loose margin ?
Try this jsfiddle and you will understand me.
jQuery
function addphone() {
$( "#phonedetails" ).append( '<div >' +
'<label>phone :</label>' +
'<input type="text" /> ' +
'<input type="button" onclick="addphone()"/>' +
'</div>');
}
HTML
<div id="phonedetails">
<div>
<label>phone :</label>
<input type="text" />
<input type="button" onclick="addphone();"/>
</div>
</div>
It isn't a margin, it is a space (i.e. what you get when you press the space bar) between the label and the input. It is missing in the code generated from JS.
Change:
'<label>phone :</label>' +
To:
'<label>phone :</label> ' +
// ^ space here
You aren't losing margins, you're losing whitespace:
http://jsfiddle.net/3md9S/2/
$( "#phonedetails" ).append( '<div >' +
'<label>phone :</label> ' + // SINGLE SPACE ADDED HERE
'<input type="text" /> ' +
'<input type="button" onclick="addphone()"/>' +
'</div>');
That is just a white space in your html.
Also you don't have to write html again to append , you can clone it -
$( "#phonedetails" ).append($('#phonedetails div').eq(0).clone());
Demo --> http://jsfiddle.net/3md9S/7/