hello guys? can you help me with this? i want to get the id of the first input and the text value of the second input in a specific p tag
<p class="receiveitem">
<label for="mat_id">Material</label>
<input type="text" id="4"value="GI Coulping" disabled/>
<label for="rec_qty">Quantity</label>
<input type="text" class="rec_qty" />
<input type="button" class="receive" value=Receive />
</p>
<p class="receiveitem">
<label for="mat_id">Material</label>
<input type="text" id="5"value="Vulca Seal" disabled/>
<label for="rec_qty">Quantity</label>
<input type="text" class="rec_qty" />
<input type="button" class="receive" value=Receive />
</p>
<p class="receiveitem">
<label for="mat_id">Material</label>
<input type="text" id="6"value="teflon tape" disabled/>
<label for="rec_qty">Quantity</label>
<input type="text" class="rec_qty" />
<input type="button" class="receive" value=Receive />
</p>
so when i click the receive button that's in the p tag.
it will output someting like
ID: 4 and Value: 10
already have a js.but i can't get it done.
$(document).ready(function(){
$('input#receive').click(function(){
var mat = $('input[type=text]:first').attr('id');
var qty = $('input[type=text]:last').val;
alert(mat + qty);
});
});
and i dont know where to put the this in my variables mat and qty.please help?
Here is a modified approach using the more semantically correct data attributes (which are broadly supported) (building on #Chase's answer) (and a demo)
<p class="receiveitem">
<label for="mat_id">Material</label>
<input name="mat_id" type="text" data-id="4" value="GI Coulping" disabled="disabled"/>
<label for="rec_qty">Quantity</label>
<input type="text" name="rec_qty" />
<input name="rec_qty" type="button" class="receive" value="Receive" />
</p>
<p class="receiveitem">
<label for="mat_id">Material</label>
<input name="mat_id" type="text" data-id="5" value="Vulca Seal" disabled="disabled"/>
<label for="rec_qty">Quantity</label>
<input type="text" name="rec_qty" />
<input type="button" class="receive" value="Receive" />
</p>
<p class="receiveitem">
<label for="mat_id">Material</label>
<input name="mat_id" type="text" data-id="6" value="teflon tape" disabled="disabled"/>
<label for="rec_qty">Quantity</label>
<input type="text" name="rec_qty" />
<input type="button" class="receive" value="Receive" />
</p>
With this JavaScript
$(document).on("click", "input.receive", function () {
var mat = $(this).siblings("[name='mat_id']").data("id");
var qty = $(this).siblings("[name='rec_qty']").val();
alert("mat id: " + mat + " qty val: " + qty);
});
This approach won't abuse the id attribute which is designed for node identification and not data storage.
$(document).on('click', 'input#receive', function(e){
e.preventDefault();
var qty = $(this).prev().prev('input');
alert(qty);
});
You really need to change your markup to use data or unique IDs though.
Related
I am making a basic new customer database with mysql and php. I would like when people click on the radio button"different mailing address" for another couple of input fields to appear for the mailing address. Im not quite sure how to handle this with inputs and not variables. Is there a way to do an if statement here is my html form code below
<form method="POST" action="insert.php">
<fieldset>
<legend>New Customer data</legend>
<label>Complete Below</label>
<div class="controls controls-row">
<input class="span4" name="firstname" type="text" placeholder="First name">
<input class="span3" name="lastname" type="text" placeholder="Last Name">
<input class="span3" name="phone" type="text" placeholder="Phone">
</div>
<div class="controls controls-row">
<input class="span4" name="address" type="text" placeholder="Address">
<input class="span2" name="city" type="text" placeholder="City">
<input class="span1" name="state" type="text" placeholder="State">
</div>
<div class="controls controls-row">
<input class="span4" name="zip" type="text" placeholder="Zip Code">
<input class="span2" name="email" type="text" placeholder="Email">
<input class="span2" name="ccemail" type="text" placeholder="cc email">
</div>
<span class="help-block">When is the customers due date monthly</span>
<label class="radio">
<input type="radio" name="duedate" id="optionsRadios1" value="1" checked>
1st of the month</label>
<label class="radio">
<input type="radio" name="duedate" id="optionsRadios2" value="15">
15th of the month
</label>
<span class="help-block">Mailing address</span>
<label class="radio">
<input type="radio" name="mailingaddress" id="optionsRadios3" value="1" checked>
Check if mailing address is the same as the service address
</label>
<label class="radio">
<input type="radio" name="mailingaddress" id="optionsRadios4" value="0">
Check if mailing address is different
</label>
<button type="submit" class="btn btn-primary">Submit</button>
</fieldset>
</form>
Using jQuery, have two inputs that are initially hidden. Once the user checks the box, '$.show()' on those two inputs. Id have a div containing two inputs, and just show or hide the div depending on whether the box is checked or not
you can try this.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" >
</script>
<script>
$(document).ready(function(){
$("#checkme").on('change',function(){
if($("#checkme").is(":checked")){
$("input#myemail").fadeIn();
}else{
$("input#myemail").fadeOut();
}
});
});
</script>
</head>
<body>
show: <input type="checkbox" id="checkme" /><br />
<input type="text" id="myemail" hidden />
</body>
</html>
When the user clicks at the "Add New Job" link, a new form containing three fields will appear. That's the main form:
<h2>JOB EXPERIENCE 1</h2>
<div class="job-content">
<input type="text" value="Company" name="company" />
<input type="text" value="Course" name="course" />
<input type="date" value="Date" name="date" />
</div>
<h1>ADD NEW JOB +</h1>
//When clicked, it will show another form, with the same fields from the form above.
<h2>JOB EXPERIENCE 2</h2>
<div class="job-content">
<input type="text" value="Company" name="company2" />
<input type="text" value="Course" name="course2" />
<input type="date" value="Date" name="date2" />
</div>
I appreciate any help.
You can use jQuery .clone() to copy the original .job-content and then increment the form item names to replicate your example output.
This will also allow you to expand on the number of inputs if needed in the future without updating your JavaScript code.
$(function () {
var duplicates = 0,
$original = $('.job-content').clone(true);
function DuplicateForm () {
var newForm;
duplicates++;
newForm = $original.clone(true).insertBefore($('h1'));
$.each($('input', newForm), function(i, item) {
$(item).attr('name', $(item).attr('name') + duplicates);
});
$('<h2>JOB EXPERIENCE ' + (duplicates + 1) + '</h2>').insertBefore(newForm);
}
$('a[href="add-new-form"]').on('click', function (e) {
e.preventDefault();
DuplicateForm();
});
});
Working example - JSFiddle
Updated to clone the original job-content on page load so original form values are preserved.
It will add more form if u click "ADD NEW JOB +";
<h2>JOB EXPERIENCE 1</h2>
<div class="job-content">
<input type="text" value="Company" name="company" />
<input type="text" value="Course" name="course" />
<input type="date" value="Date" name="date" />
</div>
<div id="concat"></div>
<h1>ADD NEW JOB +</h1>
<script>
$("#addfield").click(function(){
var detailContent = '<h2>JOB EXPERIENCE 1</h2>
<div class="job-content">
<input type="text" value="Company" name="company" />
<input type="text" value="Course" name="course" />
<input type="date" value="Date" name="date" />
</div>';
$('#concat').append(detailContent);
});
</script>
Use Jquery append method when the Button is clicked using click event
$('#id').click(function() {
var x=$("#formid").html();
$("body").append(x);
});
Working Fiddle: http://jsfiddle.net/2JgtT/
Note: you need somekind of logic to add more than 2 job fields.. this is just a sample.
HTML:
<h2>JOB EXPERIENCE 1</h2>
<div class="job-content">
<input type="text" value="Company" name="company" />
<input type="text" value="Course" name="course" />
<input type="date" value="Date" name="date" />
</div>
<div class="jobfields">
<h2>JOB EXPERIENCE 2</h2>
<div class="job-content">
<input type="text" value="Company" name="company2" />
<input type="text" value="Course" name="course2" />
<input type="date" value="Date" name="date2" />
</div>
</div>
<h1>ADD NEW JOB +</h1>
Jquery:
$(document).on("click", ".addjob", function (e) {
e.preventDefault();
$('.job-content').next('.jobfields').show();
});
OR this may be: http://jsfiddle.net/2JgtT/3/ look at the html, i have wrapped the divs in container
$(document).on("click", ".addjob", function (e) {
e.preventDefault();
addJobField();
});
function addJobField() {
$('.container').append("<div class='job-content'> " +
"<input type='text' value='Company' name='company' />" +
"<input type='text' value='Course' name='course' /> " +
"<input type='date' value='Date' name='date' /> </div>");
}
test
<div id="test1"></div>
<script>
$("#test").click(function(){
var detailContent = '<div>what portion need to add there</div>';
$('#test1').append(detailContent);
});
</script>
Try this:
Edited HTML:
<h2>JOB EXPERIENCE 1</h2>
<div class="job-content">
<input type="text" value="Company" name="company" />
<input type="text" value="Course" name="course" />
<input type="date" value="Date" name="date" />
</div>
<h1 id="add_job">ADD NEW JOB +</h1>
JavaScript:
var i = 1;
$("#add_job").click(function() {
$("body").append("<h2>JOB EXPERIENCE "+ ++i + "</h2>");
$("body").append($(".job-content:nth-child(2)").clone());
});
HTML Explanation:
Nothing much edited but on the click of the hyperlink I made sure that it should return false or else it would link to another page.
JavaScript Explanation:
First I set a variable to one which is the number of job experiences that will be incremented every time the button is clicked. Then on the click of the h1 of the link I append two things in the body. The first is the h2 which is the heading for the job experiences and the second thing is the copy of the first form that is present already their.
A quick JQuery solution:
$("#add-new-form").on("click",function{
var form = '<form>
<div class="job-content">
<input type="text" value="Company" name="company" />
<input type="text" value="Course" name="course" />
<input type="date" value="Date" name="date" />
</div>
</form>';
$('body').append(form);
});
I have no means of testing but is this like something you were looking for?
i am completely new to JQuery.
I would like to get a solution on how to pass values from a jquery dialog form to a php file for proccessing.
Please refer to this link as an example of the jquery dialog form
Please note: The example of the dialog form passes values to a table and displays. In my case I would like to pass them to another page(.php file).
Your assistance is much appreciated :)
Code:
-Script
if(bValid)
{
$.post("scripts/appointment.php",{ name: name.val(),
email: email.val(),
contact: contact.val(),
file: filenumber.val(),
reason: reason.val(),
app_date: appdate.val(),
time: apptime().val,
visit: getRadioValue()},
function(data){
$("#dialog-form").slideUp("normal", function() {
$("#dialog-form").before('<h1>Success</h1><p>Your Appointment was sent.</p>');
}); }
);
$( this ).dialog( "close" );
}
-form
<div id="dialog-form" title="Make an appointment">
<p class="validateTips">Please fill in the form to book an appointment.<br>If the
booking is not available we will notify you!</p>
<form>
<fieldset>
<label for="patient"><b>First Time Visit?</b></label>
<input type="radio" name="patient" id="patient_state" value="Yes">Yes<br>
<input type="radio" name="patient" id="patient_state" value="No">No<br><hr>
<label for="filenumber">File No.</label>
<input type="text" name="filenumber" id="filenumber" value="" class="text ui-widget-content ui-corner-all" />
<label for="reason">What's your reason for visit?</label>
<input type="text" name="reason" id="reason" value="type reason here..." class="text ui-widget-content ui-corner-all" />
<label for="name">Name</label>
<input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all" />
<label for="email">Email</label>
<input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all" />
<label for="contact">Contact No.</label>
<input type="text" name="contact" id="contact" value="" class="text ui-widget-content ui-corner-all" />
<label for="appdate">Date</label>
<input type="text" name="appdate" id="datepicker" value="" class="text ui-widget-content ui-corner-all" />
<label for="apptime">Time</label>
<input type="text" name="apptime" id="apptime" value="HH:MM" class="text ui-widget-
content ui-corner-all" />
</fieldset>
</form>
</div>
this means you have to bind click event on your book button:
$('#bookButton').click(function() {
// perfom check
if (bValid) {
// other code
}
});
I am new to jquery. I have a textbox, and I want to take value from a textbox and show it in dropdown menu. I have searched for the solution in many websites,but can't get an appropriate answer. Kindly please help me how to do it in jquery.
The code for textbox are shown below. Thanks in advance, and sorry for my english.
<form method="post" action="inq.php">
<p><br>
<b>Question no:</b><br>
<input class="inp-form" type="Text" name="qno" size="30" required>
<br>
<br>
<b>Question:</b><br>
<textarea name="question" rows="4" cols="50" required></textarea>
<!--<input class="inp-form"type="Text" name="question" size="50">-->
<br>
<b>Option 1:</b><br>
<input class="inp-form" type="Text" name="opt1" size="30" required>
<br>
<b>Option 2:</b><br>
<input class="inp-form"type="Text" name="opt2" size="30" required>
<br>
<b>Option 3:</b><br>
<input class="inp-form"type="Text" name="opt3" size="30" required>
<br>
<b>Option 4:</b><br>
<input class="inp-form" type="Text" name="opt4" size="30" required>
<br>
<b>Answer</b> (must be identical to correct option):<br>
<input class="inp-form" type="Text" name="answer" size="30" required>
<br>
<br>
<input class="form-submit" type="Submit" name="submit" value="Add" required>
</p>
</form>
Try this. Add another class to options text box (i.e) option like below.
Add onclick="AddQS()" to submit button.
Add one dropdown box.
function AddQS() {
$('#sltOptions').empty();
$('.option').each(function() {
$('#sltOptions').append('<option value = ' + $(this).attr('name') + '>' + $(this).val() + '</option>');
});
}
<------------------>
<input class="inp-form option" type="Text" name="opt1" size="30" required>
<------------------>
<input class="form-submit" type="Submit" name="submit" value="Add" onclick="AddQS()" required>
<------------------>
<select id="sltOptions">
</select>
Please have a look at http://jsfiddle.net/2dJAN/47/
$('.options').change(function(){
var val = $(this).val().trim();
$("#answer").append("<option value='"+val+"'>"+val+"</option>");
});
Let me know is this example full fill your requirement or not.
I am currently developing an app and i am getting difficulties on IE8.
I have the following code:
<form class="fillClaimForm" name="fillClaimForm" method="POST" enctype="multipart/form-data" action="<?php print BASE_URL; ?>?action=insertBlogger" >
<label for="fblogName">Blog's name: </label>
<input type="text" name="fblogName" id="fblogName" class="cfInput" placeholder ="Complex" required />
<label for="fblogUrl">URL: </label>
<input type="text" name="fblogUrl" id="fblogUrl" class="cfInput" placeholder ="www.complex.com" required />
<label>Blog's logo: </label>
<div class="upload-file-container"><span>UPLOAD</span>
<input type="file" name="fblogLogo" id="fblogLogo"/>
<p class="ErrLoad error" style="display:none;">Please load your logo</p>
</div>
<label for="fEmail">Email adresse: </label>
<input type="email" name="fEmail" id="fEmail" class="cfInput" required />
<label for="frNum">Phone number: </label>
<input type="tel" name="frNum" id="frNum" class="cfInput" required />
<input type="hidden" name="idVid" id ="idVid" value=""/>
<input type="hidden" name="idRubrique" id ="idRubrique" value=""/>
<button id="sendClaim" class="sendClaim">SEND</button>
Consequently, I am doing a form submission using jquery:
......submit(function(){
validate=false;
formInfo = validateForm(validate,$thisLi);
if(formInfo.validate){
**fillClaimForm.submit();**
}
return false;
});
It is working on all browsers except IE8
Can someone kindly help me.
Thanks
Close your form.
Also give the same name as the id for your form and use
$("#formId").submit();
Code
<form class="fillClaimForm" name="fillClaimForm" method="POST" enctype="multipart/form-data" action="<?php print BASE_URL; ?>?action=insertBlogger" >
<label for="fblogName">Blog's name: </label>
<input type="text" name="fblogName" id="fblogName" class="cfInput" placeholder ="Complex" required />
<label for="fblogUrl">URL: </label>
<input type="text" name="fblogUrl" id="fblogUrl" class="cfInput" placeholder ="www.complex.com" required />
<label>Blog's logo: </label>
<div class="upload-file-container"><span>UPLOAD</span>
<input type="file" name="fblogLogo" id="fblogLogo"/>
<p class="ErrLoad error" style="display:none;">Please load your logo</p>
</div>
<label for="fEmail">Email adresse: </label>
<input type="email" name="fEmail" id="fEmail" class="cfInput" required />
<label for="frNum">Phone number: </label>
<input type="tel" name="frNum" id="frNum" class="cfInput" required />
<input type="hidden" name="idVid" id ="idVid" value=""/>
<input type="hidden" name="idRubrique" id ="idRubrique" value=""/>
<button id="sendClaim" class="sendClaim">SEND</button>
</form>
$("#sendClaim").click(function(){
validate=false;
formInfo = validateForm(validate,$thisLi);
if(formInfo.validate){
$("#fillClaimForm").submit();
}
return false;
});
Try this:
document.forms.fillClaimForm.submit();
Or if the ...... in your code represents creating of a submit handler on that same form you can probably just say this.submit().