Why am I getting a null value? - javascript

I have an HTML form that looks like this:
ar form={
formName: document.getElementById("contactus"),
name: document.getElementById("name"),
email: document.getElementById("email"),
comment: document.getElementById("question")
};
//form submit
form.formName.addEventListener( "submit", checkform );
<form name="contactus" method="post" action="html_form_send.php">
<label for="name">Name:</label><br /><input <input type="text" name="name" maxlength="50" size="59" autofocus required/><br /><br />
<label for="email">E-Mail Address:</label><br /><input type="email" name="email" maxlength="50" size="59" required/><br /><br />
<label for="question">Question:</label><br /><textarea name="question" maxlength="1000" cols="50" rows="6" required></textarea><br /><br />
<input class="c1_scButton" type="submit" value="send"/>
</form>
<script type="text/javascript" src="js/validate.js"></script>
The problem is that Firebug shows that form.formName is null, as are the rest of the form values. Why are they not acquiring the elements?
The ultimate goal of the script is to validate the form data. I think the rest of the form will work if the elements will load.

Because you are trying to get the element by ID, when there is no ID in it.
Adding the ID to the form tag should solve the problem:
<form name="contactus" ID="contactus" method="post" action="html_form_send.php">
But you may prefer to change your approach to document.getElementsByName("theName"), since you are not using IDs at all.
Here you go: http://www.w3schools.com/jsref/met_doc_getelementsbyname.asp

Your form has the name contactus, but you're trying to get it by id.
Also, there seems to be a mistake with the name input:
<input <input type="text" name="name" maxlength="50" size="59" autofocus required/>
You'll probably want to remove the first <input.
Finally, if you include your JavaScript at the top of the page, it might run before the page has fully loaded, which means that the form and/or input elements might not be in the DOM yet.
To fix this is to add an event listener to be triggered when the DOM is ready. If you're using JQuery, you do this with:
$(document).ready(function(){
//do stuff here
});
If you have no need for JQuery, don't include it just to do this. You can find more info on how to do this in the answers to this question.

This will work sure..
<form name="contactus" id='contactus' method="post" action="html_form_send.php">
<label for="name">Name:</label><br />
<input type="text" id='name' name="name" maxlength="50" size="59" autofocus required/><br /><br />
<label for="email">E-Mail Address:</label><br />
<input type="email" id='email' name="email" maxlength="50" size="59" required/>
<br /><br />
<label for="question">Question:</label><br />
<textarea name="question" id='question' maxlength="1000" cols="50" rows="6" required></textarea><br /><br />
<input class="c1_scButton" type="submit" value="send"/>
</form>

Related

problem with saved username and passwords on register page

so i have a form for registering user
so when page loaded firefox automatically set values for inputs from saved logins
what can I do to prevent that?
this is a part of codes
<div className="input-group mb-3">
<input
id="nameInput"
ref={nameRef}
type="text"
className="form-control"
placeholder="نام و نام خانوادگی"
onChange={nameChangeHandler}
/>
</div>
You can add the attribute autocomplete="off" to your form. However, different browsers may handle this differently.
<form action="/login" autocomplete="off" >
<input type="text" id="username" name="username" /><br />
<input type="text" id="password" name="password" /><br />
<input type="submit" value="Submit" />
</form>
To disable the autocomplete for input fields, we need to set its autoComplete attribute to off.
<input
autoComplete="off"
id="nameInput"
ref={nameRef}
type="text"
className="form-control"
placeholder="نام و نام خانوادگی"
onChange={nameChangeHandler}
/>

How to submit a form without putting an onload event in the body tag

I have several forms synced to Salesforce currently running on a WordPress website using the Avada theme, but the client wants a new field added which will require adding an onload event in the body tag. I thought the easiest way to do this would be to go through the dashboard>Theme Options>Advanced>Code Fields but I don't see an option to add an event to the body tag. What's the best way to do this without editing the core template files (the forms are only on a few pages)?
Snippet of current code:
<form action="https://webto.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8" method="POST"><input type=hidden name="oid" value="00DU0000000H99p">
<input type=hidden name="retURL" value="https://www.sablesys.com/thank-you/">
<input type="hidden" name="member_status" value="Sent"/>
<!-- Campaign id for Quote Campaign -->
<input type="hidden" name="Campaign_ID" value="7010B000001Eiz3QAC" />
<input type="hidden" id="lead_source" name="lead_source" value="Website">
<label for="first_name">First Name</label><input id="first_name" maxlength="40" name="first_name" size="20" type="text" required/><br>
<label for="last_name">Last Name</label><input id="last_name" maxlength="80" name="last_name" size="20" type="text" required/><br>
<label for="company">Company</label><input id="company" maxlength="40" name="company" size="20" type="text" required/><br>
<label for="email">Email</label><input id="email" maxlength="80" name="email" size="20" type="text" required/><br>
<label for="city">City</label><input id="city" maxlength="40" name="city" size="20" type="text" required/><br>
Notes:<br><textarea id="00NU0000003mN8A" name="00NU0000003mN8A" rows="25" type="text" wrap="soft" style="width: 100%"></textarea><br>
<input type="submit" name="submit">
</form>
New code the client requested be added:
A new field for the form:
<input type="hidden" id="URL" name="URL" value="" >
A new onload event:
<body onload="document.getElementById('URL').value = document.location.href">
Is there a way to do a window.onload inside a script instead? I admit I don't know javascript well. Please be descriptive in your replies. Thanks.
This line of code IS javascript.
document.getElementById('URL').value = document.location.href;
You just need a way to get it executed.
If any other javascript code is executing on your page, make it part of that.
You could add an "onsubmit" event to the form, like so:
<form onsubmit="FillInURL()">
<input id="URL" type=hidden>
</form>
function FillInURL() {document.getElementById('URL').value = document.location.href;}

Dreamweaver form button

I've been struggling with this one for some time. I have this code:
<h2 id="registerH2">Subscribe to the cake club.<br>
Please fill out the form. (* means required)</h2>
<div id="subscribeBox">
<form class="subscribeForm" name="Subscription Form"><br>
<input Name="First Name" type="text" required id="fname" placeholder="First Name*"><br><br>
<input id="lname" type="text" placeholder="Last Name*" name="Last Name" required><br><br>
<input id="email" type="email" placeholder="Email*" name="Email" required><br><br>
<input id="address" type="text" placeholder="Address (optional)" name="Address"><br><br>
<input id="submit" type="submit" value="Send" onclick="href=registered.html">
</form>
</div>
So what I want to do is when I click the "send" button in my website, to direct me to another html file I have. Right now it's not working with this code.
(This is for my assignment I'm not working on a cake club :D)
What your want is a action="registered.html" attribute in your form
In any form when you hit a submit type input
<form action="registered.html"> [...] </form> is triggered
read more on w3school
https://www.w3schools.com/tags/att_form_action.asp
Cheers.
i just added a single quote:
<input id="submit" type="submit" value="Send" onclick="window.location.href='registered.html'">
You can use anchor tag for that, if redirection is the only purpose.
<a href="register.html">
<button>Send</button>
</a>
Try to correct your html:
<input id="submit" type="submit" value="Send" onclick="window.location.href=registered.html">
Though I think you should do it in the form tag, no need to use javascript here
<form action='registered.php' method='post'>

Form get targeted at website load

Since adding a contact form to my website, when I refresh the page it constantly scrolls the page to where the form is.
I don't know what could provoke this, so I came to ask. I searched for similar issues but couldn't find any.
Thanks for all.
Form from site:
<form method="post" action="contact.php">
<input type="text" id="name" name="name" value="" placeholder="Nom prénom" required="required" autofocus="autofocus" />
<input type="email" id="email" name="email" value="" placeholder="email#example.com" required="required" />
<input type="phone" id="phone" name="phone" value="" placeholder="00.00.00.00.00" />
<textarea id="message" name="message" placeholder="Bonjour,..." required="required"></textarea>
<button type="submit" value="Envoyer!" id="submit-button" >Envoyer</button>
</form>
Corrected form :
<form method="post" action="contact.php">
<input type="text" id="name" name="name" value="" placeholder="Nom prénom" required="required" />
<input type="email" id="email" name="email" value="" placeholder="email#example.com" required="required" />
<input type="phone" id="phone" name="phone" value="" placeholder="00.00.00.00.00" />
<textarea id="message" name="message" placeholder="Bonjour,..." required="required"></textarea>
<button type="submit" value="Envoyer!" id="submit-button" >Envoyer</button>
</form>
When you copy an old form, be sure to properly read each line (my biggest error there).
There was an autofocus attribute in my form and that's what caused the problem.
Your problem seems to be with the 'autofocus' attribute.
http://www.w3schools.com/tags/att_input_autofocus.asp
You should remove it from the following form like so:
<form method="post" action="contact.php">
<input type="text" id="name" name="name" value="" placeholder="Maamar Miloud" required="required" />
<input type="email" id="email" name="email" value="" placeholder="contact.maamar#gmail.com" required="required" />
<input type="phone" id="phone" name="phone" value="" placeholder="06.15.73.0x.0x" />
<textarea id="message" name="message" placeholder="Bonjour,..." required="required"></textarea>
<button type="submit" value="Envoyer!" id="submit-button" >Envoyer</button>
</form>
Here's a fiddle showing an extreme example: http://jsfiddle.net/xefq9t0z/1/
It's much easier to help you when you provide snippets of code so we don't have to dig through your entire site! You're very lucky that I'm very bored!

javascript query string for multiple buttons

Hi I am trying to create a query string similar to the one available here:
http://andrewu.co.uk/tools/request/examples/example1.html
The problem that I am having is that I have more than one button on my page and even though my id's are unique all of my data is displaying on the action page at the same time. The code that i am using for my buttons is:
<label for="name_1">Name:</label>
<input type="text" name="name" id="name_1" tabindex="1" size="40" value="Donald Duck" />
<br />
<br />
<input type="submit" id='view1' value="Submit" tabindex="2" />
<label for="name_1">Name:</label>
<input type="text" name="name" id="name_2" tabindex="1" size="40" value="Mickey Mouse" />
<br />
<br />
<input type="submit" id='view2' value="View" tabindex="2" />
I have a lot more than 2 buttons on my page. when a button is clicked I would like to see a result like what is on this page:
http://andrewu.co.uk/tools/request/examples/example1_process.html?name=Andrew+Urquhart
but instead I am getting Name: Donald Duck, Name: Mickey Mouse. What would I have to add or change to obtain just one Name to display at a time but have it be different depending on which button is pressed?
The button is simply submitting the form it is contained in. It's not tied to any particular field.
If you only want one name/value pair to be sent to the server, you'll need separate form elements:
<form id="name_1_form">
<input name="name" value="Andrew" />
<button>Submit</button>
</form>
<form id="name_2_form">
<input name="name" value="Mickey" />
<button>Submit</button>
</form>
the problem with your form is that both inputs have name="name"
and when you submit the form both are send.
you can either:
use different names for you input and select the correct one based on the pressed button, or
use 2 forms, one for each button
use javascript to send the correct data (this can help: http://api.jquery.com/serialize/, http://api.jquery.com/submit/)
<input type="submit" id='view1' name="Name" value="Mickey Mouse" tabindex="2" />
<input type="submit" id='view2' name="Name" value="Donald Duck" tabindex="2" />
or
<input type="text" name="name_1" id="name_1" tabindex="1" size="40" value="Donald Duck" />
<input type="submit" id='view1' name="Name" value="Submit" onClick="this.name=this.form.name_1.value" tabindex="2" />
<input type="text" name="name_2" id="name_2" tabindex="1" size="40" value="Mickey Mouse" />
<input type="submit" id='view2' name="Name" value="View" onClick="this.value=this.form.name_2.value" tabindex="2" />
you can disable the input if you do not want to send the name it twice

Categories

Resources