Working on a really simple form for a district site. I have a really simple form in PHP.
<form method="post">
<fieldset>
<legend>Enter Age and Weight</legend>
<label>Age:</label>
<input type="text" name="age" value="<?php echo #$_POST['age'] ?>">
<label>weight:</label>
<input type="text" name="weight">
<div>
<button class="btn" type="submit" name="action" value="enter">Enter</button>
</div>
</fieldset>
</form>
What I am trying to do is when the user presses the enter button, I want to alert the user of what they have entered.
This is what I have so far in my HTML.
<body onload="document.forms[0].submit()">
<form action="/index.php" onsubmit="" method="POST">
<script>
alert(document.getElementsByName("age").value);
</script>
</form>
</body>
However, I keep seeing "undefined". I am assuming that is happening because on page load my script is being run instead of when the user presses the submit button. Kind of confused how to just do a simple alert. Appreciate any help.
You must insert your code in a function that you must attach to a event handler like onsubmit, something like this:
HTML:
<form method="post" onsubmit="showData();">
JAVASCRIPT:
function showData() {
alert(document.getElementsByName("age")[0].value);
}
I've inserted [0] in your Javascript code because document.getElementsByName returns you an Array of elements, in your case, this Array, obviously contains only one value that is retrievable on the index 0 (first index of any array).
<form method="post" id="myform">
<fieldset>
<legend>Enter Age and Weight</legend>
<label>Age:</label>
<input type="text" name="age" value="<?php echo #$_POST['age'] ?>" id="age">
<label>weight:</label>
<input type="text" name="weight">
<div>
<button class="btn" type="button" name="action" value="enter" onclick="alert(document.getElementById('age').value);document.getElementById('myform').submit()">Enter</button>
</div>
</fieldset>
</form>
Is this what you want?
Related
I have made a html form to take inputs from user. My sample code is given below:
<form class="form-main" action="../php/additem.php" method="post" enctype="multipart/form-data">
<input type="hidden" name="what" value="faculty" />
<div class="form-item">
<div class="form-left">
<label><big>Name:</big></label>
</div>
<div class="form-right">
<input class="txtbox" type="text" name="facname" id="fac_name" size="20" required >
</div>
</div>
<div class="form-item">
<div class="form-left">
<label><big>Education:</big></label>
</div>
<div class="form-right">
<input class="txtbox" type="text" name="educn" id="fac_edu" size="20" required >
</div>
</div>
<div id="buttons">
<button class="greenbtn" type="submit" name="btn-upload" value="Add Now" id="add_fac" >Submit</button>
<input class="orangebtn" type="reset" value="Clear" id="clear_fac" />
</div>
</form>
I want to add a feature that, after the submit button being clicked it will be disappeared so that user can't double click on that. Is it possible? How will I do this?
Two easiest ways would either be with javascript and have
<form class="form-main" action="../php/additem.php" method="post" enctype="multipart/form-data" onsubmit="hideSubmit()">
<script>
function hideSubmit(){
document.getElementById("buttons").style.display = "none";
}
</script>
or jquery
<script>
$(function(){
$('.form-main').on('submit', function(){
$('#buttons').hide();
});
});
</script>
after the submit button being clicked it will be disappeared so that user can't double click on that.
You've literally described how to do it.
document.getElementById('test-button').addEventListener('click', function () {
this.remove()
})
<button id="test-button">Click me!</button>
I suggest reading about setting up events.
I have a page with many product listed. Each of those products is inside a div and has a form like this:
<form class="cart" method="post" enctype="multipart/form-data">
<input type="hidden" name="add-to-cart" value="">
<button type="submit" class="single_add_to_cart_button button">Add to Cart</button>
</form>
As you can see the value of add-to-cart is missing.
In the same div where the form is, we have an other div like this that contains the ID of the product (for instance IDPRODUCT), that needs to go inside the value:
<div class="vc_gitem-woocommerce vc_gitem-woocommerce-product-id hideidfromcart vc_gitem-align-left">IDPRODUCT</div>
I need a javascript function that on document ready(?) or onmouseover the div searches for the value inside the div, for instance IDPRODUCT, and copy this value into the value of the input name="add-to-cart"
Of course for each of those different divs there should be the proper IDPRODUCT.
Here is one JSFiddle I tried but it doesn't seem to work:JSFiddle
Any idea of how to solve this?
Thank you so much
UPDATE
The full Example again
$('.cart-add-wrapper').each(function(){
var id = $(this).find('.vc_gitem-woocommerce-product-id').text();
$(this).find('input[name=add-to-cart]').val(id);
console.log("id", id);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cart-add-wrapper">
<form class="cart" method="post" enctype="multipart/form-data">
<input type="hidden" name="add-to-cart" value="">
<button type="submit" class="single_add_to_cart_button button">Add to Cart</button>
</form>
<div class="vc_gitem-woocommerce vc_gitem-woocommerce-product-id hideidfromcart vc_gitem-align-left">4321</div>
</div>
<div class="cart-add-wrapper">
<form class="cart" method="post" enctype="multipart/form-data">
<input type="hidden" name="add-to-cart" value="">
<button type="submit" class="single_add_to_cart_button button">Add to Cart</button>
</form>
<div class="vc_gitem-woocommerce vc_gitem-woocommerce-product-id hideidfromcart vc_gitem-align-left">1234</div>
</div>
How to pass variable values into url. Here is my code
<?php
if(isset($_POST['submit'])){
echo $v=$_POST['n'];
} ?>
<form method="post" action="/user/<?php echo $v; ?>">
<input type="text" name="n">
<input type="submit" name="submit" value="Submit">
After giving input value and click on submit shows in url:
if input value is raj after click on submit in url i want to display
/user/raj
The requirement can be achieved by using javascript.
<form id="myForm" method="post" action="" onsubmit="return false">
<input type="text" name="n">
<input type="submit" name="submit" value="Submit">
</form>
using jquery
$("#myForm").on("submit",function(){
var val=$("input[name='n']").val();
$(this).attr("action","<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>/user/"+val);
$(this).submit();
})
Use method="get" in your form tag.
I have added an aweber form on my project file called adduser.php. It has three fields First name, Last Name and Email. When user will submit form data they will go to welcome.php page. In welcome.php page I have some welcome message and and button called "Start". When a user click on "Start" Button they will get a custom form.
So, My question is now, How can i show previously data that was submited by user on adduser.php on my custom form.
Remember that I did not use any custom database to store adduser.php form data. This page handled by aweber.com embedded Perl script.
There are total four pages on my Project folder. one is adduser.php and then welcom.php, then custom.from.php and last one is thankyou.php.
This is the form script for adduser.php. It is a embedded from script provided by aweber.com.
<form method="post" class="af-form-wrapper" action="https://www.aweber.com/scripts/addlead.pl" >
<div style="display: none;">
<input type="hidden" name="meta_web_form_id" value="1305186106" />
<input type="hidden" name="meta_split_id" value="" />
<input type="hidden" name="listname" value="awlist3791609" />
<input type="hidden" name="redirect" value="http://localhost/php/intro.php?" id="redirect_33699466c49909887d43ec924c761a52" />
<input type="hidden" name="meta_adtracking" value="My_Web_Form" />
<input type="hidden" name="meta_message" value="1" />
<input type="hidden" name="meta_required" value="name (awf_first),name (awf_last),email" />
<input type="hidden" name="meta_tooltip" value="" />
</div>
<div id="af-form-1305186106" class="af-form">
<div id="af-header-1305186106" class="af-header">
<div class="bodyText">
<p> </p>
</div>
</div>
<div id="af-body-1305186106" class="af-body af-standards">
<div class="af-element">
<label class="previewLabel" for="awf_field-71044792-first">First Name:</label>
<div class="af-textWrap">
<input id="awf_field-71044792-first" type="text" class="text" name="name (awf_first)" value=""/>
</div>
<div class="af-clear"></div>
</div>
<div class="af-element">
<label class="previewLabel" for="awf_field-71044792-last">Last Name:</label>
<div class="af-textWrap">
<input id="awf_field-71044792-last" class="text" type="text" name="name (awf_last)" value=""/>
</div>
<div class="af-clear"></div>
</div>
<div class="af-element">
<label class="previewLabel" for="awf_field-71044793">Email: </label>
<div class="af-textWrap">
<input class="text" id="awf_field-71044793" type="text" name="email" value=""/>
</div>
<div class="af-clear"></div>
</div>
<div class="af-element buttonContainer">
<input name="submit" type="submit" class="btn btn-success" value="Start Screening"/>
</div>
</div>
</div>
</form>
I'm in big trouble, I'm unable to handle I'm waiting for support from expert developer. I'm still working on local server connected with internet.
You can use $_SESSION to use your variables through your entire application runtime. At the end, just close them to clear your users browsers.
It's a common practice used by "flash session messages". They setup the message by $_SESSION and close when the variables has no use anymore.
Change the default action of your form
<form method="post" class="af-form-wrapper" action="https://www.aweber.com/scripts/addlead.pl" >
to
<form method="post" class="af-form-wrapper" action="trial.php" >
In this file trial.php, start the seeion first and then use the session variables as follows
session_start();
$_SESSION["first-title"] = $_POST['awf-first'];
and so on for each of the form inputs and then redirect the page to default action using location
header('Location : Aweber perl script link');
How can I get the input elements form a certain div inside a form , not from all divs?
I want to use JAVASCRIPT not JQUERY.
I tried to use like this discountForm.oldDivIdName.elements[i].value.length, but its not working.
UPDATE:
I have a form like this,
<form action="action.php" method="post">
<div id='div1'>
<input type="text" id="id[]" />
</div>
<div id='div2'>
<input type="text" id="id[]" />
</div>
<input type="submit" name="submit" />
</form>
Both text fields id are named the same and I want to get the value of the text field of div named div1 and not from div2, how can I do that.
Any help?
If the input elements have id's, you can do something like
var value = document.getElementById('div1').children[0].value;
where you have
<form action="action.php" method="post">
<div id="div1">
<input type="text" id="id" />
<input type="submit" name="submit" />
</div>
</form>