I need to submit a Collection (set, list, array) with objects that consists of:
id, phoneNumber, phoneType
I have a bunch of divs, here's some example HTML:
<div id="f9" class="facilityBox">
<div style="float:left;">
<label>BRANCH</label>
</div>
<div style="float:right;"> Save changes
</div>
<div class="phoneSet">
<input type="text" value="787-788-1111" class="phones" name="number" />
<select class="phoneType" name="type">
<option selected="selected" value="PHONE">Phone</option>
<option value="FAX">Fax</option>
</select>
<input type="hidden" value="6" class="phoneId" name="id" />
</div>
<div class="phoneSet">
<input type="text" value="787-795-4095" class="phones" name="number" />
<select class="phoneType" name="type">
<option value="PHONE">Phone</option>
<option selected="selected" value="FAX">Fax</option>
</select>
<input type="hidden" value="106" class="phoneId" name="id" />
</div>
</div>
This div's id will be f+identifier, so for now it's f9
the js I have so far is:
Location.submitUpdateFacility = function (facilityId) {
$("#updateFacility input[name=index]").val(facilityId);
var id = facilityId;
var phones;
$("#" + id + " .phoneSet").each(function () {
phones += {
id: $(".phoneId input[name=id]").val(),
phoneNumber: $(".phones input[name=number]").val(),
phoneType: $(".phoneType select[name=type]").selected().val()
};
});
};
My problem is upon Firebug/Chrome console debugging, it does not go into the loop and thus no array is ever created. What am I doing wrong?
The problem looks to be that you are passing "9" in as the function parameter that is then being converted to a jquery selector as "#" + id + " .phoneSet". This is generating "#9 .phoneSet" which is incorrect.
You should be using "#f" + id + " .phoneSet".
It should also be noted that the other selectors that you use (eg ".phoneId input[name=id]") may also need correcting before this works fully as you expect.
Related
I have some code as the following example:
<form>
<label>name</label><input type="text" />
<label>phone</label><input type="text" />
<label>color</label><select>
<option>red</option>
<option>blue</option>
<option>green</option>
</select>
<label>e-mail</label><input type="text" />
</form>
And I want to duplicate only the select section if the user needs it via button between the select section and the e-mail input field.
I'm not really into JavaScript or jQuery so it would very appreciated if you could also add a clear explanation to your answer.
You can use JQuery clone function to clone your element and then append it where you need it, or if you need to have a different id for each section you need you might want to save an index and set it as an id each time you add a section
var index = 1;
function addColor() {
var nextSection = '<div id="color-section-' + index++ + '">' +
'<label>color</label>' +
'<select>' +
'<option>red</option>' +
'<option>blue</option>' +
'<option>green</option>' +
'</select><br />' +
'</div>';
$(nextSection).appendTo($("#color-section"));
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="my-form">
<label>name</label><input type="text" /><br />
<label>phone</label><input type="text" /><br />
<div id="color-section">
<label>color</label>
<select>
<option>red</option>
<option>blue</option>
<option>green</option>
</select><br />
</div>
<label>e-mail</label><input type="text" /><br />
</form>
<button onClick="addColor()">Add Color</button><br />
You can use clone() to copy an element. See below example with an explanation.
A div element with name "color-selections" contain a initial select tag.
<div class="color-selections">
<select>
<option>red</option>
<option>blue</option>
<option>green</option>
</select>
</div>
There will be unknown number of select tag inside the "color-selections" class. So i use first() method to get first element (Original select tag).
$(".color-selections select:first")
Copy the first element using clone().
$(".color-selections select:first").clone()
Finally, Append this clone element into "color-selections" class using appendTo() method.
$(".color-selections select").first().clone().appendTo(".color-selections");
function addColor() {
$(".color-selections select:first").clone().appendTo(".color-selections")
//OR $(".color-selections select").first().clone().appendTo(".color-selections");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<label>name</label><input type="text" />
<label>phone</label><input type="text" />
<label>color</label>
<div class="color-selections">
<select> //$(".color-selections select:first")
<option>red</option>
<option>blue</option>
<option>green</option>
</select>
</div>
<input type="button" value="+" onclick="addColor();">
<label>e-mail</label><input type="text" />
</form>
I hope design is not an important part of sample code.
I'm new to php and javascript /jquery.. and I'm italian, so forgive my english.
I want to use only one funcion in button (onclick) to use it in different form in the same page, and after I want to get the data of the form using serialize funcion. So i can't use the selector $(form#myform) because the different form have differen id.
This is the html
<form id="myform_1">
<select class="form-control" name="tipo">
<option value="standard">standard</option>
</select>
<input type="number" name="giorni" value="90"/>
<input type="number" name="attesa" value="1"/>
<button type="button" onclick="FormManipulator()">Crea</button>
</form>
This is the function i'v tried
function FormManipulator(){
var form_new = $(this).parents("form");
var data = form_new.serialize();
alert("data: " + data);
}
But i cant get the data of th input... the alert is empty. Where is my error? Can someone explain and give the solution?
I don't know $(this) on a function refers to what .. but I think its not referring to the exact element you want so you need to pass FormManipulator(ThisForm) in your function and use it like FormManipulator(this)
You can use something like this
function FormManipulator(ThisForm){
var form_new = $(ThisForm).closest("form");
var data = form_new.serialize();
alert("data: " + data);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myform_1">
<select class="form-control" name="tipo">
<option value="standard">standard</option>
</select>
<input type="number" name="giorni" value="90"/>
<input type="number" name="attesa" value="1"/>
<button type="button" onclick="FormManipulator(this)">Crea</button>
</form>
<form id="myform_2">
<select class="form-control" name="tipo">
<option value="standard">standard</option>
</select>
<input type="number" name="giorni" value="90"/>
<input type="number" name="attesa" value="1"/>
<button type="button" onclick="FormManipulator(this)">Crea</button>
</form>
I have a form for example:
<form>
<ul>
<li>
<select name="choose">
<option value="0">1</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
</li>
<li><h2>No. Of person</h2></li>
<input type="text" name="ref_person"id="field" value="" />
<li><h2>earning of person:</h2></li>
<input type="text" name="ear_person" id="field" value="" />
</ul>
</form>
so, when I choose option:1 both the input fields must be filled with no. let say, No. of person = 3 and earning of person = $5.
Your question should be as well written as you can make it, including valid, semantic HTML.
Also, a question should contain the code you have tried, an explanation of what you have tried, where it's going wrong and exactly what you expect it to do, including some example input and output.
The following may help. Note that element IDs must be unique and that forms should use semantic markup (e.g. don't use a list to present it, don't put headings inside lists, use labels, group elements using fieldsets, etc.).
You can use the select element's change event to get the value and text of the selected option and display it elsewhere in the form. You can also reference form controls as named properties of the form, which is handy and more straight forward than using getElementById.
In the code, a reference to the select is passed to the function using this. Every form control has a form property that is a reference to the form that it's in. The rest should be easy enough to understand, but please ask if you need other help.
function getPerson(select) {
var form = select.form;
form.ref_person.value = select.options[select.selectedIndex].text;
form.ear_person.value = select.value;
}
<form>
<fieldset><legend>Person and earning</legend>
<label for="personSelect">Select a person
<select name="choose" id="personSelect" onchange="getPerson(this)">
<option value="0">1</option>
<option value="100">2</option>
<option value="500">3</option>
</select>
</label>
<br>
<label for="personNumber">No. Of person:
<input type="text" name="ref_person"id="personNumber"></label>
<label for="personEarning">Earning of person:
<input type="text" name="ear_person" id="personEarning"></label>
</fieldset>
</form>
function getPerson(select) {
var form = select.form;
form.ref_person.value = select.options[select.selectedIndex].getAttribute('per');
form.ear_person.value = select.value;
}
<form>
<fieldset><legend>Person and earning</legend>
<label for="personSelect">Select a person
<select name="choose" id="personSelect" onchange="getPerson(this)">
<option per="3" value="0">1</option>
<option per="9" value="100">2</option>
<option per="27" value="500">3</option>
</select>
</label>
<br>
<label for="personNumber">No. Of person:
<input type="text" name="ref_person"id="personNumber"></label>
<label for="personEarning">Earning of person:
<input type="text" name="ear_person" id="personEarning"></label>
</fieldset>
</form>
Here is a code sample that uses the onchange event to copy values to the textboxes.
<script type="text/javascript">
function selectOnChange(obj) {
var val = obj.options[obj.selectedIndex].value;
var text = obj.options[obj.selectedIndex].text;
document.getElementById("field1").value = val;
document.getElementById("field2").value = text;
}
</script>
</head>
<body>
<div>
<select onchange='selectOnChange(this)' name="choose">
<option value="100">1</option>
<option value="200">2</option>
<option value="300">3</option>
</select>
</div>
<ul><li><h2>No. Of person</h2></li></ul>
<div>
<input type="text" name="ref_person" id="field1" value="">
<ul>
<li><h2>earning of person:</h2></li></ul>
<input type="text" name="ear_person" id="field2" value="" />
</div>
I couldn't get a switch statement to work, so I did it with three if statements, but here is my solution. Fiddle with it yourself to make it as you wish.
<form>
<ul>
<li>
<select name="choose" id="option1" onchange="relatedPrice()">
<option value="0">1</option>
<option value="1">2</option>
<option value="2">3</option>
</select>
</li>
<li><h2>No. Of person</h2></li>
<input type="text" name="ref_person" id="field1" value="" />
<li><h2>earning of person:</h2></li>
<input type="text" name="ear_person" id="field2" value="" />
</ul>
</form>
<script>
function relatedPrice() {
var e = document.getElementById("option1");
var test = e.options[e.selectedIndex].text;
document.getElementById("field1").value = test;
if(test==1) {
document.getElementById("field2").value = 100;
}
if(test==2) {
document.getElementById("field2").value = 200;
}
if(test==3) {
document.getElementById("field2").value = 300;
}
}
</script>
Okay so I have been trying to figure this out but do not have the knowledge to proceed.
I have a form with select options. The options will have two values, input-value="value1/value2".
I have a script started that pulls out the value and creates an array. I need ti figure out how to separate the two values and print out into two separate input values.
<html>
<body>
<p>The Thank you page is <b id='brochure'>is what?</b> </p>
<p>This should print out the selected fid <script>document.getElementById('brochure').innerHTML = '<input id="" value="'+option_array[1]+'" />';</script></p>
<form>
Activity Level: <select id="activity_level">
<option value="null">Please Choose One...</option>
<option id="brochure" value="brochure/print">fid/sid</option>
<option id="online" value="online/web">Three/Four</option>
<option id="inPerson" value="inPerson">Five/Six</option>
</select></br>
<input type='button' onclick='brochure_select()' value='Change Text'/>
<script type="text/javascript">
function brochure_select() {
var option_result = document.getElementById("activity_level").value;
var option_array=option_result.split("/");
document.getElementById('brochure').innerHTML = option_array[1];
}
</script>
// below is where I want to two value to show up.
<input type="hidden" name="fid" value="brochure" />
<input type="hidden" name="sid" value="print" />
</form>
</body>
</html>
I have tried the split function but I am not sure how to get it into the different input values.
Any ideas that I can research or code examples someone might have to share. I have gone through many different searches and have not found what I am looking for...
Thanks
Tim
What you need is an id attribute for your hidden input elements, and to use the value property instead of innerHTML.
<form>
Activity Level:
<select id="activity_level">
<option value="null">Please Choose One...</option>
<option id="brochure" value="brochure/print">fid/sid</option>
<option id="online" value="online/web">Three/Four</option>
<option id="inPerson" value="inPerson">Five/Six</option>
</select><br />
<input type='button' onclick='brochure_select()' value='Change Text'/>
</form>
<input type="hidden" id="fid" name="fid" value="" />
<input type="hidden" id="sid" name="sid" value="" />
<script>
function brochure_select() {
var option_result = document.getElementById("activity_level").value;
var option_array=option_result.split("/");
document.getElementById('fid').value = option_array[0];
document.getElementById('sid').value = option_array[1];
}
</script>
How can I get the name of the select tag?
I have several select menus. I can retrieve the submitted options. However, I would like to get the name, or even better, the ID of the select tag that holds the options.
Sample HTML:
<div id="prodAttributes_2">
<form id="attributesubmit">
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<div role="heading" >Options:</div>
<select name="Memory" id="4">
<option value="3">16 mb</option>
<option value="4">32 mb</option>
</select>
<select name="Model" id="3">
<option value="6">Premium</option>
<option value="7">Deluxe</option>
</select>
</fieldset>
</div>
<input type="button" id="submitme" value="send" />
</form>
</div>
Solved Fiddle: JSFiddle
Add
var name = $(this).attr("name");
to your $('select').each call: http://jsfiddle.net/xPGUE/
You can use this.id within the each().
Note you can get the name with $(this).attr('name')
I've forked your jsfiddle
in your fiddle, where you get the alert
alert('Value: ' + selectedOption.val() + ' Text: ' + selectedOption.text());
you can access to the name or id of the option using
selectedOption.attr('name')
selectedOption.attr('id')
Try this:
$('select').each(function() {
alert($(this).attr('name'));
});