I am at the very start of a onlince quote calculation tool, and am trying a method out and wondered if someone can show me how to build a html form using jquery.
I have made a start, as below:
<p><a href="javascript:active_tiptip();">Visible Text</a></p>
<div id="test" style="position:relative; width:100%; height:200px; background-color:#FF0000;">
</div>
var pageLimit=1;
function active_tiptip(){
for(var i = 1; i <= pageLimit; i++) {
$('#test').append('<div id="page' + i + '" class="touch">' )
$('.page').append('<form>TESTING</ form>' )
$('#test').append('</ div>' )
}
}
Am I using the right method to try and get something liek this on there.
<form name="form1" action="complete.php" method="post" id="form1">
<div style="position:relative; width:950px; height:70px; margin-bottom:8px; padding-top:5px; padding-bottom:5px; border:#000 solid 1px; padding-left:5px; padding-right:5px;">
<div style="position:relative; float:left; width:100px; height:70px; border-right:#333 dotted 1px; margin-left:25px; margin-right:30px;">
<select name="Size" id="100x100">
<option value="24.95">24.95</option>
<option value="25.95">25.95</option>
<option value="26.95">26.95</option>
<option value="27.95" id="1">27.95</option>
</select>
</form>
Each time the form is created though how would I then populate the values dynamically using PHP and a MySQL database
To populate the dynamic data from PHP and MySQL to javascript form, I suggest you add ID for the form controls and then use ajax to send request to server to get data by json and then populate to form. Or you can request to server and ajax return entire of form HTML
I’m making very slow progress with this, but am getting there, but am struggling to know how to create drop downs using the code below which is creating a html form appeneded to a div.
function active_tiptip() {
$('#test').append(
$('<form />', { action: '#', method: 'POST', id: 'form1', name: 'form1' }).append(
$('<div />', { class: 'appm', text: 'Save this' }),
$('<select />', { }),
$('<br />'),
$('<input />', { id: 'deletebutton', type: 'submit', value: 'Delete' })
)
)
}
So the drop down at this stage look like this
<select name="Size" id="100x100">
<option value="24.95">24.95</option>
<option value="25.95">25.95</option>
<option value="26.95">26.95</option>
<option value="27.95" id="1">27.95</option>
</select>
This is a long way away from what needs to be achieved, but am doing it step by step.
The only problem that I can see (so far) is the naming convention of IDs. IDs and names CANNOT START with anything other than a letter or underscore. So your ID of “100x100” is illegal.
V/r,
Hi thanks,
thats not problem to change, at this point its more of a visual aid id for me rather than a proper id.
So it can be changed to anything.
This is for me once again a very complicated project to create an online quote system, im starting from scratch with code I dont know much on, so progress is going to be slow, so will be very grateful for any assistance as I move along.
What I didnt get with the problem above, is how to output to a dropdown rather than the input field.
Change to
<select name="Size" id="Month1">
<option value="24.95">24.95</option>
<option value="25.95">25.95</option>
<option value="26.95">26.95</option>
<option value="27.95" id="1">27.95</option>
</select>
Cheers
Trying this, but something wrong, as nothing is created now
var data = {
'foo': 'bar',
'foo2': 'baz'
}
var s = $('<select />');
function active_tiptip() {
$('#test').append(
$('<form />', { action: '#', method: 'POST', id: 'form1', name: 'form1' }).append(
$('<div />', { class: 'appm', text: 'Save this' }),
$('<option />', {value: val, text: data[val]}).appendTo(s),
$('<br />'),
$('<input />', { id: 'deletebutton', type: 'submit', value: 'Delete' })
)
)
}
In your code, I see you appending options to a variable for a select, but I don’t see the select being appended to the form.
Take a look at this jsfiddle that someone else made.
V/r,
Ah yes…
var data = {
'foo': 'bar',
'foo2': 'baz'
}
var s = $('<select />');
function active_tiptip() {
$('#test').append(
$('<form />', { action: '#', method: 'POST', id: 'form1', name: 'form1' }).append(
$('<div />', { class: 'appm', text: 'Save this' }),
$('<option />', {value: val, text: data[val]}).appendTo(s),
$('<br />'),
$('<input />', { id: 'deletebutton', type: 'submit', value: 'Delete' })
)
)
}
s.appendTo('form1');
Do I append it to the form or to the the div inside the form?
Form still not generating, so will try to pick it out of the jsfiddle you sent over, thanks.
OK Im trying with this, and i cant get the drop downs to work, it seems to be an append issue, but cant work it out.
The drop downs will need to be filled via a mysql database, so am thinking ahead a little, but this is tough.
<p><a href="#" onClick="active_tiptip()">Form Click</a></p>
<div id="test" style="position:relative; width:100%; height:200px; background-color:#FF0000;">
</div>
function active_tiptip() {
selectValuesA = { "1": "test 1", "2": "test 2" };
selectValuesB = { "1": "test 1", "2": "test 2" };
selectValuesC = { "1": "test 1", "2": "test 2" };
$('#test')
.append('<form id="form1" name="form1"></form>'); //append a new form element with id mySearch to <body>
$('#form1')
.attr("action","#") .attr("method","post") //set the form attributes
$.each(selectValuesA, function(key, value) {
.append($("<option></option>")
.attr("value",key)
.text(value));
});
$.each(selectValuesB, function(key, value) {
.append($("<option></option>")
.attr("value",key)
.text(value));
});
$.each(selectValuesC, function(key, value) {
.append($("<option></option>")
.attr("value",key)
.text(value));
});
}
I’m a little worried as the next step is a major headche for me, but can only do one little step at a time.
This is my dev area, and the idea is that one drop down form appears on load, and then the user can add more drop downs depending on how many hotels they got, and basically all the values need to add up to a total total, and if needs be a hotel needs which relates to a form can be deleted and the total amount amends to that.
http://quotation.csf.dcmanaged.com/design.php
Ok have managed to append the drop downs to the form as below, but then when I click 'Form Click to create the each form, the drop downs dont appear, only the data to appear in them from
selectValuesA = { "1": "test 1", "2": "test 2" };
selectValuesB = { "1": "test 1", "2": "test 2" };
selectValuesC = { "1": "test 1", "2": "test 2" };
Easier to see on the site i suppose
Sorry should have put the lot in…
The drop downs arent appearing so it muct be a problem where im asking them to display, but the values are displaying.
function active_tiptip() {
selectValuesA = { "1": "test 1", "2": "test 2" };
selectValuesB = { "1": "test 1", "2": "test 2" };
selectValuesC = { "1": "test 1", "2": "test 2" };
$('#test')
.append('<form id="form1" name="form1"></form>'); //append a new form element with id mySearch to <body>
$('#form1')
.attr("action","#") .attr("method","post") //set the form attributes
$.each(selectValuesA, function(key, value) {
$('#form1')
.append($("<option></option>")
.attr("value",key)
.text(value));
});
$.each(selectValuesB, function(key, value) {
$('#form1')
.append($("<option></option>")
.attr("value",key)
.text(value));
});
$.each(selectValuesC, function(key, value) {
$('#form1')
.append($("<option></option>")
.attr("value",key)
.text(value));
});