Hi i have made few textfields through javascript. But I have no clue how to store them into database while submitting the form. Here is the code
<script type="text/javascript">
function showfield(name){
if(name=='Other') {
document.getElementById('div1').innerHTML='Other: <input type="text" name="other" />';
document.getElementById('div2').innerHTML='';
}
else if(name=="School") {
document.getElementById('div1').innerHTML='Name of the School : <input type="text" name="school" />';
document.getElementById('div2').innerHTML='Contact Number : <input type="text" name="contact" />';
}
else {
document.getElementById('div1').innerHTML='';
document.getElementById('div2').innerHTML='';
}
}
</script>
<html>
<select name="how" class="subtitle" id="select" onchange="showfield(this.options[this.selectedIndex].value)" style="width: 200px; height:30px;">>
<option selected="true" style="display:none;">Please select</option>
<option>School</option>
<option>Consultant</option>
<option>WhatApp</option>
<option>Brochure / Poster</option>
<option>Internet</option>
<option>Other</option>
</select></td>
</html>
In the above html, when 'School' or 'Other' option is selected, it will show more text fields from javascript. But I could not store the value of that text fields. But all the other options are getting inserted into the database. Please help to fix this.
Getting values from html fields can be done on multiple ways, this is just one of them:
<form onsubmit='onSubmit();'>
<input type="text" id="variableName" />
<input type="submit" value="submit" />
</form>
<script type='text/javascript'>
function onSubmit(){
var val = document.getElementById('variableName').value;
console.log(val);
}
</script>
This way gets what user typed into input field.
Is this what you wanted to achieve? Hope that helps...
Related
Can anyone help me about this to simply cut the chase of in my code below i want to echo the value of result in php so that i can use it in conditional statement can anyone help me?
I have it working but i want also to echo the txtResult Value into php
PS: IT IS EXECUTED ON THE SAME PAGE AND WITHOUT SUBMIT BUTTON T_T
<form method="post">
<h2>Add two textbox values without pressing anybuttons</h2>
<label>First</label>
<select type="text" id="txtFirstNo" placeholder="First Number" onkeyup="sum()" />
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select><br><br>
<label>Second</label>
<input type="text" id="txtSecondNo" placeholder="Second Number" onkeyup="sum()" />
<br />
<div style="padding-top:10px">
Result:
<input type="text" id="txtResult" name="dan" value="" />
</div>
</form>
<?php
//echo it here!!!
?>
<script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
function sum() {
var txtFirstNo = document.getElementById('txtFirstNo').value;
var txtSecondNo = document.getElementById('txtSecondNo').value;
var result = parseInt(txtFirstNo) * parseInt(txtSecondNo);
if (!isNaN(result)) {
document.getElementById('txtResult').value = result;
}
}
</script>
Php is server side scripting language.
And js is client side language so from my point of view it cannot communicate without any trigger.
Like to
Submit data or form with JQ and get data in php.
Instead of php use Labels to print using JS.
Write some function like onFocusOut or onKeyUp to send data.
I have a web form with two select lists, users move the items they want from one select box to another select box, when the user hits the Save button I want to get a list of all of the values in the select box named "Two" and input them into the hidden field called "TwoArray" then submit the form. I thought I could use .map to do this but I haven't been able to figure it out, the code so far is below. NOTE: I want a delimited list of ALL values in the Select with name Two regardless of if they are "selected" or not. Help please! Output in the hidden field in this example should be "103,109"
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test for P1727410</title>
<script src="/ref-files/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(function () {
function moveItems(origin, dest) {
$(origin).find(':selected').appendTo(dest);
}
function moveAllItems(origin, dest) {
$(origin).children().appendTo(dest);
}
$('#left').click(function () {
moveItems('#Two', '#One');
});
$('#right').on('click', function () {
moveItems('#One', '#Two');
});
$('#leftall').on('click', function () {
moveAllItems('#Two', '#One');
});
$('#rightall').on('click', function () {
moveAllItems('#One', '#Two');
});
});
</script>
</head>
<body>
<h2>Test for P1727410</h2>
Available Locations | Selected Locations
<form method="POST" action="#">
<select id="One" name="One" multiple="multiple">
<option value="100">Loc1</option>
<option value="101">Loc2</option>
<option value="102">Loc3</option>
</select>
<select id="Two" name="Two" multiple="multiple">
<option value="103">Loc4</option>
<option value="109">Loc10</option>
</select>
<br />
<input type="text" name="something" /><br />
<input type="hidden" name="form" value="1" />
<input type="hidden" name="TwoArray" value="" />
<input type="button" id="leftall" value="<<" />
<input type="button" id="left" value="<" />
<input type="button" id="right" value=">" />
<input type="button" id="rightall" value=">>" />
<input type="button" id="update" value="Save" />
<br />
<input type="Submit" name="Submit" value="Submit" />
</form>
<p>
<?php
if(isset($_POST['form'])) {
echo "<pre>";
print_r($_POST);
echo "</pre>";
}
?>
</p>
</body>
</html>
Try using an array for storage then use $.each() to loop through the children capturing the values of the options. I put this function at the very bottom of the JavaScript, under all your other listeners:
// Listen for an input click (you can listen for whatever)
$('input').on('click',function(e) {
// Set an array
var getAllVals = [];
// Loop through this select's options (children)
$.each($('#Two').children(),function(k,v) {
// Store the "value" attribute values
getAllVals.push($(v).attr('value'));
});
// Place the imploded array into the field
$('input[name=TwoArray]').val(getAllVals.join(','));
});
Here is a jsFiddle demo with the input as text so you can see it changing:
https://jsfiddle.net/kc66x5sr/
I want to add a input box in my form where users can select airport similar to the one in this website (http://www.wego.pk/) Like when you type on the Destination Input, you get a list of possible values with detailed suggestion including city name + country name but when user submits the form the value submitted is the 3 digit code for the airport.
I tried html5 combobox as:
<form>
<input type="text" name="product" list="productName"/>
<datalist id="productName">
<option value="ISB">Pen</option>
<option value="KHI">Pencil</option>
<option value="PWH">Paper</option>
</datalist>
<input type="submit">
</form>
But if I type Pen then no suggestion comes. Kindly share some code snippet or any library for this purpose.
I will recommend to use an autocomplete plugin (e.g. jQuery UI autocomplete) instead HTML5 datalist. However, if the question is regarding the datalist, you can populate the product code into hidden field:
<form>
<input type="hidden" name="productCode" id="productCode" value="">
<input type="text" name="product" id="product" list="productName" autocomplete="off">
<datalist id="productName">
<option data-code="ISB">Pen</option>
<option data-code="KHI">Pencil</option>
<option data-code="PWH">Paper</option>
</datalist>
<input type="submit">
</form>
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<script>
$(function() {
// use "bind" instead "on" with jQuery lt 1.7
$("#product").on("input", function(e) {
var val = $(this).val();
var listId = $(this).attr("list");
var $option = $("#" + listId + " option").filter(function() {
return ($(this).val() == val);
});
var code = ($.type($option.data("code")) != "undefined" ? $option.data("code") : "");
$("#productCode").val(code);
});
});
</script>
Not completely sure if this solution could help you but with some jquery you can do this:
$('#submit').click(function()
{
var value = $('#product').val();
alert($('#productName [value="' + value + '"]').data('value'));
$('#productId').val($('#productName [value="' + value + '"]').data('value'));
//after this line the form should submit and correct value passes to server but value passes through hidden input
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="hidden" name="productId" id="productId" />
<input type="text" name="product" id="product" list="productName" />
<datalist id="productName">
<option value="Pen" data-value="ISB"></option>
<option value="Pencil" data-value="KHI"></option>
<option value="Paper" data-value="PWH"></option>
</datalist>
<input id="submit" type="submit">
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>
I have a problem with jQuery Blur Function
I code it like this:
<head>
<script src="_js/jquery-1.6.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#l').blur(function(){
if($(this).val()=='')
alert('Invalid');
});
});
</script>
</head>
I am using this to identify if the input field is empty or not. If I run this code then if I leave it empty and click somewhere else, the Blur function is not called and no alert is generated
I am using Firefox 10.1 to run the code
HTML:
<form method="post" action="Login.php" id="Log">
<select id="Login" name="Type">
<option value="Sel" selected="selected">Select Login type</option>
<option value="Student">Student</option>
<option value="Faculity">Faculity</option>
</select>
<div id="type">
<p id="Ch">Group Id: <input id="l" name="log" type="text"/></p>
<p id="Pass">Password: <input id="p" name="Pass" type="password" /></p>
<input id="Cond" type="Text" />
<input type="submit" value="Login" />
</div>
<p id="Invalid" style="padding-top:.75em; color:#FF0000;">Login Field Empty </p>
</form>
The content of code changes through selection and code is this
The Group id And Password Are Hidden At The Beginning And Changes When The Option Is Selected In Below Code
$('#Login').change(function() {
if($(this).val()=='Sel')
$('#type').hide();
else if($(this).val()=='Student')
{
$('#Ch').html('<p id="Ch">Group Id: <input id="l" name=" log" type="text" /></p>')
$('#type').show(10);
}
else
{
$('#Ch').html('<p id="Ch">Faculity Id: <input id="l" name="log" type="text" /></p>')
$('#type').show(10);
}
});
I Think It Is Causing Problem Kindly Check And Tell Me What's It Alternative If It Causes Some Problem Or I Am Doing It Wrong??
$('#input') the # is for ID selector, try the $('input') tag name selector.
Unless your input has an ID of "input", you should be referencing your input as $('input'). This will create a jQuery object with all the elements of type "input".
In your post, you have this chunk of JavaScript code:
$('#Login').change(function() {
if($(this).val()=='Sel')
$('#type').hide();
else if($(this).val()=='Student')
{
$('#Ch').html('<p id="Ch">Group Id: <input id="l" name=" log" type="text" /></p>')
$('#type').show(10);
}
else
{
$('#Ch').html('<p id="Ch">Faculity Id: <input id="l" name="log" type="text" /></p>')
$('#type').show(10);
}
Can I ask where this code is placed within the page? There may be an issue with the order of execution.