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.
Related
I have block:
<div>
<input type="text" name="account[surname][]">
<input type="text" name="account[address][]">
<input type="text" name="account[phone][]">
...
<input type="number" name="account[number][][1]">
<input type="number" name="account[number][][2]">
<input type="number" name="account[number][][3]">
</div>
After submit i get:
{"id":{"13":""},"surname":{"13":"Mike"},"number":{"13":{"1":"623"},"14":{"2":"432"},"15":{"3":"542"}}}
But i need:
{"id":{"13":""},"surname":{"13":"Mike"},"number":{"13":{"1":"623","2":"432","3":"542"}}}
Id - Auto Increment.
Every "account[number][]" create new array. How can I put this data into an one array?
This form is added dynamically (clone).
For static form work this code, but i need dinamic:
<form>
<input type="text" name="account[surname][10]">
<input type="text" name="account[address][10]">
<input type="text" name="account[phone][10]">
...
<input type="number" name="account[number][10][1]">
<input type="number" name="account[number][10][2]">
<input type="number" name="account[number][10][3]">
<button type="submit">Send</button>
</form>
For example below code, I have to click on submit button to go to the destination post page, but I want to go to the destination page without click on the submit button, and I want to go to the destination page with click on the button in my telegram bot an run my code page.
<html>
<body>
<form action="?????????" method="post" target="_blank">
type: <input type="text" name="type" value="111" ><br>
amount: <input type="text" name="amount"value="1000"><br>
cellphone: <input type="text" name="cellphone"value="2222"><br>
email: <input type="text" name="email"value="111#gmail.com"><br>
webserviceId: <input type="text" name="webserviceId"value="34433"><br>
redirectUrl: <input type="text" name="redirectUrl"value="w2323.php"><br>
issuer: <input type="text" name="issuer"value="ssdsd"><br>
redirectToPage: <input type="text" name="redirectToPage"value="True"><br>
scriptVersion: <input type="text" name="scriptVersion"value="Script"><br>
firstOutputType: <input type="text" name="firstOutputType"value="get"><br>
secondOutputType: <input type="text" name="secondOutputType"value="get"><br>
<input type="submit" value="submit">
</form>
</body>
</html>
Add an id to the form, then bind a function on a button. Although your question is a bit unclear on what you want exactly
<form id='someid'>
type: <input type="text" name="type" value="111" ><br>
amount: <input type="text" name="amount" value="1000"><br>
cellphone: <input type="text" name="cellphone" value="2222"><br>
email: <input type="text" name="email" value="111#gmail.com"><br>
webserviceId: <input type="text" name="webserviceId" value="34433"><br>
redirectUrl: <input type="text" name="redirectUrl" value="w2323.php"><br>
issuer: <input type="text" name="issuer" value="ssdsd"><br>
redirectToPage: <input type="text" name="redirectToPage" value="True"><br>
scriptVersion: <input type="text" name="scriptVersion" value="Script"><br>
firstOutputType: <input type="text" name="firstOutputType" value="get"><br>
secondOutputType: <input type="text" name="secondOutputType" value="get"><br>
<button onclick="myFunc()">
</form>
JS
function myFunc() {
document.getElementById("someid").submit();
}
I want my hidden input field to get the page title as its value.
This is my testmail.php code.
<p>From: <?php echo $_POST['name']; ?></p>
<p>Subject: <?php echo $_POST['subject']; ?></p>
<p>Email: <?php echo $_POST['email']; ?></p>
<p>Phone Number: <?php echo $_POST['phone']; ?></p>
<p style="width:300px;">Message: <?php echo $_POST['message']; ?></p>
and this is my form code
<form action="testmail.php" method="post" class="cf">
<label for="name">* Name:</label>
<input type="text" name="name" placeholder="Your Name">
<input type="hidden" name="subject" value="<?php value $_POST['pagetitle']; ?>">
<label for="email">* Email:</label>
<input type="text" name="email" placeholder="Enter a valid Email Address">
<label for="phone"> Phone:</label>
<input type="text" name="phone" placeholder="Enter areacode and number">
<label for="message">* Message:</label>
<textarea name="message"></textarea>
<button type="input">Send</button>
</form>
Is there a way to get the title automatically?
Here's a pure javascript way using the onsubmit event.
<form onsubmit="this.subject.value=document.title;">
<input type="text" name="subject" value="" />
<input type="submit" />
</form>
To give you a better understanding of the onsubmit event as the name suggests it executes the contained javascript when the user submits the form. The operation this.subject.value=document.title working from right to left basically says assign the value of document.title to the value attribute of the element with the name of subject in this specific form.
Using your existing form it should look like this (I added the onsubmit event and fixed up errors in your html as well as added the appropriate id's to form elements):
<form action="testmail.php" method="post" class="cf" onsubmit="this.subject.value=document.title;">
<label for="name">* Name:</label>
<input type="text" id="name" name="name" placeholder="Your Name" />
<input type="hidden" name="subject" value="" />
<label for="email">* Email:</label>
<input type="text" id="email" name="email" placeholder="Enter a valid Email Address" />
<label for="phone"> Phone:</label>
<input type="text" id="phone" name="phone" placeholder="Enter areacode and number" />
<label for="message">* Message:</label>
<textarea id="message" name="message"></textarea>
<input type="submit" name="submit" value="submit" />
</form>
This will set the value of your hidden input field once the page has finished loading.
<script>
$(function() {
$('input[name="subject"]').val($('title').text());
});
</script>
You can use JavaScript to do so, assuming you're using jQuery, bind submit event to your form
$('your_form_selector').on('submit', function(){
$('<input />').attr('type', 'hidden')
.attr('name', 'title')
.attr('value', document.title)
.appendTo($(this));
});
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 this Landing Page that I need to pre-populate with form values after it is submitted. Essentially in the end I have to make the url look like this...
http://example.com/r.php?sid=xx&pub=xxxxx&c1=&c2=&c3=&append=1&firstname=Test&lastname=Smith&address=2211+Commerce+St.&city=Dallas&state=TX&zipcode=75080&email=test#test.com
What I currently have now for the form is...
<form name="regForm" method="get" action="http://example.com/r.php?sid=xx&pub=xxxx&c1=&c2=&c3=&append=1">
<input id="firstname" class="text" type="text" name="firstname"/><br>
<input id="lastname" class="text" type="text" name="lastname" /><br>
<input id="email" class="text" type="text" name="email" /><br>
<input id="address" class="text" type="text" /><br>
<input id="city" class="text" type="text"/><br>
<input id="zipcode" class="text" type="text" maxlength="5" name="zipcode" /><br>
<input type="submit" value="Send Me My FREE List" id="submitBtn2"/>
</form>
How do i create that URL above after the form is submitted? I have been racking my brain all day on this and can't figure it out, i feel like im close.
thanks for the help!
Include the extra parameters as hidden form fields instead of inline query parameters:
<form name="regForm" method="get" action="http://example.com/r.php">
<input type="hidden" name="sid" value="xx" />
<input type="hidden" name="pub" value="xxxx" />
<input type="hidden" name="c1" value="" />
<input type="hidden" name="c2" value="" />
<input type="hidden" name="c3" value="" />
<input type="hidden" name="append" value="1" />
<input id="firstname" class="text" type="text" name="firstname"/><br>
<input id="lastname" class="text" type="text" name="lastname" /><br>
<input id="email" class="text" type="text" name="email" /><br>
<input id="address" class="text" type="text" /><br>
<input id="city" class="text" type="text"/><br>
<input id="zipcode" class="text" type="text" maxlength="5" name="zipcode" /><br>
<input type="submit" value="Send Me My FREE List" id="submitBtn2"/>
</form>
The problem is the input field get variables are causing your url get variables to be truncated, put all your url parameters as hidden values.
<input id="pub" type="hidden" name="pub" value=""/>
<input id="sid" type="hidden" name="sid" value=""/>
I'm assuming that you like the URL that it generates except that you're missing the sid, pub, c1, c2, c3, and append variables. If so, just make hidden inputs like this:
<form id="regForm" ...>
<input id="sid" name="sid" value="" type="hidden" />
<input id="pub" name="pub" value="" type="hidden" />
...
</form>
If you know the values while you're creating the form, then you can do it on the server side. If you don't, then assuming you're using jQuery, you will have to do something like this:
$(function() {
$('#regForm').submit(function () {
$('#sid').val('myNewSidValue');
$('#pub').val('myNewPubValue');
...
});
});