trouble getting javascript global variable in function - javascript

I have checked all the other 'duplicate' questions on this. But have hit a wall in terms of finding what is wrong with my script. Could be something very simple. But I have run out of steam finding the fault. So I am here.
I am trying to create a product list on a web page with an 'Inquire' link for each product. On clicking the link, the product id is captured and a brief form for adding user contact details comes up. When the user submits the form, the inquired product details and user contact details are emailed to admin.
I am doing all this with JS with an Ajax Post call to a PHP file.
Everything is fine accept between the two functions
When 'Inquire' link is clicked
and
When form submit button is clicked.
My issue is, I am not able to pass the inquired product name variable 'item' to the submit function. In submit function I get 'item' undefined.
I am not too good at JS. I know I am making some procedural error. Would be great if somebody could point out what I am doing wrong.
My codes;
HTML
<div class="prodlist"><div class="productimg"><h4 id="itemcf">Cupellation Furnace</h4><img src="images/cupellation-furnace.png" alt="cupellation furnace"></div><div class="prodtxt"> This is the product description area. This area will contain details and specifications</div><div id="inquirecf"><span>Inquire</span></div><div id="inqrescf"></div></div>
<div class="prodlist"><div class="productimg"><h4 id="itemmf">Melting Furnace</h4><img src="images/furnace-2kg.png" alt="Melting furnace"></div><div class="prodtxt"> This is the product description area. This area will contain details and specifications</div><div id="inquiremf"><span>Inquire</span></div><div id="inqresmf"></div></div>
<div id="inqform">
<span id="inqclose">Close</span>
<div style="clear:both"></div>
<div id="inqresgen"></div>
<form id="forminq" method="post">
Name : <input type="text" id="inqname" require><br>
<div style="clear:both"></div>
phone : <input type="number" id="inqphone" require><br>
<div style="clear:both"></div>
Email : <input type="email" id="inqemail" require><br>
<div style="clear:both"></div>
Location : <input type="text" id="inqloc" require><br>
<div style="clear:both"></div>
Message : <textarea cols="30" rows="10" id="inqmsg" require></textarea>
<div style="clear:both"></div>
<input type="submit" onClick="sendInq();" value="Send">
<div style="clear:both"></div>
</form>
<div style="clear:both"></div>
</div>
JS
$(document).ready(function(){
var item;
$('#inqclose').click(function(){ $('#inqform').fadeOut('fast');});
$('#inquirecf,#inquiremf').click(function(){
var id = $(this).attr('id');
//alert(id);
if(id=="inquirecf"){alert("inquirecf"); item="Cupellation Furnace";}
else if(id=="inquiremf"){alert("inquiremf");item="Melting Furnace";}
else{alert("No Choices");}
$('#inqform').slideToggle('fast');
});
});
function sendInq(item){
var itemv=item;
event.preventDefault();
var inqname=$('#inqname').val();
var inqphone=$('#inqphone').val();
var inqemail=$('#inqemail').val();
var inqloc=$('#inqloc').val();
var inqmsg=$('#inqmsg').val();
alert("Item : "+ itemv);
$.post("inquire.php",
{
itemname: itemv,
inqname: inqname,
inqphone: inqphone,
inqemail: inqemail,
inqloc: inqloc,
inqmsg: inqmsg
},
function(data,status){
// alert("Data: " + data + "\nStatus: " + status);
$('#inqresgen').html( data );
///$('#inqres2').html( "<h4>Inquiry Sent</h4>");
$('#forminq').fadeOut('fast');
});
}

Well after a lot of googling and studying different options, I realized that the using
window.item
Helped
Now my code looks like
$('#inquirecf,#inquiremfhalfkg,#inquiremf1kg,#inquiremf2kg,
#inquiremf5kg,#inquirecupels,#inquiremuffles,#inquirecrucibles,#inquirethermo,
#inquiresilicon').click(function(){
var id = $(this).attr('id');
if(id=="inquirecf"){window.item="Cupellation Furnace";}
else if(id=="inquiremfhalfkg"){window.item="Melting Furnace 0.5Kg";}
else if(id=="inquiremf1kg"){window.item="Melting Furnace 1Kg";}
else if(id=="inquiremf2kg"){window.item="Melting Furnace 2Kg";}
else if(id=="inquiremf5kg"){window.item="Melting Furnace 5Kg";}
else if(id=="inquirecupels"){window.item="Cupels";}
else if(id=="inquiremuffles"){window.item="Muffles";}
else if(id=="inquirecrucibles"){window.item="Crucibles";}
else if(id=="inquirethermo"){window.item="Thermocouples";}
else if(id=="inquiresilicon"){window.item="Silicon Carbide Elements";}
else{alert("No Choices");}
}
function sendInq(item){
var itemv=window.item;
//......
}
All is well now. Thanks all for your efforts.

Related

Form submits multiple times

I am using a Wordpress theme that unfortunately is duplicating the header HTML for desktop, mobile and tablet. As a result, a login form I have appears to be submitting multiple times even though "Login" is only clicked once.
Here is the HTML for the form:
<div id="user-login">
<div class="com_row">
<div class="com_panel_body">
<div id="error_message91" class="com_alert com_alert_danger" style="display: none;">
</div>
<form method="post" id="validation_form83">
<input type="hidden" name="login_form_flag" value="1">
<div class="login-username">
<label for="email" class="main_label">Email Address</label>
<input id="email68" type="email" name="email" required="required">
</div>
<div class="login-password">
<label for="password" class="main_label">Password:</label>
<input id="password82" type="password" name="password" required="required">
</div>
<ul class="login-links" style="margin-top:-30px"><li>Forgot Password?</li></ul>
<div class="login-submit" style="margin-top:-20px">
<input type="submit" value="Login"></div>
<div style="padding-top:20px"><a class="button green small borderd-bot" href="/client_account">Register</a></div>
</form>
</div>
</div>
</div>
Here is the relevant JS:
$("[id^='validation_form']").each(function(i) {
//necessary because there are 3 form duplicates on the page, so this button works on all
jQuery(document).on("submit", this, SubmitValidationForm);
});
function($) {
SubmitValidationForm = function (event) {
event.preventDefault();
var formk = "#"+event.target.id;
var k = $(formk).serialize();
k += "&action=wcap_requests&what=validate_login";
jQuery("input[type=email]",formk).prop("disabled", true);
jQuery("input[type=password]",formk).prop("disabled", true);
jQuery("input[type=submit]",formk).prop("disabled", true).val(WCAP_Working_text);
var childf = $(formk).closest('div','.com_alert').children( ".com_alert");
$(childf).hide();
var login_form_flag = jQuery("input[name=login_form_flag]",formk).val();
jQuery.post(wcap_ajaxurl, k, function (data) {
data = JSON.parse(data);
console.log(data);
if (data.status === "OK") {
//== if client login through wcap login form
if (login_form_flag === '1'){
window.location.href = client_area_url;
}
else {
if (redirect_login !== "0") {
window.location.href = redirect_login;
} else {
window.location.reload();
}
}
}
else {
jQuery("input[type=email]",formk).prop("disabled", false);
jQuery("input[type=password]",formk).prop("disabled", false);
jQuery("input[type=submit]",formk).prop("disabled", false).val('Login');
$(childf).html(data.message).show();
}
});
};
};
The problem is because there are 3 duplicate forms on the page HTML (with only 1 visible to the user), the SubmitValidationForm function is called 3 times every time. The issue is pronounced when there is a valid login submitted, but the error box still appears saying invalid email after a few seconds (even though the login is actually correct and the user gets automatically redirected properly to the client area ). This error seems caused by the fact the SubmitValidationForm function is called 2 subsequent times after the first 'valid' submission which makes it think it's invalid, when it's not... the interesting thing is it doesn't seem caused by the other duplicate forms in the HTML, as the form ID attribute that I display in browser console shows only the 'valid' form being submitted (albeit multiple times -- perhaps because of the jquery.on() for each function).
Any ideas how to fix?
Thanks!
I figured out the issue. If anyone else is looking at this in future the issue was with respect to the 'on' function, it was referencing the 'document' before instead of 'this'. So it should be changed to:
$("[id^='validation_form']").each(function(i) {
jQuery(this).on("submit", this, SubmitValidationForm);
});

Scraping data from input value

there is website which has:
<html>
<body>
<form action="/action_page.php">
First name: <div class="col-md-8 col-sm-8 col-xs-6"><strong><input type="text" class="no-style" value="John"></strong></div>
Last name: <div class="col-md-8 col-sm-8 col-xs-6"><strong><input type="text" class="no-style" value="Miller"></strong></div>
Email: <div class="col-md-8 col-sm-8 col-xs-6"><strong><input type="text" class="no-style" value="j.miller#gmail.com"></strong></div>
<input type="submit" value="Send">
</form>
</body>
</html>
Is it possible to scrape data from input value (John, Miller, j.miller#gmail.com) and show it in my page (maybe putting that site into iframe and scrape from it?) or maybe using something like:
// Get HTML from page
$.get( 'http://example.com/', function( html ) {
// Loop through elements you want to scrape content from
$(html).find("ul").find("li").each( function(){
var text = $(this).text();
// Do something with content
} )
} );
I don't know. I am not good with javascript. And there is bonus: input values on every refresh are different. Can I extract somehow data from 100 refresh or something? Thank you for any help!
i will assume that you need to get the data from the input element and then use it somewhere else in your site
you could easily do so using the jquery .val() function
here is some sample code
<form id="my-form">
name: <input type="text" id='test-input'/>
<input type="submit" />
</form>
<script>
var input;
$('#my-form').on('submit', function() {
input = $('#test-input').val();
});
</script>
you could then use the variable anyway you want, whether it is to cache data or for improving user experience
Get the value and var _value = $('#elementId').val(); and use it anywhere on the page $('#elementID').val(_value); or $('selector').text(_value);

How To use Query string in java script?

I have Created calculator project. I have only two pages. Now my question how to pass input field value to another page? trying too many ways its Not Working.
What to do to pass input fields values from one page to another page?
My input fields code Looks Like
<p class="pull-right">DPA Minimum Buyer Contribution<br /></p>
<div class="row">
<div class="col-md-3">
</div>
<div class="col-md-6" style="padding-right:1%">
<input type="text" id="txtLocationContactName5" class="txt"/>
</div>
<div class="col-md-3" style="padding-left:0%">
Another page name default_results.php I have created input fields
<div class="col-md-5 padding-rht">
Minimum Buyer Contribution
</div>
<div class="col-md-2 padding-Zero">
<input type="text" id="txtCustomerName3" class="txt" />
</div>
I have tired in jQuery script
<script>
$(function () {
$("#btnQueryString").bind("click", function () {
var url = "default_results.php?id=" + encodeURIComponent($("#txtLocationContactName5").val()) + "&technology=" + encodeURIComponent($("#txtCustomerName3").val());
window.location.href = url;
});
});
</script
but Not working so how to pass value one page to other page ?
You're making life hard for yourself! A simple form is needed to help you pass data to another page :). See here for info on html Forms - http://www.w3schools.com/html/html_forms.asp
Here is a simple example for you:
<form action="page_2_link" method="POST">
<input type="text" name="field1" value="easy">
<input type="submit" name="button1" value="Submit">
</form>
Then on the second page you can do this to retrieve the form data:
<?php
$blah = $_POST['field1']; // this now has the posted fields value
?>
I have given the second page answer in PHP as you have used this as a tag for this question, so I hope you are using this or my answer won't work.

Delete Selected div in html

Here I m working on inbox page where I have to display mails.
There is a jsp code which get incremented when a new mail arrives in database.
I have put a delete button so that the selected mail can be deleted. But When I click the Del button whole Inbox is getting deleted due wrong placement of Function!
The code is (also at http://pastie.org/8593077):
<script>
function deleteCheckBox(){
if (document.getElementById('checkboxid').checked){
var answer = confirm('Are you sure you want to delete this checkbox?');
if (answer)
{
$(".del_mail").remove();
}
}else{
alert("Pls check the checkbox.");
}
}
</script>
<form id ="login" name="login" action="" method="post" class="form">
<div id="error"></div>
<fieldset>
<div><b>Inbox</b>
</div>
</fieldset>
<fieldset>
<%
int i=0;
while(i<3)
{
%>
<div class="row">
<div class="del_mail">
<section class="col col-16">
<input type="checkbox" id="checkboxid" name="checkboxname">
</section>
<section class="col col-6">
<label>
<p>From</p>
</label>
</section>
<section class="col col-6">
<label>
Subject
</label>
</section>
<button align="right" id="btnDeleteid" onclick="deleteCheckBox()" name="btnDeletename">Delete</button>
</div>
</div>
<% i++;
} %>
</fieldset>
</form>
I want to ask how to delete a specific row or Div here ?
Use this code:
<button align="right" id="btnDeleteid" onclick="deleteCheckBox(this)" name="btnDeletename">Delete</button>
In the Above HTML you need to send the object of the current checkbox by using the this in the function.
And in the JS code use this:
function deleteCheckBox(that){
if (that.checked){
var answer = confirm('Are you sure you want to delete this checkbox?');
if (answer) {
that.parentNode.remove();
}
} else {
alert("Pls check the checkbox.");
}
}
And that object you can get in the parameter that I have taken as that. and by getting that you can select the parent node that you want to delete.
In your code you are using the .del_mail which is selecting all the
elements which has the class name del_mail and deleting all those
elements.
You are using a class ".del_mail" so all the divs of this class are deleted (the jquery call to remove actually loop on all such elements).
A solution that may work: you could put a different id, such as id="del_mail_3" based on your incremented variable and delete the right element $("#del_mail_3") by passing your i to deletecheckbox.
Use below code, this will work (please add jquery library in your project)
$(document).ready(function(){
$(".del_mail").click(function(){
if (document.getElementById('checkboxid').checked){
var answer = confirm('Are you sure you want to delete this checkbox?');
if (answer)
{
$(this).remove();
}
else{
alert("Pls check the checkbox.");
}
}
});
});

Troubles transferring data from text box to Firebase and displaying that data

I have created two pages, one with a text box to input data that should be stored in Firebase and another that should display that stored data, but i am having issues with some of the data not being stored, and none of the data being displayed on the second page. The HTML for the text box is as follows:
<form>
<div class="post-title">
<input type="text" placeholder="Post Title">
</div>
<div class="post-content">
<textarea type="text" placeholder="Post Content"></textarea>
</div>
<button type="submit" class="submit">Submit</button>
</form>
The HTML for the page that should display the data is:
<div class="result">
<h4 class="postTitle">Paragraph 1</h4>
<p class="postContent">Welcome to my test blog. This is a paragraph.</p>
<div class="postDate">
<p>Date of post: </p>
<p class="postDate2">date</p>
</div>
</div>
The javascript that should transfer data from the text box to my Firebase :
var url = "https://blog-posts.firebaseio.com/";
var firebaseRef = new Firebase(url);
function funct1(event)
{
var title = $("#post-title").text();
var post = $("#post-content").text();
var date = Date();
firebaseRef.push({Title: title, Content: post, Date: date});
event.preventDefault();
}
var submit = document.getElementsByTagName('button')[0];
submit.onclick = funct1;
And the javascript that should retrieve data from my Firebase and display it (Note, both javascript extracts are from the same .js file, i seperated them for readability):
firebaseRef.on('child_added', function(snapshot) {
var message = snapshot.val();
});
$("postTitle").replaceWith(title);
$("postContent").replaceWith(post);
$("postDate2").replaceWith(date);
The Date/Time seems to copy to my Firebase, but if i enter something in either text box and click submit, the data is not stored in my Firebase. Also nothing including the Date/Time is being changed on the page that should display the data.
I think your issue may be fairly straight forward here.
Update your form HTML to this -
<form>
<div class="post-title">
<input id="post-title" type="text" placeholder="Post Title">
</div>
<div class="post-content">
<textarea id="post-content" type="text" placeholder="Post Content"></textarea>
</div>
<button type="submit" class="submit">Submit</button>
</form>
Where you have the following -
var title = $("#post-title").text();
var post = $("#post-content").text();
change to
var title = $("#post-title").val();
var post = $("#post-content").val();
It looks as though you are new to jquery as well, so you may want to also read this to help you understand how to get values, and work with selectors, etc.
Hope this helps!

Categories