This is the checkbox
<input id="c1" type="checkbox" name="hour[]" class="create-daily" value="1" /><br />
<input id="c2" type="checkbox" name="hour[]" class="create-daily" value="2" /><br />
<input id="c3" type="checkbox" name="hour[]" class="create-daily" value="3" /><br />
I have a dialog
<div id="form_input" title="Konfirmasi">
<?php $data['hour'] = $this->input->post('hour');?>
<table>
<?php echo form_open('booking/ok'); ?>
<input type="hidden" value='' id="id" name="id">
<input type="hidden" value="<?php echo $sdate?>" id="sdate" name="sdate" />
<?php echo "Anda memesan room : <br/>Tanggal :<b> ".$sdate."</b><br>";?>
Jam : <b><span class="jambooking"></span></b>
<tr>
<td>
<div class="element">
<label class="Norm">Jam:</label>
<input type="text" name="jam" class="jambooking" id="jam" minlength="2" value="" />
</div>
<label class="Norm">User:</label>
<input type="text" name="user" class="required text" minlength="2" />
</div>
I have javascript
$(".create-daily").live("click",function(){
if ($(this).attr("checked")){
//var date = $(this).attr("date");
//$('#date').val(date);
$( "#form_input" ).dialog( "open" );
$(".jambooking").html( $(":checked").val());
}
});
I use a span and input with a class set to jambooking. When I checked a check box and show a dialog, the span shows a value.
When I set to the input class jambooking the value does not show.
How would I load a value to the text field?
Try:
$(".create-daily").live("click",function(){
if ($(this).is(":checked")){
var checkedVal = $(this).val();
//$('#date').val(date);
$( "#form_input" ).dialog( "open" );
$("span.jambooking").html(checkedVal); //for span
$("input.jambooking").val(checkedVal); //for textbox
}
});
Since you are using an input, you should use .val() instead of .html()
$(".jambooking").val( $(":checked").val());
$().html is for div. $().text is for <p>. You have to use different one for input field. Use $().val();
Change this one.
From
$(".jambooking").html( $(":checked").val());
To
$("input.jambooking:text").val( $(":checked").val());
check this out
$(".jambooking").val( $(":checked").val());
or check this link Jquery Text Editor
Hope it works.
Related
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?
My html code is bellow
<li > <span class="add-on">ADdfgsdfgd</span>
<input class="" type="text" value="" >
<input class="picker" type="hidden" name="BIOLOGY" value="">
<input class="datepicker" type="date">
</li>
<li> <span class="add-on">Ecconomics</span>
<input class="Ecconomics" type="text" value="">
<input class="picker" type="hidden" name="ECONOMICS" value="">
<input class="datepicker" type="date">
</li>
<li> <span class="add-on">Business Study</span>
<input class="Business Study" type="text" value="">
<input class="picker" type="hidden" name="BUSINESS STUDIES" value="">
<input class="datepicker" type="date">
</li>
<input id="sss" value="get" class="datepicker" type="button">
And jquery code is bellow
$("#sss").on('click', function() {
$('li').each(function(){
var self= $(this);
var getDate= self.find('.datepicker').val();
var getMark= self.find('span + input').val();
var plusVal = getDate + getMark;
self.find('.picker').val(plusVal);
});
});
DEMO
I was able to put each first and last inputs values to middle hidden inputs via jquery.so now i want to send hidden value to php.What is the way of it?
Do this:
Assign name to each input.
In jquery get the value by $("input[name='field_name']").val()
With Jquery I use:
$.post("profile.php", {sel:"crop",pid:$("#sel_utypes").val()}, function(j)
{
//load form
$("#ext_page").html(j);
//diplay
$("#externalpage").overlay().load();
});
You can also serialize the forms with $("#fromid").serialize() and send that instead of manually writing the {sel:....}
<form action="yourpage.php" method="post">
<input type="text" value="" name="textbox">
<input type="hidden" value="<?php echo $some_variable ?>" name="hiddenfield">
</form>
With a form method="post", php creates an array under a variable called $_POST, so all you need to do is collect that and you're good to go.
In my example, you could:
<?php echo $_POST['hiddenfield'] ?>
To pull the variable after a postback.
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.
I have a set of hidden input fields, which are cloned when the page is loaded and/or a button is clicked.
Html:
<div class="book_form" id="book_form_hidden">
<input type="checkbox" name="select" class="sell_checkbox" />
<h1>ISBN:</h1>
<input type="text" name="isbn" class="input_large" maxlength="20" />
<h1>Condition:</h1>
<input type="text" name="condition" class="input_medium" maxlength="100" />
<h1>Price:</h1>
<input type="text" name="price" class="input_price" maxlength="3" />
<input type="hidden" name="title" value="">
<input type="hidden" name="author" value="">
<input type="hidden" name="publisher" value="">
<input type="hidden" name="thumbnail" value="">
</div>
jQuery:
function addOne() {
var clone = $("#book_form_hidden").clone().removeAttr("id");
clone.find("input").each(function() {
$(this).attr("name", $(this).attr("name") + "[" + n + "]");
});
n++;
clone.appendTo($("#form_container"));
}
When I submit the form and send the data to PHP using a regular submit button, none of the inputs that were created through jQuery are submitted but only the input fields that were initially hidden (and have empty values).
Do I need use AJAX to submit form content that was created dynamically? I am confused.
Thanks so much for your help.
For some reason my javascript won't execute when my submit button is pressed. It's supposed to leave an error message beside two textfields for a user's name and email address if they are empty, but it's not and I can't figure out why. Normally, when the two boxes are filled, the submit would go to a php page which sends an email. Any suggestions or help with fixing my javascript problem will be greatly appreciated.
This is my javascript:
//my javascript function
<script type='text/javascript'>
function validate_form()
{
$('span.error_message').html('');
var success = true;
$("#validate_form input").each(function()
{
if($(this).val()=="")
{
$(this).next().html("* You must complete this field"); // the error message
success = false;
}
});
return success;
}
</script>
and my form in html:
<form action=".....whatever....." method="POST" id="validate_form" onsubmit="return validate_form();">
<ol>
<li>
<span id="question">___ is your name? My name is Marie.</span>
<input type="text" name="q1" id="q1" />
</li>
<li>
<span id="question">___ are you from? I'm from Paris, France.</span>
<input type="text" name="q2" id="q2" />
</li>
<li>
<span id="question">Dave: ___ you like football</span>
<p>
<input type="radio" name="q6" value="1" id="q6_1" />
<label for="q6_1">Are</label>
<input type="radio" name="q6" value="2" id="q6_2" />
<label for="q6_2">Do</label>
<input type="radio" name="q6" value="3" id="q6_3" />
<label for="q6_3">Does</label>
<input type="radio" name="q6" value="4" id="q6_4" />
<label for="q6_4">Is</label>
</p>
</li>
<div id="username">
<p>
Before we begin, please enter your name and email:
<br />
<label for="user_name">Name: </label><input type="text" name="user_name" id="user_name" />
<span class="error_message" style="color:#FF0000"></span>
<br />
<label for="user_email">Email: </label><input type="text" name="user_email" id="user_email" />
<span class="error_message" style="color:#FF0000"></span>
</p>
</div>
<p style="width: 242px; margin: auto;">
<input type="submit" name="submit" value="Submit your answers" id="but" />
</p>
</form>
Edit: Fixed the problem with the javascript being called, but now the submit button isn't working even with the two textfields being filled.
$("#validate_form input") - I don't see validate_form anywhere; you need to add it or just use: $("input")
Firebug for firefox would help you debug these types of jscript issues. You can also use the Error Console in Firefox if you dont want to install firebug.