I have a dealer locator which is powered through software that our IT department manages, and I'm trying to fix up their code a bit and make it more user friendly.
What I'd like to do is allow end users to enter in their zip code, and have the list of dealers in their area show up on the same page, rather than open a new tab/window, or re-load the page.
<div class="locator">
<form method="get" id="dsearchform" action="http://www5.pacelink.com/paceweb/locatorframe.jsp?brand=SWEQ&zip=&&distance=50&numlocations=6&submit=Find+a+Dealer" target="_blank" alt="Pace Search - Sno-Way" onsubmit="return dsearch(this)" class="dealersearch">
<input type="hidden" name="locatorBrand" value="SWEQ" />
<input type="hidden" name="distance" value="100" /><input type="hidden" name="numlocations" value="6" />
<h2>Sno-Way Dealer Locator:</h2>
<h3 class="secondary">Enter your zip code below to find an authorized Sno-Way dealer near you!</h3>
<div class="zip-entry">
<input type="text" name="zip" placeholder="ZipCode" value="ZipCode" class="field" onfocus="if(this.value == 'ZipCode'){this.value='';}" onblur="if(this.value == ''){this.value='ZipCode';}"/>
<input type="submit" name="submit" value="Search" id="button" class="but"/>
</div>
</form>
</div>
I've cobbled this together from another solution posted here, but I don't think it's on the right track at all:
<div id="search">
<form id="try" method="post" target="receiver" action="http://www5.pacelink.com/paceweb/locatorframe.jsp?brand=SWEQ&zip=&&distance=50&numlocations=6&submit=Find+a+Dealer">
Zip: <input id="zip" name="zip" type="text" onfocus="if(this.value == 'ZipCode'){this.value='';}" onblur="if(this.value == ''){this.value='ZipCode';}"/>
<input type="submit"/>
</form>
<div id="receiver">
<?php if (isset($_POST['zip'])){
//display search results here.
}
?>
</div>
</div>
First of
If you want to change the html dynamically you need to go with JavaScript and AJAX. This is , you load stuff asynchronously. The comment states XHR, this is
XmlHttpRequest
Better directly look for the much more convenient JQuery Ajax function.
Jquery is very easy to use.
Example to set html of the container with id retailer
$('#retailer').html(response); // response is the html your php creates
You only need to fetch the html via jquery ajax({... }), where most of the stuff works by default. Just set the url of your webservice and the request body payload) and go. In the callback you do the above and are fine.
Give it a try at
https://learn.jquery.com/ajax/
And inside your html after including the script resource for jquery in the header.
<script>$(document).ready(function(){
// your code goes here
}); </script>
To code your JQuery / JS.
<div class="content-wrapper">
<!-- Content Header (Page header) -->
<section class="content-header" id="content-wrapper">
<h1>
Dashboard <small>${userType} </small>
</h1>
</section>
</div>
Related
Folks
I am in need to construct a simple < a> tag. or another such mechanism such as < form> etc
There is a third party tool that does not takes arguments in the url.
But suppose at a certain endpoint "https://example.com/ticket" there is a form that performs a search on given tickets Number. I can head over there and manually type a ticket ID and submit the form and result is retrieved.
This tool has one input and one button
<input id="query" name="query" autocomplete="off" type="text">
<button> name="button" type="submit" class="btn"></button>
On my page I have list of tickets assign to certain users, and I am trying to construct an href link that will take the user to "https://example.com/ticket" in new window and reload the page with provide ticket ID in post method
something like following
TICKET-123
one of the option I tried is
<form action="https://example.com/ticket" method="post">
<input id="query" name="query" autocomplete="off" type="text" hidden>
<button> name="button" type="submit" class="btn" value="TICKET-123"></button>
</form>
Argument in the usr such as https://example.com/ticket?id=TICKET-123 would've been sweet, but form link does not work. what am I missing
Could you try something like this for the form sending a user to search.php
<form action="search" method="get" name="searchform" target="_self">
<input type="text" autocomplete="off" placeholder="Enter your ticket number" id="ticketnumber" name="ticketnumber">
<button class="button" type="submit">Search</button>
</form>
where search.php would contain the following
<?php
$ticketnumber = $_GET["ticketnumber"];
header("Location: https://example.com/ticket/$ticketnumber");
die();
?>
This would work if you just need to send users to an external site. As long as the pattern is like this. You then wouldn't need to reload the page if you can send the user to the URL correctly in the first instance.
Your question is a little vague but I think this approach could work because users then must input their ticket number instead of getting the inner text from the <a> tag. Let me know if you're looking at a different approach and please clarify how.
Also, if you didn't want to process this via PHP (I'd recommend it though because users can't see how it's done) you could go with the same form and the following
<form action="example.com/ticket/" method="get" name="searchform" target="_self">
<input type="text" autocomplete="off" placeholder="Enter your ticket number" id="ticketnumber" name="ticketnumber">
<button class="button" type="submit">Search</button>
</form>
Or you could use window.location.replace("https://example.com/ticket/#"); and place the ticket number where # is.
I'm creating a google add on for sheets. The sidebar I'm working on is intended to be sort of help ticket submission, but way before I can develop that part of things, I'm not getting the submit button in the form to call the javascript function I want to build.
I've removed all of the form data from the html button call to activate a Logger.log. No dice.
I created a completely separate (and very simple) button to call a different function to call Logger.log. This also did not work.
I've double checked the form data, the send call, and the function.
I made sure the name of the function (sendMsg) is unique.
I think that the issue may not be in my code but in some other way the html and javascript (.gs) are connected.
here is the html form:
<div class="block form-group">
<form>
<label for="reason">Purpose of Contact</label>
<select id="reason">
<option selected>Help Request</option>
<option>Feature Request</option>
<option>Error Report</option>
<option>Other</option>
</select>
<label for="email">Email</label>
<input type="text" id="email" style="width: 200px;">
<label for="phone">Phone</label>
<input type="text" id="phone" style="width: 120px;" value = "optional">
<br>
<label for="translated-text">
<b>Message</b></label>
<textarea id="userMsg" rows="15" cols="35">
</textarea>
<br>
<input id="app" name="appSrc" type="hidden" value="COE">
<input type="button" class="action" name="helpRequest" value="SEND" onClick="google.script.run.sendMsg(
document.getElementById('reason').value,
document.getElementById('email').value,
document.getElementById('phone').value,
document.getElementById('userMsg').value,
document.getElementById('appSrc').value
)" />
</form>
</div>
and here is the function called:
function sendMsg(appSrc,reason,email,phone,userMsg) {
appV = appSrc;
reasonV = reason;
emailV = email;
phoneV = phone;
userMsgV = userMsg;
Logger.log('cheese');
}
Right now the form should simply result in a Logger.log message. At this point nothing happens.
In your situation, when "SEND" button is clicked, the script of sendMsg() at Google Apps Script side doesn't work.
You want to run sendMsg().
If my understanding is correct, how about this modification?
Modification point:
When I saw <input id="app" name="appSrc" type="hidden" value="COE">, appSrc is not id. By this, an error occurs at document.getElementById('appSrc').value, and sendMsg() didn't work. So if your script is modified, for example, please use app.
From:
document.getElementById('appSrc').value
To:
document.getElementById('app').value
Or
From:
<input id="app" name="appSrc" type="hidden" value="COE">
To:
<input id="appSrc" name="appSrc" type="hidden" value="COE">
If I misunderstood your question and this was not the result you want, I apologize.
In case anyone has the same issue as I had... onpress doesn't seem to work here. I had to change it to onclick.
I have downloaded a website using site sucker and I have all the html files. The website was developed using a CRM (it's my new client's website which I have to upload to my server asap and they don't have credentials for the same). I have a contact form which I want to make it work
Form code:
<form name="contactform" method="post" class="dmRespDesignRow" locale="ENGLISH">
<div class="dmforminput required small-12 medium-4 large-4 dmRespDesignCol" id="1289337126">
<label for="dmform-0" id="1623474142">Name:</label>
<input name="dmform-0" type="text" id="1049346235"/>
<input name="name" value="Name" type="hidden" id="1808095320"/>
</div>
<div class="dmforminput required small-12 medium-4 large-4 dmRespDesignCol" id="1229775582">
<label for="dmform-1" id="1413734224">Email:</label>
<input name="dmform-1" type="email" id="1874224805"/><input name="email" value="Email" type="hidden" id="1790388701"/>
</div>
<div class="dmforminput required small-12 medium-4 large-4 dmRespDesignCol" id="1182638845">
<label for="dmform-2" id="1659409819">Phone:</label>
<input name="dmform-2" type="tel" id="1363423394"/><input name="phone" value="Phone" type="hidden" id="1562324064"/>
</div>
<div class="dmforminput dmRespDesignCol small-12 newLine large-12 medium-12" id="1310223649">
<label for="dmform-3" id="1594580770">Message:</label>
<textarea name="message" id="1731760981"></textarea>
<input name="message2" value="Message" type="hidden" id="1794081407"/>
</div>
<div class="dmformsubmit dmWidget R" preserve_css="true" id="1012153111">
<input class="" name="submit" value="Send" type="submit" id="1446531284"/>
</div>
<!--<input name="dmformsendto" value="O0wrseIfFLsSlLR4GAldF3Dy0PQjrXVAFxL5GhwSjRb9oqY0OVrc11ouhyoy2GDw/aszBHJnGyRKqT/UtxxJVGSoojrduF5h" preserve_css="true" type="hidden" id="1937799400" data-success-page="" data-dec="true"/>-->
<input class="dmActionInput" name="action" value="form_email.php" type="hidden" id="1733868877"/><input name="dmformsubject" value="Form Message" preserve_css="true" type="hidden" id="1339178452" data-success-page=""/>
</form>
I tried creating a new file i.e form_email.php and adding as action in the form but no luck. If I create a separate form test file (plain html without any classes) it works using that php file but doesn't work when integrating it with the actual form. I am not able to figure out what's the issue.
If you are not using JavaScript to intercept the form the action attribute should be added to the form tag, and not to an input. Example:
<form name="contactform" method="post" action="form_email.php" class="dmRespDesignRow" locale="ENGLISH">
In addition you must make sure that form_email.php is being correctly requested. If the file's location is not within the same directory the HTML file is (or the directory in which the CMS designated as such) you must fix the action attribute so that it points to the correct location. For example, if form_email.php is one level up (in the directory above the HTML file) you would reference it as such: action="../form_email.php".
I got my website over on the Github Pages Service. I'm trying to implement the FormSpree free contact form but after you submit the form, it redirects you to a different website. Something I'd like to avoid. So I looked it up on the internet and of course others wanted to get rid of it too (I omitted my email in the below picture).
This is the form I got above but it doesn't actually work at all. It worked before I tried to fiddle with it though.
Here is what the form looks like by default from FormSpree:
<form action="//formspree.io/your#email.com"
method="POST">
<input type="text" name="name">
<input type="email" name="_replyto">
<input type="submit" value="Send">
</form>
Here is my version (which worked fine before I tried to get around the redirect)
<div class=modal-body style="background-color: #454545">
<p>Please use the form below to contact us regarding feedback or any questions you may have!
We will never use the information given below to spam you and we will never pass on your
information to a 3rd party.</p>
<p>As we are using <a target="_blank" href="http://formspree.io">FormSpree</a> for this form
please consult their privacy policy for any questions regarding this matter.</p>
<form id="contactform" method="POST">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">Name</span>
<input name="form-name-input" type="text" name="name" class="form-control" required>
</div>
<div class="input-group">
<span class="input-group-addon">Email</span>
<input name="form-email-input" type="email" name="_replyto" class="form-control" required>
</div>
<div class="input-group">
<span class="input-group-addon">Subject</span>
<input name="form-subject-input" type="text" name="subject" class="form-control" required>
</div>
<div class="input-group">
<span class="input-group-addon">Description</span>
<textarea name="form-description-input" name="description" class="form-control" rows="4" cols="60" required></textarea>
</div>
<input type="text" name="_gotcha" style="display:none" />
<input class="btn btn-success" data-dismiss="modal" type="submit" id="form-submit-btn" value="Submit">
<input type="hidden" name="_next" value="http://www.dynamicrealities.net" onclick="FormSentConfirmation()"/>
</div>
<script>
var contactform = document.getElementById('contactform');
contactform.setAttribute('action', '//formspree.io/' + 'dynamicrealities#gmail.com');
</script>
</form>
</div>
<div class="modal-footer" style="background-color: #333333">
<button class="btn btn-danger btn-bg" data-dismiss="modal" type="button" id="form-dismiss-btn" onclick="">Close</button>
</div>
And when I call _next I want it to execute the following alert:
function FormSentConfirmation() {
alert('Thanks for the email, we\'ll be in touch promptly.');
}
When I press the Submit button, all that happens is that the form goes away but I don't receive any emails. I'm probably just doing this wrong as I am fairly new still to HTML/JavaScript.
Update: The feature available only on paid plans.
Use this hidden input field inside the form for redirection after form submission. You can redirect users to a page that you like or you have created by using this code block.
<input type="hidden" name="_next" value="//site.io/thanks.html" />
replace value with a valid thank-you page URL.
Follow this link for a tutorial on how to use Formspree and also a video demo
Follow their AJAX example at the bottom: https://formspree.io/
$("#sendMessage").on("click", function() {
$.ajax({
url: "//formspree.io/dynamicrealities#gmail.com",
method: "POST",
data: {message: "hello!"},
dataType: "json"
});
});
Remember to include jQuery as well for this to work. Remove the:
var contactform = document.getElementById('contactform');
contactform.setAttribute('action', '//formspree.io/' + 'dynamicrealities#gmail.com
and replace it with my code and change the selector. Or use $("form").on("submit"...
Here is my example, which sends you a mail and prompts an alert for the user: http://jsfiddle.net/228d4snb/
Do anything you'd like to do right before that return false;
You can put the form in an iframe so only the iframe gets redirected. What I did was create a separate html doc with just the contact form html (and any associated scripts) and then in my actual contact.html page I put:
<iframe src="contact-form.html" class="container"></iframe>.
Style the iframe to the appropriate size and with no border and it should work swimmingly.
This question is more than likely a duplicate however I cannot find this question already on StackOverflow.
HTML Snippet
<!-- newsletter widget -->
<div class="widget-container newsletterBox">
<div class="inner">
<h3>Newsletter</h3>
<form method="get" action="#">
<input type="text" value="" name="email" class="inputField" placeholder="Email">
<input type="submit" value="Subscribe" class="btn-arrow">
</form>
</div>
</div>
<!--/ newsletter widget -->
A basic input field with a submit button resides on my html page.
How do I safely add their e-mail to the likes of a .txt file on my server without the person being able to enter code to hack my website?
Is it possible to keep my page .html and not have to use PHP?