Echo Javascript result in php for condition - javascript

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.

Related

how to select and serialize data of different form with the same javascript funcion

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>

Storing form variables through java script

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...

How to make a generic Jscript function to work with dynamic form

I have this code:
<script type="text/javascript">
function populate(){
s1 = document.ins_form.servizio.value;
valori = s1.split("|");
document.ins_form.codice.value = valori[0];
document.ins_form.costouno.value = valori[1];
}
</script>
<form action="" method="post" name="ins_form" id="ins_form">
<select name="servizio" id="servizio" onchange="populate()">
<option value="">Choose..</option>
<option value="100|10">choice one</option>
<option value="302|32">choice two</option>
</select>
<input type="text" name="codice" id="codice" readonly="readonly" />
<input type="text" name="costouno" id="costouno" readonly="readonly" />
</form>
This is referring to specific input fields (servizio,codice,costouno) that will be populated by user's choices, with different values, and it works nicely.
I'm not a magician with JScript so I can't find a solution to transform this function in a generic one, to be able and use it on other fields dynamically generated and that would be like: servizio1,codice1,costouno1 and servizio2,codice2,costouno2 and servizio3 ecc...
Hope it's kinda clear, thanks for your help.
You can pass the form elements themselves to the function:
<script type="text/javascript">
function populate(field1, field2, fromDelimitedString){
valori = fromDelimitedString.split("|");
field1.value = valori[0];
field2.value = valori[1];
}
</script>
<form action="" method="post" name="ins_form" id="ins_form">
<select name="servizio" id="servizio" onchange="populate(document.getElementById('codice'),
document.getElementById('costuono'), document.getElementById('servizio').value)">
<option value="">Choose..</option>
<option value="100|10">choice one</option>
<option value="302|32">choice two</option>
</select>
<input type="text" name="codice" id="codice" readonly="readonly" />
<input type="text" name="costouno" id="costouno" readonly="readonly" />
</form>

javascript form option value split into two different input values

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>

Script for each of 100+ forms on my site, condensed into one

I have a page with many forms that will send a user to a PayPal page with some preset values. Depending on a value they change, the form will concatenate those into the final "item_name" hidden input.
For each form I have a php page set up that puts this form and html together for me, and automatically enters a unique number after every instance of "action". So the function becomes combAction2() and the form name "action2", etc. etc.
I can't figure out a way to have only one script that changes the "form number" and javascript function per form changed. Any ideas to make just one script? Or way to make the script more efficient if I do indeed need to have one per item? Thanks.
<script type="text/javascript">
function combAction1()
{
var action1person = document.forms['action1'].action1person.value;
var action1action = document.forms['action1'].action1action.value;
document.forms['action1'].item_name.value = action1person + ", " + action1action;
}
</script>
<form name="action1" action="https://www.paypal.com/cgi-bin/webscr" target="_blank" method="post" onSubmit="combAction1()">
<input type="hidden" name="cmd" value="_xclick">
<input type="hidden" name="paymentaction" value="authorization">
<input type="hidden" name="business" value="information#ramatico.com">
<input type="hidden" name="currency_code" value="USD">
<input name="amount" value="5.00" type="hidden">
<input name="action1action" type="hidden" value="Action 1 text">
<select name="action1person" OnChange="combAction1()">
<option value="Person 1">Person 1</option>
<option value="Person 2">Person 2</option>
<option value="Person 3">Person 3</option>
<option value="Person 4">Person 4</option>
</select>
<input type="hidden" id="item_name" name="item_name" value="item_name">
Submit
</form>
<script type="text/javascript">
function combAction1(frm)
{
var action1person = frm.action1person.value;
var action1action = frm.action1action.value;
frm.item_name.value = action1person + ", " + action1action;
}
</script>
<form name="action1" action="https://www.paypal.com/cgi-bin/webscr" onsubmit="combAction1(this.form);">
..
..
<input type="submit" />
</form>
If it is just one form on the page and you think that will never change, you can just use the index
document.forms[0].fieldName

Categories

Resources